/* Compact dashboard system from the supplied ID Solutions guide.
   Keep --gx-* names for the existing account-scoped eight-color preference API. */
:root{
 color-scheme:dark;--gx-bg:#000000;--gx-secondary:#121019;--gx-surface:#1B1825;
 --gx-accent:#FA1E4E;--gx-text:#FFFFFF;--gx-description:#BDB8D1;--gx-muted:#A69DB8;
 --gx-line:#484063;--gx-hover:#292334;--gx-selected:#30202F;--gx-focus:#FA1E4E;
 --gx-cta:var(--gx-accent);--gx-cta-hover:#FF4970;--gx-on-accent:#000000;
 --success:#70CBA3;--success-bg:#13291F;--danger:#FF8A99;--danger-bg:#362029;
}
:root[data-theme=light]{
 color-scheme:light;--gx-bg:#FFFFFF;--gx-secondary:#F8F8F9;--gx-surface:#FFFFFF;
 --gx-accent:#BD123D;--gx-text:#171717;--gx-description:#52525B;--gx-muted:#64646D;
 --gx-line:#E4E4E7;--gx-hover:#F4F4F5;--gx-selected:#FCECEF;--gx-focus:#BD123D;
 --gx-cta-hover:#A31035;--gx-on-accent:#FFFFFF;
 --success:#176444;--success-bg:#EAF7EF;--danger:#AE1232;--danger-bg:#FFF0F2;
}
:root[data-theme=custom]{--gx-cta:var(--gx-accent);--gx-cta-hover:var(--gx-accent);--gx-hover:color-mix(in srgb,var(--gx-surface) 80%,var(--gx-text) 20%);--gx-selected:color-mix(in srgb,var(--gx-surface) 80%,var(--gx-accent) 20%);--gx-focus:var(--gx-accent)}
body{background:var(--gx-bg);font-size:14px;line-height:1.8;grid-template-columns:256px minmax(0,1fr)}
aside{position:sticky;top:0;align-self:start;height:100dvh;display:flex;flex-direction:column;gap:0;padding:24px 16px;background:var(--gx-secondary);border-color:var(--gx-line);overflow:auto}
aside .brand{font-size:18px;gap:12px;padding-inline:8px}.brand small{font-size:8px;letter-spacing:2px;color:var(--gx-muted)}
.brand .company-logo{width:30px;height:40px}aside>.muted{padding-inline:8px;margin-block:12px 0;font-size:12px}
aside #nav{display:grid;gap:4px;margin-block:24px 16px}
#nav button{padding:10px 12px;min-height:44px;gap:12px;font-size:13px;border-radius:10px;border:1px solid transparent;color:var(--gx-description);background:transparent;line-height:1.6}
#nav button.active{background:var(--gx-selected);border-color:color-mix(in srgb,var(--gx-accent) 25%,transparent);color:var(--gx-text);box-shadow:inset -3px 0 var(--gx-accent);font-weight:700}
#nav button:hover,.menu-link:hover{background:var(--gx-hover);color:var(--gx-text)}
.menu-link{margin-block:8px 16px;min-height:40px;padding:8px 12px;font-size:13px;background:transparent}
#identity{margin-top:auto;padding-block:16px 8px;direction:ltr;text-align:right;overflow-wrap:anywhere;border-top:1px solid var(--gx-line)}
#logout{align-self:start;background:transparent;border:0;margin-top:4px}
.panel-content{width:100%;max-width:1560px;margin-inline:auto;padding:24px;flex:1}
.panel-content>header{align-items:center;padding-bottom:20px;border-bottom:1px solid var(--gx-line);gap:16px;min-height:92px}
h1{font-size:28px;font-weight:700;line-height:1.6;margin:4px 0 0}h1>.ui-icon{display:none}.eyebrow{font-size:11px;color:var(--gx-muted);letter-spacing:.5px}
h2{font-size:20px;font-weight:700;margin:0 0 16px}.muted{font-size:13px;color:var(--gx-description)}
.panel-header-actions{margin-inline-start:0}
#notice{min-height:24px;margin-block:16px;color:var(--gx-description);overflow-wrap:anywhere}
button,input,select{min-height:40px;border-radius:10px}button{padding:8px 16px;font-size:13px}
input,select,textarea{font-size:14px;padding:9px 12px;background:var(--gx-secondary);color:var(--gx-text);border-color:var(--gx-line)}
input::placeholder{color:var(--gx-muted)}label{margin-block:16px 8px;font-size:13px}
button:hover{background:var(--gx-hover)}.primary,button.primary:hover{background:var(--gx-cta);border-color:var(--gx-cta);color:var(--gx-on-accent);font-weight:700;box-shadow:none}
.primary:hover,button.primary:hover{background:var(--gx-cta-hover)}
button.destructive{color:var(--danger);background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.row{gap:12px}.toolbar{margin-bottom:24px}.search-wrap{max-width:520px}.search-wrap>.ui-icon{top:11px;width:18px;height:18px}
.card{padding:24px;border-radius:10px;background:var(--gx-surface);border-color:var(--gx-line);box-shadow:none;margin-bottom:24px}
.narrow{max-width:480px;margin:48px auto;padding:32px}.login-emblem{width:48px;height:48px;border-radius:12px;background:var(--gx-selected);color:var(--gx-accent);border-color:var(--gx-line);margin-bottom:24px}.login-emblem>.ui-icon{width:24px;height:24px}
.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.metric{min-height:144px;padding:24px;padding-top:60px;color:var(--gx-description);font-size:13px}.metric>.ui-icon{width:22px;height:22px;top:24px;inset-inline-start:24px;color:var(--gx-muted)}.metric strong{font-size:28px;color:var(--gx-text);font-variant-numeric:tabular-nums;line-height:1.4}.metric::after{display:none}
.table-wrap{max-width:100%;border-radius:10px;border-color:var(--gx-line);overscroll-behavior-inline:contain;background:var(--gx-surface)}
th,td{padding:12px 16px;border-color:var(--gx-line);text-align:center;font-size:13px}
th{background:var(--gx-secondary);color:var(--gx-description);font-weight:500}th:first-child,td:first-child{text-align:start}th:last-child,td:last-child{text-align:end}td:last-child .row{justify-content:flex-end}tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover{background:var(--gx-hover)}td button{min-height:32px;border-radius:8px;padding:5px 10px;font-size:12px}
.status{border-radius:6px;padding:3px 8px;font-size:12px}.online{color:var(--success);background:var(--success-bg)}.online::before{color:inherit}.offline{color:var(--gx-description);background:var(--gx-secondary)}
#editor{max-width:580px;border-radius:12px;padding:24px;background:var(--gx-surface);border-color:var(--gx-line);color:var(--gx-text);box-shadow:0 24px 64px #0003}
#editor .row:first-child{padding-bottom:16px;border-bottom:1px solid var(--gx-line);gap:16px}#edit-title{margin:0;font-size:20px;line-height:1.6}#fields{padding-block:8px}#fields label{margin-block:16px}#fields label>span{display:block;margin-bottom:8px}#fields textarea{direction:inherit}#save{margin-top:16px;min-height:42px}
#editor::backdrop{background:#0008;backdrop-filter:blur(4px)}
.theme-grid{gap:16px 24px}.theme-grid label{margin-top:0}.theme-mode{margin-block:24px}.theme-mode select{max-width:360px}.theme-actions{gap:12px;margin-top:24px}.theme-actions button:not(.primary){background:var(--gx-secondary);color:var(--gx-text);border-color:var(--gx-line)}
:root[data-theme=custom] .theme-actions button:not(.primary){background:#121019;color:white;border-color:#8A80AC}
.panel-footer{display:flex;align-items:center;justify-content:center;gap:24px;padding:20px 24px;border-top:1px solid var(--gx-line);color:var(--gx-muted);font-size:12px}.panel-footer a{text-decoration:none;color:var(--gx-description)}.panel-footer a:hover{color:var(--gx-accent)}
:focus-visible{outline:2px solid var(--gx-focus);outline-offset:3px}
@media(max-width:1200px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){body{grid-template-columns:minmax(0,1fr)}aside{position:static;height:auto;padding:16px;border-inline-end:0;border-bottom:1px solid var(--gx-line)}aside #nav{display:flex;gap:8px;margin-block:16px;overflow:auto;padding-block:4px;flex:none}#nav button{flex:none;white-space:nowrap}aside>.muted{margin-block:8px}#identity{margin:0;padding:8px;border:0}#logout{position:absolute;inset-inline-end:16px;top:20px}.menu-link{margin-block:4px 12px;width:auto;align-self:start}.panel-content{padding:24px 16px}.panel-content>header{flex-direction:row;align-items:center;padding-bottom:16px;min-height:76px}h1{font-size:24px}.toolbar{gap:8px}.search-wrap{flex-basis:100%;max-width:none}.card{padding:24px}.narrow{margin-block:24px}.panel-footer{gap:16px;padding:16px;flex-wrap:wrap}}
@media(max-width:430px){.metrics{gap:12px}.metric{padding:52px 16px 20px;min-height:132px}.metric>.ui-icon{inset-inline-start:16px;top:20px}.metric strong{font-size:24px}#editor{padding:20px}.card.narrow{padding:24px}.inbox-toolbar{align-items:stretch}.inbox-toolbar select{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:850px){aside{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}aside>.brand{grid-column:1;grid-row:1;justify-self:start}aside>.muted,aside #nav{grid-column:1/-1}#logout{position:static;grid-column:2;grid-row:1;margin:0;padding-inline:8px;align-self:center;white-space:nowrap}#download-center{grid-column:1}#identity{grid-column:2;text-align:end;font-size:11px;border:0;min-width:0}aside #nav{min-width:0;width:100%}}