/* Drift Doctor v2 — Viking cyber HUD */
:root{
  --bg:#060a10; --panel:rgba(12,20,32,.78); --panel-solid:#0d1522;
  --line:#1c2a3d; --line-hot:#2a4058; --text:#e8eef7; --muted:#8b9bb0;
  --cyan:#7ee0ff; --gold:#c9a227; --amber:#ffb347; --ember:#ff6b4a; --ok:#3dde8c; --warn:#f0c94d; --bad:#ff5d6c;
  --focus:0 0 0 3px rgba(126,224,255,.55), 0 0 24px rgba(201,162,39,.25);
  --radius:18px; --sidebar:232px;
  --font:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --glow-cyan:0 0 24px rgba(126,224,255,.35);
  --glow-gold:0 0 24px rgba(201,162,39,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);
  min-height:100%; -webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
.fx-root{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(126,224,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,224,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(201,162,39,.03) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,192px 192px;
  mask-image:radial-gradient(ellipse at 40% 30%,black 20%,transparent 72%);
  animation:gridDrift 40s linear infinite}
@keyframes gridDrift{to{background-position:48px 48px,48px 48px,192px 192px}}
.bg-scan{position:absolute;inset:0;opacity:.12;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.35) 3px);
  animation:scanMove 8s linear infinite}
@keyframes scanMove{to{transform:translateY(3px)}}
.bg-glow{position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse at 15% 10%,rgba(126,224,255,.16),transparent 42%),
    radial-gradient(ellipse at 85% 5%,rgba(201,162,39,.12),transparent 40%),
    radial-gradient(ellipse at 50% 100%,rgba(255,107,74,.08),transparent 45%),
    radial-gradient(ellipse at 70% 60%,rgba(61,222,140,.04),transparent 35%)}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%)}
body.reduce-motion .bg-grid,body.reduce-motion .bg-scan{animation:none}
body.no-scan .bg-scan{display:none}

/* Splash */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(ellipse at center,#0a1420 0%,#04070c 70%);
  transition:opacity .6s ease, visibility .6s}
