:root{--bg-primary:#0d0d0d;--bg-card:#ffffff08;--bg-frame:#0a0a0c;--border:#ffffff0f;--text-primary:#fff;--text-secondary:#fff6;--text-dim:#ffffff26;--text-muted:#ffffff14;--accent:#00d4ff;--accent-green:#0f8;--accent-red:#ff6b6b;--accent-yellow:#ffc107;--seg-off:#ffffff0a;--seg-border:#ffffff0a;--hover-bg:#ffffff0a;--hover-border:#ffffff26;--font:"Inter", system-ui, -apple-system, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=light]{--bg-primary:#f5f5f7;--bg-card:#00000008;--bg-frame:#fff;--border:#00000014;--text-primary:#1a1a1a;--text-secondary:#00000073;--text-dim:#00000026;--text-muted:#00000014;--accent:#09c;--accent-green:#0a5;--accent-red:#d44;--accent-yellow:#c90;--seg-off:#0000000d;--seg-border:#0000000f;--hover-bg:#0000000a;--hover-border:#0000001f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font);transition:background .3s,color .3s;overflow-x:hidden}#root{min-height:100vh}.app{flex-direction:column;align-items:center;min-height:100vh;display:flex}.app-header{justify-content:space-between;align-items:center;width:100%;padding:1.5rem 2rem;display:flex}.logo{align-items:center;display:flex}.logo-text{letter-spacing:-.02em;color:var(--text-primary);font-size:1.5rem;font-weight:700}.logo-dot{color:var(--accent);font-size:1.5rem;font-weight:700}.app-main{flex:1;justify-content:center;align-items:center;width:100%;padding:2rem;display:flex}.speed-test{flex-direction:column;align-items:center;gap:2.5rem;width:100%;max-width:800px;display:flex}.speed-display{flex-direction:column;align-items:center;display:flex}.dig-frame{background:var(--bg-frame);border:1px solid var(--border);border-radius:4px;flex-direction:column;gap:.6rem;width:340px;padding:1rem 1.25rem;display:flex}.dig-header{align-items:center;gap:.4rem;display:flex}.dig-dot{background:var(--text-dim);border-radius:50%;width:6px;height:6px}.speed-display.active .dig-dot{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);animation:1.2s ease-in-out infinite digPulse}.dig-label{letter-spacing:.2em;color:var(--text-secondary);font-size:.6rem;font-weight:700}.dig-label.right{color:var(--text-dim);margin-left:auto}.dig-display{justify-content:center;align-items:baseline;padding:.75rem 0 .25rem;display:flex}.dig-num{letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums;font-family:SF Mono,Consolas,Courier New,monospace;font-size:4.5rem;font-weight:700;line-height:1}.speed-display.active .dig-num{text-shadow:0 0 30px var(--accent)}.dig-bar-row{padding:.25rem 0}.dig-bar{gap:3px;width:100%;display:flex}.dig-seg{background-color:var(--seg-off);border-radius:1px;flex:1;height:8px;transition:background-color .1s,box-shadow .1s}.dig-scale{justify-content:space-between;padding:0 1px;display:flex}.dig-scale span{letter-spacing:.05em;color:var(--text-dim);font-family:SF Mono,Consolas,monospace;font-size:.5rem;font-weight:600}.dig-footer{border-top:1px solid var(--seg-border);justify-content:space-between;align-items:center;padding-top:.25rem;display:flex}.dig-phase-box{align-items:center;gap:.4rem;display:flex}.dig-phase{letter-spacing:.15em;color:var(--accent);font-family:SF Mono,Consolas,monospace;font-size:.6rem;font-weight:700}.dig-phase.off{color:var(--text-dim)}.dig-peak{align-items:center;gap:.35rem;display:flex}.dig-peak-label{letter-spacing:.1em;color:var(--text-dim);font-size:.5rem;font-weight:600}.dig-peak-val{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-family:SF Mono,Consolas,monospace;font-size:.6rem;font-weight:700}@keyframes digPulse{0%,to{opacity:1}50%{opacity:.4}}.results{width:100%;animation:.6s ease-out fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.results-grid{background:var(--border);border-radius:16px;grid-template-columns:repeat(4,1fr);gap:1px;display:grid;overflow:hidden}.result-card{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;display:flex}.result-card-icon{border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.result-card-icon.download{color:#0f8;background:#00ff881a}.result-card-icon.upload{color:#ff6b6b;background:#ff6b6b1a}.result-card-icon.ping{color:#00d4ff;background:#00d4ff1a}.result-card-icon.jitter{color:#ffc107;background:#ffc1071a}.result-card-content{flex-direction:column;align-items:center;gap:.15rem;display:flex}.result-card-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);font-size:.7rem;font-weight:500}.result-card-value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}.result-card-unit{color:var(--text-secondary);font-size:.7rem;font-weight:500}.restart-btn{border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.restart-btn:hover{border-color:var(--hover-border);color:var(--text-primary);background:var(--hover-bg)}.restart-btn.running{color:#ff6b6b;border-color:#ff6b6b4d}.restart-btn.running:hover{background:#ff6b6b0f;border-color:#ff6b6b80}.theme-toggle{border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font);letter-spacing:.05em;cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem .75rem;font-size:.7rem;font-weight:600;transition:all .2s;display:flex}.theme-toggle:hover{border-color:var(--hover-border);color:var(--text-primary);background:var(--hover-bg)}.theme-toggle-label{line-height:1}@media (width<=768px){.dig-frame{width:300px}.dig-num{font-size:3.5rem}.dig-seg{height:6px}.results-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.dig-frame{width:280px;padding:.75rem 1rem}.dig-num{font-size:3rem}.dig-seg{gap:2px;height:5px}.results-grid{grid-template-columns:1fr 1fr}.result-card{padding:1.25rem .75rem}.result-card-value{font-size:1.25rem}}
