/* ============================================
   SPEEDY — Complete Stylesheet
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.4s ease, color 0.4s ease;
}

/* ============================================
   12 THEMES
   ============================================ */

[data-theme="dark"] {
    --bg-primary: #0a0e17; --bg-secondary: #131a2b;
    --bg-card: rgba(19,26,43,0.85); --bg-glass: rgba(19,26,43,0.7);
    --surface-border: rgba(255,255,255,0.06); --surface-shadow: 0 4px 24px rgba(0,0,0,0.4);
    --text-primary: #e8ecf4; --text-secondary: #7a8ba7; --text-accent: #00d4ff;
    --accent-primary: #00d4ff; --accent-secondary: #7c3aed; --accent-hover: #33ddff;
    --accent-ping: #fbbf24; --accent-download: #00d4ff; --accent-upload: #a855f7;
    --accent-jitter: #f472b6; --accent-loss: #ef4444; --accent-bufferbloat: #fb923c;
    --accent-ttfb: #06b6d4; --accent-consistency: #22c55e; --accent-grade: #fbbf24;
    --gauge-bg: rgba(255,255,255,0.06); --gauge-fill-start: #00d4ff; --gauge-fill-end: #7c3aed;
    --gauge-needle: #00d4ff; --gauge-glow: rgba(0,212,255,0.3);
    --gauge-tick: rgba(255,255,255,0.15); --gauge-label: rgba(255,255,255,0.5);
    --btn-bg: linear-gradient(135deg,#00d4ff,#7c3aed); --btn-text: #fff;
    --header-bg: rgba(10,14,23,0.85); --history-bg: #0f1520;
    --scrollbar-track: #131a2b; --scrollbar-thumb: #2a3550;
    --bg-gradient: radial-gradient(ellipse at 20% 50%,rgba(0,212,255,0.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,0.08) 0%,transparent 50%),linear-gradient(180deg,#0a0e17 0%,#0f1520 100%);
}
[data-theme="light"] {
    --bg-primary: #f0f2f5; --bg-secondary: #ffffff;
    --bg-card: rgba(255,255,255,0.95); --bg-glass: rgba(255,255,255,0.8);
    --surface-border: rgba(0,0,0,0.08); --surface-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --text-primary: #1a1a2e; --text-secondary: #6b7280; --text-accent: #2563eb;
    --accent-primary: #2563eb; --accent-secondary: #7c3aed; --accent-hover: #3b82f6;
    --accent-ping: #f59e0b; --accent-download: #2563eb; --accent-upload: #7c3aed;
    --accent-jitter: #ec4899; --accent-loss: #dc2626; --accent-bufferbloat: #ea580c;
    --accent-ttfb: #0891b2; --accent-consistency: #16a34a; --accent-grade: #f59e0b;
    --gauge-bg: rgba(0,0,0,0.06); --gauge-fill-start: #2563eb; --gauge-fill-end: #06b6d4;
    --gauge-needle: #2563eb; --gauge-glow: rgba(37,99,235,0.15);
    --gauge-tick: rgba(0,0,0,0.12); --gauge-label: rgba(0,0,0,0.4);
    --btn-bg: linear-gradient(135deg,#2563eb,#06b6d4); --btn-text: #fff;
    --header-bg: rgba(240,242,245,0.9); --history-bg: #ffffff;
    --scrollbar-track: #f0f2f5; --scrollbar-thumb: #d1d5db;
    --bg-gradient: linear-gradient(135deg,#f0f2f5 0%,#e8ecf4 50%,#f0f2f5 100%);
}
[data-theme="glass"] {
    --bg-primary: #1a1a2e; --bg-secondary: rgba(255,255,255,0.08);
    --bg-card: rgba(255,255,255,0.06); --bg-glass: rgba(255,255,255,0.1);
    --surface-border: rgba(255,255,255,0.12); --surface-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --text-primary: #f0f0f0; --text-secondary: #a0a0b0; --text-accent: #60a5fa;
    --accent-primary: #60a5fa; --accent-secondary: #c084fc; --accent-hover: #93c5fd;
    --accent-ping: #fbbf24; --accent-download: #60a5fa; --accent-upload: #c084fc;
    --accent-jitter: #f472b6; --accent-loss: #f87171; --accent-bufferbloat: #fb923c;
    --accent-ttfb: #22d3ee; --accent-consistency: #4ade80; --accent-grade: #fbbf24;
    --gauge-bg: rgba(255,255,255,0.05); --gauge-fill-start: #60a5fa; --gauge-fill-end: #c084fc;
    --gauge-needle: #60a5fa; --gauge-glow: rgba(96,165,250,0.2);
    --gauge-tick: rgba(255,255,255,0.1); --gauge-label: rgba(255,255,255,0.4);
    --btn-bg: linear-gradient(135deg,rgba(96,165,250,0.5),rgba(192,132,252,0.5)); --btn-text: #fff;
    --header-bg: rgba(26,26,46,0.6); --history-bg: rgba(26,26,46,0.95);
    --scrollbar-track: rgba(255,255,255,0.03); --scrollbar-thumb: rgba(255,255,255,0.15);
    --bg-gradient: linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);
}
[data-theme="glass"] .top-bar,[data-theme="glass"] .result-card,[data-theme="glass"] .history-panel,[data-theme="glass"] .detail-item {
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
[data-theme="epaper"] {
    --bg-primary: #f5f0e8; --bg-secondary: #ece5d8;
    --bg-card: #ece5d8; --bg-glass: #ece5d8;
    --surface-border: #c4b99a; --surface-shadow: none;
    --text-primary: #2c2416; --text-secondary: #6b5d4a; --text-accent: #2c2416;
    --accent-primary: #2c2416; --accent-secondary: #6b5d4a; --accent-hover: #4a3d2a;
    --accent-ping: #6b5d4a; --accent-download: #2c2416; --accent-upload: #4a3d2a;
    --accent-jitter: #8a6d4a; --accent-loss: #8a4a4a; --accent-bufferbloat: #8a7040;
    --accent-ttfb: #4a6b6b; --accent-consistency: #4a6b4a; --accent-grade: #6b5d4a;
    --gauge-bg: #d4cbb8; --gauge-fill-start: #2c2416; --gauge-fill-end: #4a3d2a;
    --gauge-needle: #2c2416; --gauge-glow: transparent;
    --gauge-tick: #8a7d6a; --gauge-label: #6b5d4a;
    --btn-bg: #2c2416; --btn-text: #f5f0e8;
    --header-bg: #f5f0e8; --history-bg: #f5f0e8;
    --scrollbar-track: #ece5d8; --scrollbar-thumb: #c4b99a;
    --bg-gradient: #f5f0e8;
}
[data-theme="epaper"] { font-family: 'Georgia','Times New Roman',serif; }
[data-theme="epaper"] * { transition-duration: 0s !important; animation-duration: 0s !important; }
[data-theme="epaper"] .bg-layer { display: none; }

[data-theme="tesla"] {
    --bg-primary: #000; --bg-secondary: #111;
    --bg-card: rgba(20,20,20,0.9); --bg-glass: rgba(20,20,20,0.8);
    --surface-border: rgba(229,37,33,0.2); --surface-shadow: 0 4px 24px rgba(229,37,33,0.1);
    --text-primary: #fff; --text-secondary: #888; --text-accent: #e52521;
    --accent-primary: #e52521; --accent-secondary: #ff4444; --accent-hover: #ff3333;
    --accent-ping: #ff8800; --accent-download: #e52521; --accent-upload: #ff4444;
    --accent-jitter: #ff6b9d; --accent-loss: #ff2222; --accent-bufferbloat: #ff9933;
    --accent-ttfb: #888; --accent-consistency: #44cc44; --accent-grade: #ff8800;
    --gauge-bg: rgba(255,255,255,0.04); --gauge-fill-start: #e52521; --gauge-fill-end: #ff6644;
    --gauge-needle: #e52521; --gauge-glow: rgba(229,37,33,0.35);
    --gauge-tick: rgba(255,255,255,0.1); --gauge-label: rgba(255,255,255,0.4);
    --btn-bg: linear-gradient(135deg,#e52521,#ff4444); --btn-text: #fff;
    --header-bg: rgba(0,0,0,0.9); --history-bg: #0a0a0a;
    --scrollbar-track: #111; --scrollbar-thumb: #333;
    --bg-gradient: radial-gradient(ellipse at 50% 50%,rgba(229,37,33,0.06) 0%,transparent 70%),#000;
}
[data-theme="neon"] {
    --bg-primary: #000; --bg-secondary: #0a0a0a;
    --bg-card: rgba(0,0,0,0.9); --bg-glass: rgba(0,0,0,0.8);
    --surface-border: rgba(0,255,200,0.2); --surface-shadow: 0 0 20px rgba(0,255,200,0.1);
    --text-primary: #00ffc8; --text-secondary: #00aa88; --text-accent: #ff00ff;
    --accent-primary: #00ffc8; --accent-secondary: #ff00ff; --accent-hover: #00ffdd;
    --accent-ping: #ffff00; --accent-download: #00ffc8; --accent-upload: #ff00ff;
    --accent-jitter: #ff6699; --accent-loss: #ff3333; --accent-bufferbloat: #ffaa00;
    --accent-ttfb: #00ccff; --accent-consistency: #00ff66; --accent-grade: #ffff00;
    --gauge-bg: rgba(0,255,200,0.04); --gauge-fill-start: #00ffc8; --gauge-fill-end: #ff00ff;
    --gauge-needle: #00ffc8; --gauge-glow: rgba(0,255,200,0.4);
    --gauge-tick: rgba(0,255,200,0.15); --gauge-label: rgba(0,255,200,0.4);
    --btn-bg: linear-gradient(135deg,#00ffc8,#ff00ff); --btn-text: #000;
    --header-bg: rgba(0,0,0,0.9); --history-bg: #000;
    --scrollbar-track: #0a0a0a; --scrollbar-thumb: #00ffc8;
    --bg-gradient: #000;
}
[data-theme="neon"] .bg-layer::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,200,0.015) 2px,rgba(0,255,200,0.015) 4px);
    animation: scanlines 8s linear infinite;
}
@keyframes scanlines { from{transform:translateY(0)} to{transform:translateY(4px)} }

[data-theme="ocean"] {
    --bg-primary: #0a1628; --bg-secondary: #0f2035;
    --bg-card: rgba(15,32,53,0.85); --bg-glass: rgba(15,32,53,0.7);
    --surface-border: rgba(0,200,200,0.12); --surface-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --text-primary: #d0f0f0; --text-secondary: #5a9ea0; --text-accent: #00d4aa;
    --accent-primary: #00d4aa; --accent-secondary: #0891b2; --accent-hover: #00e8bb;
    --accent-ping: #fbbf24; --accent-download: #00d4aa; --accent-upload: #0891b2;
    --accent-jitter: #f472b6; --accent-loss: #ef4444; --accent-bufferbloat: #fb923c;
    --accent-ttfb: #22d3ee; --accent-consistency: #4ade80; --accent-grade: #fbbf24;
    --gauge-bg: rgba(0,200,200,0.06); --gauge-fill-start: #00d4aa; --gauge-fill-end: #0891b2;
    --gauge-needle: #00d4aa; --gauge-glow: rgba(0,212,170,0.25);
    --gauge-tick: rgba(0,200,200,0.12); --gauge-label: rgba(208,240,240,0.4);
    --btn-bg: linear-gradient(135deg,#00d4aa,#0891b2); --btn-text: #fff;
    --header-bg: rgba(10,22,40,0.85); --history-bg: #0a1628;
    --scrollbar-track: #0f2035; --scrollbar-thumb: #1a3a55;
    --bg-gradient: linear-gradient(180deg,#0a1628 0%,#0d2847 50%,#0a2035 100%);
}
[data-theme="candy"] {
    --bg-primary: #fdf2f8; --bg-secondary: #fff0f6;
    --bg-card: rgba(255,240,246,0.9); --bg-glass: rgba(255,240,246,0.7);
    --surface-border: rgba(236,72,153,0.15); --surface-shadow: 0 4px 20px rgba(236,72,153,0.12);
    --text-primary: #4a1942; --text-secondary: #9b5a8a; --text-accent: #ec4899;
    --accent-primary: #ec4899; --accent-secondary: #f97316; --accent-hover: #f472b6;
    --accent-ping: #f97316; --accent-download: #ec4899; --accent-upload: #a855f7;
    --accent-jitter: #fb7185; --accent-loss: #ef4444; --accent-bufferbloat: #fbbf24;
    --accent-ttfb: #06b6d4; --accent-consistency: #22c55e; --accent-grade: #f97316;
    --gauge-bg: rgba(236,72,153,0.08); --gauge-fill-start: #ec4899; --gauge-fill-end: #f97316;
    --gauge-needle: #ec4899; --gauge-glow: rgba(236,72,153,0.2);
    --gauge-tick: rgba(236,72,153,0.15); --gauge-label: rgba(74,25,66,0.4);
    --btn-bg: linear-gradient(135deg,#ec4899,#f97316); --btn-text: #fff;
    --header-bg: rgba(253,242,248,0.9); --history-bg: #fdf2f8;
    --scrollbar-track: #fff0f6; --scrollbar-thumb: #f9a8d4;
    --bg-gradient: linear-gradient(135deg,#fdf2f8 0%,#fce7f3 50%,#fdf2f8 100%);
}
[data-theme="sunset"] {
    --bg-primary: #1a0a1e; --bg-secondary: #261230;
    --bg-card: rgba(38,18,48,0.85); --bg-glass: rgba(38,18,48,0.7);
    --surface-border: rgba(251,146,60,0.15); --surface-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --text-primary: #fde8d0; --text-secondary: #c89070; --text-accent: #fb923c;
    --accent-primary: #fb923c; --accent-secondary: #e11d48; --accent-hover: #fdba74;
    --accent-ping: #fbbf24; --accent-download: #fb923c; --accent-upload: #e11d48;
    --accent-jitter: #f472b6; --accent-loss: #ef4444; --accent-bufferbloat: #fdba74;
    --accent-ttfb: #06b6d4; --accent-consistency: #22c55e; --accent-grade: #fbbf24;
    --gauge-bg: rgba(251,146,60,0.06); --gauge-fill-start: #fb923c; --gauge-fill-end: #e11d48;
    --gauge-needle: #fb923c; --gauge-glow: rgba(251,146,60,0.25);
    --gauge-tick: rgba(251,146,60,0.12); --gauge-label: rgba(253,232,208,0.4);
    --btn-bg: linear-gradient(135deg,#fb923c,#e11d48); --btn-text: #fff;
    --header-bg: rgba(26,10,30,0.85); --history-bg: #1a0a1e;
    --scrollbar-track: #261230; --scrollbar-thumb: #4a2040;
    --bg-gradient: linear-gradient(135deg,#1a0a1e 0%,#2d1035 30%,#1a0a1e 100%);
}
[data-theme="forest"] {
    --bg-primary: #0a1a0a; --bg-secondary: #122012;
    --bg-card: rgba(18,32,18,0.85); --bg-glass: rgba(18,32,18,0.7);
    --surface-border: rgba(34,197,94,0.12); --surface-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --text-primary: #d0f0d0; --text-secondary: #5a9a5a; --text-accent: #22c55e;
    --accent-primary: #22c55e; --accent-secondary: #a3e635; --accent-hover: #4ade80;
    --accent-ping: #fbbf24; --accent-download: #22c55e; --accent-upload: #a3e635;
    --accent-jitter: #f472b6; --accent-loss: #ef4444; --accent-bufferbloat: #fb923c;
    --accent-ttfb: #06b6d4; --accent-consistency: #86efac; --accent-grade: #fbbf24;
    --gauge-bg: rgba(34,197,94,0.06); --gauge-fill-start: #22c55e; --gauge-fill-end: #a3e635;
    --gauge-needle: #22c55e; --gauge-glow: rgba(34,197,94,0.25);
    --gauge-tick: rgba(34,197,94,0.12); --gauge-label: rgba(208,240,208,0.4);
    --btn-bg: linear-gradient(135deg,#22c55e,#a3e635); --btn-text: #fff;
    --header-bg: rgba(10,26,10,0.85); --history-bg: #0a1a0a;
    --scrollbar-track: #122012; --scrollbar-thumb: #1a3a1a;
    --bg-gradient: radial-gradient(ellipse at 30% 70%,rgba(34,197,94,0.06) 0%,transparent 50%),linear-gradient(180deg,#0a1a0a 0%,#0f240f 100%);
}
[data-theme="cyberpunk"] {
    --bg-primary: #0d0015; --bg-secondary: #160022;
    --bg-card: rgba(22,0,34,0.85); --bg-glass: rgba(22,0,34,0.7);
    --surface-border: rgba(255,0,128,0.2); --surface-shadow: 0 0 20px rgba(255,0,128,0.1);
    --text-primary: #f0e0ff; --text-secondary: #a060c0; --text-accent: #ff0080;
    --accent-primary: #ff0080; --accent-secondary: #ffdd00; --accent-hover: #ff3399;
    --accent-ping: #ffdd00; --accent-download: #ff0080; --accent-upload: #00ccff;
    --accent-jitter: #ff6699; --accent-loss: #ff2222; --accent-bufferbloat: #ffaa44;
    --accent-ttfb: #00ddff; --accent-consistency: #00ff88; --accent-grade: #ffdd00;
    --gauge-bg: rgba(255,0,128,0.05); --gauge-fill-start: #ff0080; --gauge-fill-end: #ffdd00;
    --gauge-needle: #ff0080; --gauge-glow: rgba(255,0,128,0.35);
    --gauge-tick: rgba(255,0,128,0.15); --gauge-label: rgba(240,224,255,0.4);
    --btn-bg: linear-gradient(135deg,#ff0080,#ffdd00); --btn-text: #000;
    --header-bg: rgba(13,0,21,0.9); --history-bg: #0d0015;
    --scrollbar-track: #160022; --scrollbar-thumb: #ff0080;
    --bg-gradient: linear-gradient(135deg,#0d0015 0%,#1a0030 50%,#0d0015 100%);
}
[data-theme="arctic"] {
    --bg-primary: #e8f4f8; --bg-secondary: #f0f8ff;
    --bg-card: rgba(240,248,255,0.9); --bg-glass: rgba(240,248,255,0.7);
    --surface-border: rgba(56,189,248,0.15); --surface-shadow: 0 4px 20px rgba(56,189,248,0.08);
    --text-primary: #0c2d48; --text-secondary: #4a7a9b; --text-accent: #0284c7;
    --accent-primary: #0284c7; --accent-secondary: #38bdf8; --accent-hover: #0ea5e9;
    --accent-ping: #f59e0b; --accent-download: #0284c7; --accent-upload: #7c3aed;
    --accent-jitter: #ec4899; --accent-loss: #dc2626; --accent-bufferbloat: #ea580c;
    --accent-ttfb: #0891b2; --accent-consistency: #16a34a; --accent-grade: #f59e0b;
    --gauge-bg: rgba(56,189,248,0.08); --gauge-fill-start: #0284c7; --gauge-fill-end: #38bdf8;
    --gauge-needle: #0284c7; --gauge-glow: rgba(2,132,199,0.15);
    --gauge-tick: rgba(56,189,248,0.15); --gauge-label: rgba(12,45,72,0.4);
    --btn-bg: linear-gradient(135deg,#0284c7,#38bdf8); --btn-text: #fff;
    --header-bg: rgba(232,244,248,0.9); --history-bg: #e8f4f8;
    --scrollbar-track: #f0f8ff; --scrollbar-thumb: #93c5fd;
    --bg-gradient: linear-gradient(135deg,#e8f4f8 0%,#dbeafe 50%,#e8f4f8 100%);
}

/* ============================================
   BACKGROUND
   ============================================ */
.bg-layer {
    position:fixed; inset:0; z-index:0;
    background: var(--bg-gradient);
    transition: background 0.6s ease;
}
.bg-layer::before {
    content:''; position:absolute; inset:0; opacity:0;
    transition: opacity 0.6s ease;
}
[data-theme="dark"] .bg-layer::before,
[data-theme="ocean"] .bg-layer::before,
[data-theme="sunset"] .bg-layer::before,
[data-theme="cyberpunk"] .bg-layer::before {
    opacity:1;
    background: radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),var(--gauge-glow),transparent 60%);
}
[data-theme="candy"] .bg-layer::before {
    opacity:1;
    background: linear-gradient(45deg,rgba(236,72,153,0.05),rgba(249,115,22,0.05),rgba(168,85,247,0.05));
    animation: candy-shift 10s ease-in-out infinite alternate;
}
@keyframes candy-shift { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(30deg)} }

/* ============================================
   SHELL — fits viewport, no scroll
   ============================================ */
.app-shell {
    position:relative; z-index:1;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

/* ============================================
   HEADER
   ============================================ */
.top-bar {
    flex-shrink: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--header-bg);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--surface-border);
    transition: background 0.4s ease, border-color 0.4s ease;
}
.top-bar-inner {
    max-width: 720px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 20px;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-icon-wrap {
    flex-shrink:0; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border-radius:9px; background:var(--bg-card); border:1px solid var(--surface-border);
    transition: background 0.4s ease, border-color 0.4s ease;
}
.logo-titles { display:flex; flex-direction:column; gap:0; }
.logo-text {
    font-size:1.05rem; font-weight:800; letter-spacing:-0.02em;
    color:var(--text-primary); line-height:1.2; transition:color 0.4s ease;
}
.logo-author {
    font-size:0.6rem; font-weight:500; color:var(--text-secondary);
    letter-spacing:0.02em; opacity:0.7; transition:color 0.4s ease;
}
.controls { display:flex; align-items:center; gap:5px; }

.ctrl-btn {
    position:relative; display:flex; align-items:center; gap:5px;
    height:34px; padding:0 12px;
    border:1px solid var(--surface-border); border-radius:8px;
    background:var(--bg-card); color:var(--text-secondary);
    cursor:pointer; transition:all 0.25s ease; font-family:inherit;
}
.btn-label { font-size:0.68rem; font-weight:600; letter-spacing:0.02em; }
.ctrl-btn:hover {
    color:var(--accent-primary); border-color:var(--accent-primary);
    background:var(--bg-glass); transform:translateY(-1px);
}
.history-badge {
    position:absolute; top:-4px; right:-4px;
    min-width:16px; height:16px; border-radius:8px;
    background:var(--accent-primary); color:var(--btn-text);
    font-size:0.6rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* Theme dropdown — fixed overlay on top of everything */
.theme-btn-wrap { position:relative; }
.theme-overlay {
    position:fixed; inset:0; z-index:900;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden;
    transition:opacity 0.25s ease, visibility 0.25s ease;
    display:flex; align-items:center; justify-content:center;
}
.theme-overlay.open { opacity:1; visibility:visible; }
.theme-dropdown {
    position:fixed; z-index:950;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.92);
    width:300px; max-width:calc(100vw - 40px);
    background:var(--bg-secondary); border:1px solid var(--surface-border);
    border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3);
    opacity:0; visibility:hidden;
    transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.theme-dropdown.open {
    opacity:1; visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}
.theme-dropdown-header {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.theme-dropdown-title {
    font-size:0.72rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--text-secondary);
}
.theme-dropdown-close {
    width:28px; height:28px; border-radius:7px; border:none;
    background:var(--bg-card); color:var(--text-secondary);
    font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s ease;
}
.theme-dropdown-close:hover { color:var(--text-primary); background:var(--bg-glass); }
.theme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.theme-swatch {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 3px; border-radius:8px; border:2px solid transparent;
    background:transparent; cursor:pointer; transition:all 0.2s ease;
    color:var(--text-secondary);
}
.theme-swatch:hover { background:var(--bg-glass); }
.theme-swatch.active { border-color:var(--accent-primary); background:var(--bg-glass); }
.theme-swatch-color {
    width:24px; height:24px; border-radius:50%;
    border:2px solid rgba(128,128,128,0.2); transition:transform 0.2s ease;
}
.theme-swatch:hover .theme-swatch-color { transform:scale(1.15); }
.theme-swatch-label { font-size:0.55rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }

/* ============================================
   MAIN AREA — flex column, centered
   ============================================ */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 0;
    padding: 6px 0;
}

/* Phase pills */
.phase-track {
    display:flex; gap:0;
    background:var(--bg-card); border:1px solid var(--surface-border);
    border-radius:10px; padding:3px;
    transition: background 0.4s ease, border-color 0.4s ease;
    flex-shrink: 0;
    margin-bottom: 4px;
}
.phase {
    display:flex; align-items:center; gap:4px;
    padding:5px 14px; border:none; background:transparent;
    color:var(--text-secondary); font-size:0.65rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
    border-radius:7px; cursor:default; transition:all 0.3s ease;
    font-family: inherit;
}
.phase.active {
    color:var(--btn-text); background:var(--accent-primary);
    box-shadow:0 2px 10px var(--gauge-glow);
}
.phase.completed { color:var(--accent-primary); }

/* ============================================
   GAUGE — the centerpiece
   ============================================ */
.gauge-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-height: 0;
    max-height: 400px;
    aspect-ratio: 1;
    width: 100%;
    max-width: 400px;
}
.gauge-container {
    position:relative;
    width: 100%;
    height: 100%;
}
.gauge-container canvas { width:100%; height:100%; }
.gauge-overlay {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    pointer-events:none;
    padding-top: 10px;
}
.gauge-value-wrap {
    display: flex;
    align-items: baseline;
    line-height: 1;
}
.gauge-value {
    font-size: clamp(2rem, 8vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    transition: color 0.4s ease;
}
.gauge-decimal {
    font-size: clamp(1rem, 3.5vw, 1.6rem);
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    transition: color 0.4s ease;
}
.gauge-unit {
    font-size: 0.72rem; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.1em; margin-top: 2px; transition: color 0.4s ease;
}
.gauge-status {
    font-size: 0.6rem; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.1em; margin-top: 4px; opacity: 0.6; transition: color 0.4s ease;
}

/* Start button — sits below gauge center */
.start-btn-wrap {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
}
.start-btn-ring {
    position:absolute; width:62px; height:62px;
    border-radius:50%; border:2px solid var(--accent-primary);
    opacity:0; animation:pulse-ring 2s ease-out infinite; pointer-events:none;
}
@keyframes pulse-ring { 0%{transform:scale(0.9);opacity:0.5} 100%{transform:scale(1.6);opacity:0} }
.start-btn {
    width:54px; height:54px; border-radius:50%; border:none;
    background:var(--btn-bg); color:var(--btn-text);
    font-size:0.72rem; font-weight:800; letter-spacing:0.1em;
    cursor:pointer; position:relative; z-index:1;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:0 4px 16px var(--gauge-glow);
    font-family: inherit;
}
.start-btn:hover { transform:scale(1.08); box-shadow:0 6px 24px var(--gauge-glow); }
.start-btn:active { transform:scale(0.95); }
.start-btn.running { background:#ef4444; box-shadow:0 4px 16px rgba(239,68,68,0.3); }
.start-btn.running ~ .start-btn-ring { animation:none; opacity:0; }

/* ============================================
   RESULT CARDS — compact row
   ============================================ */
.results-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 480px;
}
.result-card {
    background: var(--bg-card);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 12px 8px 10px;
    text-align: center;
    transition: all 0.4s ease;
    opacity: 0; transform: translateY(16px);
    box-shadow: var(--surface-shadow);
}
.result-card.show { opacity:1; transform:translateY(0); }
.result-card.show:nth-child(1) { animation:fade-in-up 0.4s ease both; }
.result-card.show:nth-child(2) { animation:fade-in-up 0.4s ease both 80ms; }
.result-card.show:nth-child(3) { animation:fade-in-up 0.4s ease both 160ms; }
@keyframes fade-in-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.result-card[data-metric="ping"] .result-icon { color:var(--accent-ping); }
.result-card[data-metric="download"] .result-icon { color:var(--accent-download); }
.result-card[data-metric="upload"] .result-icon { color:var(--accent-upload); }

.result-icon { margin-bottom:4px; transition:color 0.4s ease; }
.result-data { display:flex; align-items:baseline; justify-content:center; gap:2px; }
.result-value {
    font-size:1.4rem; font-weight:800; color:var(--text-primary);
    line-height:1.1; font-variant-numeric:tabular-nums; transition:color 0.4s ease;
}
.result-unit {
    font-size:0.55rem; font-weight:600; color:var(--text-secondary);
    opacity:0.7; transition:color 0.4s ease;
}
.result-label {
    font-size:0.6rem; font-weight:600; color:var(--text-secondary);
    text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; transition:color 0.4s ease;
}

/* ============================================
   MORE DETAILS PANEL
   ============================================ */
.results-details {
    display:none; grid-template-columns:repeat(4, 1fr); gap:8px;
    width:100%; max-width:520px;
    margin-top:6px;
}
.results-details.open {
    display:grid;
}

.detail-item {
    background:var(--bg-card); border:1px solid var(--surface-border);
    border-radius:10px; padding:8px 6px 6px; text-align:center;
    box-shadow:var(--surface-shadow);
    animation:fade-in-up 0.3s ease both;
}
.detail-item:nth-child(1) { animation-delay:0ms; }
.detail-item:nth-child(2) { animation-delay:40ms; }
.detail-item:nth-child(3) { animation-delay:80ms; }
.detail-item:nth-child(4) { animation-delay:120ms; }
.detail-item:nth-child(5) { animation-delay:160ms; }
.detail-item:nth-child(6) { animation-delay:200ms; }
.detail-item:nth-child(7) { animation-delay:240ms; }

.detail-icon { margin-bottom:2px; transition:color 0.4s ease; }
.detail-data { display:flex; align-items:baseline; justify-content:center; gap:1px; }
.detail-value {
    font-size:1rem; font-weight:800; color:var(--text-primary);
    line-height:1.1; font-variant-numeric:tabular-nums;
}
.detail-unit {
    font-size:0.45rem; font-weight:600; color:var(--text-secondary); opacity:0.7;
}
.detail-label {
    font-size:0.5rem; font-weight:600; color:var(--text-secondary);
    text-transform:uppercase; letter-spacing:0.06em; margin-top:1px;
}

/* Detail item accent colors */
.detail-item[data-metric="jitter"] .detail-icon { color:var(--accent-jitter); }
.detail-item[data-metric="loss"] .detail-icon { color:var(--accent-loss); }
.detail-item[data-metric="bufferbloat"] .detail-icon { color:var(--accent-bufferbloat); }
.detail-item[data-metric="ttfb"] .detail-icon { color:var(--accent-ttfb); }
.detail-item[data-metric="consistency"] .detail-icon { color:var(--accent-consistency); }
.detail-item[data-metric="pingrange"] .detail-icon { color:var(--accent-ping); }

/* Grade badge */
.detail-grade-item { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.grade-badge {
    font-size:1.4rem; font-weight:900; color:var(--accent-grade);
    line-height:1; letter-spacing:-0.02em;
}
.grade-badge.grade-a-plus,.grade-badge.grade-a { color:#22c55e; }
.grade-badge.grade-b { color:#84cc16; }
.grade-badge.grade-c { color:#fbbf24; }
.grade-badge.grade-d { color:#f97316; }
.grade-badge.grade-f { color:#ef4444; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
    flex-shrink: 0;
    padding: 6px 0;
    text-align: center;
    font-size: 0.62rem;
    color: var(--text-secondary);
    opacity: 0.6;
    transition: color 0.4s ease;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-sep { opacity: 0.3; }

/* ============================================
   HISTORY PANEL
   ============================================ */
.overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:500;
    opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.overlay.open { opacity:1; visibility:visible; }
.history-panel {
    position:fixed; top:0; right:0; width:360px; max-width:100vw; height:100vh;
    background:var(--history-bg); border-left:1px solid var(--surface-border);
    z-index:600; transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.4s ease;
    display:flex; flex-direction:column; overflow:hidden;
}
.history-panel.open { transform:translateX(0); }
.history-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px; border-bottom:1px solid var(--surface-border); flex-shrink:0;
}
.history-header h2 { font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.history-actions { display:flex; align-items:center; gap:6px; }
.clear-history-btn {
    padding:5px 10px; border-radius:6px; border:1px solid var(--surface-border);
    background:transparent; color:var(--text-secondary); font-size:0.68rem;
    font-weight:600; cursor:pointer; transition:all 0.2s ease;
}
.clear-history-btn:hover { color:#ef4444; border-color:#ef4444; }
.close-history-btn {
    width:28px; height:28px; border-radius:6px; border:none;
    background:var(--bg-card); color:var(--text-secondary);
    font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all 0.2s ease;
}
.close-history-btn:hover { color:var(--text-primary); }
.history-list {
    flex:1; overflow-y:auto; padding:12px;
    scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.history-list::-webkit-scrollbar { width:5px; }
.history-list::-webkit-scrollbar-track { background:var(--scrollbar-track); }
.history-list::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
.history-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:50px 0; color:var(--text-secondary); opacity:0.5;
}
.history-empty p { font-size:0.8rem; }
.history-item {
    background:var(--bg-card); border:1px solid var(--surface-border);
    border-radius:10px; padding:12px 14px; margin-bottom:8px;
    cursor:pointer; transition:all 0.2s ease; position:relative; overflow:hidden;
}
.history-item:hover { border-color:var(--accent-primary); transform:translateX(-2px); }
.history-item::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--accent-primary); border-radius:0 3px 3px 0;
}
.history-item-date { font-size:0.65rem; color:var(--text-secondary); margin-bottom:8px; }
.history-item-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(50px,1fr)); gap:6px; }
.history-metric { text-align:center; }
.history-metric-value { font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.history-metric-label { font-size:0.55rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.04em; }
.history-item-details {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(50px,1fr)); gap:6px;
    margin-top:6px; padding-top:6px; border-top:1px solid var(--surface-border);
}
.history-item-details:empty { display:none; }
.history-item-details .history-metric-value { font-size:0.75rem; font-weight:600; color:var(--text-secondary); }
.history-item-details .history-metric-label { font-size:0.5rem; }

/* ============================================
   PUBLIC RESULTS PANEL
   ============================================ */
.public-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:500;
    opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.public-overlay.open { opacity:1; visibility:visible; }
.public-panel {
    position:fixed; top:0; left:0; width:420px; max-width:100vw; height:100vh;
    background:var(--history-bg); border-right:1px solid var(--surface-border);
    z-index:600; transform:translateX(-100%);
    transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.4s ease;
    display:flex; flex-direction:column; overflow:hidden;
}
.public-panel.open { transform:translateX(0); }
.public-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px; border-bottom:1px solid var(--surface-border); flex-shrink:0;
}
.public-header h2 { font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.public-list {
    flex:1; overflow-y:auto; padding:12px;
    scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.public-list::-webkit-scrollbar { width:5px; }
.public-list::-webkit-scrollbar-track { background:var(--scrollbar-track); }
.public-list::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
.public-loading {
    text-align:center; padding:40px 0; color:var(--text-secondary); font-size:0.8rem;
}
.public-tabs {
    display:flex; gap:0; margin-bottom:12px;
    background:var(--bg-card); border:1px solid var(--surface-border);
    border-radius:10px; padding:3px;
}
.public-tab {
    flex:1; padding:7px 10px; border:none; background:transparent;
    color:var(--text-secondary); font-size:0.68rem; font-weight:700;
    letter-spacing:0.02em; border-radius:7px; cursor:pointer;
    transition:all 0.25s ease; font-family:inherit;
}
.public-tab.active {
    color:var(--btn-text); background:var(--accent-primary);
}
.public-tab:hover:not(.active) { color:var(--text-primary); }
.public-isp {
    font-size:0.58rem; color:var(--text-secondary); opacity:0.7;
    margin-bottom:6px;
}
.public-location-card {
    background:var(--bg-card); border:1px solid var(--surface-border);
    border-radius:10px; padding:12px 14px; margin-bottom:8px;
    transition:all 0.2s ease;
}
.public-location-name {
    font-size:0.75rem; font-weight:700; color:var(--text-primary);
    margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.public-location-name svg { color:var(--accent-primary); flex-shrink:0; }
.public-test-count {
    font-size:0.6rem; font-weight:500; color:var(--text-secondary);
    margin-left:auto; background:var(--bg-glass); padding:2px 6px; border-radius:4px;
}
.public-stats {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(55px,1fr)); gap:6px;
}
.public-stats-extra {
    margin-top:6px; padding-top:6px; border-top:1px solid var(--surface-border);
}
.public-stats-extra:empty { display:none; }
.public-stats-extra .public-stat-value { font-size:0.75rem; font-weight:600; color:var(--text-secondary); }
.public-stat { text-align:center; }
.public-stat-value { font-size:0.85rem; font-weight:700; color:var(--text-primary); }
.public-stat-label {
    font-size:0.5rem; color:var(--text-secondary); text-transform:uppercase;
    letter-spacing:0.04em;
}
.public-stat-sub {
    font-size:0.5rem; color:var(--text-secondary); opacity:0.6;
}

/* ============================================
   SHARE BUTTON & MODAL
   ============================================ */
.ctrl-btn-share {
    border-color:#22c55e;
    color:#22c55e;
    animation:share-flash 1s ease-in-out infinite;
}
.ctrl-btn-share:hover {
    background:#22c55e; color:#fff; border-color:#22c55e;
}
@keyframes share-flash {
    0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0); border-color:#22c55e}
    50%{box-shadow:0 0 12px 4px rgba(34,197,94,0.4); border-color:#4ade80}
}
.share-overlay {
    position:fixed; inset:0; z-index:900;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden;
    transition:opacity 0.25s ease, visibility 0.25s ease;
}
.share-overlay.open { opacity:1; visibility:visible; }
.share-modal {
    position:fixed; z-index:950;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.92);
    width:380px; max-width:calc(100vw - 40px);
    background:var(--bg-secondary); border:1px solid var(--surface-border);
    border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3);
    opacity:0; visibility:hidden;
    transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.share-modal.open {
    opacity:1; visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}
.share-modal-header {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.share-modal-title {
    font-size:0.72rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--text-secondary);
}
.share-results-preview {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:8px;
    margin-bottom:14px;
}
.share-preview-item { text-align:center; }
.share-preview-value {
    font-size:1.1rem; font-weight:800; color:var(--text-primary);
}
.share-preview-label {
    font-size:0.55rem; color:var(--text-secondary); text-transform:uppercase;
    letter-spacing:0.04em;
}
.share-url-wrap {
    display:flex; gap:6px;
}
.share-url-input {
    flex:1; padding:8px 12px; border-radius:8px;
    border:1px solid var(--surface-border);
    background:var(--bg-card); color:var(--text-primary);
    font-size:0.7rem; font-family:monospace;
    outline:none; transition:border-color 0.2s ease;
}
.share-url-input:focus { border-color:var(--accent-primary); }
.share-copy-btn {
    padding:8px 16px; border-radius:8px; border:none;
    background:var(--btn-bg); color:var(--btn-text);
    font-size:0.7rem; font-weight:700; cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    font-family:inherit; white-space:nowrap;
}
.share-copy-btn:hover { transform:translateY(-1px); box-shadow:0 2px 10px var(--gauge-glow); }

/* ============================================
   THEME TRANSITION
   ============================================ */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition-duration: 0.4s !important;
    transition-timing-function: ease !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:400px) {
    .top-bar-inner { padding:8px 12px; }
    .btn-label { display:none; }
    .ctrl-btn { padding:0 8px; height:30px; }
    .phase { padding:4px 10px; font-size:0.58rem; }
    .result-value { font-size:1.2rem; }
    .result-card { padding:10px 6px 8px; border-radius:10px; }
    .theme-dropdown { width:260px; }
    .start-btn { width:46px; height:46px; font-size:0.65rem; }
    .start-btn-ring { width:54px; height:54px; }
    .results-details { grid-template-columns:repeat(3, 1fr); gap:5px; }
    .detail-value { font-size:0.85rem; }
    .detail-item { padding:6px 4px 4px; border-radius:8px; }
    .grade-badge { font-size:1.1rem; }
}
@media (max-width:576px) {
    .app-shell { padding:0 12px; }
    .top-bar-inner { padding:8px 12px; }
    .logo-text { font-size:0.95rem; }
    .history-panel { width:100vw; }
    .public-panel { width:100vw; }
}
@media (min-width:577px) and (max-width:768px) {
    .gauge-wrap { max-height:360px; max-width:360px; }
}
@media (min-width:769px) {
    .gauge-wrap { max-height:420px; max-width:420px; }
    .results-row { max-width:520px; gap:14px; }
    .result-card { padding:16px 12px 12px; }
    .result-value { font-size:1.6rem; }
    .start-btn { width:62px; height:62px; font-size:0.78rem; }
    .start-btn-ring { width:72px; height:72px; }
    .results-details { max-width:520px; gap:10px; }
    .detail-value { font-size:1.1rem; }
}
@media (min-height:800px) {
    .gauge-wrap { max-height: 440px; max-width: 440px; }
    .main-area { gap: 4px; }
}
@media (max-height:600px) {
    .gauge-wrap { max-height: 240px; max-width: 240px; }
    .results-row { gap:6px; }
    .result-card { padding:8px 6px; }
    .result-value { font-size:1.1rem; }
    .phase { padding:4px 10px; font-size:0.58rem; }
    .start-btn { width:42px; height:42px; font-size:0.6rem; }
    .start-btn-ring { width:50px; height:50px; }
    .results-details { gap:4px; }
    .detail-item { padding:5px 4px 4px; }
    .detail-value { font-size:0.85rem; }
    .grade-badge { font-size:1rem; }
}