/* ── Tokens ─────────────────────────────────────────────── */
/* SD Restomod — dark shop theme.
   Field is the black the badge sits on; panels are brushed plate;
   red is reserved for actions and live state, never decoration. */
:root {
  --void:#06080B; --graphite:#0E141A; --plate:#16202A; --plate-2:#1D2934;
  --chalk:#F0F4F8; --steel:#A9B6C3; --steel-dim:#77848F; --hair:rgba(169,182,195,.16); --hair-2:rgba(169,182,195,.28);
  --signal:#D4142F; --signal-dk:#A50E24; --signal-bg:rgba(212,20,47,.12);
  --amber:#E0A32E; --amber-ink:#F0C266; --amber-bg:rgba(224,163,46,.13);
  --green:#3FB878; --green-bg:rgba(63,184,120,.14);
  --link:#79B4FF; --link-bg:rgba(121,180,255,.12);
  --ink:var(--chalk); --text:var(--chalk); --muted:var(--steel); --faint:var(--steel-dim);
  --line:var(--hair); --line-strong:var(--hair-2); --bg:var(--void); --surface:var(--graphite); --surface-2:var(--plate);
  --brand-red:var(--signal); --brand-red-dk:var(--signal-dk); --red:#FF6B7D; --red-bg:rgba(212,20,47,.14);
  --r-sm:4px; --r:8px; --r-lg:12px;
  --sh-1:none; --sh-2:none; --sh-3:0 30px 80px -20px rgba(0,0,0,.85);
  --font:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:Archivo, "IBM Plex Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --topbar:62px;
}
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; min-height:100%; }
body { font-family:var(--font); font-size:15px; line-height:1.6; color:var(--chalk); background:var(--void); -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1000px 480px at 76% -14%, rgba(212,20,47,.06), transparent 60%), radial-gradient(900px 480px at 8% 4%, rgba(169,182,195,.06), transparent 60%); background-attachment:fixed; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
code { font-family:var(--mono); font-size:.85em; background:rgba(169,182,195,.10); border:1px solid var(--hair); border-radius:3px; padding:1px 5px; color:var(--chalk); }
:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.hidden { display:none !important; }

/* ── Background photo layer ─────────────────────────────── */
#bg { position:fixed; inset:0; z-index:0; pointer-events:none; background-size:cover; background-position:center; transition:opacity .3s; }
#bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,8,11,.55) 0%, rgba(6,8,11,.86) 62%, rgba(6,8,11,.97) 100%); }
#bg svg { position:absolute; right:-40px; bottom:24px; width:640px; opacity:.5; }

