/* 5G North Cyprus: dark-first speedtest dashboard.
   Chart series colors are validated with the dataviz validator (dark vs #0e1424, light vs #ffffff). */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-2199, U+2212, U+2215, U+2248, U+2264-2265;
}

/* ---- tokens: dark is the default ---- */
:root {
  color-scheme: dark;
  --page: #070b14;
  --page-glow-1: rgba(34, 211, 238, 0.10);
  --page-glow-2: rgba(139, 92, 246, 0.10);
  --surface: #0e1424;        /* chart surface (validator reference) */
  --surface-2: #121a2e;
  --surface-hi: #18213a;
  --ink-1: #eef2fa;
  --ink-2: #aab4c8;
  --ink-3: #8691a8;
  --axis-ink: #7b86a0;
  --grid: #1b2338;
  --baseline: #2d3752;
  --border: rgba(148, 163, 200, 0.12);
  --border-strong: rgba(148, 163, 200, 0.22);
  --wash: rgba(148, 163, 200, 0.07);
  /* categorical slots (validated, dark) */
  --series-1: #0ea5c4;       /* download, 1.1.1.1, RSRP/SINR */
  --series-2: #9677f4;       /* upload, 8.8.8.8 */
  /* hero accents (decorative, brighter than the chart slots) */
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --accent-ink: #67e8f9;
  --track: #1a2238;
  --tick: #3a4664;
  /* status palette: fixed, always with icon + label */
  --good: #0ca30c;
  --good-ink: #4ade80;
  --warning: #fab219;
  --warning-ink: #fbbf24;
  --critical: #d03b3b;
  --critical-ink: #f87171;
  --band-alpha: 0.09;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --tt-bg: #1b2440;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #eef2f8;
  --page-glow-1: rgba(8, 145, 178, 0.10);
  --page-glow-2: rgba(124, 58, 237, 0.08);
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-hi: #eef2f8;
  --ink-1: #0a1020;
  --ink-2: #3d4860;
  --ink-3: #5a6580;
  --axis-ink: #6b7690;
  --grid: #e8ecf3;
  --baseline: #c3cad8;
  --border: rgba(10, 16, 32, 0.08);
  --border-strong: rgba(10, 16, 32, 0.16);
  --wash: rgba(10, 16, 32, 0.04);
  --series-1: #0891b2;
  --series-2: #7c3aed;
  --accent: #0891b2;
  --accent-2: #7c3aed;
  --accent-ink: #0e7490;
  --track: #e3e8f1;
  --tick: #b7c0d1;
  --good-ink: #08780b;
  --warning-ink: #9a6700;
  --critical-ink: #b42323;
  --band-alpha: 0.07;
  --shadow: 0 1px 2px rgba(10, 16, 32, 0.04), 0 12px 32px -12px rgba(10, 16, 32, 0.12);
  --tt-bg: #0a1020;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 22% -120px, var(--page-glow-1), transparent 70%),
    radial-gradient(700px 480px at 92% 0, var(--page-glow-2), transparent 70%),
    var(--page);
  background-repeat: no-repeat;
  color: var(--ink-1);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.page { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; }
@media (min-width: 720px) { .page { padding: 28px 32px 64px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.display, .g-num, .g-up-num, .sig-band, .sig-metrics .v, .st-v .n, .wordmark, .section-title, .spec dd {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--ink-3); font-weight: 500; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow .muted { letter-spacing: 0.04em; text-transform: none; font-size: 12px; margin-left: 6px; }
.section-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- masthead ---- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 10px; min-width: 0; }
.mark { flex: none; display: block; border-radius: 9px; box-shadow: 0 0 0 1px var(--border); }
.wordmark { display: grid; line-height: 1.1; white-space: nowrap; }
.wm-a { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-1); }
.wm-b { font: 500 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink-3); letter-spacing: 0.01em; }
.mast-right { display: flex; align-items: center; gap: 8px; flex: none; }
.status {
  margin: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.status strong { color: var(--ink-1); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good-ink); flex: none; position: relative; }
