:root{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;color-scheme:dark;--bg:#0b121c;--panel:#131e2b;--panel2:#182534;--border:#273341;--text:#f1f5f9;--muted:#9cabbc;--fw:#ffad66;--rd:#4cd8c6;--unknown:#9a9fae;--shadow:0 8px 28px #00000010}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}[data-theme=light]{color-scheme:light;--bg:#edf2f7;--panel:#fff;--panel2:#f3f6fa;--border:#d7e0e9;--text:#182739;--muted:#536578;--fw:#bb560c;--rd:#087e75;--unknown:#777d8c;--shadow:0 8px 28px #172c4610}button,select{font:inherit}button,select{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid var(--rd);outline-offset:4px}button{color:var(--text)}.shell{max-width:1680px;margin:auto;padding:0 38px}.topbar{height:114px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{display:flex;gap:17px;align-items:center}.brand img{object-fit:contain;border-radius:5px;opacity:.84}.eyebrow{font-size:.71rem;letter-spacing:.16em;font-weight:650;color:var(--muted)}h1{font-size:1.65rem;margin:4px 0 0;font-weight:650;letter-spacing:-.05em}.accent{color:var(--fw)}.header-right{display:flex;align-items:center;gap:10px}.clock{text-align:right;margin-right:20px;display:grid;gap:4px}.clock strong{font-size:1.35rem;font-variant-numeric:tabular-nums;letter-spacing:.03em}.clock span{font-size:.75rem;color:var(--muted)}.icon-btn{border:1px solid var(--border);background:var(--panel);width:41px;height:41px;border-radius:8px;font-size:1.35rem}.icon-btn:hover{background:var(--panel2)}.overview-title{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:29px 0 23px}h2{font-size:1.25rem;font-weight:550;margin:7px 0 0;letter-spacing:-.025em}.data-state{display:flex;align-items:flex-end;flex-direction:column;gap:7px;font-size:.75rem;color:var(--muted)}.demo-badge{font-size:.65rem;font-weight:750;letter-spacing:.13em;color:var(--fw);border:1px solid color-mix(in srgb,var(--fw) 30%,transparent);background:color-mix(in srgb,var(--fw) 8%,transparent);padding:6px 9px;border-radius:5px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:21px 23px;box-shadow:var(--shadow)}.kpi:first-child{border-top:2px solid var(--fw)}.kpi-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.81rem}.kpi-symbol{color:var(--fw);font-size:1.1rem;opacity:.8}.kpi-number{font-size:2.65rem;letter-spacing:-.055em;font-weight:600;line-height:1.2;margin:12px 0 3px;font-variant-numeric:tabular-nums}.kpi-number small{font-size:.75rem;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:10px}.kpi-breakdown{display:flex;gap:18px;font-size:.78rem;margin-top:17px;padding-top:14px;border-top:1px solid var(--border)}.kpi-breakdown span{display:flex;align-items:center;gap:6px}.kpi-breakdown b{font-weight:600}.fw{background:var(--fw)}.rd{background:var(--rd)}.unknown{background:var(--unknown)}i.fw,i.rd,i.unknown{display:inline-block;width:7px;height:7px;border-radius:2px;flex-shrink:0}.section-line{display:flex;justify-content:space-between;align-items:center;margin:27px 0 17px;gap:14px}.section-label{display:flex;align-items:center;gap:11px}.section-label h2{margin:0;font-size:1rem}.section-label>span:last-child{color:var(--muted);font-size:.78rem;border-left:1px solid var(--border);padding-left:13px}.live-line{height:16px;width:3px;background:var(--rd);border-radius:2px}.segmented{display:flex;padding:4px;border-radius:8px;background:var(--panel);border:1px solid var(--border);gap:3px}.segmented button{border:0;background:transparent;border-radius:5px;color:var(--muted);font-size:.78rem;padding:8px 17px}.segmented button.selected{background:var(--panel2);color:var(--text);box-shadow:0 1px 3px #0002}.dashboard-grid{display:grid;grid-template-columns:1.08fr 1fr .98fr;gap:17px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px;box-shadow:var(--shadow);min-width:0;position:relative;overflow:hidden}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}h3{font-weight:550;font-size:1rem;letter-spacing:-.02em;margin:7px 0 0}.chip{font-size:.72rem;color:var(--muted);background:var(--panel2);border:1px solid var(--border);padding:5px 9px;border-radius:5px;white-space:nowrap}.trend-panel{grid-column:span 2}.legend{display:flex;gap:22px;align-items:center;margin:23px 0 12px;font-size:.72rem;color:var(--muted)}.legend span{display:flex;align-items:center;gap:7px}.legend span:last-child{margin-left:auto}.trend{display:flex;align-items:flex-end;gap:7px;height:156px;border-bottom:1px solid var(--border);background:repeating-linear-gradient(to top,transparent 0,transparent 38px,var(--border) 39px,transparent 40px);padding:0 4px}.trend-column{height:100%;flex:1;display:flex;align-items:flex-end;gap:2px;position:relative}.trend-column>span{width:50%;border-radius:3px 3px 0 0;min-height:0;opacity:.9}.trend-column:hover>span{opacity:1}.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:.67rem;padding-top:10px}.distribution{display:flex;align-items:center;justify-content:center;gap:25px;min-height:229px}.donut{width:156px;height:156px;border-radius:50%;background:var(--border);display:grid;place-items:center;flex-shrink:0;transform:rotate(-90deg)}.donut>div{background:var(--panel);width:126px;height:126px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(90deg)}.donut strong{font-size:1.8rem;font-weight:600;letter-spacing:-.05em}.donut span{font-size:.72rem;color:var(--muted);margin-top:4px}.distribution-list{display:grid;gap:23px}.split-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.73rem;white-space:nowrap}.split-count{font-size:1.35rem;margin-top:5px;font-weight:550}.split-count small{font-size:.75rem;color:var(--muted);font-weight:400;margin-left:9px}select{background:var(--panel2);border:1px solid var(--border);border-radius:5px;padding:6px 8px;color:var(--muted);font-size:.72rem;max-width:145px}.watermark{position:absolute;width:230px;right:20px;top:110px;opacity:.045;filter:grayscale(1);pointer-events:none}.bars{margin-top:20px;position:relative;z-index:1;min-height:244px;max-height:310px;overflow:auto}.bar-row{display:grid;grid-template-columns:105px 1fr 35px;gap:12px;align-items:center;margin:0 0 15px;font-size:.78rem}.bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:7px;border-radius:4px;background:var(--panel2);overflow:hidden}.bar-fill{height:100%;background:var(--rd);border-radius:4px;opacity:.8}.bar-row:first-child .bar-fill{opacity:1}.bar-value{text-align:right;font-variant-numeric:tabular-nums}.panel-foot{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:15px;margin-top:15px;font-size:.65rem;color:var(--muted);position:relative}.keywords{margin-top:13px;min-height:251px}.keyword-row{display:grid;grid-template-columns:25px 1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);font-size:.8rem}.keyword-row:last-child{border:0}.rank{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}.keyword-track{height:3px;width:100%;background:var(--panel2);margin-top:7px}.keyword-track span{display:block;height:100%;background:var(--fw);opacity:.6}.keyword-row b{font-weight:550;font-variant-numeric:tabular-nums}.active-list{margin-top:17px;min-height:247px;max-height:310px;overflow:auto}.active-item{display:flex;gap:12px;border-bottom:1px solid var(--border);padding:13px 0;align-items:flex-start}.active-item:last-child{border:0}.active-marker{width:31px;height:31px;background:var(--panel2);display:grid;place-items:center;border-radius:6px;font-size:.65rem;color:var(--fw);font-weight:600;flex-shrink:0}.active-marker.rd-text{color:var(--rd)}.active-info{flex:1}.active-info strong{font-size:.79rem;font-weight:550}.active-info span{display:block;font-size:.72rem;color:var(--muted);margin-top:5px}.active-time{font-size:.68rem;color:var(--muted);white-space:nowrap;padding-top:3px}.analysis-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.analysis-card{display:flex;gap:18px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:20px 24px;background:var(--panel)}.mini-icon{font-size:1.55rem;color:var(--muted);padding-right:19px;border-right:1px solid var(--border)}.analysis-card div{display:grid;gap:5px}.analysis-card div>span{font-size:.75rem;color:var(--muted)}.analysis-card strong{font-size:1.25rem;font-weight:550;letter-spacing:-.025em}.analysis-card small{font-size:.66rem;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:.65rem;color:var(--muted)}footer b{letter-spacing:.13em;font-weight:600}.notice{border:1px solid var(--fw);border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:.85rem}.empty{color:var(--muted);font-size:.85rem;padding:35px 0}.loading{padding:40px}.signage .shell{max-width:none}.signage .overview-title{padding:15px 0}.signage .topbar{height:85px}.signage footer{padding:15px 0}.signage .panel{padding:18px}.signage .section-line{margin-top:18px}.signage .kpi{padding:17px 22px}
@media(min-width:1700px){.signage{font-size:18px}.signage .trend{height:200px}.signage .bars,.signage .keywords,.signage .active-list{min-height:300px}}
@media(max-width:1250px){.shell{padding:0 24px}.distribution{gap:15px;flex-direction:column;padding-top:20px}.distribution-list{display:flex;gap:25px}.donut{width:137px;height:137px}.donut>div{width:111px;height:111px}.trend{height:185px}.kpi-breakdown{gap:10px;flex-wrap:wrap}.bar-row{grid-template-columns:85px 1fr 30px;gap:7px}.panel{padding:18px}.panel-foot{flex-wrap:wrap}.distribution-panel .panel-title h3{font-size:.92rem}}
@media(max-width:1000px){.dashboard-grid{grid-template-columns:1fr 1fr}.trend-panel{grid-column:span 2}.distribution-panel{grid-column:2;grid-row:2}.geography-panel{grid-column:1;grid-row:2}.distribution{flex-direction:row;height:270px}.distribution-list{display:grid}.analysis-grid{gap:12px}.analysis-card{padding:17px 14px;gap:10px}.mini-icon{padding-right:10px}.kpi{padding:17px}.kpi-number{font-size:2.2rem}}
@media(max-width:700px){.shell{padding:0 16px}.topbar{height:94px}.clock{display:none}.brand{gap:10px}.brand img{width:39px;height:39px}h1{font-size:1.35rem}.brand .eyebrow{font-size:.57rem}.header-right{gap:5px}.icon-btn{width:35px;height:37px}.overview-title{align-items:flex-start;padding:24px 0 18px}.overview-title h2{font-size:1rem;max-width:180px;line-height:1.4}.overview-title .eyebrow{font-size:.58rem}.data-state{max-width:145px;text-align:right;font-size:.65rem}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}.kpi-breakdown{font-size:.69rem;margin-top:10px;padding-top:10px;gap:8px}.kpi{padding:15px}.kpi-number{font-size:2.1rem}.kpi-number small{display:none}.section-line{align-items:flex-start;flex-direction:column}.segmented{width:100%}.segmented button{flex:1}.dashboard-grid{grid-template-columns:1fr;gap:12px}.dashboard-grid>.panel{grid-column:1;grid-row:auto}.trend{height:150px;gap:3px}.distribution{height:auto;min-height:195px;flex-direction:row}.donut{width:156px;height:156px}.donut>div{width:126px;height:126px}.analysis-grid{grid-template-columns:1fr}.analysis-card{padding:18px 23px}.analysis-card small{font-size:.73rem}.bar-row{grid-template-columns:110px 1fr 35px}.bars,.keywords,.active-list{min-height:0}.legend{gap:12px;font-size:.66rem}.legend span:last-child{display:none}footer{flex-wrap:wrap;font-size:.65rem;gap:12px}.panel-foot{font-size:.69rem}.eyebrow{font-size:.67rem}.clock span{font-size:.75rem}.keyword-row,.bar-row,.active-info strong{font-size:.88rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(min-width:1100px) and (min-height:720px){body:is(.signage,[data-density=screen]) .shell{height:100dvh;display:flex;flex-direction:column}:is(.signage,[data-density=screen]) .topbar{height:76px;flex-shrink:0}:is(.signage,[data-density=screen]) main{flex:1;display:flex;flex-direction:column;min-height:0}:is(.signage,[data-density=screen]) .overview-title{padding:16px 0}:is(.signage,[data-density=screen]) .overview-title h2{font-size:1.1rem}:is(.signage,[data-density=screen]) .kpi{padding:13px 20px}:is(.signage,[data-density=screen]) .kpi-number{font-size:2.25rem;margin-top:6px}:is(.signage,[data-density=screen]) .kpi-breakdown{padding-top:9px;margin-top:9px}:is(.signage,[data-density=screen]) .section-line{margin:14px 0 12px}:is(.signage,[data-density=screen]) .dashboard-grid{flex:1;min-height:0;grid-template-rows:minmax(180px,1fr) minmax(230px,1.25fr) 84px}:is(.signage,[data-density=screen]) .panel{display:flex;flex-direction:column;padding:14px 18px}:is(.signage,[data-density=screen]) .trend{flex:1;min-height:0;height:auto}:is(.signage,[data-density=screen]) .legend{margin:14px 0 10px}:is(.signage,[data-density=screen]) .distribution{flex:1;min-height:0}:is(.signage,[data-density=screen]) .bars,:is(.signage,[data-density=screen]) .keywords,:is(.signage,[data-density=screen]) .active-list{min-height:0;max-height:none;overflow:auto;flex:1;margin-top:12px}:is(.signage,[data-density=screen]) .keyword-row{padding:9px 0}:is(.signage,[data-density=screen]) .panel-foot{padding-top:10px;margin-top:10px}:is(.signage,[data-density=screen]) .analysis-card{padding:10px 20px}:is(.signage,[data-density=screen]) footer{padding:12px 0;flex-shrink:0}:is(.signage,[data-density=screen]) .analysis-grid{min-height:0}}
@media(min-width:1100px) and (min-height:720px){:is(.signage,[data-density=screen]) .bar-row{margin-bottom:10px}:is(.signage,[data-density=screen]) .keyword-row{padding:6px 0}:is(.signage,[data-density=screen]) .keyword-track{margin-top:4px}:is(.signage,[data-density=screen]) .active-item{padding:9px 0}:is(.signage,[data-density=screen]) .active-info span{margin-top:3px}}

[hidden]{display:none!important}.quality-strip{display:flex;flex-wrap:wrap;gap:8px 24px;padding:13px 0 0;color:var(--muted);font-size:.76rem}.quality-strip span:first-child{color:var(--fw)}.mapping-note{color:var(--fw);font-size:.75rem;margin:12px 0 0}.keywords-panel .mapping-note:not([hidden])+.keywords{min-height:0}.signage .quality-strip{padding-top:9px;font-size:.7rem}@media(max-width:700px){.quality-strip{flex-direction:column;gap:7px;font-size:.78rem}.legend{flex-wrap:wrap}.active-time{white-space:normal}}

.keyword-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.keywords{max-height:310px;overflow:auto}.keyword-controls select{max-width:115px}.keywords-panel .panel-foot{flex-wrap:wrap}@media(max-width:700px){.keyword-controls{gap:5px}.keyword-controls select{max-width:105px}}

/* Density changes spacing and chart size; figures retain readable font sizes. */
body:is([data-density=compact],[data-density=screen]) .shell{max-width:none;padding:0 24px}
body:is([data-density=compact],[data-density=screen]) .topbar{height:68px}
body:is([data-density=compact],[data-density=screen]) .overview-title{padding:10px 0}
body:is([data-density=compact],[data-density=screen]) .overview-title h2{font-size:1.05rem;margin-top:3px}
body:is([data-density=compact],[data-density=screen]) .kpi{padding:11px 16px}
body:is([data-density=compact],[data-density=screen]) .kpi-number{font-size:2rem;margin:5px 0 0}
body:is([data-density=compact],[data-density=screen]) .kpi-breakdown{margin-top:7px;padding-top:7px;flex-wrap:wrap;gap:5px 14px}
body:is([data-density=compact],[data-density=screen]) .quality-strip{padding-top:7px;gap:5px 18px}
body:is([data-density=compact],[data-density=screen]) .section-line{margin:10px 0}
body:is([data-density=compact],[data-density=screen]) .dashboard-grid{gap:10px}
body:is([data-density=compact],[data-density=screen]) .panel{padding:12px 16px}
body:is([data-density=compact],[data-density=screen]) .legend{margin:10px 0 8px}
body:is([data-density=compact],[data-density=screen]) .trend{height:110px}
body:is([data-density=compact],[data-density=screen]) .distribution{min-height:150px;gap:20px}
body:is([data-density=compact],[data-density=screen]) .donut{width:120px;height:120px}
body:is([data-density=compact],[data-density=screen]) .donut>div{width:96px;height:96px}
body:is([data-density=compact],[data-density=screen]) .distribution-list{gap:10px}
body:is([data-density=compact],[data-density=screen]) .bars,
body:is([data-density=compact],[data-density=screen]) .keywords,
body:is([data-density=compact],[data-density=screen]) .active-list{min-height:0;max-height:220px;margin-top:10px}
body:is([data-density=compact],[data-density=screen]) .bar-row{margin-bottom:10px}
body:is([data-density=compact],[data-density=screen]) .keyword-row{padding:7px 0}
body:is([data-density=compact],[data-density=screen]) .active-item{padding:8px 0}
body:is([data-density=compact],[data-density=screen]) .panel-foot{margin-top:8px;padding-top:8px}
body:is([data-density=compact],[data-density=screen]) .analysis-card{padding:10px 16px}
body:is([data-density=compact],[data-density=screen]) footer{padding:10px 0}
@media(min-width:1100px) and (min-height:720px){
 body[data-density=screen] .dashboard-grid{grid-template-rows:minmax(170px,1fr) minmax(190px,1.2fr) 80px}
 body[data-density=screen] .trend{height:auto;min-height:0}
 body[data-density=screen] .distribution{min-height:0}
 body[data-density=screen] .bars,body[data-density=screen] .keywords,body[data-density=screen] .active-list{max-height:none;min-height:0}
}
@media(max-width:700px){
 .topbar{flex-wrap:wrap;height:auto!important;padding:12px 0;gap:12px}
 .header-right{flex-wrap:wrap}.clock{display:none}
 body:is([data-density=compact],[data-density=screen]) .shell{padding:0 12px}
}

/* Keep the title outside the chart's shrinkable, scrollable content area. */
body .distribution-panel{display:flex;flex-direction:column;min-height:0}
body .distribution-panel .panel-title{flex:0 0 auto}
body .distribution-panel .distribution{
 display:grid;grid-template-columns:minmax(80px,120px) minmax(0,1fr);
 align-items:start;align-content:start;justify-content:normal;
 gap:14px;flex:1 1 auto;min-height:0;height:auto;
 margin-top:14px;padding:0;overflow:auto;
}
body .distribution-panel .donut{width:100%;max-width:120px;height:auto;aspect-ratio:1;transform:none}
body .distribution-panel .donut>div{width:80%;height:80%;transform:none}
body .distribution-panel .distribution-list{display:grid;min-width:0;gap:10px}
body .distribution-panel .split-label{white-space:normal;overflow-wrap:anywhere}
body .distribution-panel .split-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;font-size:1.2rem}
body .distribution-panel .split-count small{margin-left:0}
body .distribution-panel .donut strong{font-size:1.5rem}

/* Fit rows to the remaining viewport instead of enforcing chart minimum heights. */
@media(min-width:1100px) and (min-height:720px){
 body:is(.signage,[data-density=screen]) .dashboard-grid{grid-template-rows:minmax(0,1fr) minmax(0,1.2fr) 84px}
 body:is(.signage,[data-density=screen]) .dashboard-grid>.panel{min-height:0}
 body:is(.signage,[data-density=screen]) .panel-title,
 body:is(.signage,[data-density=screen]) .panel-foot{flex-shrink:0}
 body:is(.signage,[data-density=screen]) .distribution{min-height:0}
}

/* Title and legend share the left column; the complete donut occupies the right. */
body .dashboard-grid>.distribution-panel{display:grid;grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:auto minmax(0,1fr);gap:10px 16px;align-content:start}
body .distribution-panel .panel-title{grid-column:1;grid-row:1;min-width:0}
body .distribution-panel .distribution{display:contents}
body .distribution-panel .distribution-list{grid-column:1;grid-row:2;align-self:start;gap:8px}
body .distribution-panel .donut{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;width:120px;height:120px;max-width:100%;aspect-ratio:1}
@media(min-width:1100px) and (max-height:820px){
 body:is(.signage,[data-density=screen]) .distribution-panel{grid-template-columns:minmax(0,1fr) 96px;gap:6px 12px}
 body:is(.signage,[data-density=screen]) .distribution-panel .donut{width:96px;height:96px}
 body:is(.signage,[data-density=screen]) .distribution-panel .distribution-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 body:is(.signage,[data-density=screen]) .distribution-panel .split-count{font-size:1rem;margin-top:2px}
 body:is(.signage,[data-density=screen]) .distribution-panel .eyebrow{display:none}
 body:is(.signage,[data-density=screen]) .distribution-panel h3{margin-top:0}
}