:root { color-scheme: light dark; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; background:#f4f5f7; color:#17191c; --card:#fff; --border:#e4e7eb; --muted:#737b85; --grid:#edf0f2; --blue:#2563eb; --teal:#0f9f9a; }
@media (prefers-color-scheme: dark) { :root { background:#101214; color:#f0f2f4; --card:#181b1f; --border:#292e34; --muted:#9aa2ab; --grid:#282d33; --blue:#6d9aff; --teal:#4dd5c8; } }
* { box-sizing:border-box; } body { margin:0; } .shell { max-width:1060px; margin:0 auto; padding:42px 20px 30px; } .header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; } .eyebrow { margin:0 0 9px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.18em; } h1 { margin:0; font-size:clamp(28px,5vw,40px); letter-spacing:-.045em; line-height:1.08; } h2 { margin:0; font-size:15px; letter-spacing:-.01em; } .status { border-radius:999px; padding:8px 12px; font-size:11px; letter-spacing:.08em; font-weight:750; } .status.online { color:#176b43; background:#d9f4e5; } .status.offline { color:#9d3434; background:#fde1e1; } .status.pending { color:#765e10; background:#fff1b8; } .error { margin:-8px 0 18px; color:#a33a3a; font-size:13px; } .card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.02); } .summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:12px; } .summary-card { min-height:142px; display:flex; flex-direction:column; justify-content:space-between; } .label,.summary-caption,.section-note,.note,footer { color:var(--muted); } .label { font-size:13px; } .summary-value { display:block; font-size:clamp(30px,5vw,44px); line-height:1; letter-spacing:-.055em; font-variant-numeric:tabular-nums; } .summary-version { font-size:clamp(25px,4vw,35px); } .summary-caption { font-size:12px; } .chart-card { padding:22px 22px 15px; margin-bottom:12px; } .section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .section-note { margin:6px 0 0; font-size:12px; } .range-tabs { display:flex; gap:3px; padding:3px; border:1px solid var(--border); border-radius:8px; } .range-tab { border:0; background:transparent; color:var(--muted); padding:6px 9px; border-radius:5px; font:inherit; font-size:12px; cursor:pointer; } .range-tab.active { background:var(--border); color:inherit; font-weight:650; } .chart-legend { display:flex; gap:20px; margin:26px 0 6px; color:var(--muted); font-size:12px; } .chart-legend span { display:flex; align-items:center; gap:6px; } .chart-legend strong { color:inherit; font-variant-numeric:tabular-nums; } .legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; } .legend-dot.download { background:var(--blue); } .legend-dot.upload { background:var(--teal); } .chart-wrap { position:relative; height:280px; min-width:0; } .chart-svg { display:block; width:100%; height:100%; overflow:visible; } .chart-skeleton { position:absolute; inset:18px 0 24px; border-radius:8px; background:linear-gradient(100deg,transparent 20%,rgba(128,138,148,.08) 45%,transparent 70%); background-size:200% 100%; animation:shimmer 1.4s infinite; } .chart-wrap.loaded .chart-skeleton { display:none; } @keyframes shimmer { to { background-position:-200% 0; } } .chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:13px; } .chart-tooltip { position:absolute; z-index:2; min-width:142px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); box-shadow:0 5px 20px rgba(0,0,0,.1); pointer-events:none; font-size:11px; line-height:1.65; } .tooltip-time { color:var(--muted); margin-bottom:2px; } .tooltip-row { display:flex; justify-content:space-between; gap:14px; } .lower-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .metric { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--grid); color:var(--muted); font-size:13px; } .metric:first-of-type { margin-top:17px; } .metric strong { color:inherit; font-size:15px; font-variant-numeric:tabular-nums; text-align:right; } .note { margin:13px 0 0; font-size:11px; } footer { margin-top:18px; font-size:12px; } @media (max-width:620px) { .shell { padding:28px 15px 24px; } .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .summary-card:last-child { grid-column:1/-1; min-height:120px; } .chart-card { padding:18px 14px 12px; } .section-heading { display:block; } .range-tabs { width:max-content; margin-top:15px; } .chart-wrap { height:235px; } .lower-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .chart-skeleton { animation:none; } }