/* ── Top bar ────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:30; height:var(--topbar); display:flex; align-items:center; gap:14px; padding:0 18px; background:linear-gradient(180deg,#141C24 0%, #080B0F 100%); backdrop-filter:blur(12px); color:var(--chalk); border-bottom:1px solid var(--hair-2); }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg, var(--signal) 0%, rgba(212,20,47,.25) 34%, transparent 62%); }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.brand:hover { text-decoration:none; }
.brand-sub { font-family:var(--font); font-weight:500; font-size:12px; color:var(--steel-dim); margin-left:2px; padding-left:12px; border-left:1px solid var(--hair); white-space:nowrap; }
.topnav { display:flex; gap:2px; margin-left:8px; flex-shrink:0; }
.topnav a { color:var(--steel); font-weight:500; font-size:13.5px; padding:8px 11px; border-radius:6px; white-space:nowrap; }
.topnav a:hover { color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.topnav a.on { color:#fff; background:rgba(255,255,255,.10); box-shadow:inset 0 -2px 0 var(--brand-red); }
.topright { margin-left:auto; display:flex; align-items:center; gap:12px; }
.topright .save { font-size:12px; color:#9AA7B4; }
#userBox { display:flex; align-items:center; gap:10px; font-size:14px; }
#userBox a { color:#fff; font-weight:500; }
.avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(180deg,var(--brand-red),var(--brand-red-dk)); color:#fff; font-weight:800; font-size:13px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); }
.iconbtn { display:none; background:none; border:none; color:#fff; padding:6px; border-radius:8px; cursor:pointer; }
.iconbtn:hover { background:rgba(255,255,255,.1); }

/* ── Layout ─────────────────────────────────────────────── */
.layout { display:flex; min-height:calc(100vh - var(--topbar)); position:relative; z-index:1; }
.sidebar { width:264px; flex-shrink:0; background:linear-gradient(180deg,#0C1218,#080C10); border-right:1px solid var(--hair); padding:18px 12px; overflow-y:auto; position:sticky; top:var(--topbar); height:calc(100vh - var(--topbar)); }
.layout.nosidebar .sidebar { display:none; }
main { flex:1; min-width:0; display:flex; flex-direction:column; }
main .inner { flex:1; width:100%; min-width:0; max-width:1040px; margin:0 auto; padding:32px 36px 48px; }
.layout.wide main .inner { max-width:1200px; }
.foot { border-top:1px solid var(--hair); padding:26px 36px 34px; font-size:12.5px; color:var(--steel-dim); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; background:linear-gradient(180deg, transparent, rgba(0,0,0,.45)); }

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar .group { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin:18px 8px 6px; display:flex; align-items:center; gap:6px; }
.sidebar .group:first-child { margin-top:2px; }
.sidebar .link { display:flex; align-items:center; gap:9px; width:100%; text-align:left; font:inherit; font-size:14px; font-weight:500; padding:8px 10px; border:none; border-radius:8px; background:transparent; color:var(--text); cursor:pointer; }
.sidebar .link:hover { background:rgba(169,182,195,.07); color:#fff; }
.sidebar .link.active { background:linear-gradient(90deg, rgba(212,20,47,.20), rgba(212,20,47,.04)); color:#fff; box-shadow:inset 2px 0 0 var(--signal); }
.sidebar .link.dim { color:var(--muted); font-weight:400; }
.sidebar .dot { width:8px; height:8px; border-radius:8px; flex-shrink:0; }
.sidebar .tools { margin-top:22px; border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.sidebar select { font-size:12px; padding:3px 6px; }

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family:var(--display); font-stretch:95%; letter-spacing:-.02em; color:var(--ink); margin:0; }
h2.title { font-size:33px; font-weight:800; line-height:1.06; margin-bottom:8px; letter-spacing:-.02em; color:#fff; }
h2.title input { font:inherit; color:inherit; border:none; background:transparent; width:100%; padding:0; border-bottom:2px solid transparent; }
h2.title input:hover, h2.title input:focus { border-bottom-color:var(--line-strong); outline:none; }
h3 { font-size:18px; font-weight:700; }
h3.sec { font-size:20px; margin:38px 0 14px; letter-spacing:-.01em; position:relative; padding-left:14px; color:#fff; }
h3.sec::before { content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:3px; background:var(--signal); }
p.lead { color:var(--steel); font-size:15.5px; margin:0 0 20px; max-width:66ch; }
.eyebrow { font-size:13px; font-weight:500; color:var(--steel-dim); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:""; width:24px; height:2px; background:var(--signal); flex-shrink:0; }

/* ── Buttons / inputs ───────────────────────────────────── */
.btn { font:inherit; font-weight:600; font-size:14px; cursor:pointer; border-radius:6px; padding:9px 16px; border:1px solid var(--hair-2); background:linear-gradient(180deg,#1B2530,#131B23); color:var(--chalk); display:inline-flex; align-items:center; gap:6px; transition:background .12s, border-color .12s, transform .05s; text-decoration:none !important; line-height:1.2; }
.btn:hover { background:linear-gradient(180deg,#243039,#19222B); border-color:var(--steel-dim); }
.btn:active { transform:translateY(1px); }
.btn.sm { padding:5px 10px; font-size:12.5px; border-radius:6px; }
.btn.primary { background:linear-gradient(180deg,#E01B36,#A50E24); border-color:#7E0A1B; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.3); }
.btn.primary:hover { background:linear-gradient(180deg,#F02947,#BB1029); border-color:#8E0C1F; }
.btn.amber { background:var(--amber); border-color:var(--amber); color:var(--ink); }
.btn.amber:hover { background:#F7C25A; }
.btn.danger { color:var(--red); }
.btn.danger:hover { background:var(--red-bg); border-color:var(--red); }
.btn.tab { border-radius:8px 8px 0 0; border-bottom:none; background:transparent; color:var(--muted); box-shadow:none; }
.btn.tab.on { background:linear-gradient(180deg,var(--plate),var(--graphite)); color:#fff; border-color:var(--hair-2); box-shadow:inset 0 2px 0 var(--signal); }
input[type=text], input[type=password], textarea, select { font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--hair-2); border-radius:6px; background:#0A0F14; color:var(--chalk); width:100%; transition:border-color .12s, box-shadow .12s; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-bg); }
input[disabled] { background:#0A0F14; color:var(--steel-dim); }
select { width:auto; padding-right:28px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23A9B6C3' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
textarea { resize:vertical; line-height:1.5; }
label.f { font-size:12.5px; font-weight:600; color:var(--muted); display:block; }
label.f input, label.f select, label.f textarea { margin-top:5px; display:block; }
label.f input[type=range] { padding:0; border:none; box-shadow:none; }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--brand-red); vertical-align:-2px; margin-right:4px; }
.filebtn { font-size:14px; font-weight:600; cursor:pointer; background:linear-gradient(180deg,#E01B36,#A50E24); color:#fff; border-radius:6px; padding:9px 16px; display:inline-block; text-align:center; line-height:1.2; }
.filebtn:hover { background:linear-gradient(180deg,#F02947,#BB1029); }
.filebtn.ghost { background:linear-gradient(180deg,#1B2530,#131B23); color:var(--chalk); border:1px solid var(--hair-2); font-size:12.5px; padding:5px 10px; border-radius:5px; }
.filebtn input { display:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.warn { font-size:13px; color:var(--red); }
.err { color:var(--red); font-size:13px; margin-top:8px; min-height:1em; }

/* ── Cards / surfaces ───────────────────────────────────── */
.card, .truckbox, .post, .buildcard, .tablewrap, .guide, .stat, .feat, .gencard, .lnk, .gdec-q, .grules, .vis, .preview, .authbox {
  background:linear-gradient(180deg, var(--plate) 0%, var(--graphite) 62%); border:1px solid var(--hair); border-radius:var(--r); position:relative; }
.card::before, .truckbox::before, .post::before, .buildcard::before, .guide::before, .stat::before, .feat::before, .lnk::before {
  content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.10) 18%, rgba(255,255,255,.10) 82%, transparent); pointer-events:none; }
.card { padding:18px 20px; margin-bottom:16px; }
.card.pairnotes { border-left:2px solid var(--amber); }
.card ol, .card ul { margin:0; padding-left:22px; line-height:1.7; }
.truckbox { padding:18px 20px; }
.truckbox .gen { margin-top:12px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.truckbox .gen b { color:var(--ink); }
.pair { font-family:var(--display); font-weight:700; font-size:18px; margin:22px 0 4px; color:var(--ink); }
.meta { display:flex; gap:20px; margin:10px 0 18px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); font-weight:600; }
.meta span.v { color:var(--text); font-weight:500; }
.meta select { padding:5px 28px 5px 10px; font-size:13px; }
.line { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.line .n { width:22px; text-align:right; font-size:13px; color:var(--faint); font-family:var(--mono); }
.photo { width:300px; height:180px; border-radius:6px; border:1px solid var(--hair-2); background:#0A0F14; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.photo img { width:100%; height:100%; object-fit:cover; }
.src { font-size:13px; }
.src dt { color:var(--faint); font-weight:600; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; margin-top:10px; }
.src dd { margin:2px 0 0; line-height:1.5; }
.tag, .kind { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:3px; background:rgba(169,182,195,.10); color:var(--steel); border:1px solid var(--hair); vertical-align:middle; }
.tag { font-family:var(--mono); font-weight:500; }
.tag.factory_exact { background:var(--green-bg); color:var(--green); border-color:transparent; }
.tag.factory_supplemental { background:var(--green-bg); color:var(--green); border-color:transparent; }
.tag.bench_verified, .tag.observed { background:var(--link-bg); color:var(--link); border-color:transparent; }
.tag.vendor, .tag.community, .tag.secondary_oem_derived { background:var(--amber-bg); color:var(--amber-ink); border-color:transparent; }
.tag.open, .tag.inferred { background:var(--red-bg); color:var(--red); border-color:transparent; }
.kind { margin-right:6px; }
.kind.issue { background:var(--red-bg); color:var(--red); border-color:transparent; }
.kind.question { background:var(--link-bg); color:var(--link); border-color:transparent; }
.kind.idea { background:var(--amber-bg); color:var(--amber-ink); border-color:transparent; }
.kind.progress, .kind.solved { background:var(--green-bg); color:var(--green); border-color:transparent; }

/* ── Tables ─────────────────────────────────────────────── */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-1); }
.tabs + .tablewrap { border-top-left-radius:0; }
table { border-collapse:collapse; width:100%; font-size:13.5px; background:transparent; }
th { text-align:left; color:var(--muted); font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:#111922; position:sticky; top:0; border-bottom:1px solid var(--hair-2); }
td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }
tbody tr:nth-child(even) td { background:rgba(169,182,195,.035); }
tbody tr:hover td { background:rgba(212,20,47,.09); }
td a { font-weight:600; }
.cell input { border:none; border-radius:4px; padding:3px 6px; background:transparent; font-size:13px; min-width:90px; box-shadow:none; }
.cell input:focus { background:rgba(212,20,47,.14); box-shadow:none; }
.cell select { font-size:12px; padding:3px 24px 3px 6px; }
.preview { max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:12px; }
.preview th { position:static; }

/* ── Community ──────────────────────────────────────────── */
.post { padding:14px 18px; margin-bottom:10px; transition:box-shadow .12s; }
.post:hover { border-color:var(--hair-2); }
.post .t { font-family:var(--display); font-weight:700; font-size:16.5px; color:#fff; }
.post .m { font-size:12.5px; color:var(--muted); margin-top:4px; }
.reply { border-left:2px solid var(--hair-2); padding:12px 16px; margin:10px 0; background:rgba(169,182,195,.05); border-radius:0 6px 6px 0; }
.reply .m { font-size:12.5px; color:var(--muted); margin-bottom:4px; }
.body { white-space:pre-wrap; line-height:1.6; }
.buildcard { padding:14px 16px; width:260px; transition:box-shadow .12s, transform .12s; }
a.buildcard:hover { border-color:var(--signal); text-decoration:none; }
.buildcard img { width:100%; height:120px; object-fit:cover; border-radius:6px; }
.authbox { max-width:440px; margin:40px auto; padding:28px 30px; }

/* ── Overlay ────────────────────────────────────────────── */
#overlay { position:fixed; inset:0; z-index:40; background:rgba(3,5,7,.82); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; }
#overlay .box { background:linear-gradient(180deg,var(--plate),var(--graphite)); border:1px solid var(--hair-2); border-radius:var(--r); padding:30px 34px; width:100%; max-width:560px; box-shadow:var(--sh-3); }

/* ── Landing page ───────────────────────────────────────── */
.hero { padding:48px 0 36px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(40px, 5.6vw, 66px); font-weight:900; line-height:.94; letter-spacing:-.035em; text-transform:uppercase; color:#fff; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--amber-ink); }
.hero p { font-size:17px; color:var(--steel); max-width:60ch; margin:20px 0 28px; }
.hero .cta { display:flex; gap:10px; flex-wrap:wrap; }
.hero .cta .btn { padding:12px 20px; font-size:15px; }
.hero-art { background:linear-gradient(180deg,#121A22,#080C10); border:1px solid var(--hair-2); border-radius:var(--r); padding:22px 24px; color:var(--chalk); box-shadow:var(--sh-3); font-family:var(--mono); font-size:12.5px; line-height:1.6; position:relative; }
.hero-art::after { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--signal),transparent 70%); }
.hero-art .hd { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--steel); margin-bottom:14px; display:flex; justify-content:space-between; gap:18px; }
.hero-art .rowl { display:grid; grid-template-columns:104px 1fr 92px; gap:12px; padding:8px 0; border-top:1px solid var(--hair); }
.hero-art .rowl:first-of-type { border-top:none; }
.hero-art .k { color:var(--steel-dim); } .hero-art .a { color:var(--amber-ink); }
.hero-art .ok { color:var(--green); } .hero-art .op { color:#FF7C8E; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:8px 0 48px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-1); }
.stat { border-top:1px solid var(--hair); }
.stat::after { content:""; position:absolute; left:20px; top:-1px; width:34px; height:2px; background:var(--signal); }
.stat b { display:block; font-family:var(--display); font-size:34px; font-weight:800; letter-spacing:-.03em; color:#fff; line-height:1; }
.stat span { font-size:13px; color:var(--steel-dim); display:block; margin-top:7px; }
.feats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:48px; }
.feat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--sh-1); }
.feat .ic { width:38px; height:38px; border-radius:7px; background:var(--signal-bg); color:#FF5C74; border:1px solid rgba(212,20,47,.3); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat h3 { font-size:17px; margin-bottom:6px; }
.feat p { margin:0; color:var(--steel); font-size:14px; }
.gens { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:48px; }
.gencard { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:13px; }
.gencard { border-left:2px solid var(--steel-dim); }
.gencard b { display:block; font-family:var(--display); font-size:15px; color:#fff; }
.gencard span { color:var(--steel-dim); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:40px; }
.band { background:linear-gradient(120deg,#12191F 0%, #070A0D 62%); color:#fff; border-radius:var(--r); border:1px solid var(--hair-2); padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.band h2 { color:#fff; font-size:27px; letter-spacing:-.02em; }
.band p { color:var(--steel); margin:8px 0 0; max-width:58ch; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1000px) { .stats, .gens { grid-template-columns:repeat(2,1fr); } .feats { grid-template-columns:1fr; } .hero { grid-template-columns:1fr; } .two { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  .iconbtn { display:inline-flex; }
  .brand-sub, .brandname { display:none; }
  .brand::after { content:""; }
  .topbar { gap:10px; padding:0 12px; }
  .brandmark { width:34px; height:34px; }
  #userBox > a > span:last-child { display:none; }
  .topnav { display:none; position:fixed; top:var(--topbar); left:0; right:0; z-index:26; background:var(--ink); padding:8px; flex-direction:column; margin:0; box-shadow:var(--sh-3); }
  .topnav.open { display:flex; }
  .topnav a { padding:12px 14px; font-size:15px; }
  .sidebar { position:fixed; top:var(--topbar); left:0; bottom:0; height:auto; z-index:25; transform:translateX(-100%); transition:transform .2s; box-shadow:none; }
  .sidebar.open { transform:none; box-shadow:var(--sh-3); }
  main .inner { padding:20px 16px 40px; } .foot { padding:16px; }
  h2.title { font-size:28px; } .photo { width:100%; } .band { padding:26px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* ── Guided walkthrough ─────────────────────────────────── */
.guide { border-left:2px solid var(--signal) !important; padding:22px 24px; margin-bottom:18px; }
.ghead { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.grules { margin:14px 0 0; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px 16px; font-size:14px; }
.grules b { display:block; margin-bottom:4px; } .grules ol { margin:0; padding-left:20px; line-height:1.6; }
.gkey { font-size:12px; color:var(--muted); margin:14px 0 6px; line-height:2; }
.gstatus { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:4px; margin-right:8px; vertical-align:1px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.gstatus.confirmed { background:var(--green-bg); color:var(--green); border-color:transparent; }
.gstatus.truck-tested { background:#fff; color:#0B0F14; border-color:transparent; }
.gstatus.reference { background:var(--amber-bg); color:var(--amber-ink); border-color:transparent; }
.gstatus.warning { background:var(--red-bg); color:var(--red); border-color:transparent; }
.gphase { border-top:1px solid var(--line); padding:16px 0 6px; margin-top:10px; }
.gphase-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.gphase-h h4 { font-size:16.5px; } .gphase-h span { font-size:12.5px; color:var(--faint); font-family:var(--mono); }
.gphase ul { margin:0; padding-left:20px; line-height:1.6; }
.gstep { display:grid; grid-template-columns:26px 1fr; gap:8px; padding:8px 6px; border-radius:6px; line-height:1.5; font-size:14.5px; }
.gstep:hover { background:rgba(169,182,195,.06); }
.gstep.done > div > div:first-child { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-strong); }
.gstep label { padding-top:2px; } .gstep input { margin:0; }
.gref { font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:2px; }
.gfig { margin:12px 0 4px; } .gfig img { width:100%; max-width:760px; border:1px solid var(--hair-2); border-radius:6px; cursor:zoom-in; display:block; }
.gfig figcaption { font-size:12.5px; color:var(--muted); margin-top:6px; }
.gfigs { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.gthumb { display:block; color:inherit; text-decoration:none !important; border:1px solid var(--hair); border-radius:6px; overflow:hidden; background:#0A0F14; }
.gthumb img { width:100%; height:150px; object-fit:cover; object-position:top; display:block; }
.gthumb span { display:block; font-size:12px; padding:8px 10px; color:var(--muted); line-height:1.4; }
.gthumb:hover { border-color:var(--signal); }
.gopen { background:rgba(224,163,46,.07); border-top:1px solid var(--hair); margin:12px -24px -22px; padding:16px 24px 20px; border-radius:0 0 var(--r) var(--r); }
.gmark { margin-left:auto; color:var(--green); font-size:10px; }
details summary::-webkit-details-marker { color:var(--muted); }
.gpkg { margin:16px 0 0; border:1px solid var(--hair); border-radius:6px; padding:14px 16px; background:rgba(0,0,0,.28); font-size:14px; }
.gpkg-h { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; } .gpkg-h span { font-size:12px; color:var(--faint); }
.gpkg ol { margin:0; padding-left:22px; line-height:1.9; columns:2; column-gap:28px; } .gpkg li.here { list-style:"▸ "; }
.glink { font-size:12.5px; font-weight:600; white-space:nowrap; }
@media (max-width:760px) { .gpkg ol { columns:1; } }
.gdec { margin:14px 0 0; display:grid; gap:12px; }
.gdec-q { border:1px solid var(--line-strong); border-radius:8px; padding:12px 14px; background:var(--surface); }
.gdec-q > b { display:block; margin-bottom:8px; font-size:14.5px; }
.gdec-opts { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.gdec-opt { display:flex; gap:8px; align-items:flex-start; border:1px solid var(--hair); border-radius:6px; padding:10px 12px; cursor:pointer; font-size:13px; background:rgba(0,0,0,.3); }
.gdec-opt.on { border-color:var(--signal); background:var(--signal-bg); box-shadow:none; }
.gdec-opt input { margin-top:2px; accent-color:var(--brand-red); } .gdec-opt small { display:block; color:var(--muted); margin-top:2px; line-height:1.4; }
.vis { padding:12px 16px; min-width:280px; border-radius:6px; }
.vis select { width:100%; }
.lnk { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:8px; }
.lnk-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lnk-t { font-weight:600; font-size:15px; } .lnk-m { font-size:12px; color:var(--muted); margin-left:auto; display:flex; align-items:center; gap:6px; }
.lnk-h .btn { margin-left:6px; }
.lnk-n { font-size:13.5px; color:var(--text); margin-top:4px; line-height:1.5; }
.lnk-v { margin-top:10px; aspect-ratio:16/9; max-width:640px; } .lnk-v iframe { width:100%; height:100%; border:0; border-radius:8px; }
.kind.video { background:var(--red-bg); color:var(--red); border-color:transparent; } .kind.guide, .kind.document { background:var(--link-bg); color:var(--link); border-color:transparent; } .kind.vendor, .kind.part { background:var(--amber-bg); color:var(--amber-ink); border-color:transparent; }
.brandmark { display:block; border-radius:6px; }
.band-logo { width:270px; height:auto; flex-shrink:0; }
.band { align-items:center; }
.btn.amber, .btn.red { background:linear-gradient(180deg,#D91736,#9E0B23); border-color:var(--brand-red-dk); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.btn.amber:hover, .btn.red:hover { background:linear-gradient(180deg,#E62A47,#B00D28); }
.hero h1 em { font-style:normal; color:#fff; }

.hero-art .a { color:#F2B33D; }
@media (max-width:760px) { .band-logo { width:150px; } .band { text-align:center; justify-content:center; } }
.brandname { font-family:var(--display); font-weight:800; }

@media (max-width:1000px) { .hero-logo { display:block; width:min(320px,70vw); height:auto; margin:0 auto 18px; } .hero { text-align:center; } .hero .cta { justify-content:center; } .hero p { margin-left:auto; margin-right:auto; } }
.foot { flex-direction:column; align-items:flex-start; gap:10px; }
.strap { width:100%; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel-dim); display:flex; align-items:center; gap:16px; }
.strap::before, .strap::after { content:""; flex:1; height:1px; background:var(--hair); }
.strap span { color:var(--signal); }

.pairchip { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--steel); background:rgba(0,0,0,.35); border:1px solid var(--hair); border-radius:999px; padding:5px 14px; }
.pairchip b { color:#fff; font-weight:600; } .pairchip i { font-style:normal; color:var(--signal); }
.hero .cta .btn { padding:13px 22px; font-size:15px; }
::selection { background:var(--signal); color:#fff; }
::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-track { background:#080B0F; } ::-webkit-scrollbar-thumb { background:#222D38; border-radius:6px; border:2px solid #080B0F; } ::-webkit-scrollbar-thumb:hover { background:#2F3D4A; }
details summary { color:var(--steel); } details summary:hover { color:#fff; }
label.f { color:var(--steel-dim); font-size:12px; }
.src dt { color:var(--steel-dim); } .src dd { color:var(--chalk); }
.meta { color:var(--steel); } .meta span.v { color:#fff; }
.lnk-t a, td a { color:var(--link); }
.hero-logo { filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); }

/* Hero badge: the brand mark is the first thing you see */
.hero-badge { margin:0; position:relative; display:flex; justify-content:center; }
.hero-badge img { width:100%; max-width:460px; height:auto; display:block; filter:drop-shadow(0 22px 46px rgba(0,0,0,.7)); }
.hero-badge::before { content:""; position:absolute; inset:-6% -2% -10%; background:radial-gradient(closest-side, rgba(169,182,195,.10), transparent 70%); pointer-events:none; }
/* Spec strip: the data, given its own frame below the hero */
.specstrip { margin:0 0 46px; }
.specstrip-h { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.specstrip-h > span:first-child { font-family:var(--display); font-weight:700; font-size:15px; color:var(--steel); }
.specstrip .hero-art { max-width:none; }
@media (max-width:1000px) {
  .hero { grid-template-columns:1fr; gap:26px; text-align:center; padding:32px 0 28px; }
  .hero .cta { justify-content:center; }
  .hero p { margin-left:auto; margin-right:auto; max-width:100%; font-size:15.5px; padding:0 2px; text-align:left; }
  .hero h1 { font-size:clamp(30px, 8.5vw, 44px); }
  .hero-badge { order:-1; } .hero-badge img { max-width:min(320px, 78vw); }
  .specstrip-h { justify-content:center; } .hero-art { font-size:11.5px; padding:16px; }
  .hero-art .rowl { grid-template-columns:88px 1fr; } .hero-art .rowl span:last-child { grid-column:2; }
  .hero-art .hd { flex-direction:column; gap:4px; }
}
p, .lead, .body { overflow-wrap:anywhere; }

.layout, .layout > *, main, .hero, .hero > *, .specstrip { min-width:0; }
.hero-art { overflow-x:auto; }
html, body { overflow-x:clip; }
tr.off td { opacity:.5; }
tr.off td b { text-decoration:line-through; }
.tabs + .tablewrap { border-top-left-radius:0; }
.donorbox { background:rgba(0,0,0,.28); border:1px solid var(--hair); border-radius:var(--r); padding:14px 18px; margin:0 0 18px; }
.donorbox-h { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.donorbox-h b { font-family:var(--display); font-size:14px; }
.donorline { color:var(--steel); font-size:13.5px; margin-top:2px; }
.donorgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.donorcard { background:linear-gradient(180deg,var(--plate),var(--graphite)); border:1px solid var(--hair); border-left:2px solid var(--signal); border-radius:6px; padding:12px 14px; font-size:13px; }
.donorcard b { display:block; font-family:var(--display); font-size:15px; color:#fff; }
.donorcard span { display:block; color:var(--steel-dim); font-size:12px; margin-bottom:6px; }
.donorcard div { color:var(--steel); }
.findbox { border-left:2px solid var(--amber); }
.mkt { display:flex; flex-wrap:wrap; gap:7px; }
.mkt-sm { margin-top:8px; gap:12px; }
.mkt-sm a { font-size:12px; color:var(--steel-dim); text-decoration:none; border-bottom:1px dotted var(--hair-2); }
.mkt-sm a:hover { color:var(--link); text-decoration:none; }
.kind.wanted { background:rgba(224,163,46,.16); color:var(--amber-ink); border-color:transparent; }
#rawRow { line-height:1.5; }
.post.held, .reply.held { border-left:2px solid var(--amber); background:rgba(224,163,46,.05); }
.reply.held .m b { color:var(--amber-ink); }
.bell { position:relative; display:flex; align-items:center; color:var(--steel); padding:6px; border-radius:6px; }
.bell:hover { color:#fff; background:rgba(255,255,255,.08); }
.dotcount { position:absolute; top:0; right:0; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--signal); color:#fff; font-size:10px; font-weight:700; line-height:15px; text-align:center; }
.noti.new { border-left:2px solid var(--signal); }
.noti:hover { border-color:var(--hair-2); }
.kind.reply { background:var(--link-bg); color:var(--link); border-color:transparent; }
.kind.moderation { background:var(--amber-bg); color:var(--amber-ink); border-color:transparent; }
.optin { margin-top:14px; border:1px solid var(--hair); border-radius:6px; padding:12px 14px; background:rgba(0,0,0,.25); }
.optin-h { font-size:12px; font-weight:600; color:var(--steel-dim); margin-bottom:8px; }
.optin label { display:flex; gap:8px; align-items:flex-start; font-size:13.5px; margin-bottom:7px; cursor:pointer; }
.optin-note { font-size:12px; color:var(--steel-dim); line-height:1.5; margin-top:8px; }
.bell { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; color:var(--steel); }
.bell:hover { background:rgba(255,255,255,.08); color:#fff; }
.dotcount { position:absolute; top:2px; right:1px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--signal); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.noti.unread { border-left:2px solid var(--signal); }
.noti:hover { border-color:var(--hair-2); text-decoration:none; }
.qrbox { background:#fff; border-radius:8px; padding:12px; width:200px; height:200px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qrbox svg { width:100%; height:100%; }