:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0f;--surface: rgba(255, 255, 255, .03);--surface-hover: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .08);--text: #e4e4e7;--text-dim: rgba(255, 255, 255, .45);--accent: #3b82f6;--green: #22c55e;--yellow: #eab308;--orange: #f97316;--red: #ef4444}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:#0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.header-left{display:flex;align-items:center;gap:.75rem}.logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:grid;place-items:center;color:#fff}.logo-text{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo-sub{font-size:.7rem;color:var(--text-dim);letter-spacing:.02em}.header-right{display:flex;align-items:center;gap:.75rem}.location-badge{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-dim);background:var(--surface);padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border)}.live-badge{display:flex;align-items:center;gap:.4rem;font-size:.65rem;font-weight:700;letter-spacing:.15em;color:var(--green);background:#22c55e1a;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(34,197,94,.2)}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0 #22c55e66}50%{opacity:.6;box-shadow:0 0 0 4px #22c55e00}}.banner{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.5rem;font-size:.8rem;color:var(--yellow);background:#eab30814;border-bottom:1px solid rgba(234,179,8,.15)}.main{flex:1;padding:1.5rem;max-width:1400px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.speed-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.section-header h2{font-size:1rem;font-weight:600;color:var(--text)}.btn-retest{display:flex;align-items:center;gap:.4rem;padding:.45rem 1rem;font-size:.8rem;font-weight:500;color:#fff;background:var(--accent);border:none;border-radius:8px;cursor:pointer;transition:all .2s}.btn-retest:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}.btn-retest:disabled{opacity:.6;cursor:not-allowed}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-bar{position:relative;height:6px;background:#ffffff0f;border-radius:999px;margin-bottom:1.5rem;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#8b5cf6);border-radius:999px;transition:width .3s ease}.progress-label{position:absolute;right:0;top:10px;font-size:.7rem;color:var(--text-dim)}.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.gauge{display:flex;flex-direction:column;align-items:center}.gauge-svg{width:140px;height:140px}.gauge-label{font-size:.75rem;color:var(--text-dim);margin-top:.25rem}.gauge-text{justify-content:center}.ping-value{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1}.ping-unit{font-size:.8rem;color:var(--text-dim);margin-top:.25rem}.history-strip{display:flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border);overflow-x:auto}.history-label{font-size:.7rem;color:var(--text-dim);white-space:nowrap}.history-pill{font-size:.7rem;font-family:ui-monospace,monospace;padding:.2rem .5rem;border-radius:999px;background:#3b82f61f;color:#93c5fd;border:1px solid rgba(59,130,246,.15);white-space:nowrap}.columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}.panel-warning{border-color:#ef444426}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.panel-header h2{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.panel-badge{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;background:#22c55e1f;color:var(--green);border:1px solid rgba(34,197,94,.2)}.badge-warn{background:#ef44441f;color:var(--red);border-color:#ef444433}.city-list{max-height:600px;overflow-y:auto}.city-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);transition:background .15s}.city-row:last-child{border-bottom:none}.city-row:hover{background:var(--surface-hover)}.city-row-warn{background:#ef444405}.city-rank{font-size:.7rem;font-weight:700;color:var(--text-dim);min-width:24px}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.city-info{flex:1;min-width:0}.city-name{font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:.4rem}.city-country{font-size:.7rem;color:var(--text-dim)}.city-meta{font-size:.7rem;color:var(--text-dim);display:flex;gap:.75rem;margin-top:.15rem}.status-tag{font-size:.65rem;font-weight:600;padding:.1rem .4rem;border-radius:4px;border:1px solid}.city-speed{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex-shrink:0;min-width:120px}.speed-down,.speed-up{display:flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:500;color:var(--green)}.speed-up{color:var(--accent)}.ping-bar-track{width:80px;height:3px;background:#ffffff0f;border-radius:999px;overflow:hidden}.ping-bar-fill{height:100%;border-radius:999px;transition:width .3s ease}.ping-label{font-size:.65rem;color:var(--text-dim);font-family:ui-monospace,monospace}.network-badge{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-dim);background:var(--surface);padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border)}.insights-row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.grade-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 1.5rem;background:#ffffff05;border:1px solid;border-radius:12px;min-width:100px}.grade-letter{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.05em}.grade-label{font-size:.8rem;font-weight:600;color:var(--text);margin-top:.25rem}.grade-sub{font-size:.65rem;color:var(--text-dim);margin-top:.15rem}.sparkline-card{flex:1;padding:.75rem 1rem;background:#ffffff05;border:1px solid var(--border);border-radius:12px}.sparkline{display:block;width:100%;height:auto}.sparkline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem}.sparkline-title{font-size:.7rem;color:var(--text-dim)}.sparkline-value{font-size:.75rem;font-weight:600;font-family:ui-monospace,monospace}.compare-card{display:flex;flex-direction:column;padding:.75rem 1rem;background:#ffffff05;border:1px solid var(--border);border-radius:12px;min-width:200px}.compare-title{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.compare-city{font-size:.85rem;font-weight:600;color:var(--text);margin-top:.15rem}.compare-distance{font-size:.7rem;color:var(--text-dim);margin-bottom:.5rem}.compare-metrics{display:flex;flex-direction:column;gap:.35rem}.compare-row{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;font-size:.7rem;align-items:center}.compare-label{color:var(--text-dim)}.compare-you{font-weight:600;color:var(--accent);text-align:right}.compare-them{color:var(--text-dim);text-align:right;min-width:55px}.capabilities{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.caps-title{font-size:.8rem;font-weight:600;color:var(--text-dim);margin-bottom:.75rem}.caps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}.cap-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .5rem;border-radius:10px;border:1px solid var(--border);background:#ffffff03;text-align:center;transition:transform .15s,border-color .15s}.cap-card:hover{transform:translateY(-1px)}.cap-ok{border-color:#22c55e33}.cap-no{border-color:#ef444426;opacity:.6}.cap-icon{font-size:1.4rem}.cap-label{font-size:.75rem;font-weight:600;color:var(--text)}.cap-status{font-size:.85rem;font-weight:700}.cap-ok .cap-status{color:var(--green)}.cap-no .cap-status{color:var(--red)}.cap-detail{font-size:.6rem;color:var(--text-dim)}.footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;font-size:.7rem;color:var(--text-dim);border-top:1px solid var(--border)}.city-list::-webkit-scrollbar{width:4px}.city-list::-webkit-scrollbar-track{background:transparent}.city-list::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}@media(max-width:900px){.columns{grid-template-columns:1fr}.gauges{grid-template-columns:repeat(2,1fr)}.gauge-svg{width:110px;height:110px}.insights-row{grid-template-columns:1fr}.grade-card{flex-direction:row;gap:1rem;min-width:unset}.caps-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.header{flex-direction:column;gap:.5rem;align-items:flex-start}.gauges{grid-template-columns:repeat(2,1fr)}.city-speed{min-width:90px}.caps-grid{grid-template-columns:repeat(2,1fr)}.compare-card{min-width:unset}}