:root { color-scheme: light; --bg:#f6f7f9; --panel:#fff; --line:#d9dde5; --text:#17202a; --muted:#5e6a78; --accent:#0f766e; --warn:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; }
.topbar { display:flex; align-items:center; gap:24px; padding:12px 24px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1; }
.brand { font-weight:800; color:var(--text); }
.topbar nav { display:flex; gap:16px; flex:1; }
.layout { max-width:1180px; margin:0 auto; padding:24px; }
.toolbar { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:16px; }
h1 { font-size:28px; margin:0 0 8px; } h2 { font-size:18px; margin:0 0 14px; }
.panel,.auth-panel,.metric { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; }
.auth-panel { max-width:420px; margin:10vh auto; }
.grid { display:grid; gap:16px; } .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:16px; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.metric span { display:block; color:var(--muted); font-size:13px; } .metric strong { display:block; font-size:24px; margin-top:4px; }
.metric.live { border-color:rgba(15,118,110,.45); box-shadow:inset 0 0 0 1px rgba(15,118,110,.08); }
form { display:grid; gap:12px; } label { display:grid; gap:6px; color:var(--muted); font-size:13px; }
.filters { display:grid; grid-template-columns:150px 150px 150px auto; align-items:end; gap:10px; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:9px 10px; font:inherit; color:var(--text); background:#fff; }
button { border:0; background:var(--accent); color:#fff; border-radius:6px; padding:9px 12px; font-weight:700; cursor:pointer; }
table { width:100%; border-collapse:collapse; font-size:14px; } th,td { border-bottom:1px solid var(--line); padding:9px; text-align:left; } th { color:var(--muted); font-weight:700; }
.num { text-align:right; } .error { color:var(--warn); } code { background:#eef2f7; padding:2px 5px; border-radius:4px; }
.facts { display:grid; grid-template-columns:180px 1fr; gap:8px 16px; } .facts dt { color:var(--muted); }
.panel-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:10px; }
.panel-heading h2 { margin:0; }
.panel-heading span { color:var(--muted); font-size:13px; text-align:right; }
.chart-legend { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13px; margin-bottom:14px; }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-swatch { width:12px; height:12px; border-radius:3px; background:var(--accent); display:inline-block; }
.legend-line { width:18px; height:0; border-top:2px solid var(--line); display:inline-block; }
.bars { min-height:210px; display:flex; align-items:end; gap:6px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 8px 28px; position:relative; }
.bar-wrap { flex:1; min-width:18px; height:170px; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:4px; position:relative; }
.bar { width:100%; min-height:2px; max-width:38px; background:var(--accent); opacity:.78; border-radius:4px 4px 0 0; }
.bar-value { color:var(--muted); font-size:11px; line-height:1; min-height:12px; }
.bar-label { position:absolute; bottom:-22px; color:var(--muted); font-size:11px; white-space:nowrap; }
.empty-chart { color:var(--muted); margin:auto; }
.live-strip { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin:-4px 0 16px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.12); }
.realtime-filters { grid-template-columns:minmax(180px,240px) auto; }
@media (max-width: 760px) { .grid.two,.grid.three { grid-template-columns:1fr; } .topbar,.toolbar { flex-wrap:wrap; } .layout { padding:16px; } .filters { grid-template-columns:1fr 1fr; width:100%; } .realtime-filters { grid-template-columns:1fr; } }