/* Dashboard presentation. */
@font-face{font-family:Inter;src:url('../fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root,[data-theme=light]{--bg:#f6f8fa;--surface:#fff;--surface-2:#f8fafc;--surface-3:#edf0f4;--line:#e8ecf1;--line-strong:#dedfe3;--text:#292d33;--heading:#11151b;--muted:#697586;--quiet:#788493;--accent:#397df0;--accent-fill:#397df0;--accent-dim:#eff5ff;--accent-line:#dbe7fa;--success:#199d79;--success-dim:#e9f7f1;--warning:#c08c27;--warning-dim:#fff6df;--danger:#db5978;--danger-dim:#fdeef3;--font-sans:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;--sidebar-width:280px;--header-height:66px;--control-height:34px;--control-radius:9px;--radius-panel:10px;--section-gap:16px;--shadow-card:none;--tblr-body-bg:var(--bg);--tblr-bg-surface:var(--surface);--tblr-bg-surface-secondary:var(--surface-2);--tblr-bg-forms:var(--surface-2);--tblr-body-color:var(--text);--tblr-heading-color:var(--heading);--tblr-border-color:var(--line);--tblr-primary:#397df0;--tblr-primary-lt:var(--accent-dim);--tblr-font-sans-serif:var(--font-sans);--sidebar-bg:#fcfdfe}
[data-theme=dark]{--bg:#15181d;--surface:#1b1f25;--surface-2:#20252c;--surface-3:#2b323c;--line:#2b323b;--line-strong:#39434e;--text:#e3e5e8;--heading:#fff;--muted:#999fa8;--quiet:#8a919c;--accent:#6da0fb;--accent-dim:#1d2b40;--accent-line:#344968;--success:#62cbaa;--success-dim:#18352b;--warning:#e5bd70;--warning-dim:#352f20;--danger:#ef8b9e;--danger-dim:#3a2229;--sidebar-bg:#191d23;--shadow-card:none}
body{font-size:13px}button,input,select,textarea{font-family:var(--font-sans)}
.top-header{left:var(--sidebar-width);padding:0 28px;gap:16px;border-color:var(--line);height:66px}.app-shell{margin-top:0;height:100dvh}.sidebar{height:100dvh;background:var(--sidebar-bg)}.sidebar-brand{height:74px;display:flex;align-items:center;gap:10px;padding:0 20px;flex:none}.sidebar-brand img{width:32px;height:32px}.sidebar-brand strong{display:block;color:var(--heading);font-size:16px;font-weight:650;letter-spacing:-.4px}.sidebar-brand .brand-title{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.sidebar-brand small{font-size:10px;color:var(--muted)}.sidebar-brand .collapse-nav{margin-left:auto;color:var(--muted);padding:4px;line-height:1;border:0;background:none}.sidebar>div:first-child{display:flex;flex-direction:column;overflow:hidden}.sidebar-nav{overflow:auto;scrollbar-width:thin;padding:12px 16px;gap:10px;border-top:1px solid var(--line);margin:0 12px}.nav-group-label{font-size:10px;font-weight:400;color:var(--quiet);padding:3px 12px;margin-bottom:7px;letter-spacing:.04em}.sidebar .nav-item{min-height:34px;height:34px;font-size:13px;line-height:18px;padding:7px 12px;gap:10px;border:0;border-radius:5px;background:transparent;box-shadow:none;transition:background-color .12s ease,color .12s ease}.sidebar .nav-item.active{color:var(--accent);background:var(--accent-dim);box-shadow:none;font-weight:600}
.sidebar .nav-item.active:before{content:"";position:absolute;left:0;top:50%;width:3px;height:16px;border-radius:2px;background:var(--accent);transform:translateY(-50%)}
.sidebar .nav-item:hover:not(.active){background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}.nav-item svg{width:16px;height:16px}.sidebar-footer{padding:14px 18px;margin-top:auto;border-top:1px solid var(--line)}.demo-label{font-size:10px;border:1px solid var(--accent-line);padding:3px 6px;border-radius:5px;background:var(--accent-dim);color:var(--accent);white-space:nowrap}.breadcrumb-demo{display:flex;align-items:center;gap:12px;font-size:12px;white-space:nowrap;color:var(--muted)}.breadcrumb-demo b{color:var(--text);font-weight:500}.header-center{margin-left:auto}.header-center+.header-right{margin-left:0}.header-right{gap:8px}.header-right .btn-theme{font-size:11px;height:34px;min-height:34px}.admin-profile{border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}.header-center .status-badge{font-size:10px}.workspace{padding:84px 28px 32px;scrollbar-width:thin}.page-container{max-width:1700px}.page-title-group{margin-bottom:14px;min-height:34px}.page-title{font-size:16px;line-height:24px;letter-spacing:-.3px}.page-title-group p{font-size:12px}.help-trigger{width:15px;height:15px;font-size:10px}.panel,.card{border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-card);background:var(--surface);margin-bottom:16px}.panel-head,.card-header{padding:16px 18px;min-height:52px;border-bottom:0;gap:10px}.panel-title,.card-title{font-size:14px;font-weight:600;letter-spacing:-.15px}.panel-body{padding:18px}.panel-body-flush{padding:0}.btn,.btn-primary,.btn-secondary,.admin-select-trigger{min-height:32px;font-size:12px;padding:6px 11px;border-radius:8px;box-shadow:0 1px 2px #00000004;line-height:18px}.btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-fill) 92%,white),var(--accent-fill));color:#fff;border-color:#679af1;box-shadow:inset 0 1px #ffffff35,0 1px 2px #215bac20}.btn-secondary{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,white),var(--surface-2));border:1px solid var(--line-strong);box-shadow:inset 0 1px #ffffff18,0 1px 2px #0000000a}.form-input,.select-input,.form-control,.form-select,.search-input{font-size:12px;min-height:34px;border-radius:9px;border-color:var(--line);background:var(--surface-2);box-shadow:none}.form-label{font-size:12px;margin-bottom:6px}.filter-bar{padding:14px 18px;border-color:var(--line);gap:8px}.filter-tabs{gap:6px}.filter-btn{min-height:30px;border:1px solid var(--line);border-radius:9px;font-size:12px;padding:5px 11px;background:var(--surface);color:var(--muted)}.filter-btn.active{background:var(--surface-2);color:var(--text);border-color:var(--line-strong)}.badge{font-size:10px;border-radius:5px;padding:3px 6px;letter-spacing:0;font-weight:500}
/* Separated list rows, matching the original demo composition. */
.data-table{border-collapse:separate;border-spacing:0 6px;margin:0;padding:0 14px 10px;--tblr-table-border-color:transparent}.data-table th{background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:500;padding:10px 12px;border:0;white-space:nowrap}.data-table td{background:var(--surface-2);font-size:12px;padding:12px;border:0;vertical-align:middle}.data-table :is(td,th):first-child{border-radius:9px 0 0 9px}.data-table :is(td,th):last-child{border-radius:0 9px 9px 0}.data-table tbody tr:hover td,.data-table .user-row.expanded-active td{background:var(--accent-dim)}
.metrics-grid{gap:12px;margin-bottom:16px}.metric-card{padding:18px;min-height:96px;border-radius:10px;gap:14px}.metric-val{font-size:24px;letter-spacing:-1px;line-height:32px;font-weight:600}.metric-label{font-size:11px;letter-spacing:0;color:var(--muted)}.metric-card:after{display:none}.overview-visual-grid,.overview-main{display:contents}.overview-records{margin-top:16px}.overview-recent{margin-top:16px}.overview-records .badge{margin-left:auto}.overview-records .data-table{min-width:700px}.overview-recent .data-table{min-width:800px}
/* Trend + distribution layout. Uses existing API data and period selectors. */
#deliveryMetrics{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:14px;padding:0;background:none;border:0;box-shadow:none}.usage-statistics>.audience-heading{grid-column:1/-1;margin:0}.usage-statistics>.audience-cards{grid-column:1/-1;margin:0;border:0;padding:0}.usage-statistics>.audience-charts{display:contents;border:0;padding:0}.usage-statistics>.audience-charts>.audience-chart,.usage-statistics>.audience-charts>section{padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:0;min-width:0}.usage-statistics>.audience-charts>section .panel-title{margin-bottom:24px}.usage-statistics>.audience-charts>section{align-self:start}.usage-statistics>.audience-footnote,.usage-statistics>.audience-details{grid-column:1/-1}.audience-heading{gap:12px;align-items:center}.audience-heading p{margin-top:5px}.audience-chart>.audience-heading{margin-bottom:20px}.audience-chart>.audience-heading .panel-title{font-size:14px}.audience-chart>.audience-heading .viz-tabs{gap:3px}.audience-chart>.audience-heading .viz-tabs button{padding:4px 7px}.audience-chart>.audience-heading+.audience-chart{margin:0}.audience-muted,.audience-footnote{font-size:11px;line-height:1.7}.audience-cards{gap:12px}.audience-kpi{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-height:112px}.audience-kpi strong{font-size:25px;font-weight:600;letter-spacing:-.7px;line-height:1.3}.audience-kpi small{font-size:10px}.audience-chart figcaption{font-size:13px;font-weight:500}.demo-line-chart{display:block;width:100%;height:240px;overflow:visible}.demo-line-chart text{font:10px var(--font-sans);fill:var(--muted)}.demo-line-chart .chart-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}.demo-line-chart .chart-line{stroke:var(--accent);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}.demo-line-chart circle{fill:var(--surface);stroke:var(--accent);stroke-width:2}.demo-chart-value{font-size:29px;font-weight:600;letter-spacing:-.8px;margin:4px 0 4px}.demo-chart-value small{font-size:10px;color:var(--muted);margin-left:8px;font-weight:400;letter-spacing:0}.audience-channel{padding:12px 0;font-size:11px}.audience-channel strong{font-size:12px}.audience-track{height:5px;background:var(--surface-3)}.audience-track i{background:var(--accent);border-radius:4px}.audience-channel:nth-of-type(2) .audience-track i{background:#ec74a1}.audience-channel:nth-of-type(3) .audience-track i{background:#f5be48}.audience-footnote{color:var(--muted);margin:0;padding:0}.viz-tabs{border:0;gap:5px;overflow:visible}.viz-tabs button{border:1px solid var(--line);border-radius:8px;font-size:11px;padding:5px 9px;min-height:28px}.viz-tabs button[aria-pressed=true]{background:var(--surface-2);color:var(--text)}.audience-details{border:0;margin:0;font-size:11px}.audience-panel{padding:18px}.audience-charts{gap:16px}.audience-chart{border:0}.audience-channels{gap:16px}.demo-donut-wrap{width:175px;height:175px;position:relative;margin:16px auto 20px}.demo-donut{width:175px;height:175px;border-radius:50%;background:conic-gradient(var(--accent) 0 65%,#ec74a1 65% 90%,#f5be48 90%);mask:radial-gradient(circle,transparent 50%,#000 51%)}.demo-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:25px;font-weight:600}.demo-donut-center span{font-size:10px;color:var(--muted);font-weight:400;margin-top:4px}.audience-panel .audience-details{margin-top:14px}
/* User portfolio summary and compact details. */
.demo-user-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}.demo-user-summary article{padding:18px;border:1px solid var(--line);border-radius:14px;min-height:102px}.demo-user-summary span{display:block;font-size:11px;color:var(--muted)}.demo-user-summary strong{font-size:25px;letter-spacing:-.6px;font-weight:600;display:block;margin-top:10px}.demo-user-summary small{font-size:10px;color:var(--muted)}#view-users>.panel{border-radius:10px}#view-users .filter-bar:first-child{grid-template-columns:minmax(0,1fr) 120px 210px;padding:14px 18px}#view-users .filter-tabs{gap:5px;flex-wrap:wrap}#view-users .filter-btn{font-size:11px;min-height:29px;padding:4px 9px}#view-users .data-table{min-width:920px}#view-users .data-table td{padding:12px;font-size:12px}#view-users .data-table th{padding:10px 12px;font-size:10px}#view-users .data-table th:first-child{width:28%}#view-users .user-open-link{font-size:12px}#view-users .user-subinfo{font-size:10px}#view-users .user-channel-usage div{font-size:10px;gap:16px}#view-users .user-channel-usage strong{font-size:11px}#userDetailHost .user-detail-heading{padding:14px 0}#userDetailHost .drawer-card-box{padding:16px 0}#userDetailHost .user-detail-heading h2{font-size:14px}#userDetailHost .drawer-meta-list{gap:12px 18px}
#view-keys .data-table td{padding-block:12px}#view-keys .key-channel-name{font-size:12px}#view-keys .key-model,#view-keys .key-endpoint{font-size:10px}.support-workspace{border-radius:10px;overflow:hidden}.support-sidebar{background:var(--surface-2)}.support-room-header{background:var(--surface)}.support-toolbar{font-size:12px}.support-messages{background:var(--bg)}.bi-form{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--surface)}#view-chatbi{max-width:1200px;margin:auto}.system-status-grid{gap:16px}.modal-box,.auth-box{border-radius:10px;box-shadow:0 16px 60px #00000018}.modal-box h2{font-size:18px}.data-table .btn{font-size:11px}.sidebar-collapsed{--sidebar-width:76px}.sidebar-collapsed .sidebar-nav{margin:0;padding:14px}.sidebar-collapsed .nav-group-label,.sidebar-collapsed .nav-item span,.sidebar-collapsed .sidebar-brand>div,.sidebar-collapsed .sidebar-footer{display:none}.sidebar-collapsed .sidebar-brand{padding:14px;flex-wrap:wrap;height:82px;gap:4px}.sidebar-collapsed .collapse-nav{margin-left:0}.sidebar-collapsed .nav-item{justify-content:center;padding:8px}.sidebar-collapsed .sidebar-nav{gap:12px}.sidebar-collapsed .sidebar .nav-item:not(:has(svg,.nav-icon)){padding-left:8px}
@media(min-width:1500px){:root{--sidebar-width:280px}.sidebar .nav-item{font-size:13px;height:36px}.sidebar-nav{gap:20px}}
@media(max-width:1100px){:root{--sidebar-width:220px}.workspace{padding-inline:20px}.top-header{padding-inline:20px}#view-users .filter-bar:first-child{grid-template-columns:1fr 130px}#view-users .filter-tabs{grid-column:1/-1}#view-users .filter-bar:first-child>.search-input{grid-column:1;grid-row:2}#view-users .filter-bar>.admin-select-trigger{grid-column:2;grid-row:2}.header-center{display:none}.header-right{margin-left:auto}}
@media(max-width:900px){:root{--sidebar-width:248px}.top-header{left:0;padding:0 16px}.workspace{padding:84px 16px 28px}.sidebar{position:fixed;top:66px;bottom:0;height:calc(100dvh - 66px)}.sidebar-brand{display:none}.breadcrumb-demo{font-size:11px;gap:8px}.header-right{gap:5px}.header-right .admin-role-badge{display:none}.top-header>.sidebar-toggle{display:inline-flex}#deliveryMetrics{grid-template-columns:1fr}.usage-statistics>.audience-charts>section{grid-column:1}.demo-donut-wrap{width:140px;height:140px}.demo-donut{width:140px;height:140px}.audience-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.audience-heading{flex-wrap:wrap}.audience-charts{grid-template-columns:1fr}}
@media(max-width:600px){.demo-label{display:none}.header-right .btn-theme{font-size:0;width:32px;padding:0}.header-right .btn-theme:after{content:'◐';font-size:18px}.metrics-grid,.demo-user-summary{grid-template-columns:1fr}.metric-card{min-height:96px}.demo-user-summary article{min-height:90px}.demo-user-summary strong{font-size:23px}.audience-kpi strong{font-size:22px}.form-control,.form-input,.select-input,.form-select{font-size:16px}.page-title-group{gap:8px}.page-title{font-size:16px}.btn{min-height:36px}.workspace{padding-inline:12px}.demo-line-chart{height:190px}.demo-line-chart text{font-size:10px}#view-users .filter-bar:first-child{padding:12px;gap:10px}.audience-heading .viz-tabs{width:100%}.audience-charts{grid-template-columns:1fr}.breadcrumb-demo>span:first-child{display:none}.audience-panel{padding:14px}.panel-head{padding:14px}.sidebar{z-index:110}}

/* Right-side user inspector: list stays in place beneath the modal surface. */
dialog#userDetailHost{z-index:310;position:fixed;inset:0 0 0 auto;margin:0;width:min(760px,calc(100vw - var(--sidebar-width) - 370px));max-width:100vw;height:100dvh;max-height:100dvh;box-sizing:border-box;padding:0 24px;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;container-type:inline-size;box-shadow:-6px 0 24px #0000000d}
dialog#userDetailHost[open]{animation:user-inspector-in .24s cubic-bezier(.2,.8,.2,1)}
.top-header{z-index:302}
#userDrawerHeaderShield{position:fixed;inset:0 0 auto;height:68px;z-index:303;background:transparent}
#userDrawerBackdrop{position:fixed;inset:0;z-index:300;background:rgb(9 13 20 / 24%)}
#view-users.inspector-open>.panel .table-scroll{position:relative;z-index:301}
#view-users.inspector-open>.panel .data-table th,#view-users.inspector-open .user-row td{position:relative}
#view-users.inspector-open>.panel .data-table th:after,#view-users.inspector-open .user-row td:after{content:"";position:absolute;inset:0;background:rgb(9 13 20 / 24%);pointer-events:none;border-radius:inherit;opacity:1;transition:none}
#view-users.inspector-open .user-row{transition:transform .16s ease,filter .16s ease;transition-delay:0s}
#view-users.inspector-open .user-row:hover{transform:translateY(-2px);filter:drop-shadow(0 4px 5px #00000018);transition-delay:200ms}
#view-users.inspector-open .user-row:hover td:after{opacity:0;transition:opacity .12s ease 200ms}
#view-users.inspector-open .data-table th:first-child{width:340px}
#view-users.inspector-open .data-table .user-open-link{max-width:310px;white-space:normal;overflow-wrap:anywhere}
.user-inspector-header{position:sticky;top:0;z-index:5;background:var(--surface)}
dialog#userDetailHost .user-inspector-header .user-detail-heading{position:static}
dialog#userDetailHost .user-section-nav button.active{background:var(--accent-dim);color:var(--accent)}
dialog#userDetailHost .user-detail-heading{margin-inline:-24px;padding:18px 24px;gap:12px;flex-wrap:nowrap}
dialog#userDetailHost .user-detail-heading>div{padding-right:0;flex:1}
dialog#userDetailHost .user-detail-heading .badge{position:static;display:inline-block;margin-top:8px}
dialog#userDetailHost .user-detail-heading>button{flex:none;font-size:12px}
dialog#userDetailHost .user-detail-grid{grid-template-columns:1fr;gap:0}
dialog#userDetailHost .user-section-nav{position:static;display:flex;gap:4px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
dialog#userDetailHost .user-section-nav button{font-size:12px;padding:8px 10px}
dialog#userDetailHost .user-detail-section{padding:20px 0}
dialog#userDetailHost .user-group-title{font-size:14px;margin-bottom:16px}
dialog#userDetailHost .user-today-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
dialog#userDetailHost .user-today-summary>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
dialog#userDetailHost .user-today-summary strong{font-size:25px}
dialog#userDetailHost .drawer-card-box{grid-template-columns:1fr;gap:12px}
dialog#userDetailHost .table-scroll{overflow:auto}
dialog#userDetailHost .user-model-usage table{min-width:610px}
dialog#userDetailHost .audience-charts{grid-template-columns:1fr}
@keyframes user-inspector-in{from{transform:translateX(100%);opacity:.6}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){dialog#userDetailHost[open]{animation:none}}
@media(max-width:900px){dialog#userDetailHost{width:calc(100vw - 270px)}}
@media(max-width:600px){dialog#userDetailHost{width:100vw;padding-inline:16px}dialog#userDetailHost .user-detail-heading{margin-inline:-16px;padding:14px 16px}dialog#userDetailHost .user-detail-heading h2{font-size:13px}dialog#userDetailHost .user-section-nav button{padding:7px;font-size:11px}}

/* Material shared with the shipped extension popup/material.css. */
:root,[data-theme=light]{--bg:#fdfcfb;--surface:#fdfcfb;--surface-2:#f7f6f4;--surface-3:#eeedeb;--sidebar-bg:#f7f6f4;--text:#272624;--heading:#272624;--muted:#696762;--quiet:#807d77;--edge:#dedbd6;--high:#fff;--low:#f3f1ee;--shine:#fff;--depth:#28231b13;--line:#e8e5e0;--line-strong:var(--edge);--accent:#dd673a;--accent-fill:#dd673a;--accent-dim:#fff0e6;--accent-line:#f1d5c7;--shadow-card:inset 0 1px 0 #ffffff73,0 1px 1px #28231b07;--tblr-primary:#dd673a}
[data-theme=dark]{--bg:#202226;--surface:#282b30;--surface-2:#30343a;--surface-3:#3c4149;--sidebar-bg:#25282d;--text:#f0f1f3;--heading:#f0f1f3;--muted:#b9bec7;--quiet:#969eaa;--edge:#444a53;--high:#383d45;--low:#33373e;--shine:#ffffff0d;--depth:#0002;--line:#363b43;--line-strong:var(--edge);--accent:#e7936d;--accent-dim:#3c302a;--accent-line:#604535;--shadow-card:inset 0 1px 0 #ffffff06,0 1px 1px #0000000c}
.panel,.card,.demo-user-summary article,.audience-kpi,.usage-statistics>.audience-charts>.audience-chart,.usage-statistics>.audience-charts>section,dialog#userDetailHost .user-today-summary>div{background:var(--surface-2);border:1px solid color-mix(in srgb,var(--edge) 32%,var(--surface-2));box-shadow:var(--shadow-card);border-radius:14px}
.btn-secondary,.admin-select-trigger,.filter-btn.active,.viz-tabs button[aria-pressed=true]{border:1px solid var(--edge);background:linear-gradient(var(--high),var(--low));box-shadow:inset 0 1px 0 var(--shine),0 1px 1px var(--depth);border-radius:8px}
.btn-primary{border:1px solid #292724;background:linear-gradient(#393733,#2d2b28);color:#fff;box-shadow:inset 0 1px 0 #ffffff20,0 1px 2px #0002}
[data-theme=dark] .btn-primary{background:linear-gradient(#f0f1f3,#dce0e5);border-color:#dce0e5;color:#272b31;box-shadow:inset 0 1px 0 #fff,0 1px 1px #0003}
.form-input,.search-input,.drawer-input-control{background:var(--surface);border:1px solid var(--edge);box-shadow:inset 0 1px 2px var(--depth)}
.admin-select-trigger:disabled,.btn:disabled{background:var(--surface-3);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--shine) 35%,transparent);color:var(--quiet)}
.btn-secondary:active,.btn-primary:active,.admin-select-trigger:active{box-shadow:inset 0 1px 2px var(--depth)}
dialog#userDetailHost{background:var(--surface);box-shadow:-4px 0 18px #00000014}

/* Menu alternatives: isolated to the demo sidebar. */
.menu-preview-switch{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}.menu-preview-switch label{font-size:11px;color:var(--muted)}.menu-preview-switch select{font:12px var(--font-sans);padding:6px 24px 6px 8px;border:1px solid var(--edge);border-radius:7px;background:var(--surface);color:var(--text)}
body[data-menu-style] .header-center{display:none}
body[data-menu-style=line] .sidebar{background:var(--surface)}
body[data-menu-style=line] .sidebar .nav-item.active{background:transparent;color:var(--heading)}
body[data-menu-style=line] .sidebar .nav-item.active:before{left:0;background:var(--heading);width:2px;height:18px}
body[data-menu-style=line] .sidebar .nav-item.active svg{color:var(--accent)}
body[data-menu-style=line] .sidebar-nav{gap:22px}
body[data-menu-style=dark] .sidebar{background:#24272c;border-right-color:#34383e;color:#b7bdc5}
body[data-menu-style=dark] .sidebar-brand strong{color:#fff}
body[data-menu-style=dark] .sidebar :is(.nav-group-label,.sidebar-brand small,.sidebar-footer,.collapse-nav){color:#9099a5}
body[data-menu-style=dark] .sidebar :is(.sidebar-nav,.sidebar-footer){border-color:#363a41}
body[data-menu-style=dark] .sidebar .nav-item{color:#c1c7d0;border-radius:8px}
body[data-menu-style=dark] .sidebar .nav-item svg{color:#929dab}
body[data-menu-style=dark] .sidebar .nav-item.active{background:#f2ede6;color:#292724;box-shadow:inset 0 1px #fff8,0 1px 3px #0002}
body[data-menu-style=dark] .sidebar .nav-item.active svg{color:#b65e3a}
body[data-menu-style=dark] .sidebar .nav-item.active:before{display:none}
body[data-menu-style=dark] .sidebar .nav-item:hover:not(.active){background:#34383f;color:#fff}
body[data-menu-style=material] .sidebar-nav{margin:0;padding:12px;gap:12px}
body[data-menu-style=material] .nav-group{padding:10px 8px;border:1px solid color-mix(in srgb,var(--edge) 55%,transparent);background:var(--surface);border-radius:12px;box-shadow:inset 0 1px var(--shine),0 1px 2px var(--depth)}
body[data-menu-style=material] .sidebar .nav-item{border-radius:7px}
body[data-menu-style=material] .sidebar .nav-item.active{background:linear-gradient(var(--high),var(--low));color:var(--text);box-shadow:inset 0 1px var(--shine),0 1px 2px var(--depth);border:1px solid var(--edge)}
body[data-menu-style=material] .sidebar .nav-item.active:before{display:none}
body[data-menu-style=material] .sidebar .nav-item.active svg{color:var(--accent)}
body[data-menu-style=compact]{--sidebar-width:208px}
body[data-menu-style=compact] .sidebar-nav{margin:0;padding:16px 12px;gap:16px}
body[data-menu-style=compact] .sidebar-brand{padding-inline:14px}
body[data-menu-style=compact] .sidebar-brand strong{font-size:14px}
body[data-menu-style=compact] .sidebar .nav-item{height:30px;min-height:30px;padding:5px 10px;font-size:12px;border-radius:4px}
body[data-menu-style=compact] .nav-group-label{font-size:9px;padding-inline:10px;margin-bottom:5px}
body[data-menu-style=compact] .sidebar .nav-item.active{background:var(--surface-3);color:var(--text)}
body[data-menu-style=compact] .sidebar .nav-item.active:before{left:auto;right:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
body[data-menu-style=compact] .sidebar .nav-item svg{width:14px;height:14px}
@media(max-width:1100px){.menu-preview-switch label,.demo-label{display:none}.menu-preview-switch{margin-left:0}.menu-preview-switch select{max-width:150px}.header-right{margin-left:auto}}
@media(max-width:600px){.breadcrumb-demo,.header-right{display:none}.menu-preview-switch{margin-left:auto}}

/* Structural studies E–G: navigation and workspace designed together. */
.business-rail{display:none}
body[data-menu-style=inset]{--sidebar-width:240px;--bg:#eeece8;--sidebar-bg:#eeece8}
body[data-menu-style=inset] .sidebar{border:0}
body[data-menu-style=inset] .sidebar-nav{border:0;margin:0 12px;padding:12px 0;gap:20px}
body[data-menu-style=inset] .top-header{left:240px;right:12px;top:12px;border:1px solid var(--edge);border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;background:var(--surface)}
body[data-menu-style=inset] .workspace{margin:12px 12px 12px 0;height:calc(100dvh - 24px);padding:84px 26px 28px;border:1px solid var(--edge);border-radius:14px;background:var(--surface);box-shadow:0 2px 8px var(--depth)}
body[data-menu-style=inset] .sidebar .nav-item.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px var(--depth)}
body[data-menu-style=inset] .sidebar .nav-item.active:before{display:none}
body[data-menu-style=floating]{--sidebar-width:260px;--bg:#eeece8}
body[data-menu-style=floating] .sidebar{margin:16px 0 16px 16px;width:244px;height:calc(100dvh - 32px);border:1px solid var(--edge);border-radius:18px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:inset 0 1px var(--shine),0 6px 18px var(--depth);overflow:hidden}
body[data-menu-style=floating] .sidebar-brand{height:84px}
body[data-menu-style=floating] .sidebar-nav{margin:0 10px;padding:16px 0;gap:22px}
body[data-menu-style=floating] .top-header{left:284px;right:24px;top:16px;height:52px;border:1px solid var(--edge);border-radius:12px;box-shadow:inset 0 1px var(--shine),0 1px 2px var(--depth)}
body[data-menu-style=floating] .workspace{padding:92px 24px 28px}
body[data-menu-style=floating] .sidebar .nav-item.active{background:linear-gradient(var(--high),var(--low));border:1px solid var(--edge);box-shadow:inset 0 1px var(--shine),0 2px 3px var(--depth);color:var(--text);border-radius:8px}
body[data-menu-style=floating] .sidebar .nav-item.active:before{display:none}
body[data-menu-style=dual]{--sidebar-width:282px}
body[data-menu-style=dual] .sidebar{position:relative;padding-left:70px;background:var(--surface-2)}
body[data-menu-style=dual] .business-rail{display:flex;position:absolute;inset:0 auto 0 0;width:70px;flex-direction:column;gap:10px;padding:86px 8px 12px;border-right:1px solid var(--edge);background:var(--surface)}
.business-rail button{border:0;background:transparent;border-radius:10px;padding:10px 4px;display:grid;justify-items:center;gap:6px;color:var(--muted);font:11px var(--font-sans);cursor:pointer}.business-rail svg{width:19px;height:19px}.business-rail button.active{background:var(--accent-dim);color:var(--accent)}.business-rail button:hover{background:var(--surface-3)}
body[data-menu-style=dual] .sidebar-brand{padding:0 12px}.sidebar .business-rail+div{min-height:0;display:flex;flex-direction:column;flex:1;overflow:hidden}
body[data-menu-style=dual] .sidebar-brand img{width:26px;height:26px}body[data-menu-style=dual] .sidebar-brand strong{font-size:14px}
body[data-menu-style=dual] .sidebar-nav{margin:0;padding:20px 12px;gap:0;border-top:1px solid var(--line)}
body[data-menu-style=dual] .nav-group:not(.business-current){display:none}
body[data-menu-style=dual] .nav-group-label{font-size:12px;color:var(--heading);margin-bottom:20px}
body[data-menu-style=dual] .sidebar .nav-item{margin-bottom:6px}
body[data-menu-style=dual] .sidebar-footer{font-size:10px;padding:12px}
[data-theme=dark] body[data-menu-style=inset],[data-theme=dark] body[data-menu-style=floating]{--bg:#1d1f23;--sidebar-bg:#1d1f23}
@media(max-width:900px){body[data-menu-style=inset] .top-header,body[data-menu-style=floating] .top-header{left:12px;right:12px;top:8px}body[data-menu-style=inset] .workspace{margin:8px;height:calc(100dvh - 16px)}body[data-menu-style=floating] .sidebar{position:fixed;top:66px;height:calc(100dvh - 90px);margin:12px}body[data-menu-style=dual] .sidebar{position:fixed}body[data-menu-style=dual] .business-rail{padding-top:20px}}

/* Selected F navigation: fixed demo direction. */
body[data-menu-style=floating] .header-right{margin-left:auto}
body[data-menu-style=floating].sidebar-collapsed{--sidebar-width:92px}
body[data-menu-style=floating].sidebar-collapsed .sidebar{width:76px}
body[data-menu-style=floating].sidebar-collapsed .top-header{left:116px}
@media(max-width:900px){body[data-menu-style=floating].sidebar-collapsed .top-header{left:12px}}
@media(max-width:600px){body[data-menu-style=floating] .header-right{display:flex}body[data-menu-style=floating] .header-right .admin-profile-wrap{display:none}}

/* Page identity lives in the breadcrumb; retain the heading for keyboard navigation. */
.view-pane>.page-heading-retired{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-header-tools{margin-left:auto;min-width:0}.page-header-actions{display:flex;align-items:center;gap:8px}.page-header-actions[hidden]{display:none}.page-header-actions .help-trigger{margin-right:4px}.page-intro-note{font-size:12px;color:var(--muted);margin:0 0 16px}
body[data-menu-style=floating] .header-right{margin-left:12px;padding-left:12px;border-left:1px solid var(--line)}
@media(max-width:1100px){.top-header .demo-label{display:none}.page-header-actions{gap:5px}.page-header-actions .btn{padding-inline:8px}}
@media(max-width:700px){body[data-menu-style=floating] .top-header{height:auto;min-height:52px;flex-wrap:wrap;padding:10px 12px;gap:8px}.page-header-tools{order:5;flex-basis:100%;margin:0;overflow-x:auto}.page-header-actions{justify-content:flex-end;white-space:nowrap}.page-header-tools:has(.page-header-actions:not([hidden]):empty){display:none}body[data-menu-style=floating] .workspace{padding-top:126px}.page-header-actions .btn{font-size:11px;min-height:30px}.top-header .breadcrumb-demo{display:flex}}

/* Give the user-list column headings a distinct, restrained surface. */
#view-users .data-table thead th{background:linear-gradient(180deg,#eeece8,#e8e5e0);color:#58554f;font-weight:600;box-shadow:inset 0 1px 0 #f9f8f6,inset 0 -1px 0 #d9d5cf}
[data-theme=dark] #view-users .data-table thead th{background:linear-gradient(180deg,#3a3f47,#343940);color:#d7dae0;box-shadow:inset 0 1px 0 #484e57,inset 0 -1px 0 #25292f}

/* Overview topics: one subject per view, with a shared date selector. */
.overview-topic-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.overview-topic-tabs{display:flex;gap:6px;flex-wrap:wrap}.overview-topic-tabs button{border:1px solid transparent;background:transparent;color:var(--muted);padding:9px 16px;border-radius:9px;font:inherit;font-size:13px;cursor:pointer}.overview-topic-tabs button[aria-selected=true]{background:linear-gradient(var(--surface),var(--surface-2));border-color:var(--line);color:var(--text);box-shadow:inset 0 1px 0 var(--surface),0 1px 2px #0000000a;font-weight:600}.overview-topic-bar select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 12px}.overview-topic-note{color:var(--muted);font-size:12px;margin:0 0 20px}.overview-shortcuts{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
#view-overview .overview-records,#view-overview .overview-recent,#view-overview .audience-heading .viz-tabs{display:none}
#view-overview[data-topic=summary] #audienceMetrics,#view-overview[data-topic=usage] #audienceMetrics,#view-overview[data-topic=usage] .metrics-grid{display:none}
#view-overview[data-topic=summary] #deliveryMetrics>.audience-footnote,#view-overview[data-topic=summary] #deliveryMetrics>.audience-details,#view-overview[data-topic=summary] #deliveryMetrics .audience-charts>section{display:none}
#view-overview[data-topic=summary] #deliveryMetrics .audience-charts{grid-template-columns:1fr}
#view-overview:is([data-topic=activity],[data-topic=downloads]) .metrics-grid,#view-overview[data-topic=downloads] #deliveryMetrics{display:none}
#view-overview[data-topic=activity] #deliveryMetrics>:not(.audience-footnote){display:none}
#view-overview[data-topic=activity] #deliveryMetrics>.audience-footnote:last-child{display:none}
#view-overview[data-topic=activity] #audienceMetrics .audience-kpi:nth-child(-n+2),#view-overview[data-topic=activity] #audienceMetrics .audience-chart:nth-child(2),#view-overview[data-topic=activity] #audienceMetrics .audience-channels{display:none}
#view-overview[data-topic=downloads] #audienceMetrics .audience-kpi:nth-child(n+3),#view-overview[data-topic=downloads] #audienceMetrics .audience-chart:first-child{display:none}
#view-overview:is([data-topic=activity],[data-topic=downloads]) #audienceMetrics .audience-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#view-overview:is([data-topic=activity],[data-topic=downloads]) #audienceMetrics .audience-charts{grid-template-columns:1fr}
#view-overview #audienceMetrics>.audience-heading{display:none}
@media(max-width:600px){.overview-topic-bar{align-items:flex-start;flex-direction:column}.overview-topic-tabs button{padding:8px 10px}}

#view-overview[data-topic=summary] #deliveryMetrics{grid-template-columns:1fr}#view-overview[data-topic=summary] .metrics-grid{margin-top:14px}

/* Tint only the elevated header; the surrounding canvas already has a backdrop. */
body:has(#userDetailHost[open]) .top-header:after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgb(9 13 20 / 24%);pointer-events:none}