*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:auto;user-select:auto}

:root{
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --radius:14px;
  --safe-top:env(safe-area-inset-top,0);
  --safe-bot:env(safe-area-inset-bottom,0);
}

[data-theme="midnight"]{
  --bg:#0a0d14;--bg-grad:radial-gradient(ellipse at top,#1a1f33 0%,#0a0d14 50%);
  --surface:#161a26;--surface2:#1e2336;--surface-glow:rgba(59,130,246,.04);
  --accent:#3b82f6;--accent2:#60a5fa;--accent-glow:rgba(59,130,246,.4);
  --green:#22c55e;--green-glow:rgba(34,197,94,.4);
  --red:#ef4444;--red-glow:rgba(239,68,68,.4);
  --yellow:#f59e0b;--yellow-glow:rgba(245,158,11,.4);
  --text:#e2e8f0;--text-strong:#f8fafc;--muted:#64748b;
  --border:rgba(148,163,184,.12);--border-strong:rgba(148,163,184,.2);
  --card-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
}

[data-theme="racing"]{
  --bg:#0a0a0a;--bg-grad:radial-gradient(ellipse at top,#1a0808 0%,#0a0000 60%);
  --surface:#141414;--surface2:#1c1c1c;--surface-glow:rgba(239,68,68,.04);
  --accent:#dc2626;--accent2:#ef4444;--accent-glow:rgba(220,38,38,.5);
  --green:#84cc16;--green-glow:rgba(132,204,22,.4);
  --red:#dc2626;--red-glow:rgba(220,38,38,.5);
  --yellow:#fbbf24;--yellow-glow:rgba(251,191,36,.4);
  --text:#f5f5f5;--text-strong:#fff;--muted:#737373;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.15);
  --card-shadow:0 4px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  --font-display:'SF Pro Display','Helvetica Neue',-apple-system,sans-serif;
}

[data-theme="cyber"]{
  --bg:#08020f;--bg-grad:radial-gradient(ellipse at top,#1a0833 0%,#08020f 60%);
  --surface:#120524;--surface2:#1c0930;--surface-glow:rgba(236,72,153,.06);
  --accent:#ec4899;--accent2:#f472b6;--accent-glow:rgba(236,72,153,.5);
  --green:#06d6a0;--green-glow:rgba(6,214,160,.5);
  --red:#ef4444;--red-glow:rgba(239,68,68,.4);
  --yellow:#fcd34d;--yellow-glow:rgba(252,211,77,.4);
  --text:#e0e0ff;--text-strong:#fff;--muted:#7d6b9e;
  --border:rgba(236,72,153,.12);--border-strong:rgba(236,72,153,.25);
  --card-shadow:0 4px 30px rgba(236,72,153,.15),inset 0 1px 0 rgba(255,255,255,.05);
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;transition:background .4s ease}
body{background:var(--bg-grad);background-attachment:fixed;min-height:100vh}

[data-theme="cyber"] body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 20% 30%,rgba(236,72,153,.08) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(6,214,160,.06) 0%,transparent 40%);pointer-events:none;z-index:0;animation:cyber-pulse 8s ease-in-out infinite}
@keyframes cyber-pulse{0%,100%{opacity:.5}50%{opacity:1}}
[data-theme="racing"] body::before{content:'';position:fixed;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.005) 40px,rgba(255,255,255,.005) 80px);pointer-events:none;z-index:0}

.screen{display:none;flex-direction:column;align-items:center;padding:calc(16px + var(--safe-top)) 16px calc(32px + var(--safe-bot));min-height:100vh;gap:14px;position:relative;z-index:1;animation:screen-in .4s cubic-bezier(.22,1,.36,1)}
.screen.active{display:flex}
@keyframes screen-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.app-header{display:flex;align-items:center;gap:12px;width:100%;padding:8px 4px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px var(--accent-glow);position:relative;overflow:hidden}
.logo-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 50%)}
.logo-icon svg{width:24px;height:24px;position:relative;z-index:1}
.logo-text{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--text-strong);font-family:var(--font-display)}
.header-spacer{flex:1}
.icon-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.icon-btn:active{transform:scale(.92);background:var(--accent);color:#fff}
.icon-btn svg{width:20px;height:20px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;width:100%;box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:var(--surface-glow);pointer-events:none}
.card-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:700;position:relative}

