:root{
  /* "Charcoal and lime search". Every text/background pair is checked for WCAG AA by tools/contrast.js. */
  --char:#1f2124; --char-2:#2a2c30; --lime:#a6f000; --lime-2:#9be600; --on-lime:#1f2124;
  --bg:#f3f4f1; --surface:#fff; --surface-2:#f6f7f4; --ink:#1f2124; --ink-2:#4b4f56; --ink-3:#646a72; --line:#e3e5e0;
  --brand:var(--lime); --brand-2:var(--lime-2); --brand-ink:#3a6100; --brand-soft:#edf8d2;
  --ok:#047857; --ok-soft:#e6f6ee; --warn:#9a4a06; --warn-soft:#fff5e3; --bad:#c81e1e; --bad-soft:#fdeeee; --ok-solid:#047857; --warn-solid:#9a4a06;
  --t-chain:#2563eb; --t-indep:#7c3aed; --t-dealer:#475569; --t-salvage:#b45309;
  --r:18px; --r-sm:12px; --shadow:0 1px 2px rgba(13,19,32,.05),0 6px 18px rgba(13,19,32,.06);
  --tab-h:64px; --top-h:54px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#161719; --surface:#1f2124; --surface-2:#2a2c30; --ink:#f5f6f3; --ink-2:#c3c7cc; --ink-3:#9ea3aa; --line:#34373c;
    --brand-soft:#2a3613; --brand-ink:#a6f000; --ok:#34d399; --ok-soft:#10291f; --warn:#fbbf5a; --warn-soft:#332409; --bad:#f87171; --bad-soft:#3a1616; --shadow:0 1px 2px rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top-h) + 10px);scroll-padding-bottom:calc(var(--tab-h) + 24px)}
html,body{margin:0;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;font-size:16px;line-height:1.45}
h1,h2,h3{margin:0;letter-spacing:-.01em}
a{color:var(--brand-ink)}
button,input,select{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;min-height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent}
.topbar.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.08rem;letter-spacing:-.02em}
.brand img{width:28px;height:28px;border-radius:8px}
.top-title{font-size:1.08rem;font-weight:750;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{display:flex;align-items:center;gap:2px;border:0;background:none;color:var(--brand-ink);font-weight:650;padding:8px 8px 8px 0;margin-left:-4px;cursor:pointer}
.back svg{width:22px;height:22px}
.top-right{margin-left:auto}

/* ---- layout ---- */
.main{max-width:640px;margin:0 auto;padding:6px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 28px)}
.view{animation:in .18s ease both}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin:0 0 12px;border:1px solid var(--line)}
.card.tight{padding:12px 14px}
.card h3{font-size:1.02rem;margin-bottom:10px}
.sec-h{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:18px 4px 8px}
.muted{color:var(--ink-2)} .fine{font-size:.8rem;color:var(--ink-3);margin:10px 4px} .center{text-align:center}
.hint{font-size:.85rem;color:var(--ink-2);margin:6px 0 10px;min-height:1em}
.hint.bad{color:var(--bad)} .hint.ok{color:var(--ok)}

/* ---- hero ---- */
.hero{padding:10px 4px 14px}
.hero h2{font-size:1.9rem;line-height:1.08;font-weight:850;letter-spacing:-.035em}
.hero h2 span{color:var(--ink)}
.hero p{margin:10px 0 0;color:var(--ink-2);font-size:.95rem}