.splash.done{opacity:0;visibility:hidden;pointer-events:none;display:none}
.splash-inner{text-align:center;position:relative;padding:40px}
.splash-rune{font-size:4rem;color:var(--gold);text-shadow:var(--glow-gold);animation:pulseRune 1.6s ease-in-out infinite}
@keyframes pulseRune{50%{transform:scale(1.08);opacity:.85}}
.splash-ring{position:absolute;left:50%;top:42%;width:140px;height:140px;margin:-70px 0 0 -70px;
  border:2px solid transparent;border-top-color:var(--cyan);border-right-color:var(--gold);
  border-radius:50%;animation:spin 1.2s linear infinite;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.splash-title{margin:24px 0 4px;letter-spacing:.28em;font-size:1.6rem;
  background:linear-gradient(90deg,var(--cyan),var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.splash-sub{margin:0 0 22px;color:var(--muted);letter-spacing:.35em;font-size:.72rem}
.splash-bar{width:min(280px,70vw);height:4px;margin:0 auto;background:#122033;border-radius:999px;overflow:hidden}
.splash-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .2s}
.splash-status{margin-top:14px;color:var(--cyan);font-size:.85rem;letter-spacing:.08em}

/* App shell */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.app.hidden{display:none}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;padding:18px 14px;
  background:linear-gradient(180deg,rgba(10,16,26,.95),rgba(8,12,18,.92));
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;
  backdrop-filter:blur(16px)}
.side-brand{display:flex;gap:12px;align-items:center;padding:4px 8px 12px;border-bottom:1px solid var(--line)}
.side-name{font-weight:800;letter-spacing:.12em;font-size:.78rem;color:var(--cyan)}
.side-ver{font-size:.7rem;color:var(--muted)}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:.95rem;cursor:pointer;text-align:left;min-height:48px;
  transition:all .15s}
.nav-item:hover{color:var(--text);background:rgba(126,224,255,.06);border-color:var(--line)}
.nav-item.active{color:var(--text);background:linear-gradient(135deg,rgba(126,224,255,.12),rgba(201,162,39,.08));
  border-color:rgba(201,162,39,.45);box-shadow:inset 3px 0 0 var(--cyan), var(--glow-cyan)}
.nav-ico{width:1.4em;text-align:center;color:var(--gold);opacity:.9}
.side-foot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.host-pill{font-size:.65rem;font-weight:800;letter-spacing:.14em;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:#0a1220}
.host-pill.on{color:var(--ok);border-color:rgba(61,222,140,.45)}

.main-col{min-width:0;padding:14px 18px 40px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.brand-mobile{display:none}
.brand-mobile .tagline{display:block;color:var(--muted);font-size:.8rem}
.top-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.tv-hint{display:none;font-size:.8rem}
.tabs-mobile{display:none;gap:6px;overflow-x:auto;padding:6px 0 12px;scrollbar-width:none}
.tabs-mobile::-webkit-scrollbar{display:none}
.tab{appearance:none;border:1px solid var(--line);background:var(--panel-solid);color:var(--text);
  border-radius:999px;padding:12px 18px;font-size:1rem;font-weight:600;cursor:pointer;white-space:nowrap;
  min-height:48px;transition:border .15s,box-shadow .15s}
.tab.active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,39,.4), inset 0 -2px 0 var(--cyan)}
.nav-item:focus-visible,.tab:focus-visible,.btn:focus-visible,.paddle-slot:focus-visible,input:focus-visible,summary:focus-visible{
  outline:none;box-shadow:var(--focus)}

.layout{display:flex;flex-direction:column;gap:14px;max-width:1180px}
.tab-panel{display:none;flex-direction:column;gap:14px;animation:fadeIn .35s ease}
.tab-panel.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.reduce-motion .tab-panel{animation:none}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 18px;backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(126,224,255,.06);
  position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,224,255,.35),rgba(201,162,39,.35),transparent)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.panel-head h2{margin:0;font-size:1.15rem;letter-spacing:.04em}