.hero{text-align:center;padding:8px 4px;width:100%}
.hero h1{font-size:28px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px;font-family:var(--font-display)}
.hero p{font-size:14px;color:var(--muted);line-height:1.6}

.size-selector{display:flex;gap:6px;overflow-x:auto;padding:4px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.size-selector::-webkit-scrollbar{display:none}
.size-btn{flex-shrink:0;background:var(--surface2);border:1.5px solid var(--border);color:var(--muted);padding:12px 16px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;scroll-snap-align:center;font-family:var(--font);min-width:58px}
.size-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:var(--accent);color:#fff;box-shadow:0 4px 14px var(--accent-glow)}
.size-btn:active{transform:scale(.95)}
.size-display{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:12px;font-size:13px;color:var(--muted)}
.size-display strong{color:var(--accent2);font-size:17px;font-weight:700}

.theme-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.theme-btn{background:var(--surface2);border:2px solid var(--border);border-radius:12px;padding:12px 8px;cursor:pointer;transition:all .2s;font-family:var(--font);text-align:center}
.theme-btn:active{transform:scale(.95)}
.theme-btn.active{border-color:var(--accent)}
.theme-swatch{width:100%;height:40px;border-radius:8px;margin-bottom:6px}
.theme-swatch.midnight{background:linear-gradient(135deg,#0a0d14,#3b82f6)}
.theme-swatch.racing{background:linear-gradient(135deg,#0a0a0a,#dc2626)}
.theme-swatch.cyber{background:linear-gradient(135deg,#08020f,#ec4899,#06d6a0)}
.theme-name{font-size:11px;font-weight:600;color:var(--text)}

.car-display{display:flex;justify-content:center;padding:8px 0;position:relative}
.car-display svg{display:block;max-width:100%}
.car-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:60%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);pointer-events:none;opacity:.3;filter:blur(20px)}

.btn{width:100%;padding:16px;border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font);letter-spacing:.2px;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 6px 20px var(--accent-glow)}
.btn-success{background:linear-gradient(135deg,var(--green),#16a34a);color:#fff;box-shadow:0 6px 20px var(--green-glow)}
[data-theme="cyber"] .btn-success{background:linear-gradient(135deg,var(--green),#04a87f)}
.btn-warning{background:linear-gradient(135deg,var(--yellow),#d97706);color:#000;box-shadow:0 6px 20px var(--yellow-glow)}
.btn-outline{background:var(--surface2);color:var(--text);border:1px solid var(--border-strong)}
.btn-outline:active{background:var(--surface)}
.btn-sm{padding:13px;font-size:14px;width:auto;flex:1}
.btn-row{display:flex;gap:10px;width:100%}

.angle-display{text-align:center;padding:12px 0 4px;position:relative}
.angle-big{font-size:78px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-3px;line-height:1;transition:color .3s,transform .15s;font-family:var(--font-display);color:var(--text-strong);display:inline-block}
.angle-unit{font-size:30px;color:var(--muted);font-weight:500;margin-left:4px}
.angle-label{font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.3px}
.angle-mm{font-size:15px;color:var(--accent2);margin-top:6px;font-weight:700;font-variant-numeric:tabular-nums}

.stab-bar{height:6px;border-radius:3px;background:var(--surface2);margin-top:14px;overflow:hidden;position:relative}
.stab-fill{height:100%;border-radius:3px;background:var(--yellow);transition:width .25s,background .3s;box-shadow:0 0 12px var(--yellow-glow)}
.stab-fill.green{background:var(--green);box-shadow:0 0 12px var(--green-glow)}
.stab-fill.red{background:var(--red);box-shadow:0 0 12px var(--red-glow)}
.stab-text{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;min-height:18px;font-weight:500}

.step-header{display:flex;align-items:center;gap:12px;width:100%;padding:0 4px}
.step-counter{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px}
.step-counter strong{color:var(--accent2)}
.step-title{font-size:15px;font-weight:700;color:var(--text-strong);flex:1;font-family:var(--font-display)}

.instructions{background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:12px;padding:14px;font-size:14px;color:var(--text);line-height:1.6}
.instructions strong{color:var(--accent2);font-weight:700}

.warning-pulse{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.08));border:1.5px solid var(--yellow);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--text);line-height:1.55;display:flex;gap:10px;align-items:flex-start;animation:warn-pulse 2s ease-in-out infinite}
@keyframes warn-pulse{0%,100%{box-shadow:0 0 0 0 var(--yellow-glow)}50%{box-shadow:0 0 0 6px transparent}}
.warning-pulse-icon{flex-shrink:0;color:var(--yellow);font-size:18px}
.warning-pulse strong{color:var(--yellow)}

.car-progress-wrap{display:flex;justify-content:center;padding:8px 0;position:relative}
.car-progress-svg{display:block;width:240px;max-width:100%}
.car-wheel-rect{transition:all .3s}
.car-wheel-rect.active{stroke:var(--accent);stroke-width:3;animation:wheel-pulse 1.6s ease-in-out infinite}
.car-wheel-rect.measured{stroke:var(--green);stroke-width:2.5}
.car-wheel-rect.ref{stroke:var(--yellow);stroke-width:2.5;stroke-dasharray:3,3}
@keyframes wheel-pulse{0%,100%{filter:drop-shadow(0 0 4px var(--accent-glow))}50%{filter:drop-shadow(0 0 16px var(--accent-glow))}}

.result-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}
.result-row:last-child{border-bottom:none}
.result-label{font-size:14px;color:var(--muted);font-weight:500}
.result-val{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;font-family:var(--font-display)}
.toe-in{color:var(--green)}
.toe-out{color:var(--red)}
.toe-zero{color:var(--muted)}

.big-result{text-align:center;padding:18px 8px 10px}
.big-result-num{font-size:56px;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums;line-height:1;font-family:var(--font-display)}
.big-result-mm{font-size:22px;color:var(--muted);margin-top:10px;font-variant-numeric:tabular-nums;font-weight:600}

.badge{font-size:13px;padding:6px 16px;border-radius:20px;font-weight:700;display:inline-block;letter-spacing:.3px}
.badge-toe-in{background:rgba(34,197,94,.15);color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.badge-toe-out{background:rgba(239,68,68,.15);color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.badge-ok{background:rgba(59,130,246,.15);color:var(--accent2);box-shadow:0 0 0 1px var(--accent) inset}

.warning-box{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.04));border:1px solid rgba(245,158,11,.25);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--text);line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.warning-box-icon{flex-shrink:0;color:var(--yellow);font-size:16px;margin-top:1px}
.info-box{background:linear-gradient(135deg,var(--surface-glow),transparent);border:1px solid var(--border-strong);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--text);line-height:1.6}
.info-box strong{color:var(--accent2)}

.steps-row{display:flex;flex-direction:column;gap:10px}
.step-item{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text)}
.step-item strong{color:var(--text-strong)}
.step-num-circle{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--surface2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--accent2);margin-top:-1px}

.demo-banner{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.3);color:var(--yellow);padding:8px 14px;border-radius:10px;font-size:12px;text-align:center;width:100%;font-weight:700}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:1000;animation:fade-in .2s;padding:20px}
.modal-backdrop.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:18px;padding:24px;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:modal-in .3s cubic-bezier(.22,1,.36,1)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text-strong);font-family:var(--font-display)}
.modal p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.modal-actions{display:flex;gap:10px}

.divider{height:1px;background:var(--border);width:100%;margin:4px 0}
.text-mute{color:var(--muted);font-size:12px;text-align:center}

.tracking-status{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface2);border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border)}
.tracking-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:all .3s}
.tracking-dot.live{background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:dot-pulse 1.5s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.tracking-status.live{color:var(--green);border-color:rgba(34,197,94,.3)}

.rotation-warning{display:none;background:rgba(239,68,68,.15);border:1px solid var(--red);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--red);font-weight:700;text-align:center;animation:shake .3s}
.rotation-warning.show{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}