.request-error{position:fixed;top:16px;right:16px;z-index:10000;display:flex;align-items:flex-start;gap:16px;width:min(560px,calc(100vw - 32px));padding:14px 16px;background:#fff1f0;color:#912018;border:1px solid #eab1ac;border-left:4px solid #c5392d;border-radius:9px;box-shadow:0 8px 28px #48201826;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.request-error span{flex:1;min-width:0}.request-error button{flex:none;padding:3px 9px;background:transparent;color:#912018;border:1px solid #dca6a0;font-size:12px}
#bankPanel>h2{margin:0 0 8px}#bankPanel>p{font-size:13px;margin:6px 0 12px}
#bankUpload{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:end;gap:12px;padding:12px 14px;margin:12px 0}
#bankUpload label{font-size:12px;color:#647792}#bankUpload input{margin:5px 0 0;padding:8px 10px;font-size:13px}#bankUpload button{padding:9px 12px;font-size:13px}
#bankProgress:empty{display:none}#bankProgress{margin:8px 0;font-size:13px}
#bankVersions .bank-version{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:11px 14px;margin:8px 0;border-radius:8px}
.bank-version h3,.bank-version p,.bank-version>small{grid-column:1;min-width:0;margin:0!important}.bank-version h3{font-size:14px!important;line-height:1.6}.bank-version p{font-size:12px!important;line-height:1.6}.bank-version>small{font-size:11px;color:#8190a3;overflow-wrap:anywhere}
.bank-version .bank-actions{grid-column:1;margin:5px 0 0;gap:6px}.bank-actions button{padding:6px 10px;font-size:12px}
#bankBrowse{width:min(1120px,calc(100vw - 32px));height:min(860px,calc(100dvh - 32px));padding:0;margin:auto;overflow:hidden;background:#f6f8fc}
#bankBrowse[open]{display:flex;flex-direction:column}
.bank-browse-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:white;border-bottom:1px solid var(--line)}
.bank-browse-header h3{margin:0;font-size:16px;overflow-wrap:anywhere}
.bank-browse-header button{flex:none;margin:0}
.bank-browse-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex-shrink:0}
.bank-template-link{display:inline-block;padding:8px 12px;border:1px solid #b4c5e8;border-radius:8px;color:#254eaa;background:#f1f5ff;text-decoration:none;font-weight:600}
#bankQuestionForm{padding:14px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:#fff}
#bankQuestionForm h4,#bankQuestionForm p{margin:0 0 10px}
#bankQuestionForm label{display:block;margin:8px 0}
#bankQuestionForm textarea,#bankQuestionForm label input{display:block;width:100%;margin-top:4px}
#bankQuestionOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
#bankQuestionResult:empty,#bankQuestionMessage:empty{display:none}
#bankQuestionResult{color:#166534}
@media(max-width:550px){
    .bank-browse-header{align-items:flex-start;flex-direction:column}
    #bankQuestionOptions{grid-template-columns:1fr}
}
.bank-browse-body{flex:1;min-height:0;overflow:auto;padding:12px 16px}
@media(max-width:700px){
    #bankBrowse{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
    .bank-browse-header,.bank-browse-body{padding:10px}
}
#bankBrowse .filters{padding:10px;gap:8px;margin-bottom:10px;display:flex;flex-wrap:wrap}#bankBrowse .filters input{width:210px}#bankBrowse .filters select{width:110px}#bankBrowse .filters input,#bankBrowse .filters select,#bankBrowse .filters button{font-size:13px;padding:7px 10px;min-height:34px}
.bank-question{background:white;border:1px solid #dfe7ed;border-radius:7px;padding:10px 12px;margin:6px 0}.bank-question-heading{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}#bankRecords .bank-question h4{flex:1;margin:0;font-size:14px;line-height:1.6;font-weight:500;min-width:0}.bank-question-heading>b{font-size:12px;line-height:1.8;color:#087f86;flex-shrink:0}.bank-question>small{display:block;margin-top:3px;font-size:11px;color:#8290a2;overflow-wrap:anywhere}.bank-options{margin-top:4px}.bank-options summary{cursor:pointer;color:#647792;font-size:12px;line-height:1.6}.bank-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;margin-top:5px}#bankRecords .bank-option-grid p{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}#bankBrowse .pager{margin:14px 0}
@media(max-width:700px){#bankUpload{grid-template-columns:1fr;gap:8px;padding:12px}#bankUpload input{font-size:16px}#bankVersions .bank-version{grid-template-columns:1fr;padding:10px 12px}.bank-version .bank-actions{grid-column:1;grid-row:auto;margin-top:5px}.bank-actions button{min-height:36px}#bankBrowse .filters input,#bankBrowse .filters select{width:100%;flex:1 1 140px;min-width:0}#bankBrowse .filters input,#bankBrowse .filters select,#bankBrowse .filters button{font-size:16px;min-height:40px}.bank-option-grid{grid-template-columns:1fr}.request-error{top:10px;right:10px;width:calc(100vw - 20px)}}

/* White-list permission states remain readable without color cues. */
.whitelist-scopes{min-inline-size:0;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:8px}
.whitelist-scope-row{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin-bottom:8px}
.whitelist-scope-row label{flex:1 1 140px;min-width:0;margin:0}
#whitelistRecords{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
#whitelistRecords>p{margin:12px}
.whitelist-row{display:grid;grid-template-columns:auto minmax(130px,1fr) minmax(110px,1.5fr) minmax(145px,1fr) minmax(0,176px);align-items:center;gap:8px 12px;padding:10px 12px;font-size:13px}
.whitelist-row+.whitelist-row{border-top:1px solid var(--line)}
.whitelist-identity,.whitelist-row-details,.whitelist-times{display:grid;gap:3px;min-width:0}
.whitelist-identity strong{overflow-wrap:anywhere}
.whitelist-scope-list{display:grid;gap:3px;margin:0;padding:0;list-style:none;overflow-wrap:anywhere}
.whitelist-row-details small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitelist-row-details small,.whitelist-times{color:var(--muted)}
.whitelist-times{font-variant-numeric:tabular-nums}
.whitelist-status{justify-self:start;padding:2px 7px;border-radius:5px;background:#dcfce7;color:#166534;font-weight:600}
.whitelist-disabled .whitelist-status{background:#fee2e2;color:#991b1b}
.whitelist-expired .whitelist-status{background:#fef3c7;color:#92400e}
.whitelist-actions{display:flex;flex-wrap:wrap;gap:4px}
#whitelistRecords .whitelist-actions button{margin:0;padding:4px 7px;font-size:12px}
#whitelistSelection{margin-left:auto;color:var(--muted)}
@media(max-width:820px){
    .whitelist-row{grid-template-columns:auto minmax(0,1fr);gap:5px 8px}
    .whitelist-identity,.whitelist-row-details,.whitelist-times,.whitelist-actions{grid-column:2}
    .whitelist-times{display:flex;flex-wrap:wrap;gap:2px 10px}
}
#detailContent form label{display:block;margin:16px 0}#detailContent form input[type=password]{display:block;width:100%;box-sizing:border-box;margin-top:8px}
.whitelist-expiry-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
#whitelistForm .whitelist-expiry-shortcuts button{width:auto;background:#edf2fa;color:#334155;border:1px solid #cbd5e1;padding:7px 14px}
#whitelistForm .whitelist-expiry-shortcuts button[aria-pressed=true]{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
#whitelistForm .whitelist-expiry-hint{font-size:12px;color:#596c86;margin:10px 0 20px;line-height:1.6}
.request-loading{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:16px 22px;background:#fff;border:1px solid #bfdbfe;border-radius:12px;box-shadow:0 8px 32px #0f172a26;color:#1e3a8a;pointer-events:none}
.request-loading[hidden]{display:none}
.request-loading strong{font-size:14px;white-space:nowrap}
.request-loading>span:last-child{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.request-loading-spinner{width:18px;height:18px;flex:none;border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:request-spin .8s linear infinite}
.request-loading-complete .request-loading-spinner{display:none}
@keyframes request-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.request-loading-spinner{animation:none}}
@media(max-width:600px){.request-loading{bottom:16px;padding:14px;gap:8px;flex-wrap:wrap;justify-content:center;width:max-content}}
.device-session{padding:14px 16px;margin:12px 0;border:1px solid #dbe3ef;border-left:4px solid #16a34a;border-radius:8px;background:#f8fafc}
.device-session>small{display:block;overflow-wrap:anywhere;margin-top:6px;color:#64748b}
.device-session pre{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:0}
.device-session.session-history{border-left-color:#94a3b8;background:#f1f5f9;color:#64748b}
.device-session-history>summary{cursor:pointer;font-weight:600;padding:12px 0}
.device-shortcuts{padding:16px;margin-bottom:16px;border:1px solid #dbe3ef;border-radius:12px;background:#fff}
.device-quick-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.device-quick-row+.device-quick-row{margin-top:12px;padding-top:12px;border-top:1px solid #edf2f7}
.device-quick-row>strong{font-size:13px;color:#475569;margin-right:8px}
.device-quick-row .device-quick-button{padding:7px 12px;font-size:13px;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1;max-width:100%;overflow-wrap:anywhere}
.device-quick-row .device-quick-button[aria-pressed=true]{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
#devices .device-group-badge{display:block;width:fit-content;max-width:100%;margin-top:8px;padding:5px 10px;border:1px solid #c4b5fd;border-radius:6px;background:#ede9fe;color:#5b21b6;font-size:13px;font-weight:700;text-align:left;overflow-wrap:anywhere;white-space:normal}
#devices .device-group-badge.is-ungrouped{background:#f1f5f9;border-color:#cbd5e1;color:#64748b}
header .account-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}header .account-actions button{font-size:13px;padding:8px 12px}
#devices{display:block;overflow-x:auto;border:1px solid #dbe3ef;border-radius:10px;background:#fff}
.device-table{width:100%;min-width:1200px;border-collapse:collapse;text-align:left;font-size:13px}.device-table th{background:#f1f5f9;color:#475569;font-size:12px;white-space:nowrap}.device-table th,.device-table td{padding:14px 12px;border-bottom:1px solid #e2e8f0;vertical-align:middle}.device-table tbody tr:hover{background:#f8fafc}.device-table td:nth-child(2){max-width:240px;min-width:180px;overflow-wrap:anywhere}.device-table small{display:block;color:#64748b;font-size:11px;margin-top:5px}.device-table .device-registered-time{color:#64748b;white-space:nowrap;font-variant-numeric:tabular-nums}.device-table .device-last-seen{color:#1e40af;background:#eff6ff70;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}.device-table button{font-size:12px;white-space:nowrap}.device-table .device-sort{padding:4px;color:inherit;background:transparent;border:0;font-weight:600;text-align:left}.device-table .device-sort:hover{color:#1e40af;background:#e2e8f0}.device-table .device-sort span{display:inline-block}.device-table td[data-label=分组]{min-width:110px;max-width:180px}
@media(max-width:700px){header{flex-wrap:wrap}.account-actions{gap:6px}header .account-actions button{font-size:12px;padding:7px 9px}}
@media(max-width:1240px){.device-table{display:block;min-width:0}.device-table thead{display:block}.device-table thead tr{display:flex;flex-wrap:wrap;padding:8px;gap:4px;background:#f1f5f9}.device-table thead th{padding:2px;border:0}.device-table thead th:not(.device-sortable){display:none}.device-table tbody{display:block}.device-table tr{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border-bottom:1px solid #dbe3ef}.device-table td{display:block;padding:0;border:0;min-width:0!important;max-width:none!important}.device-table td::before{content:attr(data-label);display:block;font-size:11px;color:#64748b;font-weight:400;margin-bottom:5px}.device-table td:nth-child(2){grid-column:1/-1;grid-row:1}.device-table td:last-child{grid-column:1/-1}.device-table .device-last-seen{padding:8px;border-radius:6px;white-space:normal}.device-table .device-registered-time{white-space:normal}}

.whitelist-scope-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.whitelist-scope-toolbar p{margin:0}
.whitelist-scopes button.whitelist-add-scope{width:auto;margin:0}
#historyDevicePicker{position:relative;min-width:0;max-width:100%}
#historyDeviceLabel{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;max-width:220px}
.history-device-options{position:absolute;z-index:5;inset-inline-start:0;top:calc(100% + 4px);width:min(320px,76vw);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:0 6px 18px #0002}
#historyDeviceSearch{width:100%;box-sizing:border-box}
#historyDeviceOptions{display:grid;gap:4px;max-height:240px;overflow:auto;margin-top:6px}
#historyDeviceOptions button{margin:0;text-align:left;overflow-wrap:anywhere}

.bank-project-picker label{flex:1 1 180px;min-width:0;margin:0}
.bank-project-picker select{display:block;width:100%;margin-top:4px}
.bank-overview-group{margin:18px 0}
.bank-overview-group h3{font-size:15px;margin:0 0 8px}
.bank-overview-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:8px}
.bank-overview-project{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.bank-overview-project div{min-width:0;overflow-wrap:anywhere}
.bank-overview-project h4{margin:0;font-size:14px}
.bank-overview-project p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.bank-overview-project button{flex:none;margin:0}
#bankUpload label{min-width:0}
#bankVersions .bank-version-active{background:#f0fdf4;border-color:#86efac;border-inline-start:4px solid #15803d}
.bank-active-badge{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;background:#166534;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;vertical-align:middle}


/* Keep related controls together and use the same colors for the same actions. */
.action-neutral{--action-bg:#f1f5f9;--action-text:#334155;--action-border:#cbd5e1}
.action-edit{--action-bg:#f3e8ff;--action-text:#6b21a8;--action-border:#d8b4fe}
.action-positive{--action-bg:#166534;--action-text:#fff;--action-border:#166534}
.action-download{--action-bg:#e6f5f3;--action-text:#115e59;--action-border:#a5d8d3}
.action-caution{--action-bg:#fff3d4;--action-text:#854d0e;--action-border:#f4cd79}
.action-danger{--action-bg:#fff1f2;--action-text:#9f1239;--action-border:#f0a9b7}

:is(button,a):is(.action-neutral,.action-edit,.action-positive,.action-download,.action-caution,.action-danger){
    background:var(--action-bg);color:var(--action-text);border:1px solid var(--action-border);
}
a.action-download{display:inline-flex;align-items:center;justify-content:center;min-height:42px;line-height:1.3;text-decoration:none}
.permission-button.permission-disabled{background:#fff3d4;color:#854d0e;border-color:#f4cd79}
.permission-button.permission-disabled[aria-pressed=true]{background:#fce0a3;border-color:#a16207}

#app>nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:6px}
#app>nav button{width:100%;padding-inline:6px;white-space:normal;line-height:1.3}
#app>nav button[aria-current=page]{background:#2454c5;color:#fff;border-color:#2454c5}
.filter-actions,.form-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.filter-actions{margin-inline-start:auto}
.filters:has(.filter-actions){align-items:end}
.filter-actions button,.filter-actions a,.form-actions button{margin:0;white-space:nowrap}
.form-actions{margin-top:12px}
#upload{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:12px}
#upload label{min-width:0;margin:0}
#upload label :is(input,textarea){display:block;width:100%;margin-top:6px}
#upload .form-actions{grid-column:1/-1;margin-top:0}
.whitelist-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#whitelistRecords .whitelist-actions button{min-height:34px}
.bank-version .bank-actions,.collection-actions{align-items:center;gap:8px}
.bank-browse-actions{min-width:0;max-width:100%}
#historyDevicePicker{align-self:center}
#historyDeviceLabel{min-height:42px;display:block;position:relative;line-height:24px;padding-inline-end:28px}
#historyDeviceLabel::after{content:'▾';position:absolute;inset-inline-end:10px;color:#52637a}
#historyDevicePicker[open] #historyDeviceLabel::after{content:'▴'}
.pager button{min-width:78px}
@media(max-width:700px){
    #app>nav{grid-template-columns:repeat(3,minmax(0,1fr))}
    .filters .filter-actions{grid-column:1/-1;flex:1 1 100%;width:100%;margin:0}
    .filters .filter-actions :is(button,a){width:auto;flex:1 1 auto;text-align:center}
    #upload{grid-template-columns:1fr}
    .form-actions button{flex:1 1 auto}
    .whitelist-actions{display:flex;flex-wrap:wrap}
    #whitelistRecords .whitelist-actions button{min-height:40px}
    #whitelistSelection{margin-inline-start:0}
}
@media(max-width:350px){
    #app>nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}