.rune-chip{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
  border:1px solid rgba(201,162,39,.4);color:var(--gold);font-size:.9rem;background:#14100a}

.pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:700;
  border:1px solid var(--line);background:#0a1220}
.pill.ok{border-color:rgba(61,222,140,.5);color:var(--ok)}
.pill.warn{border-color:rgba(240,201,77,.5);color:var(--warn)}
.pill.bad{border-color:rgba(255,93,108,.5);color:var(--bad)}

.btn{appearance:none;border:1px solid var(--line);background:#152033;color:var(--text);border-radius:14px;
  padding:12px 16px;font-weight:700;font-size:1rem;cursor:pointer;min-height:48px;min-width:48px;
  transition:transform .08s,border-color .15s,background .15s,box-shadow .15s}
.btn:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn.primary{background:linear-gradient(135deg,#0e3a4a,#1a2f1c);border-color:rgba(126,224,255,.5)}
.btn.danger{background:linear-gradient(135deg,#3a1520,#2a1810);border-color:rgba(255,93,108,.55);color:#ffd0d5}
.btn.ghost{background:transparent}
.btn.tiny{min-height:40px;padding:8px 12px;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.muted{color:var(--muted)}
.muted.tiny{font-size:.8rem}
.hidden{display:none!important}
.empty-state{text-align:center;padding:28px 8px}
.empty-icon{font-size:2.8rem;margin-bottom:8px;filter:drop-shadow(0 0 12px rgba(126,224,255,.4))}

.hero-row{display:grid;gap:14px}
@media(min-width:1100px){.hero-row{grid-template-columns:1.05fr .95fr}}

.pad-info{display:flex;flex-direction:column;gap:14px}
.pad-type{font-size:.8rem;color:var(--gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pad-name{font-size:1.15rem;font-weight:700;word-break:break-word}
.controller-stage{display:grid;place-items:center;padding:4px 0 8px}
.pad-svg{width:100%;max-width:480px;height:auto;filter:drop-shadow(0 0 20px rgba(126,224,255,.15))}
.pad-body{transition:stroke .2s}
.stick-well{fill:#060a10;stroke:#7ee0ff44;stroke-width:2}
.stick-knob{fill:#7ee0ff;filter:url(#glow);transition:cx .05s linear, cy .05s linear}
.viz-btn{fill:#152033;stroke:#2a4058;stroke-width:1.5;transition:fill .08s,stroke .08s,filter .08s}
.viz-btn.on{fill:#7ee0ff;stroke:#c9a227;filter:url(#glow)}
.viz-btn.face.on{fill:#c9a227}
.viz-btn.trig.on{fill:#ff6b4a}
.pad-svg-label{fill:#8b9bb0;font-size:11px;letter-spacing:.3em;font-family:var(--font)}

.gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gauge{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:center;
  background:#0a1220;border:1px solid var(--line);border-radius:16px;padding:8px 12px}
.gauge svg{width:72px;height:72px;transform:rotate(-90deg)}
.g-track{fill:none;stroke:#152033;stroke-width:8}
.g-val{fill:none;stroke:var(--cyan);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;filter:drop-shadow(0 0 6px rgba(126,224,255,.5))}
.g-val.gold{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(201,162,39,.5))}
.gauge-read span{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.1em}
.gauge-read strong{font-size:1.7rem;background:linear-gradient(90deg,var(--cyan),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.live-bars{display:grid;gap:6px}
.axis-row{display:grid;grid-template-columns:36px 1fr 64px;gap:8px;align-items:center;font-size:.85rem}
.bar{height:12px;background:#0a1220;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .05s linear}
.bar.trig i{background:linear-gradient(90deg,var(--gold),var(--ember))}
.axis-row code{font-family:var(--mono);font-size:.75rem;text-align:right;color:var(--muted)}
.buttons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.btn-pad{border:1px solid var(--line);background:#0a1220;border-radius:12px;padding:10px 4px;text-align:center;
  font-size:.7rem;color:var(--muted);min-height:44px;transition:all .1s}
.btn-pad.on{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 16px rgba(126,224,255,.35);background:#0f2433}

.sticks-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.sticks-wrap{grid-template-columns:1fr}}
.stick-card{background:#0a1220;border:1px solid var(--line);border-radius:16px;padding:10px;text-align:center}
.stick-label{font-weight:800;margin-bottom:6px;color:var(--gold);letter-spacing:.08em}
.stick-card canvas{width:100%;max-width:320px;height:auto;border-radius:12px;background:#060a10;
  box-shadow:inset 0 0 40px rgba(126,224,255,.06)}
.dz-controls{margin-top:8px;text-align:left}
.dz-controls label,.slider-label{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:.85rem;color:var(--muted);flex-wrap:wrap;margin:8px 0}
.dz-controls input[type=range],.slider-label input[type=range]{width:100%;accent-color:var(--cyan)}
.stick-stats{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.stick-stats code{color:var(--cyan);font-family:var(--mono)}
.toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}

.test-block{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
.test-block:first-of-type{border-top:none;padding-top:0;margin-top:0}
.test-title{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.test-title h3{margin:0}
.test-desc{color:var(--muted);font-size:.92rem}
.progress{position:relative;height:28px;background:#0a1220;border-radius:999px;border:1px solid var(--line);overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold))}
.progress span{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media(max-width:720px){.results-grid{grid-template-columns:1fr}}
.result-card{background:#0a1220;border:1px solid var(--line);border-radius:14px;padding:12px}
.result-card h4{margin:0 0 6px;font-size:1rem}
.result-card .verdict{font-size:1.3rem;font-weight:800}
.verdict.Healthy{color:var(--ok)}.verdict.Mild{color:var(--warn)}.verdict.Bad{color:var(--ember)}.verdict.Severe{color:var(--bad)}
.callout{background:#0a1220;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;line-height:1.45}
.warn-callout{border-color:rgba(240,201,77,.45);background:#18140a}
.tiers{display:grid;gap:10px}
@media(min-width:900px){.tiers{grid-template-columns:1fr 1fr 1fr}}
.tier{background:#0a1220;border:1px solid var(--line);border-radius:14px;padding:12px}
.tier-badge{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:8px;margin-bottom:6px}
.t1{background:rgba(61,222,140,.15);color:var(--ok)}
.t2{background:rgba(240,201,77,.15);color:var(--warn)}
.t3{background:rgba(255,93,108,.15);color:var(--bad)}
.tier h3{margin:4px 0 8px}
.tier ul,.guide-list{margin:0;padding-left:18px;color:var(--muted)}
.tier li,.guide-list li{margin:6px 0}
.copy-steps details{background:#0a1220;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:8px 0}
.copy-steps summary{cursor:pointer;font-weight:700;padding:6px 0}
.wizard-steps{padding-left:20px}
.wizard-steps .step{margin:14px 0;padding:10px;border-radius:12px;border:1px solid transparent}
.wizard-steps .step.active{border-color:rgba(126,224,255,.4);background:#0c1824}
.paddle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.paddle-slot{border:1px solid var(--line);background:#0a1220;border-radius:14px;padding:16px 8px;color:var(--text);
  font-weight:700;min-height:64px;cursor:pointer;transition:all .15s}
.paddle-slot span{display:block;color:var(--cyan);font-family:var(--mono);font-size:.85rem;margin-top:4px}
.paddle-slot.armed{border-color:var(--gold);box-shadow:0 0 20px rgba(201,162,39,.3)}
.paddle-slot.hit{border-color:var(--ok)}
.history-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.hist-item{background:#0a1220;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.9rem}
#history-chart{width:100%;height:auto;background:#0a1220;border-radius:12px;border:1px solid var(--line)}
.compare-box{margin-top:12px;padding:12px;border-radius:14px;border:1px dashed var(--gold);background:#14100a}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#152033;border:1px solid var(--cyan);
  color:var(--text);padding:12px 18px;border-radius:999px;z-index:50;box-shadow:0 10px 40px rgba(0,0,0,.5);max-width:90vw}
.foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:24px 0 0;color:var(--muted);font-size:.8rem}
a{color:var(--cyan)}
code{font-family:var(--mono);font-size:.9em}

/* Remap */
.driver-card{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:16px;margin-bottom:14px;
  border:1px solid rgba(240,201,77,.45);background:linear-gradient(135deg,#1a1608,#121820)}
.driver-ico{font-size:1.6rem;line-height:1}
.remap-grid{display:grid;gap:12px;margin:12px 0}
@media(min-width:800px){.remap-grid{grid-template-columns:1fr 1fr}}
.remap-block{background:#0a1220;border:1px solid var(--line);border-radius:14px;padding:12px}
.remap-block h3{margin:0 0 8px;font-size:1rem}
.btn-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:10px 0 14px}
.btn-map label{display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--muted);
  background:#0a1220;border:1px solid var(--line);border-radius:12px;padding:8px}
.btn-map select{appearance:none;background:#152033;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px;font-weight:700;min-height:40px}
.settings-grid{display:flex;flex-direction:column;gap:14px}

/* TV */
body.tv-mode{font-size:20px}
body.tv-mode .nav-item{min-height:60px;font-size:1.1rem;padding:16px}
body.tv-mode .btn{min-height:60px;padding:16px 22px;font-size:1.1rem;border-radius:18px}
body.tv-mode .tv-hint{display:block}
body.tv-mode .panel{padding:22px}

/* Mobile: collapse sidebar */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .tabs-mobile{display:flex}
  .brand-mobile{display:block}
  .main-col{padding:12px 12px 48px}
}