/* ---- steps ---- */
.step-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step-h h3{margin:0;font-size:1.02rem;flex:1}
.step-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;background:var(--brand-soft);color:var(--brand-ink)}
.step.done .step-n{background:var(--brand);color:#fff}
.link-sm{font-size:.86rem;font-weight:650;text-decoration:none}

/* ---- controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:650;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.btn.primary:disabled{background:var(--ink-3);border-color:var(--ink-3);box-shadow:none;opacity:.55}
.btn.big{width:100%;min-height:54px;font-size:1.06rem;border-radius:16px;margin-top:4px}
.btn.sm{min-height:36px;padding:0 12px;font-size:.88rem;border-radius:10px}
.btn.ghost{background:transparent}
.btn.call{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.btn.off{color:var(--ink-3);background:var(--surface-2);border-style:dashed}
.icon-btn{border:0;background:var(--surface-2);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;color:var(--ink-2)}
.field{display:block;margin:0 0 12px}
.field>span{display:block;font-size:.82rem;font-weight:650;color:var(--ink-2);margin-bottom:6px}
.field em{font-style:normal;font-weight:500;color:var(--ink-3)}
input,select{width:100%;min-height:46px;padding:0 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);outline:none;font-size:16px}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);background:var(--surface)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.search-in{position:relative}
.search-in svg{position:absolute;left:12px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--ink-3)}
.search-in input{padding-left:40px}
.grid3{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.grid3 .field:nth-child(3){grid-column:1 / -1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 13px;font-size:.88rem;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip b{font-weight:700;opacity:.6;margin-left:3px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:7px 12px;border-radius:9px;font-weight:650;font-size:.9rem;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(13,19,32,.12)}
.seg.wide{display:flex;margin-bottom:14px}.seg.wide button{flex:1;white-space:nowrap;font-size:.88rem;padding:8px 6px}
.area-row{display:flex;gap:8px;flex-wrap:wrap}
.area-row>.btn{flex:none}
.town-form{display:flex;gap:8px;flex:1;min-width:200px}
.town-form input{flex:1;min-width:0}
#townChips{margin-top:10px}
.radius-row{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.9rem;color:var(--ink-2);font-weight:600}
.radius-row .seg{flex:1}.radius-row .seg button{flex:1;white-space:nowrap;padding:7px 4px;font-size:.86rem}
.area-now{margin:10px 0 0;font-size:.9rem;font-weight:650;color:var(--ink)}
.area-now:empty{display:none}

/* ---- vehicle ---- */
.veh{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2)}
.veh-ic{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.veh-ic svg{width:24px;height:24px}
.veh-t{flex:1;min-width:0}.veh-t b{display:block;font-size:1rem}.veh-t small{color:var(--ink-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh.sel{border-color:var(--brand);background:var(--brand-soft)}
.veh+.veh{margin-top:8px}
.veh-list{display:flex;flex-direction:column;gap:8px}
.veh-empty{display:flex;gap:10px}
.veh-empty .btn{flex:1}
.result{margin-top:14px}

/* ---- stores ---- */
.query{display:flex;align-items:center;gap:10px}
.query .q-t{flex:1;min-width:0}.query b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.query small{color:var(--ink-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stores-tools{display:flex;gap:10px;align-items:center;margin:0 0 12px}
.stores-tools .chips{flex:1;min-width:0}
.status{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:12px;font-size:.9rem;color:var(--ink-2)}
.status.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.store{padding:14px}
.store-h{display:flex;gap:12px;align-items:flex-start}
.dot{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;font-weight:800;font-size:.8rem}
.dot.chain{background:var(--t-chain)}.dot.independent{background:var(--t-indep)}.dot.dealer{background:var(--t-dealer)}.dot.salvage{background:var(--t-salvage)}
.store-t{flex:1;min-width:0}
.store-t b{display:block;font-size:1.01rem;line-height:1.25}
.store-t .addr{color:var(--ink-2);font-size:.88rem}
.dist{text-align:right;flex:none}.dist b{display:block;font-size:1rem}.dist small{color:var(--ink-3);font-size:.78rem}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.tag{font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.tag.open{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag.closed{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.tag.verified{background:transparent}
.tag.unv{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.actions .btn{padding:0 8px;font-size:.88rem;min-height:42px}
.why{border:0;background:none;color:var(--ink-3);font-size:.8rem;text-decoration:underline;cursor:pointer;padding:6px 0 0}
.mark{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);align-items:center;flex-wrap:wrap}
.mark>span{font-size:.8rem;color:var(--ink-3);font-weight:650;margin-right:2px}
.mk{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;font-size:.84rem;font-weight:650;cursor:pointer;color:var(--ink-2)}
.mk.on.have{background:var(--ok);border-color:var(--ok);color:#fff}
.mk.on.no{background:var(--ink-2);border-color:var(--ink-2);color:var(--surface)}
.mk.on.callback{background:var(--warn);border-color:var(--warn);color:#fff}
.price-in{width:96px;min-height:36px;padding:0 10px;border-radius:10px;font-size:.92rem}
.store.m-have{border-color:color-mix(in srgb,var(--ok) 50%,var(--line))}
.store.m-no{opacity:.72}
#map{height:min(62vh,520px);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:12px;background:#e9edf1}
.leaflet-container{font:inherit}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-4px 4px 12px;font-size:.8rem;color:var(--ink-2);font-weight:600}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.pin-pop b{display:block;font-size:.95rem}.pin-pop small{color:#555}.pin-pop .btn{min-height:34px;font-size:.84rem;margin-top:8px;padding:0 10px}
.links a.lk{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.links a.lk:first-of-type{border-top:0}
.lk b{display:block}.lk small{display:block;color:var(--ink-2);font-size:.84rem}
.lk .arrow{margin-left:auto;color:var(--ink-3);font-size:1.1rem}
.empty{text-align:center;padding:34px 18px;color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px}

/* ---- calls ---- */
.best{background:linear-gradient(140deg,#0d1320,#22304a);color:#fff;border:0}
.best .eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);font-weight:800}
.best h3{font-size:1.3rem;margin:6px 0 2px;color:#fff}
.best .sub{color:#c8d0df;font-size:.92rem}
.best .price{font-size:2rem;font-weight:850;letter-spacing:-.03em;margin-top:8px}
.best .row{display:flex;gap:8px;margin-top:14px}.best .row .btn{flex:1}
.best .btn{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff}
.best .btn.call{background:var(--ok);border-color:var(--ok)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.pick small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:800}
.pick b{display:block;margin-top:3px;font-size:.95rem;line-height:1.25}.pick span{color:var(--ink-2);font-size:.85rem}
.progress{display:flex;gap:6px;margin:4px 0 12px}
.progress span{flex:1;text-align:center;font-size:.8rem;font-weight:700;padding:8px 4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.progress span b{display:block;font-size:1.15rem;color:var(--ink)}
.crow{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow .c-t{flex:1;min-width:0}.crow .c-t b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crow .c-t small{color:var(--ink-2);font-size:.82rem}
.crow .c-p{font-weight:800}
.crow .btn{min-height:36px;padding:0 11px}
.grp h4{margin:0 0 4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.foot-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- script sheet ---- */
.script{white-space:pre-wrap;font-family:inherit;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:.98rem;line-height:1.55;margin:0 0 12px}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hours-t{width:100%;border-collapse:collapse;font-size:.92rem}.hours-t td{padding:5px 0;border-bottom:1px solid var(--line)}.hours-t tr.today td{font-weight:800}
.how{margin:0;padding-left:20px;color:var(--ink-2)}.how li{margin:0 0 6px}
.src{margin:0;padding-left:18px;color:var(--ink-2);font-size:.92rem}.src li{margin:0 0 6px}

/* ---- tabs ---- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line)}
.tabs a{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--ink-3);font-size:.72rem;font-weight:700;position:relative}
.tabs a svg{width:24px;height:24px}
.tabs a.on{color:var(--brand)}
.badge{position:absolute;top:7px;left:calc(50% + 6px);background:var(--brand);color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}

/* ---- sheet + toast ---- */
.sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgba(8,12,20,.5);display:flex;align-items:flex-end;justify-content:center;animation:in .18s ease both}
.sheet{background:var(--surface);color:var(--ink);width:min(560px,100%);max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.2)}
@media (min-width:640px){.sheet-backdrop{align-items:center}.sheet{border-radius:22px}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheet-head h2{font-size:1.12rem}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--surface);padding:11px 16px;border-radius:12px;font-weight:650;font-size:.92rem;transition:.25s;z-index:90;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--brand-soft);color:var(--ink);margin-bottom:12px;font-size:.9rem}
.banner span{flex:1}

/* ---- How to replace it (YouTube) ---- */
.howto-link{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.howto-link>span:nth-child(2){flex:1;display:flex;flex-direction:column;line-height:1.25}
.howto-link small{color:var(--ink-3);font-size:.8rem;margin-top:2px}
.howto-link .arrow{font-size:1.4rem;color:var(--ink-3)}
.play-mini{width:34px;height:34px;flex:none;border-radius:10px;background:var(--ink);position:relative}
.play-mini::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid var(--surface);border-top:7px solid transparent;border-bottom:7px solid transparent}
.yt-card h3{font-size:1.05rem}
.yt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.yt-head small{display:block;color:var(--ink-3);font-size:.82rem;margin-top:2px}
.yt-src{flex:none;font-size:.75rem;color:var(--ink-3);border:1px solid var(--line);padding:3px 8px;border-radius:999px;white-space:nowrap}
.yt-lead{margin:0 0 12px;font-size:.92rem}
.yt-safety{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:.84rem;line-height:1.4}
.yt-card>.yt-safety:nth-child(2){margin:0 0 12px}
.yt-consent{padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-size:.9rem;margin-bottom:12px}
.yt-consent p{margin:0 0 10px;color:var(--ink-2)} .yt-consent b{color:var(--ink)}
.yt-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.btn.yt-big{width:100%;min-height:54px;font-size:1.06rem;border-radius:16px;background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn.yt-big svg{width:22px;height:22px}
.yt-alt{font-size:.84rem;text-align:center;text-decoration:none;color:var(--ink-2);padding:4px 0}
.yt-all{display:inline-block;margin:2px 0 10px}
.yt-card>.link-sm{display:inline-block;margin-top:10px}
.yt-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 10px;padding:0 16px 4px;scrollbar-width:none}
.yt-row::-webkit-scrollbar{display:none}
.yt-row .yt{flex:0 0 228px;scroll-snap-align:start}
.yt{display:flex;flex-direction:column;gap:8px;min-width:0}
.yt-media{position:relative;display:block;width:100%;aspect-ratio:16/9;min-height:120px;border:0;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,#2a2c30,#1f2124);color:#fff}
.yt-media img{width:100%;height:100%;object-fit:cover;display:block}
.yt-ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px 14px;font-weight:650;font-size:.9rem;text-align:left;line-height:1.3;opacity:.85}
.yt-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(13,19,32,.72);display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .15s}
.yt-play svg{width:28px;height:28px;margin-left:3px}
.yt-media:hover .yt-play,.yt-media:focus-visible .yt-play{transform:scale(1.08);background:var(--brand)}
.yt-hint{position:absolute;left:10px;bottom:10px;font-size:.75rem;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:999px}
.yt-frame{cursor:default;min-height:200px;background:#000}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.yt-title{font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-ch{font-size:.8rem;color:var(--ink-3)}
.yt-watch{font-size:.8rem;font-weight:650;text-decoration:none}
.yt-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.yt.big{background:var(--surface);border-radius:var(--r);padding:10px;box-shadow:var(--shadow)}
.yt.big .yt-meta{padding:0 4px 4px}
.yt.big .yt-title{font-size:1rem}
.yt-meta .linkbtn{align-self:flex-start;font-size:.8rem}

/* ==== Charcoal + lime theme layer ==== */
.topbar,.topbar.scrolled{background:var(--char);color:#fff;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar .top-title,.topbar .brand{color:#fff}
.topbar .back{color:var(--lime)}
.hero h2 span{background:none;color:var(--ink);-webkit-background-clip:border-box;background-clip:border-box;box-shadow:inset 0 -.36em 0 var(--lime);padding:0 .06em}
@media (prefers-color-scheme: dark){ .hero h2 span{color:var(--lime);box-shadow:none;padding:0} }
.step-n{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.step.done .step-n{background:var(--char);color:var(--lime);border-color:var(--char)}
.btn.primary{background:var(--lime);border-color:var(--lime);color:var(--on-lime);box-shadow:0 6px 16px rgba(120,170,0,.28)}
.btn.primary:active{background:var(--lime-2)}
.btn.primary:disabled{background:var(--surface-2);border-color:var(--line);color:var(--ink-3);opacity:1}
.btn.call{background:var(--ok-solid);border-color:var(--ok-solid);color:#fff}
.mk.on.have{background:var(--ok-solid);border-color:var(--ok-solid)} .mk.on.callback{background:var(--warn-solid);border-color:var(--warn-solid)}
input:focus,select:focus{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 55%,transparent)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.veh.sel{border-color:var(--char)}
@media (prefers-color-scheme: dark){ .veh.sel{border-color:var(--lime)} }
.veh-ic{background:var(--char);color:var(--lime)}
.spin{border-top-color:var(--ink)}
.chip.on,.seg button.on{background:var(--char);border-color:var(--char);color:#fff}
.chip.on b{color:var(--lime)}
@media (prefers-color-scheme: dark){ .chip.on,.seg button.on{background:var(--lime);border-color:var(--lime);color:var(--on-lime)} .chip.on b{color:var(--on-lime)} }
.tabs a.on{color:var(--ink)}
.tabs a.on svg{background:var(--lime);color:var(--on-lime);border-radius:999px;padding:2px 14px;width:52px;height:28px;box-sizing:border-box}
.tabs a svg{height:28px;padding:2px 0}
.badge{background:var(--lime);color:var(--on-lime);font-weight:800;box-shadow:0 0 0 2px var(--surface)}
.best{background:linear-gradient(140deg,var(--char),var(--char-2))}
.best .eyebrow{color:var(--lime)}
.yt-media:hover .yt-play,.yt-media:focus-visible .yt-play{background:var(--lime);color:var(--on-lime)}
.btn.yt-big{background:var(--char);border-color:var(--char);color:#fff}
.btn.yt-big svg{color:var(--lime)}
@media (prefers-color-scheme: dark){ .btn.yt-big{background:#fff;border-color:#fff;color:var(--char)} .btn.yt-big svg{color:var(--char)} }
.play-mini{background:var(--char)} .play-mini::after{border-left-color:var(--lime)}
.status.subtle{background:transparent;border:1px dashed var(--line);color:var(--ink-2);padding:9px 12px;font-size:.86rem}
.status.subtle span{flex:1}
.status.subtle .linkbtn{flex:none;padding:6px 2px}

@media (min-width:900px){ .main{max-width:720px} .hero h2{font-size:2.3rem} }
.linkbtn{background:none;border:0;padding:0;color:var(--brand-ink);font-weight:650;cursor:pointer}