:root{--bg:#f7f8fa;--surface:#fff;--text:#202631;--muted:#687180;--line:#e4e7ed;--blue:#315ed7;--blue-soft:#edf2ff;--secondary:#8998b3;--danger:#b84235;--danger-bg:#fff4f1;--shadow:0 2px 7px #18223c04;--font:Arial,"PingFang SC","Microsoft YaHei",sans-serif;--radius:9px;color-scheme:light}
:root[data-theme=dark],:root.dark{--bg:#111215;--surface:#1a1b20;--text:#e9ebf1;--muted:#a1a7b5;--line:#2c2e36;--blue:#8aa6ff;--blue-soft:#252e46;--secondary:#a4b2cc;--danger:#f1a196;--danger-bg:#33231f;--shadow:0 2px 7px #00000018;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--bg:#111215;--surface:#1a1b20;--text:#e9ebf1;--muted:#a1a7b5;--line:#2c2e36;--blue:#8aa6ff;--blue-soft:#252e46;--secondary:#a4b2cc;--danger:#f1a196;--danger-bg:#33231f;--shadow:0 2px 7px #00000018;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{font-family:var(--font);font-size:14px;line-height:1.5;background:var(--bg);color:var(--text)}button{font:inherit;cursor:pointer;white-space:nowrap}button:focus-visible,.chart:focus-visible{outline:2px solid var(--blue);outline-offset:3px}button:active{transform:translateY(1px)}.dashboard{display:flex;flex-direction:column;gap:14px;padding:20px 28px;height:100dvh;min-height:640px;max-width:2200px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;min-height:48px;gap:16px}.heading{display:flex;align-items:center;gap:13px}.brand-mark svg{width:28px;height:28px;fill:var(--blue)}.breadcrumb{font-size:10px;color:var(--muted);margin-bottom:3px}.breadcrumb span{padding:0 8px;opacity:.6}h1{font-size:21px;line-height:1.3;letter-spacing:-.5px;margin:0;font-weight:650}.update{font-size:11px;color:var(--muted);text-align:right}.site-groups{display:grid;gap:12px}.site-panel,.kpi,.trend-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.site-panel{padding:12px 18px 14px}h2{font-weight:550;font-size:12px;margin:0;color:var(--text)}.site-panel h2{margin-bottom:9px}.site-grid{display:grid;grid-template-columns:repeat(var(--columns,9),minmax(0,1fr));gap:12px}.site-item{min-width:0;padding:0 12px;border-left:1px solid var(--line)}.site-item:first-child{padding-left:0;border-left:0}.site-name{font-size:11px;color:var(--muted);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-value{font-size:22px;font-weight:550;letter-spacing:-.5px;line-height:1.25;font-variant-numeric:tabular-nums}.site-item:hover .site-value{color:var(--blue)}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.kpi{padding:15px 18px;min-width:0}.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.kpi h2{color:var(--muted);font-size:12px;display:flex;gap:5px;align-items:center}.kpi h2>span:not(.live-dot){font-size:10px}.metric-glyph{font-size:16px;color:var(--muted);line-height:1}.kpi-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap}.value{font-size:clamp(26px,2.5vw,38px);font-weight:600;line-height:1.2;letter-spacing:-1px;font-variant-numeric:tabular-nums}.growth{font-size:11px;font-variant-numeric:tabular-nums;color:var(--blue);background:var(--blue-soft);border-radius:4px;padding:2px 5px;white-space:nowrap}.online-note{font-size:10px;color:var(--muted);display:inline-block;margin-top:4px}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--blue);display:inline-block;margin-right:3px}.trend-panel{position:relative;flex:1;min-height:180px;display:flex;flex-direction:column;padding:14px 18px 10px}.chart-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px}.chart-title{display:flex;align-items:center;gap:24px}.chart-title h2{font-size:14px}.legend{display:flex;gap:16px;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:6px;white-space:nowrap}.legend i{width:15px;height:2px;background:var(--blue);border-radius:2px}.legend i.secondary{background:var(--secondary)}.period{display:flex;gap:3px;padding:3px;border-radius:7px;background:var(--bg);border:1px solid var(--line)}.period button{height:34px;min-width:60px;padding:0 13px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:12px;transition:background .16s,color .16s}.period button[aria-pressed=true]{background:var(--surface);color:var(--blue);box-shadow:var(--shadow);font-weight:600}.period button:hover{color:var(--blue)}.chart{flex:1;min-height:120px;min-width:0;width:100%;position:relative;touch-action:pan-y}.chart svg{display:block;width:100%;height:100%;overflow:visible}.chart text{font-family:var(--font);fill:var(--muted);font-size:11px}.chart .grid{stroke:var(--line);stroke-width:.7;stroke-dasharray:2 5}.chart .primary,.chart .secondary{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}.chart .primary{stroke:var(--blue)}.chart .secondary{stroke:var(--secondary);stroke-dasharray:5 3}.crosshair{stroke:var(--muted);stroke-dasharray:3 4;opacity:.5}.point-primary{fill:var(--blue);stroke:var(--surface);stroke-width:2}.point-secondary{fill:var(--secondary);stroke:var(--surface);stroke-width:2}.chart-tip{position:absolute;z-index:2;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:10px 13px;font-size:12px;min-width:150px;box-shadow:var(--shadow)}.chart-tip strong{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-bottom:7px}.tip-row{display:flex;justify-content:space-between;gap:22px;margin-top:3px}.tip-row b{font-variant-numeric:tabular-nums}.loading{color:var(--muted);font-size:12px;grid-column:1/-1;display:grid;place-items:center;height:100%;min-height:34px}.error{padding:9px 13px;border-left:2px solid var(--danger);color:var(--danger);background:var(--danger-bg);font-size:11px;overflow-wrap:anywhere}.skip{position:absolute;left:-10000px}.skip:focus{left:12px;top:12px;background:var(--surface);padding:10px;z-index:10}
@media(min-width:1600px){.dashboard{padding:24px 36px;gap:18px}.site-panel{padding:16px 22px}.site-value{font-size:25px}.kpi{padding:20px 22px}.trend-panel{padding:20px 24px 14px}}
@media(max-width:1100px) and (min-width:761px){.dashboard{padding:16px 20px;gap:12px}.site-item{padding:0 7px}.site-name{font-size:10px}.site-value{font-size:20px}.kpi{padding:12px}.value{font-size:28px}.growth{font-size:10px}}
@media(max-width:760px){.dashboard{height:auto;min-height:100dvh;padding:18px 14px 22px;gap:14px}.page-head{align-items:center}.update{font-size:10px;max-width:118px}.breadcrumb{font-size:9px}h1{font-size:20px}.site-panel{padding:14px}.site-panel h2{font-size:12px;margin-bottom:14px}.site-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}.site-item{padding:0 8px;border:0}.site-item:first-child{padding-left:8px}.site-name{font-size:11px}.site-value{font-size:22px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:14px 12px;min-height:108px}.kpi-top{margin-bottom:12px}.kpi h2{font-size:11px}.value{font-size:28px;letter-spacing:-.7px}.kpi-bottom{align-items:flex-start;gap:7px;flex-direction:column}.growth{font-size:10px}.online-note{font-size:10px;margin-top:8px}.trend-panel{flex:none;height:330px;min-height:330px;padding:14px 12px 12px}.chart-title{display:block}.chart-title h2{font-size:13px;margin-bottom:8px}.legend{font-size:10px;gap:12px}.chart-head{align-items:flex-start;margin-bottom:12px}.period button{height:40px;min-width:49px;padding:0 11px}.chart{min-height:220px}.chart text{font-size:11px}}
@media(max-width:350px){.site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-value{font-size:22px}.value{font-size:26px}.kpi h2{font-size:10px}.metric-glyph{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}