.live-dot.idle { background: var(--ink-3); }
.live-dot.stale { background: var(--warning); }
.live-dot.live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--good-ink);
  opacity: 0; animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.theme-toggle {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
}
.theme-toggle:hover { color: var(--ink-1); border-color: var(--border-strong); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun circle { fill: currentColor; stroke: none; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; fill: currentColor; stroke: none; }
@media (max-width: 420px) { .wm-a { font-size: 16px; } .wm-b { font-size: 11px; } .status { padding: 0 10px; } }
@media (max-width: 479px) { .wm-b { display: none; } }

/* ---- hero ---- */
.hero {
  margin-top: 20px; padding: 20px 16px 16px; border-radius: 28px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
@media (min-width: 720px) { .hero { margin-top: 28px; padding: 36px 40px 24px; } }
.hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; } }

.gauge-col { min-width: 0; }
.gauge-wrap { position: relative; container-type: inline-size; max-width: 560px; margin: 0 auto; }
.gauge { display: block; width: 100%; height: auto; overflow: visible; }
.gauge .g-track { fill: none; stroke: var(--track); stroke-linecap: round; }
.gauge .g-arc { fill: none; stroke-linecap: round; }
.gauge .g-arc.dl { stroke: url(#g-dl-grad); }
.gauge .gs0 { stop-color: #8b5cf6; }
.gauge .gs1 { stop-color: #22d3ee; }
.gauge .gs2 { stop-color: #67e8f9; }
:root[data-theme="light"] .gauge .gs0 { stop-color: #7c3aed; }
:root[data-theme="light"] .gauge .gs1 { stop-color: #0891b2; }
:root[data-theme="light"] .gauge .gs2 { stop-color: #06b6d4; }
.gauge .g-arc.ul { stroke: var(--accent-2); }
.gauge .g-glow { fill: none; stroke: var(--accent); stroke-linecap: round; opacity: 0.35; filter: url(#g-blur); }
:root[data-theme="light"] .gauge .g-glow { opacity: 0.18; }
.gauge .g-tick { stroke: var(--tick); stroke-width: 2; stroke-linecap: round; }
.gauge .g-tick.minor { stroke-width: 1.2; opacity: 0.7; }
.gauge .g-label { fill: var(--ink-3); font: 600 14px "Space Grotesk", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.gauge .g-cap { fill: var(--ink-1); }
.gauge .g-cap-ring { fill: var(--accent); opacity: 0.25; }
.gauge .g-rest { fill: none; stroke: var(--accent); stroke-linecap: round; opacity: 0.0; }
.gauge.empty .g-rest { animation: rest 3.2s ease-in-out infinite; }
@keyframes rest { 0%, 100% { opacity: 0.0; } 50% { opacity: 0.55; } }

.g-center { position: absolute; left: 0; right: 0; top: 34%; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.g-kicker { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: clamp(11px, 3cqw, 14px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.arrow { font-family: system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.arrow.dl { color: var(--accent); }
.arrow.ul { color: var(--accent-2); }
.g-num { font-size: 25cqw; line-height: 0.92; font-weight: 700; letter-spacing: -0.045em; color: var(--ink-1); margin-top: 0.06em; }
.g-unit { font-size: clamp(13px, 3.8cqw, 18px); font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.g-empty { display: grid; gap: 10px; justify-items: center; margin-top: 6cqw; }
.g-empty-title { font: 700 clamp(22px, 6.6cqw, 34px)/1.1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--ink-1); }
.g-empty-sub { font-size: 13px; color: var(--ink-2); padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); }
.g-up {
  position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; background: var(--surface-hi); border: 1px solid var(--border);
}
.g-up-num { font-size: clamp(20px, 5.4cqw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.g-up-unit { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.g-meta { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-meta .part { white-space: nowrap; }
.g-meta .sep { color: var(--ink-3); margin: 0 6px; }

/* signal */
.signal-col { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 860px) { .signal-col { padding-left: 40px; border-left: 1px solid var(--border); } }
@media (max-width: 859px) { .signal-col { padding-top: 20px; border-top: 1px solid var(--border); } }
.sig-top { display: flex; align-items: center; gap: 18px; }
.bars { width: 64px; height: 52px; flex: none; }
.bars rect { fill: var(--track); }
.bars rect.on { fill: var(--accent); }
.bars.q2 rect.on, .bars.q1 rect.on { fill: var(--warning); }
.sig-band { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.sig-sub { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.sig-metrics { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sig-metrics > div { padding: 12px 14px; border-radius: 16px; background: var(--wash); border: 1px solid var(--border); min-width: 0; }
.sig-metrics dt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-2); }
.sig-metrics dd { margin: 0; }
.sig-metrics .sv { display: flex; align-items: baseline; gap: 4px; }
.sig-metrics .v { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.sig-metrics .u { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.sig-metrics .sq { min-height: 20px; margin-top: 2px; }
.sig-meta { margin: 0; font-size: 13px; color: var(--ink-3); }

/* stat strip */
.strip {
  list-style: none; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
}
@media (min-width: 640px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .strip { margin-top: 28px; padding-top: 20px; } }
.strip li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (min-width: 640px) { .strip li + li { border-left: 1px solid var(--border); padding-left: 18px; } }
.st-v { display: flex; align-items: baseline; gap: 3px; }
.st-v .n { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.st-v .u { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.st-l { font-size: 13px; color: var(--ink-2); }
.st-t { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- status pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--wash); color: var(--ink-2); border: 1px solid var(--border);
}
.pill:not(.good):not(.warning):not(.critical) { padding-left: 10px; font-weight: 500; }
.pill svg { width: 14px; height: 14px; flex: none; }
.pill.good { color: var(--good-ink); }
.pill.warning { color: var(--warning-ink); }
.pill.critical { color: var(--critical-ink); }

/* ---- network quality ---- */
.quality { margin-top: 28px; }
.quality-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nq-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nq-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nq-list li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); min-width: 0;
}
.nq-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.nq-icon .fill { fill: var(--ink-2); stroke: none; }
.nq-name { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.footnote { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.footnote summary { cursor: pointer; color: var(--ink-3); width: max-content; }
.footnote summary:hover { color: var(--ink-1); }
.footnote p { margin: 8px 0; }
.rules { border-collapse: collapse; font-size: 13px; min-width: 520px; }
.rules th, .rules td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--grid); vertical-align: top; }
.rules thead th { color: var(--ink-3); font-weight: 600; }

/* ---- history ---- */
.history { margin-top: 48px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.seg button {
  font: 600 14px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: 0.02em; color: var(--ink-2);
  padding: 9px 16px; min-width: 52px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
}
.seg button:hover { color: var(--ink-1); }
.seg button[aria-checked="true"] { background: var(--ink-1); color: var(--page); }

.charts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charts .wide { grid-column: 1 / -1; } }
.card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 16px 12px; min-width: 0; transition: opacity 0.2s; }
@media (min-width: 720px) { .card { padding: 22px 22px 14px; } }
.card.loading { opacity: 0.55; }
.card.empty { padding-bottom: 18px; }
.c-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.c-title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.c-sub { margin: 0; font-size: 13px; color: var(--ink-3); }
.legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--ink-3); }
.key.s1 { background: var(--series-1); }
.key.s2 { background: var(--series-2); }
.key.loss { background: none; width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--critical); }
.sub-title { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 2px; }
.sub-val { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.c-body { margin-top: 6px; }
.chart-box { width: 100%; }
.c-empty { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border-strong); color: var(--ink-2); font-size: 14px; }
.c-empty svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; }

/* svg chart marks */
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-svg:focus { outline: none; }
.chart-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.chart-svg text { fill: var(--axis-ink); font-size: 11px; font-variant-numeric: tabular-nums; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.chart-svg .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart-svg .base-line { stroke: var(--baseline); stroke-width: 1; }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line.s1 { stroke: var(--series-1); }
.chart-svg .line.s2 { stroke: var(--series-2); }
.chart-svg .area.s1 { fill: var(--series-1); opacity: 0.12; }
.chart-svg .area.s2 { fill: var(--series-2); opacity: 0.10; }
.chart-svg .dot { stroke: var(--surface); stroke-width: 2; }
.chart-svg .dot.s1 { fill: var(--series-1); }
.chart-svg .dot.s2 { fill: var(--series-2); }
.chart-svg .dot.faint { opacity: 0.85; }
.chart-svg .end-label { fill: var(--ink-1); font-weight: 600; font-size: 12px; }
.chart-svg .band.good { fill: var(--good); opacity: var(--band-alpha); }
.chart-svg .band.warning { fill: var(--warning); opacity: var(--band-alpha); }
.chart-svg .band.critical { fill: var(--critical); opacity: var(--band-alpha); }
.chart-svg .band-label { fill: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.chart-svg .crosshair { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .loss-mark { fill: var(--critical); stroke: var(--surface); stroke-width: 1.5; }
.chart-svg .lane-label { fill: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.chart-svg .lane-line { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-svg .whisker { stroke: var(--ink-3); stroke-width: 1.5; }
.chart-svg .box.s1 { fill: var(--series-1); opacity: 0.25; }
.chart-svg .box.s2 { fill: var(--series-2); opacity: 0.25; }
.chart-svg .median { stroke: var(--ink-1); stroke-width: 2.5; stroke-linecap: round; }
.chart-svg .hit { fill: transparent; }

.table-view { margin-top: 8px; font-size: 13px; }
.table-view summary { cursor: pointer; color: var(--ink-3); width: max-content; padding: 4px 0; }
.table-view summary:hover { color: var(--ink-1); }
.table-wrap { overflow-x: auto; max-height: 320px; overflow-y: auto; margin-top: 6px; -webkit-overflow-scrolling: touch; }
.table-wrap table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { text-align: right; padding: 5px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.table-wrap th:first-child, .table-wrap td:first-child { text-align: left; padding-left: 0; }
.table-wrap thead th { position: sticky; top: 0; background: var(--surface); color: var(--ink-3); font-weight: 600; }
.footnote .table-wrap th, .footnote .table-wrap td { text-align: left; white-space: normal; }

/* ---- radio spec grid ---- */
.radio { margin-top: 48px; }
.radio-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.radio-sub { margin: 0; font-size: 13px; color: var(--ink-3); }
.spec {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--border); gap: 1px;
}
@media (min-width: 640px) { .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec > div { background: var(--surface); padding: 14px 16px; min-width: 0; }
.spec dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.spec dd .u { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 3px; font-family: system-ui, sans-serif; }
.spec dd.na { color: var(--ink-3); font-weight: 500; font-size: 16px; }
.spec .grp { grid-column: 1 / -1; background: var(--surface-2); padding: 8px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }

/* ---- footer ---- */
.about { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--ink-2); font-size: 14px; max-width: 760px; }
.about p { margin: 10px 0 0; }

/* ---- tooltip ---- */
.tooltip {
  position: fixed; z-index: 10; pointer-events: none; min-width: 140px; padding: 8px 10px; border-radius: 10px;
  background: var(--tt-bg); color: #eef2fa; font-size: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 200, 0.18); font-variant-numeric: tabular-nums;
}
.tt-time { color: #aab4c8; margin-bottom: 4px; }
.tt-row { display: flex; align-items: center; gap: 6px; }
.tt-val { font-weight: 700; }
.tt-name { color: #aab4c8; }
.tooltip .key.s1 { background: #22d3ee; }
.tooltip .key.s2 { background: #a78bfa; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .gauge .g-arc, .chart-svg .line { stroke: CanvasText; }
}