:root {
  --bg: #08090d;
  --panel: #12161f;
  --panel2: #1a1f2b;
  --line: #262d3c;
  --text: #f1f4f9;
  --dim: #8d97ab;
  --cyan: #22d3ee;
  --orange: #ff8a1f;
  --green: #22c55e;
  --red: #ef4444;
  --gold: #fbbf24;
  --r: 18px;
  --race: italic 900 1em/1 -apple-system, "SF Pro Display", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  touch-action: manipulation; overflow: hidden; -webkit-text-size-adjust: 100%;
}
#app {
  height: 100vh; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { opacity: .45; cursor: default; }
h2, h3 { margin: 0 0 10px; }
.screen { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.note { color: var(--dim); font-size: 13px; margin: 8px 0 0; }
.center { text-align: center; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; min-height: 64px; }
.brand { font: var(--race); font-size: 26px; text-transform: uppercase; letter-spacing: .01em; position: relative; }
.brand span { color: var(--orange); }
.brand.holding::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 3px; background: var(--cyan); animation: hold 1.5s linear forwards; }
@keyframes hold { from { width: 0 } to { width: 100% } }
.back { font-weight: 800; font-size: 18px; padding: 10px 16px; background: var(--panel2); border-radius: 999px; }
.daily { display: flex; gap: 4px; align-items: center; margin-left: auto; font-size: 22px; }
.daily span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #151922; border: 1px solid var(--line); opacity: .35; font-size: 20px; }
.daily span.done { opacity: 1; background: #0f3d22; border-color: var(--green); box-shadow: 0 0 12px rgba(34,197,94,.35); }
.daily .streak { width: auto; padding: 0 8px; background: none; border: 0; }
.daily .streak { filter: none; opacity: 1; font-size: 18px; font-weight: 800; margin-left: 6px; }
.cash { font: var(--race); font-size: 26px; color: var(--gold); background: #1b1608; border: 1px solid #4a3a0c; padding: 8px 16px; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* ---------- stage / showroom ---------- */
.stage {
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-radius: var(--r); padding: 16px 18px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(140, 170, 255, .22), transparent 70%),
    linear-gradient(180deg, #1b2130 0%, #10131b 62%, #0b0d13 62.2%, #07080b 100%);
  border: 1px solid var(--line);
}
.stage::after { /* floor grid */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 80px);
}
.stage-head { display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; }
.make { color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; }
.model { font: var(--race); font-size: clamp(30px, 4.6vw, 54px); text-transform: uppercase; }
.showroom { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; z-index: 1; gap: 6px; }
.car-wrap { flex: 1; max-width: 920px; cursor: pointer; }
.car-wrap svg { width: 100%; height: auto; display: block; -webkit-box-reflect: below -14px linear-gradient(transparent 72%, rgba(255,255,255,.16)); }
.nav { font-size: 44px; width: 52px; height: 84px; border-radius: 14px; background: rgba(255,255,255,.06); flex: none; }
.hint { text-align: center; color: var(--dim); font-size: 12px; z-index: 1; margin-top: -6px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; z-index: 1; margin-top: 10px; }
.stats > div { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 8px 10px; text-align: center; }
.stats b { display: block; font: var(--race); font-size: 24px; font-variant-numeric: tabular-nums; }
.stats b em { font-size: 14px; font-style: normal; margin-left: 4px; }
.stats em.good { color: var(--green); } .stats em.bad { color: #f87171; }
.stats span { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* performance index badge */
.pi { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden; font: var(--race); font-size: 20px; border: 2px solid var(--pc, #888); position: relative; }
.pi-c { background: var(--pc, #888); color: #000; padding: 6px 9px; }
.pi-n { padding: 6px 10px; background: rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.pi em { position: absolute; right: -6px; top: -14px; background: var(--green); color: #000; font-size: 13px; padding: 2px 6px; border-radius: 6px; font-style: normal; }
.pi-D { --pc: #4fc3f7 } .pi-C { --pc: #ffd54f } .pi-B { --pc: #ff8a65 } .pi-A { --pc: #f06292 }
.pi-S1 { --pc: #ba68c8 } .pi-S2 { --pc: #5c6bc0 } .pi-X { --pc: #4ade80 }

/* car animations */
.flame { opacity: 0; transform-box: fill-box; transform-origin: 100% 50%; }
.rev .flame, .nitro .flame { opacity: 1; animation: flick .07s infinite alternate; }
@keyframes flick { from { transform: scaleX(.75) scaleY(.9) } to { transform: scaleX(1.15) scaleY(1.05) } }
.glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55 } }
svg.shake .body { animation: shake .06s infinite alternate; }
@keyframes shake { from { transform: translate(0, 0) } to { transform: translate(.6px, -.8px) } }
svg.installed { animation: installed .7s ease-out; }
@keyframes installed { 0% { filter: brightness(2.2) } 100% { filter: none } }

/* ---------- garage ---------- */
.garage-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 14px; padding: 0 16px 16px; min-height: 0; }
.side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.race-card { display: flex; flex-direction: column; gap: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1; padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); font-weight: 800; min-width: 44px; }
.seg button.on { background: var(--cyan); color: #04121a; border-color: var(--cyan); }
.btn-race {
  font: var(--race); font-size: clamp(34px, 4.4vw, 48px); padding: 22px 12px; border-radius: 18px; color: #1a0b00;
  background: linear-gradient(180deg, #ffb35c, #ff7a00 55%, #e85d00); box-shadow: 0 6px 0 #9a3d00, 0 10px 30px rgba(255,122,0,.35);
  text-transform: uppercase; letter-spacing: .02em; transition: transform .08s;
}
.btn-race:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a3d00; }
.btn-race:disabled { font-size: 20px; background: var(--panel2); color: var(--dim); box-shadow: none; }
.btn-race.small { font-size: 28px; padding: 16px; }
.lap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.lap span { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.lap b { font: var(--race); font-size: 22px; }
.lap-note { color: var(--dim); font-size: 12px; text-align: center; margin-top: -6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-big { font: var(--race); font-size: 20px; text-transform: uppercase; padding: 20px 12px; border-radius: 16px; border: 1px solid var(--line); }
.shop-btn { background: linear-gradient(180deg, #164e63, #0e3442); border-color: #1f6f8b; }
.dealer-btn { background: linear-gradient(180deg, #3b1d5e, #24123a); border-color: #5b3591; }
.goal { text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.goal-top span { color: var(--gold); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.goal-top b { font: var(--race); font-size: 18px; text-transform: uppercase; text-align: right; }
.goal-car { min-height: 0; }
.goal-car svg { width: 100%; max-height: 110px; display: block; }
.bar { height: 14px; background: #0b0d12; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); border-radius: 999px; }
.bar.thin { height: 7px; }
.goal-num { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- shop ---------- */
.shop-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); gap: 14px; padding: 0 16px 16px; min-height: 0; }
.shop-panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tabs { display: flex; gap: 4px; padding: 8px; background: #0e1118; overflow-x: auto; flex: none; }
.tabs button { flex: 1; min-width: 64px; padding: 8px 4px; border-radius: 12px; font-weight: 800; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--dim); }
.tabs button span { font-size: 24px; }
.tabs button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 -3px 0 var(--cyan); }
.items { flex: 1; overflow-y: auto; padding: 12px 14px 20px; -webkit-overflow-scrolling: touch; }
.section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 8px 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.tile { text-align: left; padding: 12px; border-radius: 14px; background: var(--panel2); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-height: 92px; }
.t-name { font-weight: 800; font-size: 15px; }
.t-desc { color: var(--dim); font-size: 12px; }
.t-fx { color: var(--green); font-size: 12px; font-weight: 700; }
.t-price { margin-top: auto; font: var(--race); font-size: 16px; color: var(--dim); }
.tile.afford .t-price { color: var(--gold); }
.tile.afford { border-color: #6b5410; }
.tile.equipped, .tile.installed { border-color: var(--cyan); background: #0d2730; }
.tile.equipped .t-price, .tile.installed .t-price { color: var(--cyan); }
.tile.owned .t-price { color: var(--text); font-size: 13px; }
.tile.locked { opacity: .45; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sw { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%), var(--c); border: 3px solid rgba(255,255,255,.12); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 3px var(--cyan); }
.sw.off { background: var(--panel2); font-weight: 800; font-size: 13px; color: var(--dim); }

/* sheets */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10; animation: fade .15s; }
.sheet {
  position: fixed; z-index: 11; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(480px, calc(100% - 32px)); background: #151a24; border: 1px solid #2f3747; border-radius: 22px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: up .2s ease-out;
}
.sheet.wide { width: min(720px, calc(100% - 32px)); }
.sheet-title { font: var(--race); font-size: 30px; text-transform: uppercase; }
.sheet-desc { color: var(--dim); }
.sheet-pi { display: flex; align-items: center; gap: 10px; color: var(--dim); font-weight: 700; }
.sheet-pi b { color: var(--text); }
.sheet-car svg { width: 100%; display: block; }
.btn-buy { font: var(--race); font-size: 26px; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, #4ade80, #16a34a); color: #03140a; box-shadow: 0 5px 0 #0d6b30; text-transform: uppercase; }
.btn-goal { font-weight: 800; padding: 14px; border-radius: 14px; background: #2a2208; color: var(--gold); border: 1px solid #5a470f; }
.btn-cancel { padding: 12px; color: var(--dim); font-weight: 700; }
.need { font-weight: 800; color: var(--gold); text-align: center; font-size: 18px; }
@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translate(-50%, 30px); opacity: 0 } }

.toast {
  position: fixed; z-index: 30; left: 50%; top: max(18px, env(safe-area-inset-top)); transform: translateX(-50%);
  background: #1f2633; border: 1px solid #39445a; padding: 12px 20px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: drop .25s ease-out; transition: opacity .4s, transform .4s; max-width: 90vw; text-align: center;
}
.toast.good { background: #0f3d22; border-color: #1f7a45; }
.toast.out { opacity: 0; transform: translate(-50%, -10px); }
@keyframes drop { from { transform: translate(-50%, -20px); opacity: 0 } }

/* ---------- dealership ---------- */
.dealer-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 0 16px 24px; align-content: start; }
.dcard { position: relative; text-align: left; background: linear-gradient(180deg, #1a2030, #10131b); border: 2px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dcard.owned { border-color: #1f6f8b; }
.dcard.current { border-color: var(--cyan); }
.dcard .star { position: absolute; top: 10px; right: 10px; background: #2a2208; color: var(--gold); font-weight: 800; font-size: 12px; padding: 4px 8px; border-radius: 999px; z-index: 1; }
.d-car svg { width: 100%; display: block; }
.d-name span { display: block; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.d-name b { font: var(--race); font-size: 22px; text-transform: uppercase; }
.d-meta { display: flex; align-items: center; gap: 10px; color: var(--dim); font-weight: 700; }
.d-meta .pi { font-size: 14px; }
.d-price { font: var(--race); font-size: 22px; color: var(--gold); }
.d-price.own { color: var(--cyan); font-size: 16px; }
.d-price.can { color: #03140a; background: linear-gradient(180deg, #4ade80, #16a34a); border-radius: 10px; padding: 6px 10px; font-size: 17px; text-align: center; }

/* ---------- race ---------- */
.race { background: #06070a; }
.hud { display: flex; align-items: center; gap: 14px; padding: 10px 16px; flex: none; }
.quit { width: 44px; height: 44px; border-radius: 50%; background: var(--panel2); color: var(--dim); font-size: 18px; flex: none; }
.timer { flex: 1; display: flex; align-items: center; gap: 12px; }
.tbar { flex: 1; height: 16px; background: #141821; border-radius: 999px; overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), #3b82f6); transform-origin: left; border-radius: 999px; }
.tbar i.hurry { background: linear-gradient(90deg, #f97316, var(--red)); }
.timer b { font: var(--race); font-size: 32px; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.pips { display: flex; align-items: center; gap: 4px; }
.pips i { width: 14px; height: 22px; border-radius: 4px; background: #1d2230; transform: skewX(-14deg); }
.pips i.on { background: linear-gradient(180deg, #7dd3fc, #2563eb); box-shadow: 0 0 10px #3b82f6; }
.pips span { font: var(--race); font-size: 14px; color: var(--dim); margin-left: 6px; }
.pips.lit i { background: linear-gradient(180deg, #fde68a, #f97316); box-shadow: 0 0 12px #f97316; }
.pips.lit span { color: var(--orange); }
.rcash { font: var(--race); font-size: 28px; color: var(--gold); min-width: 140px; text-align: right; font-variant-numeric: tabular-nums; }

.race-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 14px; padding: 0 16px 16px; min-height: 0; }
.race-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.road { position: relative; flex: 1.1; min-height: 150px; border-radius: var(--r); overflow: hidden; background: #0b1020; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0d1530 0%, #233056 55%, #4a3b5e 72%, #12141c 72.5%); }
.city { position: absolute; left: 0; width: calc(100% + 400px); bottom: 27%; height: 38%; opacity: .85; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22400%22%20height%3D%22100%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%2246%22%20width%3D%2234%22%20height%3D%2254%22%20fill%3D%22%23121831%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2252%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%225%22%20y%3D%2261%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2261%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2270%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%225%22%20y%3D%2288%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2288%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2242%22%20y%3D%2214%22%20width%3D%2240%22%20height%3D%2286%22%20fill%3D%22%230f142a%22/%3E%3Crect%20x%3D%2247%22%20y%3D%2220%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2255%22%20y%3D%2220%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2263%22%20y%3D%2229%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2263%22%20y%3D%2238%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2247%22%20y%3D%2247%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2247%22%20y%3D%2256%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2255%22%20y%3D%2274%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2263%22%20y%3D%2274%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2247%22%20y%3D%2283%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2255%22%20y%3D%2283%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2271%22%20y%3D%2283%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2263%22%20y%3D%2292%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2282%22%20y%3D%2239%22%20width%3D%2226%22%20height%3D%2261%22%20fill%3D%22%23161d38%22/%3E%3Crect%20x%3D%2287%22%20y%3D%2254%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2287%22%20y%3D%2272%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2295%22%20y%3D%2272%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%2287%22%20y%3D%2290%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2244%22%20width%3D%2226%22%20height%3D%2256%22%20fill%3D%22%23161d38%22/%3E%3Crect%20x%3D%22113%22%20y%3D%2250%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22121%22%20y%3D%2250%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22121%22%20y%3D%2259%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22121%22%20y%3D%2268%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22121%22%20y%3D%2277%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22113%22%20y%3D%2286%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22121%22%20y%3D%2286%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22113%22%20y%3D%2295%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22142%22%20y%3D%2247%22%20width%3D%2226%22%20height%3D%2253%22%20fill%3D%22%23161d38%22/%3E%3Crect%20x%3D%22155%22%20y%3D%2253%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22147%22%20y%3D%2262%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22147%22%20y%3D%2271%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22172%22%20y%3D%2237%22%20width%3D%2226%22%20height%3D%2263%22%20fill%3D%22%23161d38%22/%3E%3Crect%20x%3D%22185%22%20y%3D%2243%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22177%22%20y%3D%2252%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22185%22%20y%3D%2252%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22177%22%20y%3D%2261%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22177%22%20y%3D%2270%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22185%22%20y%3D%2270%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22185%22%20y%3D%2279%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22185%22%20y%3D%2288%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22206%22%20y%3D%2216%22%20width%3D%2240%22%20height%3D%2284%22%20fill%3D%22%231a2140%22/%3E%3Crect%20x%3D%22219%22%20y%3D%2222%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22227%22%20y%3D%2222%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22219%22%20y%3D%2231%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22219%22%20y%3D%2240%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22227%22%20y%3D%2240%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22235%22%20y%3D%2240%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22211%22%20y%3D%2249%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22211%22%20y%3D%2258%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22219%22%20y%3D%2258%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22235%22%20y%3D%2258%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22211%22%20y%3D%2267%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22227%22%20y%3D%2276%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22211%22%20y%3D%2294%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22219%22%20y%3D%2294%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22250%22%20y%3D%2232%22%20width%3D%2248%22%20height%3D%2268%22%20fill%3D%22%23161d38%22/%3E%3Crect%20x%3D%22271%22%20y%3D%2238%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22255%22%20y%3D%2247%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22287%22%20y%3D%2247%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22263%22%20y%3D%2256%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22287%22%20y%3D%2256%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22255%22%20y%3D%2265%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22255%22%20y%3D%2274%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22263%22%20y%3D%2274%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22279%22%20y%3D%2274%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22255%22%20y%3D%2283%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22263%22%20y%3D%2292%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22279%22%20y%3D%2292%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22302%22%20y%3D%2264%22%20width%3D%2248%22%20height%3D%2236%22%20fill%3D%22%23121831%22/%3E%3Crect%20x%3D%22307%22%20y%3D%2270%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22307%22%20y%3D%2279%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22339%22%20y%3D%2279%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22323%22%20y%3D%2288%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22354%22%20y%3D%2251%22%20width%3D%2246%22%20height%3D%2249%22%20fill%3D%22%231a2140%22/%3E%3Crect%20x%3D%22375%22%20y%3D%2257%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22359%22%20y%3D%2284%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22383%22%20y%3D%2284%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22359%22%20y%3D%2293%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22375%22%20y%3D%2293%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3Crect%20x%3D%22391%22%20y%3D%2293%22%20width%3D%223%22%20height%3D%224%22%20fill%3D%22%23f6d27a%22%20opacity%3D%22.7%22/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; }
.rail { position: absolute; left: 0; width: calc(100% + 60px); bottom: 27%; height: 10px; background: repeating-linear-gradient(90deg, #9aa3ad 0 4px, transparent 4px 60px), linear-gradient(#59606b, #3a3f48) 0 2px / 100% 4px no-repeat; }
.tarmac { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #2b2f38, #17191f); overflow: hidden; }
.dash { position: absolute; left: 0; top: 46%; width: calc(100% + 120px); height: 5px; background: repeating-linear-gradient(90deg, #e9e3c8 0 60px, transparent 60px 120px); }
.race-car { position: absolute; left: 4%; width: 52%; bottom: 6%; will-change: transform; }
.race-car svg { width: 100%; display: block; }
.speedo { position: absolute; right: 14px; top: 10px; text-align: right; }
.speedo b { font: var(--race); font-size: 40px; display: block; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(34,211,238,.55); }
.speedo span { color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.6); font: var(--race); font-size: 48px; opacity: 0; pointer-events: none; text-transform: uppercase; white-space: nowrap; }
.banner.show { animation: banner 1.3s ease-out; }
.banner.nitro { color: #7dd3fc; text-shadow: 0 0 24px #3b82f6; }
.banner.gold { color: var(--gold); text-shadow: 0 0 24px #b45309; font-size: 34px; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1) } }

.problem { position: relative; flex: 1; min-height: 140px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color .12s, background .12s; }
.qline { display: flex; align-items: center; gap: 18px; }
.q { font: var(--race); font-style: normal; font-size: clamp(56px, 9vmin, 104px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ans { min-width: 2.2ch; padding: 0 12px; font: var(--race); font-style: normal; font-size: clamp(56px, 9vmin, 104px); color: var(--cyan); border-bottom: 5px solid #2a3344; text-align: center; font-variant-numeric: tabular-nums; min-height: 1.1em; }
.problem.right { border-color: var(--green); background: #0e2a1a; }
.problem.right .ans { color: var(--green); }
.problem.wrong { border-color: #b45309; background: #2a1a08; animation: nudge .3s; }
.problem.wrong .ans { color: #f87171; text-decoration: line-through; }
.reveal { font: var(--race); font-style: normal; font-size: 30px; color: var(--gold); min-height: 1.2em; margin-top: 8px; text-align: center; }
.reveal b { font-size: 40px; }
.reveal small { display: block; font-size: 18px; color: var(--dim); font-weight: 700; margin-top: 4px; }
@keyframes nudge { 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
.float { position: absolute; right: 18px; top: 14px; font: var(--race); font-size: 28px; color: var(--gold); animation: float .9s ease-out forwards; pointer-events: none; }
.float.lightning { color: #7dd3fc; font-size: 34px; }
@keyframes float { from { opacity: 1; transform: translateY(0) } to { opacity: 0; transform: translateY(-50px) } }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; min-height: 0; }
.key { font: var(--race); font-style: normal; font-size: clamp(34px, 6vmin, 56px); border-radius: 18px; background: linear-gradient(180deg, #232a39, #1a1f2b); border: 1px solid #333c50; box-shadow: 0 5px 0 #0c0e14; transition: transform .05s, box-shadow .05s; touch-action: none; }
.key.fn { color: var(--dim); font-size: clamp(26px, 4.6vmin, 40px); }
.key.go { color: #03140a; background: linear-gradient(180deg, #4ade80, #16a34a); border-color: #22c55e; box-shadow: 0 5px 0 #0d6b30; opacity: .55; }
.pad.ready .key.go { opacity: 1; }
.key.press, .key:active { transform: translateY(4px); box-shadow: 0 1px 0 #0c0e14; background: #2c3549; }

.countdown { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; font: var(--race); font-size: 30vmin; color: #fff; text-shadow: 0 0 40px rgba(34,211,238,.6); pointer-events: none; z-index: 20; }
.countdown.show { display: flex; }
.countdown.pop { animation: pop .65s ease-out; }
.countdown.go { color: var(--green); animation: pop .45s ease-out; }
.countdown.finish { background: rgba(0,0,0,.6); font-size: 16vmin; color: var(--gold); animation: pop .5s ease-out; }
.countdown .flag { font-size: 14vmin; font-style: normal; }
@keyframes pop { from { transform: scale(1.6); opacity: 0 } 40% { opacity: 1 } to { transform: scale(1) } }

/* ---------- results ---------- */
.res-body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 14px; padding: 0 16px 20px; align-content: start; }
.res-hero { grid-row: span 3; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, #1a2030, #10131b); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.res-flag { font: var(--race); font-size: 64px; text-transform: uppercase; background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.big-stats > div { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; }
.big-stats b { display: block; font: var(--race); font-size: 48px; font-variant-numeric: tabular-nums; }
.big-stats span { color: var(--dim); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.big-stats .pb { border-color: var(--gold); background: #2a2208; }
.big-stats .pb span { color: var(--gold); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 800; }
.chip-row span { background: var(--panel2); border: 1px solid var(--line); padding: 6px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.chip-row.gold span { border-color: #6b5410; color: var(--gold); }
.res-cash .line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-weight: 600; }
.res-cash .line b { color: var(--gold); font-variant-numeric: tabular-nums; }
.res-cash .total { border: 0; padding-top: 14px; font: var(--race); font-size: 30px; text-transform: uppercase; }
.next { text-align: left; font-size: 17px; line-height: 1.35; }
.next.good { border-color: #1f7a45; background: #0f2a1b; }
.res-actions { display: grid; gap: 10px; }

/* ---------- parent ---------- */
.parent-body { flex: 1; overflow-y: auto; padding: 0 16px 30px; display: flex; flex-direction: column; gap: 14px; max-width: 980px; width: 100%; margin: 0 auto; -webkit-user-select: text; user-select: text; }
.parent-body h2 { font: var(--race); font-size: 30px; text-transform: uppercase; }
.parent-body h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.kpis > div { background: var(--panel2); border-radius: 12px; padding: 10px; }
.kpis b { display: block; font: var(--race); font-size: 26px; }
.kpis.small b { font-size: 20px; }
.kpis span { color: var(--dim); font-size: 12px; }
.chart { width: 100%; height: 150px; display: block; background: #0d1017; border-radius: 12px; }
.chart .line { fill: none; stroke: var(--cyan); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart circle { fill: var(--cyan); }
.chart .target { stroke: var(--green); stroke-dasharray: 6 6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart .tlabel { fill: var(--dim); font-size: 12px; }
.grid-wrap { overflow-x: auto; margin-top: 10px; }
.fgrid { border-collapse: separate; border-spacing: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.fgrid th { color: var(--dim); font-weight: 800; padding: 4px; min-width: 30px; }
.fgrid td { width: 40px; height: 32px; text-align: center; border-radius: 6px; color: rgba(0,0,0,.75); font-weight: 700; }
.b0 { background: #232937; } .b1 { background: #ef4444; } .b2 { background: #f59e0b; } .b3 { background: #d9e34a; } .b4 { background: #86efac; } .b5 { background: #22c55e; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.legend span { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #111; }
.legend .b0 { color: var(--dim); }
.settings .set { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings label { font-weight: 700; }
.settings label small { display: block; color: var(--dim); font-weight: 500; }
.seg.nums button { flex: 0 0 auto; min-width: 46px; }
textarea { width: 100%; background: #0b0d12; color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px; font: 12px ui-monospace, monospace; margin: 8px 0; -webkit-user-select: text; user-select: text; }
.danger { margin-top: 10px; color: #fca5a5; background: #2a0f12; border: 1px solid #5c1d22; padding: 10px 14px; border-radius: 12px; font-weight: 700; }

/* ---------- portrait / small screens ---------- */
@media (orientation: portrait), (max-width: 860px) {
  .garage-body, .shop-body, .res-body { grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
  .garage-body .stage { min-height: 46vh; }
  .shop-body { grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .shop-stage .hint, .shop-stage .stats { display: none; }
  .shop-stage { padding: 10px 14px; }
  .res-hero { grid-row: auto; }
  .race-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .road { flex: 1; }
  .race-car { width: 60%; }
  .settings .set { grid-template-columns: 1fr; }
  .brand { font-size: 20px; }
  .cash { font-size: 20px; }
}
@media (max-height: 700px) and (orientation: landscape) {
  .stats b { font-size: 18px; }
  .btn-race { padding: 14px; font-size: 32px; }
  .goal-car svg { max-height: 70px; }
}

/* ---------- welcome + cloud ---------- */
input { font: inherit; color: var(--text); background: #0b0d12; border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 20px; width: 100%; -webkit-user-select: text; user-select: text; }
input:focus { outline: none; border-color: var(--cyan); }
.welcome { overflow-y: auto; }
.welcome-body { max-width: 640px; width: 100%; margin: auto; padding: 24px 20px 40px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
.w-title { font: var(--race); font-size: clamp(44px, 9vw, 76px); text-transform: uppercase; background: linear-gradient(90deg, #fff, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w-car svg { width: 100%; display: block; -webkit-box-reflect: below -14px linear-gradient(transparent 72%, rgba(255,255,255,.14)); }
.w-lead { color: var(--dim); font-size: 18px; margin: 0; }
.w-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.w-form label { font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin-top: 6px; }
.w-form .btn-race, .w-form .btn-buy { margin-top: 8px; text-align: center; }
.err { color: #fca5a5; min-height: 1.2em; }
.code-big { font: 800 30px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; background: #0b0d12; border: 1px dashed #3a4459; border-radius: 14px; padding: 14px; text-align: center; margin: 8px 0; -webkit-user-select: all; user-select: all; }
.linkrow { display: flex; gap: 8px; }
.linkrow input { font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; }
.linkrow button { padding: 0 20px; border-radius: 12px; background: var(--cyan); color: #04121a; font-weight: 800; }
.code-big ~ .seg { margin-top: 12px; }
.linkbtn { color: var(--cyan); font-weight: 700; text-decoration: underline; margin-left: 6px; }

/* shop hours + dealer regions */
.shop-status { font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.shop-status.open { color: #86efac; border-color: #1f7a45; }
.shop-status.closed { color: var(--dim); }
.shop-status b { color: var(--text); }
.row2.locked .btn-big { filter: grayscale(.7); opacity: .7; }
.seg.region { padding: 0 16px 10px; flex: none; }
.seg.region button { flex: 0 0 auto; }
.seg.region small { color: inherit; opacity: .6; margin-left: 4px; }