:root{
  --cardinal:#990000; --cardinal-d:#6e0000; --cardinal-l:#c21a1a;
  --gold:#FFCC00; --gold-d:#e0b000;
  --ink:#16110f; --ink2:#4a423e; --mute:#6b625d; --line:#ece6e2;
  --bg:#f6f3f1; --card:#ffffff; --ok:#15803d; --warn:#b45309; --bad:#dc2626;
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
  background:radial-gradient(1200px 700px at 80% -10%,#ffe8a3 0,transparent 55%),radial-gradient(900px 600px at -10% 110%,#f3c1c1 0,transparent 55%),#fbf7f2;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit}

/* ---------- desktop stage: explanation on the left, the phone pinned on the right ---------- */
.stage{display:grid;grid-template-columns:minmax(0,720px) auto;justify-content:center;align-items:start;gap:56px;padding:20px 32px}
.explain{padding:28px 0 56px}
.explain .brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.explain .brand b{font-size:22px;font-weight:900;letter-spacing:-.5px;display:block}
.explain .brand small{color:var(--cardinal);font-weight:700}
.logo{width:44px;height:44px;border-radius:13px;background:var(--cardinal);color:var(--gold);display:grid;place-items:center;font-weight:900;font-size:19px;box-shadow:0 6px 18px #99000040}
.explain h1{font-size:40px;line-height:1.06;letter-spacing:-1.4px;margin:0 0 14px;font-weight:900}
.explain .lede{font-size:18.5px;line-height:1.5;color:var(--ink);margin:0}
.explain section{margin-top:28px;padding-top:22px;border-top:1px solid #0000001a}
.explain h2{font-size:20px;margin:0 0 10px;letter-spacing:-.3px}
.explain p,.explain li,.explain dd,.explain td{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.explain b,.explain dt{color:var(--ink)}
.lp-steps,.lp-list{margin:0;padding-left:22px}
.lp-steps li,.lp-list li{margin:0 0 10px;padding-left:4px}
.lp-price{border-collapse:collapse;margin:4px 0 12px}
.lp-price td{padding:6px 22px 6px 0;border-bottom:1px solid #0000000f}
.lp-price td+td{font-weight:800;color:var(--ink);white-space:nowrap}
.lp-qa{margin:0}.lp-qa dt{font-weight:800;margin-top:10px;font-size:15.5px}.lp-qa dd{margin:2px 0 0}
.lp-show{display:inline-block;margin:2px 0 0 4px;padding:4px 12px;border-radius:999px;background:var(--cardinal);color:#fff;font-size:13px;font-weight:700;vertical-align:baseline}
.lp-show:hover{background:var(--cardinal-d)}
.lp-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-case{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.lp-case h3{margin:0 0 4px;font-size:17px;letter-spacing:-.2px}
.explain .lp-who{font-size:14px;margin:0 0 10px;color:var(--mute)}
.lp-case .lp-steps li{font-size:14.5px;margin-bottom:8px}
.explain .lp-total{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.explain .lp-note{font-size:13.5px;margin:6px 0 0;color:var(--mute)}
.lp-case .lp-show{margin:10px 0 0}
@media (max-width:720px){.lp-cols{grid-template-columns:1fr}}
.lp-play{display:inline-block;margin-top:12px;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:800}
.lp-play:hover{background:#000}
.explain .lp-now{background:#fff1bf;border-radius:8px;box-shadow:0 0 0 6px #fff1bf;transition:background .3s}
/* demo player: cursor, click blocker and the time-passing clock, all inside the phone */
.pl-cursor{position:absolute;left:0;top:0;z-index:10003;pointer-events:none;opacity:0;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .25s;filter:drop-shadow(0 2px 3px #0007)}
.pl-cursor.on{opacity:1}
.pl-cursor svg{display:block}
.pl-cursor .ring{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:3px solid var(--gold);opacity:0}
.pl-cursor.tap .ring{animation:plTap .5s ease-out}
@keyframes plTap{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.pl-bar{position:absolute;left:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:650;visibility:hidden;box-shadow:0 8px 24px -10px #000a}
.pl-bar.on{visibility:visible}
.pl-bar button{width:34px;height:34px;border-radius:50%;background:#ffffff1f;color:#fff;font-size:13px;flex:none}
.pl-bar button:hover{background:#ffffff38}
#pl-say{flex:1;min-width:0;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-veil{position:absolute;inset:12px;border-radius:44px;z-index:10001;display:none}
.pl-veil.on{display:block}
.pl-clock{position:absolute;inset:12px;border-radius:44px;z-index:10002;background:#16110fe8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .3s}
.pl-clock.on{opacity:1}
.pl-clock .hand{transform-box:view-box;transform-origin:60px 60px}
.pl-time{font-size:42px;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.pl-cap{font-size:15px;opacity:.85;text-align:center;padding:0 34px;line-height:1.4}
.explain .lp-real{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.phonewrap{position:sticky;top:20px}
.phone{position:relative;width:390px;height:844px;border-radius:56px;background:#0d0b0a;padding:12px;transform-origin:top left;
  box-shadow:0 0 0 2px #2b2522,0 0 0 4px #57504c,0 40px 80px -20px #3a1a1a70,0 24px 40px -24px #000a;flex:none}
.phone .screen{position:absolute;inset:12px;border-radius:44px;overflow:hidden;background:var(--bg)}
.island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:120px;height:34px;border-radius:20px;background:#000;z-index:50}
.statusbar{position:absolute;top:12px;left:12px;right:12px;height:54px;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:6px 34px 0 46px;font-weight:700;font-size:15.5px;pointer-events:none;color:var(--ink);background:var(--bg);border-radius:40px 40px 0 0}
.statusbar.light{background:transparent}
.statusbar.light{color:#fff}
.sb-icons{display:flex;gap:6px;align-items:center}.sb-icons svg{fill:currentColor}
.batt{width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;padding:1.5px;position:relative;opacity:.9}
.batt i{display:block;height:100%;width:80%;background:currentColor;border-radius:1.5px}
.homebar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#111;z-index:60;opacity:.85;pointer-events:none}

@media (max-width:1100px){.stage{grid-template-columns:minmax(0,720px);gap:8px}.phonewrap{position:static;order:-1;justify-self:center}}
@media (max-width:520px){
  .stage{padding:0;display:block}
  .explain{display:none}
  .phone{width:100vw;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:var(--bg);transform:none!important}
  .phonewrap{width:auto!important;height:auto!important}
  .phone .screen{inset:0;border-radius:0}
  .island,.homebar,.statusbar{display:none}
  .view{padding-top:env(safe-area-inset-top)}
}

/* ---------- app shell ---------- */
.view{position:absolute;inset:0;display:flex;flex-direction:column;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:0 20px}
.top{padding:62px 20px 10px;display:flex;align-items:center;gap:10px}
@media (max-width:520px){.top{padding-top:calc(16px + env(safe-area-inset-top))}}
.top h2{margin:0;font-size:24px;letter-spacing:-.6px;font-weight:850;flex:1}
.back{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 0 var(--line),0 2px 8px #0000000d;font-size:20px;flex:none}
.tabbar{display:flex;justify-content:space-around;background:#fffffff2;backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 6px 30px}
@media (max-width:520px){.tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--mute);padding:4px 0}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--cardinal)}
.tab .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);position:absolute;margin:-2px 0 0 18px;box-shadow:0 0 0 2px #fff}

.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 1px 0 var(--line),0 6px 20px -12px #3a1a1a30}
.row{display:flex;align-items:center;gap:12px}
.col{display:flex;flex-direction:column;gap:12px}
.grow{flex:1;min-width:0}
.muted{color:var(--mute)} .ink2{color:var(--ink2)}
.sm{font-size:13px} .xs{font-size:11.5px} .b{font-weight:700} .xb{font-weight:850}
.h3{font-size:17px;font-weight:800;letter-spacing:-.3px;margin:0}
.sec{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--mute);margin:22px 0 10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:650;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.chip.gold{background:#fff6cc;box-shadow:inset 0 0 0 1px #f2dc80;color:#6b5200}
.chip.red{background:#fde8e8;color:var(--cardinal);box-shadow:inset 0 0 0 1px #f7c8c8}
.chip.green{background:#e3f7ea;color:#0f6b32;box-shadow:inset 0 0 0 1px #bfe8cd}
.pill{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:#eee;letter-spacing:.2px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:16px;font-weight:800;font-size:16px;background:var(--cardinal);color:#fff;box-shadow:0 8px 20px -8px #99000090;transition:transform .08s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn.gold{background:var(--gold);color:#3b2a00;box-shadow:0 8px 20px -8px #c79b0090}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.dark{background:var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sm{padding:11px;font-size:14px;border-radius:13px}
.link{color:var(--cardinal);font-weight:700}
.divider{height:1px;background:var(--line);margin:12px 0}
.kv{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px}
.kv span:first-child{color:var(--ink2)}
.kv.total{font-weight:850;font-size:16px;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.foot{padding:12px 20px 30px;background:linear-gradient(transparent,var(--bg) 30%)}
@media (max-width:520px){.foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}

/* ---------- welcome ---------- */
.welcome{background:linear-gradient(165deg,#b30000 0%,#990000 45%,#5c0000 100%);color:#fff}
.welcome .hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 28px}
.bigR{width:86px;height:86px;border-radius:26px;background:var(--gold);color:var(--cardinal);font-size:40px;font-weight:900;display:grid;place-items:center;box-shadow:0 18px 40px -10px #0008;margin-bottom:28px}
.welcome h1{font-size:36px;margin:0;letter-spacing:-1.2px;line-height:1.02;font-weight:900}
.welcome h1 em{font-style:normal;color:var(--gold)}
.welcome p{opacity:.88;line-height:1.5;font-size:16px;margin:16px 0 0}
.welcome .foot{background:none}
.fighton{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:800;color:var(--gold);font-size:14px;letter-spacing:.4px}

/* ---------- usc login mock ---------- */
.sso{background:#fff}
.sso .bar{background:var(--cardinal);color:#fff;padding:64px 20px 18px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
@media (max-width:520px){.sso .bar{padding-top:calc(18px + env(safe-area-inset-top))}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:700;color:var(--ink2)}
.field input,.field select{padding:14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;outline:none;font-size:16px}
.field input:focus,.field select:focus{border-color:var(--cardinal)}
.duo{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 0;text-align:center}
.spinner{width:44px;height:44px;border-radius:50%;border:4px solid #f0e0e0;border-top-color:var(--cardinal);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- home / map ---------- */
.mapwrap{position:relative;flex:1;min-height:0}
#map{position:absolute;inset:0;background:#e8e2dc}
.leaflet-control-attribution{font-size:9px!important}
.maptop{position:absolute;top:58px;left:14px;right:14px;z-index:500;display:flex;flex-direction:column;gap:10px}
@media (max-width:520px){.maptop{top:calc(10px + env(safe-area-inset-top))}}
.search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 8px 24px -8px #0004;font-weight:650}
.search .av{width:30px;height:30px;border-radius:50%;background:var(--cardinal);color:var(--gold);display:grid;place-items:center;font-weight:900;font-size:13px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips .chip{box-shadow:0 4px 12px -6px #0005}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:600;background:var(--bg);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px -12px #0004;max-height:52%;display:flex;flex-direction:column}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:#d8d0cb;margin:9px auto 4px}
.sheet .scroll{padding:4px 16px 12px}
.veh{display:flex;gap:12px;align-items:center;padding:12px;background:#fff;border-radius:16px;margin-bottom:10px;box-shadow:0 1px 0 var(--line);width:100%;text-align:left}
.veh .thumb{width:60px;height:60px;border-radius:14px;background:#f6efe9;display:grid;place-items:center;flex:none}
.veh .thumb svg{width:50px;height:50px}
.veh .price{text-align:right;font-weight:850}
.battbar{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700}
.battbar i{width:22px;height:10px;border-radius:3px;border:1.5px solid currentColor;position:relative;display:inline-block}
.battbar i:after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:calc(var(--p) * 0.17px);background:currentColor;border-radius:1px}
.pin{width:34px;height:34px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 4px 10px #0005;border:2.5px solid #fff}
.pin span{transform:rotate(45deg);font-weight:900;font-size:13px}
.pin.home{background:var(--cardinal);color:var(--gold);width:40px;height:40px}
.pin.has{background:var(--ink);color:#fff}
.pin.none{background:#bdb3ad;color:#fff}
.pin.plug:after{content:"⚡";position:absolute;transform:rotate(45deg);top:-12px;right:-10px;font-size:13px;background:var(--gold);border-radius:50%;width:18px;height:18px;display:grid;place-items:center;border:2px solid #fff}
.me{width:18px;height:18px;border-radius:50%;background:#2563eb;border:3px solid #fff;box-shadow:0 0 0 6px #2563eb33}
.banner{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:16px;padding:12px 14px;margin-bottom:10px;width:100%;text-align:left}
.banner .pulse{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 #ffcc0099;animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px #ffcc0000}100%{box-shadow:0 0 0 0 #ffcc0000}}

/* ---------- vehicle detail ---------- */
.hero-veh{background:linear-gradient(160deg,#fff7e0,#fde9e9);border-radius:0 0 30px 30px;padding:58px 20px 18px;position:relative}
@media (max-width:520px){.hero-veh{padding-top:calc(14px + env(safe-area-inset-top))}}
.hero-veh .art{display:grid;place-items:center;height:170px}
.hero-veh .art svg{width:190px;height:170px}
.owner{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:850;color:#fff;flex:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{background:#fff;border-radius:14px;padding:11px;text-align:center;box-shadow:0 1px 0 var(--line)}
.stat b{display:block;font-size:17px;letter-spacing:-.3px}
.stat small{color:var(--mute);font-size:11.5px;font-weight:600}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opt{background:#fff;border-radius:14px;padding:12px 4px;text-align:center;box-shadow:inset 0 0 0 1.5px var(--line);transition:all .15s}
.opt b{display:block;font-size:16px}
.opt small{font-size:15px;color:var(--mute);font-weight:650}
.opt.on{box-shadow:inset 0 0 0 2px var(--cardinal);background:#fff5f5}
.opt.on small{color:var(--cardinal)}
.opt[disabled]{opacity:.35;pointer-events:none}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:#fff6cc;color:#5b4500;font-size:13.5px;line-height:1.4}
.note.red{background:#fde8e8;color:#7a0b0b}
.note.green{background:#e3f7ea;color:#0f5a2b}
.note.blue{background:#e6effe;color:#1e3a8a}

/* ---------- steps / checks ---------- */
.steps{display:flex;gap:6px;margin:4px 0 16px}
.steps i{flex:1;height:5px;border-radius:3px;background:#e6dcd6}
.steps i.on{background:var(--cardinal)}
.cam{position:relative;border-radius:20px;overflow:hidden;background:#1c1714;aspect-ratio:4/3;display:grid;place-items:center;color:#fff}
.cam img,.cam canvas{width:100%;height:100%;object-fit:cover;display:block}
.cam .guide{position:absolute;inset:16%;border:2.5px dashed #ffffffaa;border-radius:16px}
.cam .lbl{position:absolute;left:12px;top:12px;background:#000a;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}
.cam .empty{text-align:center;opacity:.85;font-size:14px;padding:20px;line-height:1.5}
.ai{border-radius:16px;padding:14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px}
.ai .head{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:8px}
.ai .badge{font-size:10.5px;font-weight:850;letter-spacing:.6px;padding:3px 7px;border-radius:6px;background:var(--ink);color:var(--gold)}
.ai ul{margin:0;padding-left:18px;color:var(--ink2);line-height:1.6}
.ai.ok{box-shadow:inset 0 0 0 2px #22c55e66;background:#f4fdf7}
.ai.warn{box-shadow:inset 0 0 0 2px #f59e0b66;background:#fffbeb}
.ai.bad{box-shadow:inset 0 0 0 2px #ef444466;background:#fef2f2}
.thinking{display:flex;align-items:center;gap:10px;color:var(--ink2);font-weight:650}
.thinking .spinner{width:22px;height:22px;border-width:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- unlock ---------- */
.lockbig{width:170px;height:170px;border-radius:50%;margin:20px auto;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#c21a1a,#7a0000);box-shadow:0 20px 50px -14px #99000099,inset 0 -8px 20px #0004;color:#fff;position:relative;transition:all .4s}
.lockbig svg{width:70px;height:70px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
.lockbig.open{background:radial-gradient(circle at 35% 30%,#ffd84d,#e0a800);box-shadow:0 20px 50px -14px #e0a80099}
.lockbig.open svg{stroke:#3b2a00}
.lockbig.busy:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid transparent;border-top-color:var(--gold);animation:spin 1s linear infinite}
.shackle{transition:transform .4s}
.lockbig.open .shackle{transform:translate(0,-6px) rotate(-25deg);transform-origin:28px 30px}

/* ---------- active ride ---------- */
.ride{background:var(--ink);color:#fff}
.ride .top h2{color:#fff}
.timer{font-size:64px;font-weight:900;letter-spacing:-3px;font-variant-numeric:tabular-nums;line-height:1}
.timer.extra{color:var(--gold)}.timer.late{color:#ff6b6b}
.ridecard{background:#231c19;border-radius:20px;padding:16px;color:#fff}
.ridecard .muted{color:#a89e98}
.ride .kv span:first-child{color:#c9bfb9}
.ride .btn.ghost{background:#2e2522;color:#fff;box-shadow:none}
.minimap{height:150px;border-radius:18px;overflow:hidden;position:relative}
.gauge{height:10px;border-radius:5px;background:#3a302c;overflow:hidden;margin-top:8px;position:relative}
.gauge i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:linear-gradient(90deg,var(--gold),#ffe680)}
.gauge u{position:absolute;top:-3px;bottom:-3px;width:2px;background:#ff6b6b}

/* ---------- garage ---------- */
.big-earn{font-size:40px;font-weight:900;letter-spacing:-1.4px}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:10px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--mute);font-weight:650;height:100%;justify-content:flex-end}
.bars i{width:100%;border-radius:6px 6px 3px 3px;background:#f0e1e1;display:block}
.bars i.hi{background:var(--cardinal)}
.toggle{width:52px;height:32px;border-radius:999px;background:#d9cfca;position:relative;transition:.2s;flex:none}
.toggle:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0003;transition:.2s}
.toggle.on{background:#22c55e}.toggle.on:after{left:23px}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kit .card{padding:12px}
.days{display:flex;gap:6px}
.days button{flex:1;padding:9px 0;border-radius:10px;font-weight:750;font-size:13px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.days button.on{background:var(--cardinal);color:#fff;box-shadow:none}
.hist{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.hist:last-child{border:0}

/* ---------- misc ---------- */
.toast{position:absolute;left:50%;bottom:120px;width:max-content;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:650;font-size:14px;opacity:0;transition:all .25s;z-index:9999;max-width:340px;text-align:center;box-shadow:0 10px 30px -10px #000a;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-bg{position:absolute;inset:0;background:#0007;z-index:900;display:flex;align-items:flex-end;animation:fade .2s}
.modal{background:var(--bg);width:100%;border-radius:26px 26px 0 0;padding:10px 20px 34px;max-height:88%;overflow:auto}
.list-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px;background:#fff;border-radius:14px;margin-bottom:8px;text-align:left;box-shadow:0 1px 0 var(--line)}
.list-btn .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:none}
.list-btn .chev{color:#c4bab4;font-size:20px}
.rules li{margin-bottom:12px;line-height:1.45;color:var(--ink2)}
.rules li b{color:var(--ink)}
.qr{width:120px;height:120px;margin:0 auto;display:block;image-rendering:pixelated}
.scanbox{position:relative;border-radius:22px;overflow:hidden;background:#141110;aspect-ratio:1;display:grid;place-items:center}
.scanbox .frame{width:62%;aspect-ratio:1;border-radius:22px;box-shadow:0 0 0 999px #00000080;position:relative}
.scanbox .frame:before{content:"";position:absolute;left:8%;right:8%;height:3px;background:var(--gold);top:10%;animation:scan 1.6s ease-in-out infinite alternate;box-shadow:0 0 12px var(--gold)}
@keyframes scan{to{top:88%}}
.scanbox .rackqr{position:absolute;width:44%;background:#fff;border-radius:10px;padding:8px;text-align:center;font-weight:900;font-size:11px;color:var(--cardinal)}
.success{width:84px;height:84px;border-radius:50%;background:#22c55e;display:grid;place-items:center;margin:10px auto 6px;box-shadow:0 14px 30px -10px #22c55e99}
.success svg{width:44px;height:44px;stroke:#fff;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stars{display:flex;justify-content:center;gap:8px;font-size:30px}
.stars button{color:#ddd}.stars button.on{color:var(--gold)}
.plug{display:flex;align-items:center;gap:12px;background:#1c1714;color:#fff;border-radius:18px;padding:14px}
.plug .w{font-size:24px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
#map .leaflet-tile-pane{filter:saturate(.75) contrast(.95)}
#mm .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* key box code on the pickup screen */
.codebox{display:flex;gap:10px;justify-content:center;margin:12px auto 16px}
.codebox span{width:56px;height:72px;border-radius:14px;background:#16110f;color:var(--gold);font-size:40px;font-weight:900;display:grid;place-items:center;box-shadow:0 10px 24px -12px #000}
.pl-cursor.slow{transition:transform 2.1s cubic-bezier(.3,.7,.2,1),opacity .4s}