:root {
  --bg:#0a0a0b; --panel:#111113; --panel2:#18181b; --border:#27272a;
  --text:#fafafa; --dim:#a1a1aa; --faint:#71717a;
  --accent:#22d3ee; --accent-dim:rgba(34,211,238,0.12);
  --green:#4ade80; --red:#f87171; --orange:#fb923c;
  --mono:'JetBrains Mono',monospace; --sans:'Outfit',system-ui,sans-serif;
  --radius:10px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:900px; margin:0 auto; padding:24px 20px 80px; }
header { display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.logo { font-weight:700; font-size:22px; letter-spacing:-0.02em; color:var(--text); }
.logo:hover { text-decoration:none; }
.logo .tld { color:var(--accent); }
.tag { color:var(--faint); font-size:13px; }
.lead { color:var(--dim); font-size:15px; max-width:640px; margin:8px 0 24px; }
.lead code { font-family:var(--mono); font-size:13px; color:var(--text); background:var(--panel2); padding:1px 5px; border-radius:5px; }

/* Tool */
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tab { font-family:var(--mono); font-size:13px; padding:8px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel); color:var(--dim); cursor:pointer; }
.tab.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); }
select, input[type=number] { font-family:var(--mono); font-size:13px; background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px; min-width:120px; }
select:focus, input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.btn { font-family:var(--sans); font-weight:600; font-size:14px; padding:9px 18px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#04141a; cursor:pointer; }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.out-head { display:flex; justify-content:space-between; align-items:center; margin:20px 0 8px; gap:12px; flex-wrap:wrap; }
.out-head .count { color:var(--faint); font-size:13px; }
.exports { display:flex; gap:6px; }
.small { font-family:var(--mono); font-size:12px; padding:5px 10px; border-radius:7px; border:1px solid var(--border); background:var(--panel); color:var(--dim); cursor:pointer; }
.small:hover { color:var(--text); border-color:var(--faint); }
.rows { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.row { display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--border); font-size:14px; }
.row:first-child { border-top:none; }
.row:nth-child(even) { background:var(--panel); }
.vin { font-family:var(--mono); font-weight:500; letter-spacing:0.02em; }
.meta { color:var(--dim); font-size:13px; }
.chip { font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:6px; border:1px solid var(--border); color:var(--dim); background:var(--panel2); white-space:nowrap; }
.chip.bad { color:var(--red); border-color:var(--red); }
.chip.ev { color:var(--accent); border-color:var(--accent); }
.copy { margin-left:auto; font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--faint); cursor:pointer; }
.copy:hover { color:var(--accent); border-color:var(--accent); }

/* Standalone VIN decoder */
.dec-box { display:flex; gap:10px; margin:6px 0 6px; }
.dec-box input { flex:1; min-width:0; font-family:var(--mono); font-size:19px; letter-spacing:0.12em; text-transform:uppercase; padding:15px 18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); }
.dec-box input::placeholder { color:var(--faint); letter-spacing:0.02em; text-transform:none; }
.dec-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.dec-box .btn { padding:0 24px; font-size:15px; }
.dec-sample { font-size:13px; color:var(--faint); margin-bottom:4px; }
.dec-sample a { color:var(--accent); cursor:pointer; }
.dec-result { margin-top:20px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.dec-status { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; background:var(--panel); border-bottom:1px solid var(--border); }
.dec-status .big { font-family:var(--mono); font-size:17px; letter-spacing:0.08em; font-weight:500; }
.dec-badge { font-family:var(--mono); font-size:12px; padding:5px 11px; border-radius:7px; white-space:nowrap; }
.dec-badge.ok { color:var(--green); border:1px solid var(--green); background:var(--green-dim); }
.dec-badge.bad { color:var(--red); border:1px solid var(--red); background:rgba(248,113,113,0.1); }
.vin-strip { display:flex; flex-wrap:wrap; gap:6px; padding:16px; border-bottom:1px solid var(--border); }
.vin-seg { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vin-seg .chars { font-family:var(--mono); font-size:15px; letter-spacing:1.5px; padding:6px 8px; border-radius:6px; background:var(--panel2); color:var(--dim); }
.vin-seg .lbl { font-size:9px; color:var(--faint); text-transform:uppercase; letter-spacing:0.04em; }
.vin-seg.wmi .chars { color:var(--accent); background:var(--accent-dim); }
.vin-seg.yr .chars { color:var(--green); background:var(--green-dim); }
.vin-seg.chk .chars { color:var(--orange); }
.dec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); }
.dec-cell { background:var(--bg); padding:12px 15px; }
.dec-cell .k { font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:0.05em; }
.dec-cell .v { font-family:var(--mono); font-size:14px; margin-top:4px; color:var(--text); }
.note { color:var(--faint); font-size:12.5px; margin-top:14px; }

/* Landing-page content */
.breadcrumb { font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-bottom:10px; }
.breadcrumb a { color:var(--dim); }
.prose { margin-top:8px; }
.prose h1 { font-size:26px; font-weight:700; letter-spacing:-0.02em; margin:0 0 8px; }
.prose h2 { font-size:18px; font-weight:600; margin:32px 0 10px; }
.prose h3 { font-size:15px; font-weight:600; margin:20px 0 6px; }
.prose p { color:var(--dim); font-size:15px; margin:0 0 12px; }
.prose code { font-family:var(--mono); font-size:13px; color:var(--text); background:var(--panel2); padding:1px 5px; border-radius:5px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; padding:0; list-style:none; }
.badges li { font-family:var(--mono); font-size:12.5px; padding:5px 10px; border-radius:7px; border:1px solid var(--border); background:var(--panel2); color:var(--dim); }
.badges li b { color:var(--accent); font-weight:600; }
.sample { font-family:var(--mono); font-size:13px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; color:var(--text); overflow-x:auto; }
.sample .m { color:var(--dim); }
.data-table { width:100%; border-collapse:collapse; margin:4px 0 12px; font-size:13.5px; }
.data-table th, .data-table td { text-align:left; padding:8px 12px; border:1px solid var(--border); }
.data-table th { background:var(--panel2); color:var(--text); font-weight:600; font-family:var(--sans); }
.data-table td { color:var(--dim); }
.data-table td:first-child { color:var(--text); font-family:var(--mono); font-size:13px; }
.links { margin-top:36px; border-top:1px solid var(--border); padding-top:20px; }
.links h2 { font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); font-weight:600; margin:0 0 10px; }
.links-grid { display:flex; flex-wrap:wrap; gap:7px; }
.links-grid a { font-family:var(--mono); font-size:12.5px; padding:5px 11px; border-radius:7px; border:1px solid var(--border); background:var(--panel); color:var(--dim); }
.links-grid a:hover { color:var(--accent); border-color:var(--accent); text-decoration:none; }
.cta { display:inline-block; margin-top:6px; font-weight:600; }
footer { max-width:900px; margin:0 auto; padding:0 20px 40px; color:var(--faint); font-size:12.5px; }