/* Growth Hub: the "Growth Hub.html" design (9 Oct 2026), its stylesheet VERBATIM down to the
   marker, then the hub's own additions: sign-in gate, framed sections, the KPI cards' real
   trends and data labels, and the Anomaly Detection tab. Light only, as drawn. */

:root{--bg:#f7f7f5;--ink:#333330;--muted:#777670;--red:#ff6161;--line:#e7e6e1;--green:#34785c;--wash:#fff2ef}
*{box-sizing:border-box}
body{margin:0;font:14px/1.55 'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd343c;outline-offset:4px}
[hidden]{display:none!important}
.skip{position:absolute;top:-100px;left:20px;z-index:9;background:white;padding:10px}
.skip:focus{top:10px}

header{height:106px;padding:0 42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#fff;border-bottom:1px solid var(--line)}
.omni{width:218px;max-width:100%;display:block}
.hub-title{font-size:27px;letter-spacing:-1px;font-weight:650}
.client{justify-self:end;text-align:center;font-family:Georgia,serif;font-size:27px;letter-spacing:1px;line-height:1.1}
.client small{display:block;font:9px/1.5 'Segoe UI',sans-serif;letter-spacing:3px;margin-top:7px;color:var(--muted)}
.layout{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:calc(100vh - 106px)}
aside{padding:30px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#fafaf8}
.nav-label,.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.nav-label{padding:0 14px;margin:0 0 16px}
.tabs{display:grid;gap:9px}
.tab{display:flex;align-items:center;gap:13px;text-align:left;width:100%;border:2px solid transparent;background:transparent;padding:13px 14px;border-radius:10px;color:#66655f;font-weight:550;min-height:51px}
.tab:hover{background:#efefeb}
.tab[aria-selected=true]{border-color:var(--red);background:white;color:var(--ink);box-shadow:0 3px 10px #22222204}
.tab[aria-selected=true] .icon{color:#e35151}
.tab .chevron{margin-left:auto;opacity:0}
.tab[aria-selected=true] .chevron{opacity:1;color:var(--red)}
.icon{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center}
.icon svg{width:19px;height:19px}
.aside-footer{margin-top:auto;padding:40px 14px 0;color:var(--muted);font-size:11px}
.aside-footer strong{display:block;color:var(--ink);font-size:12px;font-weight:550;margin-bottom:3px}
main{padding:36px 42px 25px;min-width:0;max-width:1570px;width:100%;margin:0 auto;align-self:start}
.intro{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:28px}
.eyebrow{color:#af4e4e;margin-bottom:8px}
h1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0 0 9px;font-weight:650}
h2{font-size:19px;letter-spacing:-.3px;margin:0}
h3{font-size:16px;margin:0;font-weight:600}
p{margin:0}
.sub{color:var(--muted);max-width:70ch}
.pill{white-space:nowrap;border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:11px;background:white;color:var(--muted)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:6px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}
.toolbar label{font-size:12px;color:var(--muted)}
select{margin-left:7px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 26px 7px 10px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{background:white;border:1px solid var(--line);border-radius:14px;padding:21px 20px;position:relative;overflow:hidden}
.period{font-size:15px;font-weight:600}
.period small{font-size:10px;font-weight:400;color:var(--muted);margin-left:5px}
.date{font-size:11px;color:var(--muted);margin-top:3px}
.metric-label{margin-top:23px;color:var(--muted);font-size:11px}
.value{font-size:29px;font-weight:650;letter-spacing:-1px;margin:2px 0 7px;white-space:nowrap}
.delta{font-size:11px;color:var(--green)}
.delta span{color:var(--muted);margin-left:4px}
.spark{width:100%;height:48px;margin:20px 0 13px;display:block}
.minor{border-top:1px solid #efeeea;padding-top:13px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.minor strong{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-top:3px}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin:29px 0 15px}
.text-button{background:transparent;border:0;padding:0;color:#b54545;font-size:12px}
.lower{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:19px;margin-top:25px}
.panel,.card{background:white;border:1px solid var(--line);border-radius:14px;padding:22px}
.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}
.chart{height:160px;display:flex;gap:13px;align-items:end;border-bottom:1px solid var(--line);padding:0 6px}
.bar-col{flex:1;display:flex;gap:4px;align-items:end;height:100%;position:relative}
.bar-col i{display:block;flex:1;background:#ff8980;border-radius:4px 4px 0 0}
.bar-col i.old{background:#ebeae6}
.chart-labels{display:flex;justify-content:space-around;font-size:10px;color:var(--muted);margin:9px 0 0}
.legend{font-size:10px;color:var(--muted);display:flex;gap:15px;margin-top:19px}
.legend b{display:inline-block;width:7px;height:7px;background:#ff8980;border-radius:2px;margin-right:5px}
.legend b.old{background:#e5e4df}
.quick{display:block;border:1px solid var(--line);background:#fff;border-radius:9px;text-align:left;text-decoration:none;padding:11px 13px;margin-top:11px;width:100%}
.quick span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.quick:hover{border-color:var(--red)}
footer{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:15px;margin-top:27px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.card{display:flex;flex-direction:column;gap:10px}
.card p{color:var(--muted);font-size:13px}
.badge{font-size:10px;letter-spacing:1px;color:#aa4b4b;text-transform:uppercase}
.card-actions{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--ink);color:white;text-decoration:none;border:1px solid var(--ink);border-radius:8px;font-weight:550;padding:10px 16px;font-size:12px}
.btn.outline{background:white;color:var(--ink);border-color:var(--line)}
.btn:hover{border-color:var(--red)}
.search{width:100%;background:white;border:1px solid var(--line);border-radius:10px;padding:13px 16px;color:var(--ink);margin-bottom:15px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filter{padding:6px 14px;border:1px solid var(--line);border-radius:30px;background:white;font-size:12px}
.filter[aria-pressed=true]{background:var(--ink);color:white}
.count{font-size:11px;color:var(--muted);margin-bottom:15px}
.report-row{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:12px;padding:18px;background:white;margin-bottom:10px}
.report-copy{flex:1;min-width:0}
.report-copy p{color:var(--muted);font-size:12px;margin-top:5px}
.report-actions{display:flex;gap:8px;align-items:center}
.save{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px;color:#777;font-size:17px}
.save[aria-pressed=true]{color:#bc4449;border-color:#ffc0b9;background:var(--wash)}
.empty{padding:40px;text-align:center;border:1px dashed #d4d3cd;border-radius:13px;background:white;color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:7px}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.term{padding:20px;border:1px solid var(--line);border-radius:12px;background:white}
.term p{color:var(--muted);font-size:12px;margin-top:7px}
.formula{display:block;background:#f6f6f3;border-radius:6px;padding:10px;margin-top:12px;font:11px/1.6 Consolas,monospace}
.aide{display:grid;grid-template-columns:1.3fr 1fr;gap:35px;align-items:center;padding:36px;background:#fff;border:1px solid var(--line);border-radius:16px}
.aide h2{font-size:29px;line-height:1.3;margin-bottom:15px}
.aide p{color:var(--muted);margin-bottom:22px}
.question{border:1px solid var(--line);background:var(--bg);padding:15px;border-radius:10px;margin:10px 0;font-size:13px}
.usage-row{display:grid;grid-template-columns:24px minmax(0,1fr) 40px;gap:13px;align-items:center;margin:15px 0;font-size:12px}
.usage-track{height:5px;background:#efeeeb;border-radius:4px;margin-top:6px;overflow:hidden}
.usage-track i{display:block;height:100%;background:#ff8980;border-radius:4px}
.note{font-size:11px;color:var(--muted);margin-top:17px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:11px 20px;border-radius:10px;font-size:12px;box-shadow:0 5px 30px #0002;z-index:10}
.status{background:#f7f6f2;border-radius:8px;color:var(--muted);font-size:11px;padding:9px 12px;margin-top:auto}

@media(min-width:1550px){main{padding:45px 55px}
.kpi{padding:25px}
.value{font-size:35px}
}
@media(max-width:1100px){header{padding:0 25px}
.layout{grid-template-columns:205px minmax(0,1fr)}
main{padding:28px 25px}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.lower{grid-template-columns:1fr}
.tab{padding:12px 10px}
.omni{width:185px}
}
@media(max-width:700px){header{height:90px;padding:0 16px;gap:14px}
.omni{width:130px}
.hub-title{font-size:20px}
.client{font-size:18px}
.client small{font-size:7px;letter-spacing:1px}
.layout{grid-template-columns:150px minmax(0,1fr)}
aside{padding:22px 9px}
.nav-label{padding-left:10px;font-size:8px}
.tab{font-size:11px;gap:7px;padding:10px 7px}
.tab .chevron{display:none}
.icon,.icon svg{width:16px;height:16px}
.aside-footer{padding:28px 8px 0;font-size:9px}
main{padding:24px 15px}
.intro{display:block}
h1{font-size:26px}
.pill{display:inline-block;margin-top:12px}
.kpis,.cards,.terms,.aide{grid-template-columns:1fr}
.toolbar{display:block}
.toolbar label{display:block;margin-top:12px}
.lower{display:block}
.lower .panel{margin-bottom:15px}
.report-row{display:block}
.report-actions{margin-top:12px}
.aide{padding:22px}
.aide h2{font-size:23px}
footer{display:block}
footer span{display:block;margin-top:4px}
.panel-top{gap:10px}
.sub{font-size:12px}
}

@media(max-width:480px){header{height:105px;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px}
.hub-title{grid-column:1/-1;grid-row:2;text-align:center;font-size:20px}
.client{font-size:17px}
.client small{display:none}
.layout{grid-template-columns:108px minmax(0,1fr);min-height:calc(100vh - 105px)}
aside{padding:20px 6px}
.nav-label{font-size:7px;letter-spacing:1px;padding:0 5px}
.tab{font-size:10px;gap:5px;padding:10px 6px;min-height:46px}
.icon,.icon svg{width:13px;height:13px;flex-shrink:0}
main{padding:22px 12px}
.kpi,.panel,.card,.term{padding:15px}
.value{font-size:24px}
.pill{white-space:normal}
h1{font-size:24px}
.period small{display:block;margin:0}
.panel-top{display:block}
.panel-top .pill{margin-top:8px}
.chart{gap:6px}
.aside-footer{font-size:8px}
.aside-footer strong{font-size:10px}
.usage-row{grid-template-columns:15px minmax(0,1fr) 20px;gap:7px}
}

/* Growth Hub revision: metric tiles, resource videos and usage. */
.kpi-toolbar{margin-bottom:27px;align-items:center}
.kpi-toolbar h1{font-size:29px;margin-bottom:5px}
.context-tools{display:flex;align-items:center;gap:20px}
.sample-tag{font-size:10px;color:#9a625e;border:1px solid #f2d9d4;background:#fff5f2;padding:5px 10px;border-radius:30px;white-space:nowrap}
.context-control{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.context-toggle{display:flex;padding:4px;background:#edede8;border-radius:9px;gap:3px}
.context-toggle button{border:0;border-radius:6px;background:transparent;padding:7px 17px;color:var(--muted);font-size:12px}
.context-toggle button[aria-pressed=true]{background:white;box-shadow:0 2px 5px #00000008;color:var(--ink);font-weight:600}
.metric-card{min-height:230px;padding:24px;display:flex;flex-direction:column}
.metric-top{display:flex;align-items:center;justify-content:space-between}
.metric-top h2{font-size:15px;font-weight:600}
.metric-symbol{color:#b9b7b1;font-size:12px;width:28px;height:28px;background:#f8f8f5;border-radius:8px;text-align:center;line-height:28px}
.metric-card .value{font-size:34px;margin:20px 0 8px}
.metric-card .spark{margin:auto 0 0;padding-top:20px;height:66px}
.metric-card .delta{font-size:11px}
.unconfirmed{border-style:dashed;background:transparent}
.unconfirmed .value{color:#b8b6ae}
.tile-detail{color:var(--muted);font-size:12px}
.bookmark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bookmark-tile{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:152px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:25px;text-decoration:none;transition:border-color .15s,transform .15s}
.bookmark-tile:hover{border-color:var(--red);transform:translateY(-2px)}
.bookmark-tile h2{font-size:17px;margin-bottom:8px}
.bookmark-tile span{font-size:12px;color:var(--muted)}
.feature-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:35px;align-items:center;background:white;border:1px solid var(--line);border-radius:16px;padding:35px}
.feature-copy h2{font-size:31px;line-height:1.3;letter-spacing:-.8px;margin:14px 0 18px}
.feature-copy p{font-size:14px;color:var(--muted);margin:0 0 25px;max-width:48ch}
.video-box{aspect-ratio:16/9;background:#282827;border-radius:12px;overflow:hidden;position:relative;min-width:0}
.video-box video{width:100%;height:100%;display:block;object-fit:contain}
.video-label{position:absolute;top:16px;left:18px;pointer-events:none;font-size:11px;color:#eee}
.video-placeholder{display:grid;place-items:center;background:radial-gradient(ellipse at 80% 15%,#63514b 0,transparent 65%),linear-gradient(135deg,#353733,#242523)}
.video-art{text-align:center;color:#fff;padding:20px}
.play-circle{display:grid;place-items:center;border:1px solid #ffffff55;background:#ffffff0c;border-radius:50%;width:53px;height:53px;margin:0 auto 16px;padding-left:3px;font-size:18px}
.video-art h3{font-size:21px}
.video-art p{font-size:11px;color:#bbbcb6;margin-top:4px}
.video-pending{display:block;margin-top:18px;color:#a5a59e;font-size:10px}
.usage-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 22px}
.usage-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:10px 20px 13px;font-size:13px}
.usage-tabs button[aria-pressed=true]{border-bottom-color:var(--red);color:var(--ink);font-weight:600}
.usage-period-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:12px;color:var(--muted)}
.usage-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
.usage-panel .panel-top{align-items:center}
.usage-panel h2{font-size:18px;margin-top:5px}
.usage-list{max-height:380px;overflow-y:auto;scrollbar-width:thin;padding-right:8px}
.ranking-item{display:grid;grid-template-columns:26px minmax(0,1fr) 40px;gap:14px;align-items:center;border-top:1px solid #f0efe9;padding:17px 0;text-decoration:none}
.ranking-item:hover h3{color:#c44d4d}
.ranking-number{color:#b2afa7;font-size:13px}
.ranking-item h3{font-size:13px}
.ranking-item p{font-size:10px;color:var(--muted);margin:3px 0 10px;overflow-wrap:anywhere}
.ranking-value{text-align:right}
.ranking-value strong{display:block;font-size:19px;font-weight:600}
.ranking-value span{font-size:9px;color:var(--muted)}
.aide-activity{background:white;border:1px solid var(--line);border-radius:16px;padding:28px 32px}
.activity-head{display:flex;align-items:start;justify-content:space-between;gap:20px}
.activity-head h2{font-size:27px;margin:7px 0}
.activity-head p{font-size:12px;color:var(--muted)}
.activity-stats{display:flex;gap:65px;margin:28px 0 20px}
.activity-stats strong{display:block;font-size:33px;font-weight:600;letter-spacing:-1px}
.activity-stats small{font-size:17px;font-weight:400;color:#b3b0a7;letter-spacing:0}
.activity-stats span{font-size:11px;color:var(--muted)}
.activity-chart svg{display:block;width:100%;height:auto;overflow:visible}
.activity-dates{display:flex;justify-content:space-between;color:#96938b;font-size:10px;padding:0 9px}
.point-dot{opacity:0;transition:opacity .15s}
.chart-point:hover .point-dot,.chart-point:focus .point-dot{opacity:1}
.chart-point:focus{outline:none}
.chart-point:focus .point-dot{stroke-width:4}
.aide-activity .note{border-top:1px solid #f0efe9;padding-top:17px;margin-top:23px}

@media(max-width:1100px){.bookmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-card{padding:20px}
.metric-card .value{font-size:30px}
.feature-box{grid-template-columns:1fr;padding:28px}
.feature-copy p{max-width:65ch}
.video-box{max-width:650px;width:100%}
.usage-columns{grid-template-columns:1fr}
.activity-stats{gap:35px}
.context-tools{gap:12px}
}

@media(max-width:700px){.kpi-toolbar{align-items:start}
.context-tools{flex-wrap:wrap;margin-top:15px}
.context-control{flex-wrap:wrap;gap:7px}
.context-toggle button{padding:6px 10px}
.bookmark-grid{grid-template-columns:1fr}
.feature-box{padding:20px}
.feature-copy h2{font-size:25px}
.feature-copy p{font-size:12px}
.metric-card{min-height:210px}
.metric-card .value{font-size:29px}
.usage-period-row{display:block}
.usage-period-row .sample-tag{display:inline-block;margin-top:8px}
.activity-head{display:block}
.activity-head .sample-tag{display:inline-block;margin-top:12px}
.activity-stats{gap:15px;flex-wrap:wrap}
.activity-stats strong{font-size:26px}
.aide-activity{padding:20px}
.activity-chart{overflow-x:auto}
.activity-chart svg,.activity-dates{min-width:440px}
.ranking-item{gap:8px;grid-template-columns:17px minmax(0,1fr) 25px}
.usage-tabs button{padding:10px 12px}
.feature-box{gap:22px}
}


.metric-card{min-height:168px}
.metric-card .value{margin:17px 0 10px}
.bookmark-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bookmark-tile{min-height:104px;padding:16px 12px;border-radius:10px}
.bookmark-tile h2{font-size:14px;margin-bottom:5px}
.bookmark-tile span{font-size:11px}
.context-tools{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.studio-link-note{display:block;font-size:11px;color:var(--muted);margin-top:9px}
.btn:disabled{cursor:default;opacity:.55}
.aide-activity{padding:24px 28px}
.activity-stats{margin:18px 0 12px}
.activity-chart svg{max-height:215px}
.usage-period-row{margin:27px 0 17px}
.usage-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.usage-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:400px;overflow:auto;scrollbar-width:thin;padding:2px}
.usage-report-tile{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--line);border-radius:10px;text-decoration:none;padding:17px 10px;background:#fcfcfa;min-height:151px}
.usage-report-tile:hover{border-color:var(--red);background:white}
.usage-report-tile img{margin-bottom:10px;object-fit:contain}
.usage-report-tile h3{font-size:12px;line-height:1.4}
.usage-suite{font-size:9px;color:var(--muted);margin-top:4px}
.usage-count{font-size:10px;color:var(--muted);margin-top:auto;padding-top:12px}
.usage-count strong{font-size:14px;color:var(--ink);font-weight:600;margin-right:3px}

#kpi-picker{border:1px solid var(--line);border-radius:16px;width:min(640px,calc(100vw - 32px));max-height:90vh;padding:26px;color:var(--ink);box-shadow:0 25px 80px #0002}
#kpi-picker::backdrop{background:#26252166;backdrop-filter:blur(3px)}
.picker-head{display:flex;align-items:start;justify-content:space-between;gap:15px}
.picker-head h2{font-size:23px}
.picker-head p{font-size:12px;color:var(--muted);margin-top:5px}
.picker-head button{border:0;background:transparent;font-size:25px;color:var(--muted);line-height:1;padding:3px}
.picker-toolbar{display:flex;gap:13px;align-items:center;margin:24px 0 17px;font-size:11px}
.picker-toolbar span{margin-right:auto;font-weight:600}
.picker-toolbar button{border:0;background:none;color:#b44c4c;padding:0;font-size:11px}
.picker-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.picker-options label{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;cursor:pointer}
.picker-options label:has(input:checked){border-color:#ffb6ad;background:#fff5f1}
.picker-options label:has(input:disabled){opacity:.5;cursor:default}
.picker-options input{accent-color:#ef6161;margin:0;width:15px;height:15px}
.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:23px;padding-top:18px;border-top:1px solid var(--line)}
.picker-footer span{font-size:10px;color:var(--muted);margin-right:auto}

@media(max-width:1200px){.usage-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.context-tools{max-width:440px}
}
@media(max-width:1100px){.bookmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.usage-columns{grid-template-columns:1fr}
}
@media(max-width:700px){.bookmark-grid{grid-template-columns:1fr}
.metric-card{min-height:160px}
.context-tools{justify-content:flex-start}
.aide-activity{padding:20px}
.activity-chart svg{max-height:none}
.usage-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.picker-footer{flex-wrap:wrap}
.picker-footer span{width:100%}
.picker-options{grid-template-columns:1fr}
#kpi-picker{padding:20px}
}
@media(max-width:480px){.usage-tile-grid{grid-template-columns:1fr}
}


.compact-activity{padding:23px 27px}
.activity-body{display:grid;grid-template-columns:minmax(0,1fr) 165px;gap:34px;align-items:center}
.activity-left{min-width:0}
.activity-left h2{font-size:21px;margin:5px 0 20px}
.compact-activity .activity-stats{display:flex;flex-direction:column;gap:13px;margin:0;border-left:1px solid var(--line);padding-left:27px}
.compact-activity .activity-stats strong{font-size:25px;line-height:1.2}
.compact-activity .activity-stats small{font-size:14px}
.compact-activity .activity-stats span{font-size:10px}
.daily-bars{display:flex;gap:6px;align-items:stretch;height:126px;border-bottom:1px solid var(--line);padding:0 2px}
.daily-bar{flex:1;min-width:0;position:relative;display:flex;align-items:end;cursor:default}
.daily-bar>span{display:block;width:100%;background:linear-gradient(180deg,#ff8580,#ffb5a8);border-radius:4px 4px 0 0;min-height:2px;transition:filter .15s}
.daily-bar:hover>span,.daily-bar:focus>span{filter:saturate(1.6)}
.bar-tooltip{display:none;position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);background:var(--ink);color:white;border-radius:7px;padding:7px 10px;font-size:10px;white-space:nowrap;z-index:2;pointer-events:none}
.daily-bar:hover .bar-tooltip,.daily-bar:focus .bar-tooltip{display:block}
.compact-activity .activity-dates{margin-top:9px;padding:0;font-size:10px;min-width:0}
.top-reports{margin-top:23px;padding:23px 27px}
.top-reports .panel-top{margin-bottom:17px}
.usage-range{font-size:11px;color:var(--muted);margin-top:5px}
.top-reports .usage-tile-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:none;overflow:visible;gap:12px}
.top-reports .usage-report-tile{min-height:144px;padding:15px 10px}
.top-reports .usage-report-tile img{width:29px;height:29px}
.metric-card{min-height:155px}

@media(max-width:1200px){.top-reports .usage-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){.activity-body{grid-template-columns:1fr;gap:18px}
.compact-activity{padding:20px}
.compact-activity .activity-stats{flex-direction:row;flex-wrap:wrap;gap:19px;padding:17px 0 0;border-left:0;border-top:1px solid var(--line)}
.daily-bars{gap:3px;height:100px}
.top-reports{padding:20px}
.top-reports .usage-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.daily-bar:first-child .bar-tooltip{left:0;transform:none}
.daily-bar:last-child .bar-tooltip{left:auto;right:0;transform:none}
}
@media(max-width:480px){.top-reports .usage-tile-grid{grid-template-columns:1fr}
.daily-bars{gap:2px}
.compact-activity .activity-stats{gap:12px}
.compact-activity .activity-stats strong{font-size:23px}
.compact-activity .activity-dates{font-size:8px}
}

/* Compact tiles and stronger usage chart. */
.metric-card{min-height:140px;padding:19px 22px}
.metric-card .value{margin:12px 0 8px}

.bookmark-tile{min-height:90px;padding:13px 12px}
.bookmark-tile h2{font-size:16px;margin-bottom:4px}
.bookmark-tile span{font-size:12px}

.compact-activity .activity-stats{align-items:stretch;text-align:center}
.compact-activity .activity-stats>div{width:100%}

.daily-bar>span{background:linear-gradient(180deg,#df5157,#ef7974)}

@media(max-width:700px){.metric-card{min-height:136px;padding:17px}
.compact-activity .activity-stats{justify-content:center}
.compact-activity .activity-stats>div{width:auto;flex:1}
}
/* Matching activity totals and charcoal bars. */
.compact-activity .activity-stats small{font:inherit;letter-spacing:inherit;color:inherit}

.daily-bar>span{background:var(--ink)}

.tabs{display:flex;flex-direction:column;flex:1}
.tab[data-tab="status"]{margin-top:0}
.aside-footer{margin-top:0;padding-top:24px}
.aide-brand-icon{background-repeat:no-repeat;background-size:47px 19px;background-position:left center;flex-shrink:0}
.value-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kpi-direction{color:var(--red);width:25px;height:25px;flex-shrink:0}
.kpi-direction svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dataset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dataset-card{background:white;border:1px solid var(--line);border-radius:14px;padding:25px}
.dataset-head{display:flex;align-items:center;gap:13px;margin-bottom:23px}
.dataset-head h2{font-size:18px}
.dataset-head div>span{font-size:11px;color:var(--muted)}
.refresh-badge{margin-left:auto;font-size:10px;border:1px solid var(--line);background:#f6f6f2;border-radius:30px;padding:5px 10px;color:var(--muted)}
.refresh-summary,.refresh-details dl{margin:0}
.refresh-summary div,.refresh-details dl div{padding:13px 0;border-top:1px solid #efeee9}
.dataset-card dt{font-size:11px;color:var(--muted)}
.dataset-card dd{font-size:14px;margin:4px 0 0;font-weight:550}
.refresh-details{margin:9px 0 22px}
.refresh-details summary{cursor:pointer;font-size:12px;font-weight:600;padding:12px 0}
.refresh-details dd{font-size:12px;font-weight:400;overflow-wrap:anywhere}
.dataset-card .btn{margin-top:5px}

@media(max-width:1100px){.dataset-grid{grid-template-columns:1fr}
}
@media(max-width:700px){.aide-brand-icon{background-size:40px 16px}
.dataset-card{padding:18px}
.dataset-head{flex-wrap:wrap}
.kpi-direction{width:22px;height:22px}
}
@media(max-width:480px){.aide-brand-icon{background-size:32px 13px}
}

/* Laptop layout: keep the shell visible and scroll long content inside panels. */
html,body{height:100%;overflow:hidden}
header{height:80px;padding:0 30px}
.omni{width:200px}
.hub-title{font-size:25px}
.client{font-size:25px}
.client small{font-size:8px;margin-top:5px}

.layout{height:calc(100dvh - 80px);min-height:0;grid-template-columns:215px minmax(0,1fr)}
aside{padding:22px 15px;min-height:0;overflow-y:auto}
.tabs{gap:6px;min-height:0}
.tab{min-height:44px;padding:10px 12px;border-radius:9px}
main{height:100%;min-height:0;padding:25px 30px;max-width:none;overflow:hidden}
.layout main>[role="tabpanel"]{height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:3px}
.intro{margin-bottom:20px}
.intro h1{font-size:28px}
.eyebrow{font-size:9px;margin-bottom:6px}
.sub{font-size:13px}
.kpi-toolbar{margin-bottom:19px}
.kpi-toolbar h1{font-size:27px}
.kpis{gap:12px}
.metric-card{min-height:132px;padding:16px 19px}
.metric-card .value{font-size:30px;margin:10px 0 7px}
.metric-card .delta{font-size:10px}
.metric-top h2{font-size:14px}
.context-toggle button{padding:6px 14px}
.feature-box{padding:28px;gap:28px}
.feature-copy h2{font-size:28px}
.feature-copy p{font-size:13px}
.compact-activity{padding:19px 23px}
.activity-left h2{font-size:20px;margin:5px 0 15px}
.daily-bars{height:105px}
.compact-activity .activity-stats{gap:12px}
.compact-activity .activity-stats strong{font-size:24px}
.top-reports{margin-top:18px;padding:19px 23px}
.top-reports .panel-top{margin-bottom:13px}
.top-reports .usage-report-tile{min-height:131px;padding:13px 9px}
.top-reports .usage-tile-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.top-reports h2{font-size:18px}
.usage-range{font-size:10px}
.bookmark-grid{gap:12px}
.cards{gap:12px}
.card{padding:19px}
.search{padding:11px 14px}
.terms{gap:12px}
.term{padding:17px}

@media(min-width:701px){.layout main>[role="tabpanel"]:has(#results),.layout main>[role="tabpanel"]:has(#terms){display:flex;flex-direction:column;overflow:hidden}
#results,#terms{min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:5px}
.layout main>[role="tabpanel"]:has(#results)>.intro,.layout main>[role="tabpanel"]:has(#terms)>.intro,.search,.filters,.count{flex-shrink:0}
}

@media(max-width:1100px){.layout{grid-template-columns:190px minmax(0,1fr)}
main{padding:22px}
.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-card{padding:14px}
.metric-card .value{font-size:26px}
.metric-card .delta span{display:block;margin-left:0}
.top-reports .usage-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-box{grid-template-columns:1fr 1fr;padding:22px;gap:22px}
.feature-copy h2{font-size:24px}
.feature-copy p{font-size:12px}
.kpi-direction{width:19px;height:19px}
}

@media(max-width:700px){header{height:90px;padding:0 16px}
.omni{width:130px}
.hub-title{font-size:20px}
.client{font-size:18px}
.layout{height:calc(100dvh - 90px);grid-template-columns:150px minmax(0,1fr)}
aside{padding:19px 9px}
.tab{padding:9px 7px;font-size:11px}
.tabs{gap:6px}
main{padding:20px 15px}
.metric-grid{grid-template-columns:1fr}
.feature-box{grid-template-columns:1fr;padding:20px}
.top-reports .usage-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.intro h1{font-size:25px}
}

@media(max-width:480px){header{height:100px;padding:12px 16px}
.layout{height:calc(100dvh - 100px);grid-template-columns:108px minmax(0,1fr)}
.client{font-size:17px}
aside{padding:18px 6px}
main{padding:20px 12px}
.tab{font-size:10px;padding:9px 6px}
.top-reports .usage-tile-grid{grid-template-columns:1fr}
}
.dataset-grid{align-items:start}
.dataset-card{padding:20px}
.dataset-head{margin-bottom:16px}
.refresh-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.refresh-details dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.refresh-details dl div:last-child{grid-column:1/-1}
.refresh-summary div,.refresh-details dl div{padding:9px 0}
.refresh-details{margin:5px 0 12px}
.refresh-details summary{padding:10px 0}

@media(max-width:700px){.refresh-summary,.refresh-details dl{grid-template-columns:1fr;gap:0}
.refresh-details dl div:last-child{grid-column:auto}
}
.aide-robot-icon{color:#66655f}
.tab[aria-selected=true] .aide-robot-icon{color:var(--ink)}
.kpi-direction[aria-label^="Up"]{color:var(--green)}
.contact-panel{max-width:710px;padding:30px}
.contact-panel h2{font-size:25px;margin:10px 0 12px}
.contact-panel .sub{margin-bottom:23px}
.contact-email{display:block;width:fit-content;font-size:21px;text-decoration:none;margin-bottom:25px;overflow-wrap:anywhere}
.contact-email:hover{color:var(--red)}
@media(max-width:700px){.contact-panel{padding:20px}
.contact-email{font-size:16px}
}
.tab[data-tab="usage"] .icon svg{stroke-linecap:square;stroke-linejoin:miter}
.metric-card .delta{font-size:12px}
.metric-card .delta span{font-size:12px}

.bookmark-slot{position:relative;min-height:96px;border-radius:10px}
.bookmark-slot.filled{background:white}
.bookmark-slot .bookmark-tile{height:100%;min-height:96px;padding:12px 25px 22px}
.bookmark-slot .bookmark-tile:hover{transform:none}
.empty-slot{border:1px dashed #d8d6d0;background:transparent;display:grid;place-items:center;color:#aba8a0;padding:0}
.empty-slot>span{font-size:30px;line-height:1;font-weight:300}
.empty-slot:hover{border-color:var(--red);color:var(--red);background:#fff}
.bookmark-delete{position:absolute;right:7px;bottom:6px;border:0;background:transparent;color:#96938b;display:grid;place-items:center;width:25px;height:25px;padding:5px;border-radius:5px}
.bookmark-delete svg{width:15px;height:15px}
.bookmark-delete:hover{color:#d3484d;background:#fff0ed}
.bookmark-slots{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:1100px){.bookmark-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
.bookmark-slot h2{font-size:14px}
}
@media(max-width:700px){.bookmark-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){.bookmark-slots{grid-template-columns:1fr}
}


.flip-card{position:relative;height:158px;min-width:0;perspective:900px;cursor:pointer;border-radius:14px}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s ease}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-height:0;overflow:hidden}
.card-front.metric-card{padding:15px 18px}
.card-front .delta{padding-right:17px}
.card-front .value{margin:8px 0 6px}
.card-back{transform:rotateY(180deg);padding:12px 11px}
.flip-card:hover .card-face{border-color:#d2cec4}
.flip-card:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.card-chart-icon{position:absolute;right:11px;bottom:9px;color:#96938b;width:17px;height:17px}
.card-chart-icon svg{width:100%;height:100%}
.trend-top{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.trend-top h2{font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend-top>span{font-size:9px;color:var(--muted);white-space:nowrap}
.trend-legend{display:flex;gap:10px;font-size:9px;color:#77746d;margin:4px 0 3px 30px}
.trend-legend span{display:flex;align-items:center;gap:4px}
.trend-legend i{width:13px;display:inline-block;border-top:2px solid #333330}
.trend-legend .ly-key{border-top:2px dotted #92908b}
.kpi-trend-chart{width:100%;height:85px;display:block}
.trend-return{position:absolute;bottom:7px;right:11px;color:#96938b;font-size:14px}

@media(max-width:1100px){.card-front.metric-card{padding:13px}
.card-front .delta{font-size:11px}
.card-front .delta span{font-size:11px}
.trend-top{gap:4px}
.trend-top h2{font-size:12px}
.trend-top>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}
}

/* Refined title: lighter weight, natural spacing and a quieter brand balance. */
.hub-title{font-family:'Segoe UI Variable Display','Segoe UI',Arial,sans-serif;font-size:30px;font-weight:400;letter-spacing:.3px;line-height:1.2;color:#3b3a39}

@media(max-width:700px){.hub-title{font-size:22px}
}
@media(max-width:480px){.hub-title{font-size:21px}
}

.training-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;align-content:start}
.training-tile{display:block;min-width:0;text-align:left;padding:0;background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;text-decoration:none;color:var(--ink)}
.training-tile.ready:hover{border-color:var(--red)}
.training-cover{height:106px;background:#f0f0eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#a09d95;border-bottom:1px solid var(--line)}
.ready .training-cover{background:#333330;color:#f7f7f5}
.training-cover svg{width:30px;height:30px}
.training-cover>span{font-size:10px}
.training-copy{padding:13px 14px 16px;min-height:88px}
.training-copy .badge{font-size:8px}
.training-copy h2{font-size:14px;line-height:1.35;margin-top:5px}
.layout main>[role="tabpanel"]:has(.training-grid){display:flex;flex-direction:column;overflow:hidden}
.layout main>[role="tabpanel"]:has(.training-grid)>.intro{flex-shrink:0}
.training-grid{overflow-y:auto;min-height:0;scrollbar-width:thin;padding:2px 5px 5px 2px}

#training-player{width:min(900px,calc(100vw - 36px));border:1px solid var(--line);border-radius:15px;padding:20px;color:var(--ink);max-height:90vh}
#training-player::backdrop{background:#262521aa;backdrop-filter:blur(3px)}
.training-player-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.training-player-head h2{font-size:19px}
.training-player-head button{border:0;background:transparent;font-size:27px;color:var(--muted)}
#training-player video{display:block;width:100%;max-height:70vh;background:#272726;border-radius:9px}

.about-intro{padding:23px 26px}
.about-intro h2{font-size:27px;letter-spacing:-.6px;margin:8px 0 12px}
.about-intro p{font-size:13px;color:var(--muted);max-width:92ch}
.about-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:17px 0}
.about-step{padding:19px 17px;background:white;border:1px solid var(--line);border-radius:11px}
.step-number{font-size:13px;color:#ce5656}
.about-step h2{font-size:15px;margin:9px 0}
.about-step p{font-size:12px;color:var(--muted);line-height:1.6}
.about-aide{display:flex;align-items:center;gap:26px;padding:22px 26px}
.about-aide h2{font-size:19px;margin-bottom:8px}
.about-aide p{font-size:12px;color:var(--muted);max-width:70ch}
.about-actions{display:flex;flex-direction:column;gap:9px;flex-shrink:0}

@media(max-width:1100px){.training-grid{gap:11px}
.training-cover{height:88px}
.training-copy{padding:11px}
.training-copy h2{font-size:12px}
.about-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-aide{display:block}
.about-actions{flex-direction:row;margin-top:16px;flex-wrap:wrap}
}
@media(max-width:700px){.training-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.training-cover{height:86px}
.about-intro,.about-aide{padding:20px}
.about-intro h2{font-size:23px}
.about-steps{grid-template-columns:1fr}
.training-player-head h2{font-size:15px}
}
@media(max-width:480px){.training-grid{grid-template-columns:1fr}
}

.training-grid{grid-auto-rows:202px;flex:1}
.training-tile{height:202px}
.about-intro{padding:18px 22px}
.about-intro h2{font-size:25px;margin:6px 0 9px}
.about-intro p{font-size:12px}
.about-steps{margin:14px 0}
.about-step{padding:16px}
.about-step h2{margin:7px 0}
.about-aide{padding:18px 22px}
.about-aide h2{font-size:18px}

@media(max-width:1100px){.training-grid{grid-auto-rows:180px}
.training-tile{height:180px}
}
@media(max-width:700px){.about-intro,.about-aide{padding:20px}
}

/* ===================================================== hub additions (below the design) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:root{--good:#2f8a5f;--bad:#d4464c;--flat:#a8a59d;--amber:#d58a12}

/* Sign-in gate and staff client choice: nothing about any client until the API answers. */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:20;padding:24px}
.gate-card{max-width:420px;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:0 20px 60px #0000000d}
.gate-card img{width:190px;display:block;margin-bottom:22px}
.gate-card h1{font-size:24px;margin:0 0 10px}
.gate-card p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 18px}
.gate-card .err{color:var(--bad)}
.picker-list{display:grid;gap:8px;max-height:50vh;overflow:auto;margin-top:6px}
.picker-list button{text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fafaf8;font-weight:600}
.picker-list button:hover{border-color:var(--red)}
.client{display:flex;flex-direction:column;align-items:center}
.switch-client{margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:30px;padding:3px 11px;font:10px 'Segoe UI',sans-serif;letter-spacing:.3px;color:var(--muted)}
.switch-client:hover{border-color:var(--red);color:var(--ink)}

/* Framed tabs (Growth Studio, Library) fill the panel and scroll inside themselves. */
main{position:relative}
.section-frame{width:100%;height:100%;border:1px solid var(--line);border-radius:14px;background:#fff;display:block}
.stale-note{font-size:11px;color:#9a625e;background:#fff5f2;border:1px solid #f2d9d4;border-radius:8px;padding:8px 11px;margin-top:12px}
.data-note{font-size:11px;color:var(--muted);margin-top:14px}

/* KPI cards: real figures, favourable/unfavourable colour, and a trend you can read. */
.kpi-dates{font-size:12px;color:var(--muted);margin-top:3px}
.flip-card{height:196px}
.card-front.metric-card{border-left:4px solid var(--tone,var(--flat));padding:16px 18px 14px 17px}
.flip-card.good{--tone:var(--good)}.flip-card.bad{--tone:var(--bad)}.flip-card.flat{--tone:var(--flat)}
.card-front .value{font-size:31px;font-weight:700;letter-spacing:-1.2px;margin:10px 0 6px}
.flip-card .kpi-direction{color:var(--tone,var(--flat))}
.flip-card .delta{color:var(--tone,var(--flat));font-weight:650}
.flip-card .delta span{font-weight:400}
.ly-line{font-size:11px;color:var(--muted);margin-top:5px}
.flip-card:hover .card-front{box-shadow:0 6px 18px #2b2a2610;border-color:#d2cec4}
.card-back{padding:11px 12px 8px;display:flex;flex-direction:column}
.kpi-trend-chart{height:auto;flex:1;min-height:0;overflow:visible}
.kpi-trend-chart text{font-family:'Segoe UI',Arial,sans-serif}
.trend-legend{margin:3px 0 2px 0}
.trend-legend .ty-key{border-top:2.5px solid #333330}
.trend-legend .ly-key{border-top:2px dashed #9b988f}
.trend-tip{position:absolute;z-index:3;pointer-events:none;background:#333330f2;color:#fff;border-radius:8px;padding:6px 9px;font-size:10.5px;line-height:1.45;white-space:nowrap;box-shadow:0 6px 18px #0003}
.trend-tip b{font-weight:650}
.trend-tip .tip-var.good{color:#8fe0b4}.trend-tip .tip-var.bad{color:#ffaaa7}
.hit{fill:transparent;cursor:crosshair}
.kpi-empty{border:1px dashed #d4d3cd;border-radius:13px;padding:30px;text-align:center;color:var(--muted);background:#fff}

/* Anomaly detection: traffic lights, then a control chart per metric. */
.lights{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.light-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.light-summary h2{font-size:18px;display:flex;align-items:center;gap:9px}
.light-summary p{font-size:12px;color:var(--muted);margin-top:6px}
.light{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.light .lamp{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:#e9e8e3;box-shadow:inset 0 -3px 6px #0000001a}
.light.normal .lamp{background:radial-gradient(circle at 35% 30%,#7fe0a6,#2f8a5f)}
.light.watch .lamp{background:radial-gradient(circle at 35% 30%,#ffd27a,#d58a12)}
.light.alert .lamp{background:radial-gradient(circle at 35% 30%,#ff9d97,#d4464c)}
.light.zero .lamp{background:#ecebe6;box-shadow:inset 0 0 0 1px #dedcd5}
.light b{display:block;font-size:30px;line-height:1;font-weight:650}
.light span{font-size:11px;color:var(--muted)}
.light.alert:not(.zero){border-color:#f3b9b6;background:#fff8f7}
.light.watch:not(.zero){border-color:#f1d6a2;background:#fffaf0}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--flat)}
.status-dot.normal{background:var(--good)}.status-dot.watch{background:var(--amber)}.status-dot.alert{background:var(--bad)}
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ctrl-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 15px 12px;position:relative}
.ctrl-card.watch{border-color:#f1d6a2;box-shadow:inset 4px 0 #d58a12}
.ctrl-card.alert{border-color:#f3b9b6;box-shadow:inset 4px 0 #d4464c}
.ctrl-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ctrl-head h2{font-size:14px}
.ctrl-pill{font-size:10px;border-radius:30px;padding:3px 9px;background:#f1f1ec;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:5px}
.ctrl-pill.watch{background:#fff1d6;color:#8a5a06}.ctrl-pill.alert{background:#ffe3e1;color:#a3262c}.ctrl-pill.normal{background:#e7f4ec;color:#256b4a}
.ctrl-chart{width:100%;height:auto;display:block;margin:8px 0 4px;overflow:visible}
.ctrl-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid #efeee9;padding-top:9px}
.ctrl-foot span{display:block;font-size:9.5px;color:var(--muted)}
.ctrl-foot b{font-size:13px;font-weight:650}
.legend-row{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;color:var(--muted);margin:16px 0 0}
.legend-row i{display:inline-block;vertical-align:middle;margin-right:6px}
.legend-row .band{width:16px;height:9px;background:#f6c66d55;border:1px solid #f0d49f}
.legend-row .mean{width:16px;border-top:1.5px dashed #6fbf8f}

/* Anomaly Detection (dev): ranked findings, each a sentence, its evidence and a small chart. */
.find-promo{background:#fffaf0;border:1px solid #f1d6a2;border-radius:12px;padding:12px 16px;font-size:12.5px;margin-bottom:14px}
.find-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:14px}
.find-summary h2{font-size:17px;display:flex;align-items:center;gap:9px}
.find-summary p{font-size:12px;color:var(--muted);margin-top:6px}
.find-list{display:flex;flex-direction:column;gap:12px}
.find-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:20px;position:relative}
.find-card.issue{border-color:#f3b9b6;box-shadow:inset 4px 0 #d4464c}
.find-card.opportunity{border-color:#bfe3cd;box-shadow:inset 4px 0 #2f8a5f}
.find-kicker{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.find-main h2{font-size:16px;margin:4px 0 8px}
.find-tag{margin-left:8px;letter-spacing:.3px;text-transform:none;font-size:10px;border-radius:20px;padding:2px 8px;background:#f1f1ec;color:var(--muted)}
.find-tag.new{background:#ffe3e1;color:#a3262c}
.find-main ul{margin:0 0 8px 18px;padding:0;font-size:12.5px;line-height:1.55}
.find-check{font-size:12.5px;background:#f7f6f2;border-radius:8px;padding:7px 10px}
.find-impact b{display:block;font-size:20px;font-weight:650}
.find-card.issue .find-impact b{color:#a3262c}.find-card.opportunity .find-impact b{color:#256b4a}
.find-impact span{font-size:10.5px;color:var(--muted)}
.find-legend{display:flex;gap:12px;font-size:10px;color:var(--muted)}
.find-legend i{display:inline-block;vertical-align:middle;margin-right:5px;width:14px;border-top:1.5px dashed #6fbf8f}
@media(max-width:800px){.find-card{grid-template-columns:1fr}}

/* Usage, status, library and training additions. */
.activity-empty{font-size:12px;color:var(--muted);padding:6px 0 2px}
.daily-bar.zero>span{background:#e3e2dc}
.refresh-badge.Completed{background:#e7f4ec;color:#256b4a;border-color:#cde7d7}
.refresh-badge.Failed{background:#ffe3e1;color:#a3262c;border-color:#f3c0bd}
.refresh-badge.Unknown{background:#fff1d6;color:#8a5a06;border-color:#f1d6a2}
.recent-runs{display:flex;gap:5px;margin-top:6px}
.recent-runs i{width:12px;height:12px;border-radius:3px;background:#dedcd5}
.recent-runs i.Completed{background:var(--good)}.recent-runs i.Failed{background:var(--bad)}.recent-runs i.Unknown{background:var(--amber)}
.report-row.no-link .btn{opacity:.5;pointer-events:none}
@media(max-width:1100px){.lights{grid-template-columns:repeat(3,minmax(0,1fr))}.light-summary{grid-column:1/-1}}
@media(max-width:700px){.lights{grid-template-columns:1fr}.flip-card{height:190px}}
text.halo{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.flip-card.is-flipped .card-back{border-color:#cfcbc1;box-shadow:0 8px 24px #2b2a2614}

/* Superuser client picker: Ask AIDE's own (Client Agent/web/index.html .cp-*), in hub tokens. */
.cp-back{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:24px}
.cp-box{background:#fff;border:1px solid var(--line);border-radius:14px;width:min(460px,100%);max-height:min(560px,88vh);display:flex;flex-direction:column;min-height:0;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.cp-headrow{display:flex;align-items:center;gap:10px}
.cp-head{font-size:18px;font-weight:700;color:var(--ink)}
.cp-close{margin-left:auto;flex-shrink:0;background:#fff;color:var(--red);border:1px solid var(--red);font-size:14px;line-height:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cp-close:hover{background:var(--red);color:#fff}
.cp-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.cp-find{margin-top:14px;flex-shrink:0;padding:9px 13px;font-size:14px;background:#fafaf8;color:var(--ink);border:1px solid var(--line);border-radius:9px;outline:none}
.cp-find:focus{border-color:var(--red)}
.cp-list{margin-top:12px;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:5px}
.cp-item{text-align:left;padding:10px 13px;font-size:14px;background:#fafaf8;color:var(--ink);border:1px solid var(--line);border-radius:9px}
.cp-item:hover{border-color:var(--red);background:var(--bg)}
.cp-item.current{border-color:var(--red);font-weight:700}
.cp-none{padding:12px 2px;font-size:13px;color:var(--muted)}
/* "This card turns into a chart": a quiet subtitle, stronger on hover. */
.flip-hint{font-size:10.5px;color:#9b988f;white-space:nowrap;margin-left:8px}
.flip-card:hover .flip-hint,.flip-card:focus-visible .flip-hint{color:var(--red)}
.metric-grid.no-anim .flip-inner{transition:none}
.trend-tip b{font-weight:600}
/* The client's logo, top right: sized to the header, never stretched. */
.client-logo{display:block;max-width:100%;object-fit:contain}
@media(max-width:700px){.client-logo{transform:scale(.72);transform-origin:right center}}

/* Anomaly Detection: "Choose your metrics" (12 Oct 2026), the KPI page's picker. */
.intro-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
@media(max-width:700px){.intro-side{align-items:flex-start;margin-top:12px}}

/* KPI page fits the panel with NO scrolling (13 Oct 2026). Inside a Power BI app the content area
   is shorter than a laptop screen, and fixed 196px cards ran the third row off the bottom. The
   toolbar and notes keep their size; the grid takes what is left, in three equal rows, and the
   card text scales with that height. A tabpanel also never scrolls sideways: a card turning in
   3D briefly reaches past the panel edge, which flashed a horizontal scrollbar on "Show all
   charts". */
.layout main>[role="tabpanel"]{overflow-x:hidden}
@media(min-width:701px){
  .layout main>[role="tabpanel"]:has(.metric-grid):not(:has(.mv-grid)){display:flex;flex-direction:column;overflow:hidden}
  .layout main>[role="tabpanel"]:has(.metric-grid):not(:has(.mv-grid))>*{flex-shrink:0}
  .layout main>[role="tabpanel"]:has(.metric-grid):not(:has(.mv-grid))>.metric-grid{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);padding:2px}
  .metric-grid .flip-card{height:auto;min-height:0}
  .metric-grid .card-front.metric-card{min-height:0;padding:clamp(9px,1.6vh,16px) 18px clamp(8px,1.4vh,14px) 17px}
  .metric-grid .card-front .value{font-size:clamp(20px,3.4vh,31px);margin:clamp(3px,1vh,10px) 0 clamp(2px,.6vh,6px)}
  .metric-grid .ly-line{margin-top:clamp(1px,.4vh,5px)}
  .metric-grid .card-back{padding:clamp(6px,1vh,11px) 12px clamp(4px,.8vh,8px)}
  .kpi-toolbar{margin-bottom:clamp(8px,1.8vh,19px)}
  .layout main>[role="tabpanel"]:has(.metric-grid) .data-note{margin-top:clamp(6px,1.2vh,14px)}
}

/* Anomaly Detection fits the panel too (13 Oct 2026): the control-chart grid takes the height
   left under the heading and the traffic lights, in equal rows, and each chart shrinks with it. */
@media(min-width:701px){
  .layout main>[role="tabpanel"]:has(.ctrl-grid){display:flex;flex-direction:column;overflow:hidden}
  .layout main>[role="tabpanel"]:has(.ctrl-grid)>*{flex-shrink:0}
  .layout main>[role="tabpanel"]:has(.ctrl-grid)>.ctrl-grid{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);padding:2px}
  .ctrl-grid .ctrl-card{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:clamp(8px,1.3vh,14px) 15px clamp(7px,1.1vh,12px)}
  .ctrl-grid .ctrl-chart{flex:1 1 auto;min-height:0;height:100%;margin:clamp(3px,.8vh,8px) 0 clamp(2px,.4vh,4px)}
  .ctrl-grid .ctrl-foot{flex-shrink:0;padding-top:clamp(5px,.9vh,9px)}
  .layout main>[role="tabpanel"]:has(.ctrl-grid) .lights{margin-bottom:clamp(8px,1.6vh,18px)}
  .layout main>[role="tabpanel"]:has(.ctrl-grid) .light,.layout main>[role="tabpanel"]:has(.ctrl-grid) .light-summary{padding-top:clamp(8px,1.4vh,18px);padding-bottom:clamp(8px,1.4vh,18px)}
  .layout main>[role="tabpanel"]:has(.ctrl-grid) .legend-row{margin-top:clamp(6px,1.2vh,16px)}
  .layout main>[role="tabpanel"]:has(.ctrl-grid) .intro{margin-bottom:clamp(8px,1.6vh,20px)}
}
/* Ten metrics read as two rows of five; a third row of auto-filled columns squeezed the charts flat. */
@media(min-width:1100px){.layout main>[role="tabpanel"]:has(.ctrl-grid)>.ctrl-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* The three footer labels stay on ONE line each, so the three figures under them sit level. */
.ctrl-foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1400px){.ctrl-foot{gap:5px}.ctrl-foot span{font-size:8.5px;letter-spacing:-.1px}}
.ctrl-foot{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
/* Staff "Switch client" sits to the LEFT of the logo (14 Oct 2026), so the logo is in exactly
   the place, at exactly the size, a client sees it. Hidden for clients, so nothing moves for them. */
.client{flex-direction:row;align-items:center;gap:14px}
.client .switch-client{order:-1;margin-top:0;white-space:nowrap}

/* Find A Report: tag chips, the "i" button and the details pop-up (15 Oct 2026). */
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag-chip{border:1px solid var(--line);background:#f7f7f5;color:var(--muted);border-radius:20px;padding:1px 9px;font-size:10.5px;cursor:pointer}
.tag-chip:hover,.tag-chip:focus-visible{border-color:var(--red);color:var(--ink)}
.tag-more{font-size:10.5px;color:var(--muted);align-self:center}
.info-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);font:600 13px/1 Georgia,serif;cursor:pointer}
.info-btn:hover,.info-btn[aria-expanded=true]{border-color:var(--red);color:var(--ink)}
.report-peek{position:fixed;z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;box-shadow:0 14px 40px #0000002a;overflow:auto;font-size:12.5px}
.report-peek .peek-head{display:flex;justify-content:space-between;align-items:center}
.report-peek .peek-close{border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.report-peek h3{font-size:16px;margin:4px 0 6px}
.report-peek .peek-desc{line-height:1.55;margin:0 0 10px}
.report-peek .peek-field{margin-top:9px}
.report-peek .peek-field>span{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.report-peek .peek-field p{margin:0}
.report-peek ul{margin:0;padding-left:18px}
.report-peek .peek-foot{margin-top:12px}

/* KPI page: fifteen cards in three rows of five (15 Oct 2026). The rows read as one story each
   (what sold, what it earned, who bought it). A fifth of the panel is narrow, so every size on
   the card follows the CARD's own width (container units) as well as the window height: a
   seven-figure value has to fit a card 165px wide inside a Power BI app. */
@media(min-width:701px){
  .kpis.metric-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
  .kpis .flip-card{container-type:inline-size;border-radius:14px}
  .kpis .card-front.metric-card{padding:clamp(9px,1.5vh,15px) clamp(10px,7cqi,16px) clamp(8px,1.3vh,13px) clamp(11px,7.5cqi,16px);
    border-radius:14px;background:#fff}   /* no tinted wash (20 Oct 2026): the edge, arrow and pill carry the colour */
  .kpis .metric-top h2{font-size:clamp(11.5px,6.4cqi,14px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .kpis .flip-hint{font-size:13px;margin-left:6px;color:#b4b1a8;line-height:1}
  .kpis .value-row{gap:6px}
  .kpis .card-front .value{font-size:min(clamp(20px,3.5vh,31px),12.5cqi);white-space:nowrap;letter-spacing:-.04em;min-width:0}
  .kpis .kpi-direction{width:clamp(15px,8.5cqi,21px);height:clamp(15px,8.5cqi,21px)}
  .kpis .delta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding-right:0;font-size:clamp(10px,5cqi,11.5px)}
  .kpis .delta span{color:var(--muted);font-weight:400}
  .kpis .delta-pill{font-weight:650;border-radius:20px;padding:1px 7px;background:#f1f1ec;color:var(--muted)}
  .kpis .flip-card.good .delta-pill{background:#e7f4ec;color:#256b4a}
  .kpis .flip-card.bad .delta-pill{background:#ffe3e1;color:#a3262c}
  .kpis .ly-line{font-size:clamp(10px,4.8cqi,11px)}
  .kpis .card-chart-icon{width:15px;height:15px;right:9px;bottom:8px}
  .kpis .card-back{padding:clamp(6px,1vh,10px) clamp(7px,4.5cqi,11px) clamp(4px,.8vh,7px)}
  .kpis .trend-top h2{font-size:clamp(11px,6cqi,13px)}
  .kpis .trend-legend{font-size:8.5px;gap:7px}
  /* Label at the top, the figure in the middle, the comparison along the bottom: a tall card
     no longer leaves its lower half empty. */
  .kpis .card-front .value-row{margin-top:auto}
  .kpis .card-front .delta{margin-top:auto}
  .kpis .card-front .value{font-size:min(clamp(20px,4.4vh,38px),12.5cqi)}
  .kpis .ly-line{padding-right:20px}
}

/* A tab never shrinks below its own text (15 Oct 2026): with fourteen tabs in a short window the
   flex column squeezed two-line labels ("Anomaly Detection (dev)") into each other. The side
   menu scrolls instead. */
.tabs>.tab{flex-shrink:0}

/* Anomaly Detection (dev): a year of context on each finding (15 Oct 2026). */
.find-card{grid-template-columns:minmax(0,1fr) minmax(300px,1.15fr)}
.find-chart{width:100%;height:auto;display:block;margin:6px 0 2px;overflow:visible}
.find-legend{flex-wrap:wrap;gap:4px 12px}
.find-legend i.ty{border-top:2px solid #333330}
.find-legend i.ly{border-top:1.5px dashed #a8a59d}
.find-legend i.usual{border-top:0;height:9px;background:#f6c66d22;border:1px solid #f0d49f;width:12px}
.find-legend i.exp{border-top:0;width:9px;height:9px;border-radius:50%;border:1.8px solid #2f8a5f;background:#fff}
@media(max-width:800px){.find-card{grid-template-columns:1fr}}

/* Anomaly Detection, card layout (20 Oct 2026): a traffic light per area across the top, then
   the KPI page's flip cards, five across, in three sections. The page scrolls (three sections
   do not fit one window), so the cards have a set height rather than the KPI page's
   fit-to-window rows; the tabpanel is excluded from that rule above. */
.mv-bar{display:flex;align-items:stretch;gap:12px;margin-bottom:16px}
.mv-bar #flip-all{align-self:center;flex-shrink:0}
.mv-lights{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;min-width:0}
.mv-light{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:inherit;background:#fff;border:1px solid var(--line);border-left:4px solid var(--flat);border-radius:12px;padding:9px 11px;cursor:pointer;min-width:0}
.mv-light.alert{border-left-color:var(--bad)}.mv-light.watch{border-left-color:var(--amber)}.mv-light.normal{border-left-color:var(--good)}
.mv-light:disabled{cursor:default}
.mv-light:not(:disabled):hover{border-color:#d2cec4}
.mv-light-top{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.mv-light b{font-size:11px;font-weight:600;color:var(--muted)}
.mv-light.alert b{color:#a3262c}.mv-light.watch b{color:#8a5a06}.mv-light.normal b{color:#256b4a}
.mv-light small{font-size:10.5px;color:var(--muted);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mv-section{margin-top:22px}
.mv-section>h2{font-size:17px;margin:0 0 2px}
.mv-sub{font-size:12px;color:var(--muted);margin:0 0 10px}
.mv-group{margin-top:12px;scroll-margin-top:16px}
.mv-group h3{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 8px}
.mv-grid{grid-auto-rows:auto}
.mv-grid .flip-card{height:clamp(176px,23vh,212px)}
.mv-kicker{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);min-height:16px}
.mv-flag{font-size:9.5px;letter-spacing:.4px;border-radius:20px;padding:1px 7px;white-space:nowrap;font-weight:650}
.mv-flag.issue{background:#ffe3e1;color:#a3262c}.mv-flag.rise{background:#e7f4ec;color:#256b4a}
.trend-legend .mv-usual-key{display:inline-block;width:12px;height:8px;background:#f6c66d;opacity:.35;border-radius:2px}
@media(max-width:1100px){.mv-bar{flex-direction:column}.mv-lights{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.mv-lights{grid-template-columns:repeat(2,minmax(0,1fr))}.mv-grid .flip-card{height:190px}}