/* ==========================================================================
   TheCodeMacha · VIN Checker — premium light theme
   Self-contained. Loaded by /vin-checker/index.php.

   Notes for maintainers
   - Every custom property is namespaced --vx-* because /macha-experience.js
     writes generic names (--bg, --text, --cyan, --line …) onto <html>.
   - Selectors are scoped to #vinPage / .vx-body so they out-rank the
     !important rules that script injects. Only properties that script
     targets (headings, buttons, inputs, <p>/<strong>/<label> colour, <main>
     sizing, body background) carry !important here.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see fonts/LICENSE-fonts.txt) ---------- */
@font-face{
  font-family:"VinSora";
  src:url("fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"VinMono";
  src:url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --vx-bg:#f2f6fc;
  --vx-paper:#ffffff;
  --vx-ink:#12213a;
  --vx-ink-2:#2a3c5a;
  --vx-slate:#566783;
  --vx-line:#dbe5f3;
  --vx-line-2:#e8eff9;
  --vx-tint:#eef4fd;
  --vx-sky:#38b6e8;
  --vx-cyan:#1577a8;
  --vx-blue:#2b63d6;
  --vx-violet:#6c4fcf;
  --vx-green:#0f8a62;
  --vx-amber:#9a6412;
  --vx-rose:#c63a52;
  --vx-font:"VinSora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --vx-mono:"VinMono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --vx-ease:cubic-bezier(.2,.75,.25,1);
}
html:root:root{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:84px}

/* ---------- Page base ---------- */
html:root body.vx-body{
  margin:0!important;
  min-height:100vh;
  color:var(--vx-ink)!important;
  font-family:var(--vx-font)!important;
  font-size:15px;
  line-height:1.65;
  background:
    radial-gradient(900px 520px at 6% -8%,rgba(98,160,255,.20),transparent 62%),
    radial-gradient(760px 480px at 100% 2%,rgba(124,95,214,.13),transparent 60%),
    radial-gradient(720px 520px at 58% 100%,rgba(56,182,232,.10),transparent 60%),
    var(--vx-bg)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
html:root body.vx-body *,
html:root body.vx-body *::before,
html:root body.vx-body *::after{box-sizing:border-box}

html:root body.vx-body main#vinPage{
  display:block;
  width:min(1240px,calc(100% - 48px))!important;
  max-width:1240px!important;
  margin:26px auto 84px!important;
  padding:0!important;
}

/* ---------- Header (built by /macha-experience.js) ---------- */
html:root body.vx-body .macha-tool-header{
  position:sticky!important;top:0!important;z-index:60!important;
  background:rgba(255,255,255,.84)!important;
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid rgba(190,208,235,.75)!important;
  box-shadow:0 10px 30px -24px rgba(36,84,170,.5)!important;
}
html:root body.vx-body .macha-tool-bar{
  width:min(1240px,calc(100% - 48px))!important;
  min-height:64px!important;
  padding:10px 0!important;
  gap:16px!important;
  flex-wrap:nowrap!important;
}
html:root body.vx-body .macha-tool-brand{
  color:var(--vx-ink)!important;
  font:750 19px/1.2 var(--vx-font)!important;
  letter-spacing:-.04em!important;
}
html:root body.vx-body .macha-tool-brand svg{width:30px;height:30px;color:var(--vx-violet)!important}
html:root body.vx-body .macha-tool-brand em{color:var(--vx-violet)!important}
html:root body.vx-body .macha-home-link{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;
  border:1px solid #d3e0f3;border-radius:999px;
  background:#f5f9ff;
  color:#24467d!important;
  font:650 13px/1.2 var(--vx-font)!important;
  transition:background .2s,border-color .2s,transform .2s var(--vx-ease),box-shadow .2s;
}
html:root body.vx-body .macha-home-link:hover{
  background:#fff;border-color:#9bbbea;color:#1b3f87!important;
  transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(43,99,214,.55);
}
html:root body.vx-body .macha-home-link:focus-visible,
html:root body.vx-body .macha-tool-brand:focus-visible{outline:3px solid rgba(43,99,214,.4);outline-offset:3px;border-radius:12px}
/* Defensive: the shared script already omits these on /vin-checker, but keeps
   them if the page is opened at /vin-checker/index.php. */
html:root body.vx-body .macha-controls,
html:root body.vx-body .macha-tool-panel,
html:root body.vx-body .macha-mission,
html:root body.vx-body .theme-toggle{display:none!important}

/* ---------- Hero ---------- */
#vinPage .vx-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;gap:18px;
  padding:40px 44px;
  margin:0 0 18px;
  border:1px solid #d7e4f5;border-radius:30px;
  background:
    radial-gradient(60% 80% at 92% 12%,rgba(124,95,214,.15),transparent 62%),
    radial-gradient(55% 75% at 66% 96%,rgba(56,182,232,.18),transparent 62%),
    linear-gradient(135deg,#ffffff 0%,#f6faff 52%,#edf4ff 100%);
  box-shadow:0 34px 70px -34px rgba(38,76,140,.34),0 1px 0 rgba(255,255,255,.9) inset;
}
#vinPage .vx-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(60,110,200,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,110,200,.075) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(62% 95% at 78% 52%,#000,transparent 78%);
  mask-image:radial-gradient(62% 95% at 78% 52%,#000,transparent 78%);
}
#vinPage .vx-hero-copy{position:relative;z-index:2;min-width:0;max-width:600px}

#vinPage .vx-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px 6px 11px;
  border:1px solid #cfe0f6;border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#24517f;font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.4;
}
#vinPage .vx-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--vx-sky),var(--vx-violet));
  box-shadow:0 0 0 4px rgba(56,182,232,.18);
}

#vinPage h1.vx-title{
  margin:16px 0 12px!important;
  padding-bottom:.06em;
  font-family:var(--vx-font)!important;
  font-size:clamp(32px,4.1vw,54px)!important;
  line-height:1.07!important;
  letter-spacing:-.04em!important;
  font-weight:750!important;
  color:var(--vx-ink)!important;
}
#vinPage h1.vx-title span{
  display:block!important;
  background:none!important;background-image:none!important;
  color:inherit!important;-webkit-text-fill-color:currentColor!important;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #vinPage h1.vx-title{
    background:linear-gradient(100deg,#12213a 0%,#1d3f87 36%,#2b63d6 64%,#6c4fcf 100%)!important;
    -webkit-background-clip:text!important;background-clip:text!important;
    -webkit-text-fill-color:transparent!important;color:transparent!important;
  }
  #vinPage h1.vx-title span{-webkit-text-fill-color:transparent!important;color:transparent!important}
}
#vinPage p.vx-lede{
  max-width:540px;margin:0 0 22px!important;
  color:var(--vx-slate)!important;
  font-size:15px!important;line-height:1.75!important;font-weight:400!important;
}

/* ---------- Scanner (inside hero) ---------- */
#vinPage .vx-scanner{
  position:relative;
  padding:20px 22px 18px;
  border:1px solid #d4e2f4;border-radius:22px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 26px 44px -28px rgba(36,84,170,.48),0 1px 0 #fff inset;
}
#vinPage #vinForm.is-nudging{animation:vxShake .42s var(--vx-ease)}
#vinPage .vx-scanner-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
#vinPage .vx-scanner-head>div{min-width:0}
#vinPage .vx-scanner h2{
  margin:0!important;
  font-family:var(--vx-font)!important;font-size:18px!important;line-height:1.3;
  font-weight:700!important;letter-spacing:-.02em!important;color:var(--vx-ink)!important;
}
#vinPage .vx-scanner-head p{margin:4px 0 0!important;color:var(--vx-slate)!important;font-size:13px;line-height:1.55}

#vinPage .vx-state{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid #c9ecdc;background:#eefaf4;color:#0b6e4d;
  font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;
  transition:background .3s,border-color .3s,color .3s;
}
#vinPage .vx-state i{width:7px;height:7px;border-radius:50%;background:var(--vx-green);box-shadow:0 0 0 3px rgba(15,138,98,.18);transition:background .3s,box-shadow .3s}
#vinHero[data-state="scanning"] .vx-state{background:#eef4ff;border-color:#c7d8f6;color:#1d4fb0}
#vinHero[data-state="scanning"] .vx-state i{background:var(--vx-blue);box-shadow:0 0 0 3px rgba(43,99,214,.2);animation:vxBlink 1s ease-in-out infinite}
#vinHero[data-state="done"] .vx-state{background:#eefaf4;border-color:#c9ecdc;color:#0b6e4d}
#vinHero[data-state="error"] .vx-state{background:#fff1f3;border-color:#f3cdd4;color:#a92f46}
#vinHero[data-state="error"] .vx-state i{background:var(--vx-rose);box-shadow:0 0 0 3px rgba(198,58,82,.18)}

#vinPage .vx-label{
  display:block;margin:0 0 9px;
  color:#2a3c5a!important;font-size:13px;font-weight:650;letter-spacing:-.005em;
}
#vinPage .vx-input-row{display:flex;gap:12px;align-items:stretch}
#vinPage .vx-input-wrap{position:relative;flex:1 1 auto;min-width:0}
#vinPage .vx-input-icon{
  position:absolute;left:15px;top:50%;width:22px;height:22px;margin-top:-11px;
  color:#7f94b6;pointer-events:none;transition:color .2s;
}
#vinPage .vx-input-wrap:focus-within .vx-input-icon{color:var(--vx-blue)}
#vinPage #vinInput{
  display:block;width:100%;min-width:0;height:58px;margin:0;
  padding:0 16px 0 49px;
  background:#f6f9ff!important;
  color:var(--vx-ink)!important;
  border:1.5px solid #c8d8ee!important;border-radius:15px!important;
  font-family:var(--vx-mono)!important;
  font-weight:600!important;font-size:18px;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 1px 2px rgba(20,50,90,.05);
  transition:border-color .2s,background-color .2s,box-shadow .25s;
  -webkit-appearance:none;appearance:none;
}
#vinPage #vinInput::placeholder{
  color:#8a9bb5;opacity:1;font-weight:500;font-size:13px;letter-spacing:.06em;
  text-overflow:ellipsis;
}
#vinPage #vinInput:hover{border-color:#a9c3e6!important}
#vinPage #vinInput:focus,
#vinPage #vinInput:focus-visible{
  outline:none!important;
  background:#fff!important;
  border-color:var(--vx-blue)!important;
  box-shadow:0 0 0 4px rgba(43,99,214,.15),0 10px 22px -14px rgba(43,99,214,.55);
}
#vinPage #vinInput[aria-invalid="true"]{border-color:var(--vx-rose)!important;background:#fffafb!important}
#vinPage #vinInput[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(198,58,82,.15)}
#vinPage .vx-scanner[data-full="true"] #vinInput:not([aria-invalid="true"]){border-color:#5cc5a0!important}
#vinPage #vinInput:disabled{opacity:.7;cursor:progress}

/* Scan button */
#vinPage .vx-scan-btn{
  position:relative;isolation:isolate;overflow:hidden;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:156px;height:58px;padding:0 26px;margin:0;
  background:linear-gradient(115deg,#1577a8 0%,#2b63d6 54%,#6c4fcf 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:15px!important;
  box-shadow:0 16px 28px -14px rgba(43,99,214,.8),0 1px 0 rgba(255,255,255,.35) inset!important;
  font-family:var(--vx-font)!important;font-size:15px;font-weight:700!important;letter-spacing:-.005em;line-height:1;
  white-space:nowrap;cursor:pointer;
  transition:transform .22s var(--vx-ease),box-shadow .22s,filter .22s;
  -webkit-tap-highlight-color:transparent;
}
#vinPage .vx-scan-btn svg{width:19px;height:19px;flex:none;transition:transform .3s var(--vx-ease)}
#vinPage .vx-scan-btn::after{
  content:"";position:absolute;z-index:-1;top:-60%;bottom:-60%;left:-45%;width:28%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:left .6s var(--vx-ease);
}
#vinPage .vx-scan-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 34px -14px rgba(43,99,214,.85),0 1px 0 rgba(255,255,255,.4) inset!important;
  filter:brightness(1.06) saturate(1.05);
}
#vinPage .vx-scan-btn:hover::after{left:125%}
#vinPage .vx-scan-btn:hover svg{transform:scale(1.12)}
#vinPage .vx-scan-btn:active{transform:translateY(0) scale(.975);filter:brightness(.97)}
#vinPage .vx-scan-btn:focus-visible{outline:3px solid rgba(43,99,214,.45)!important;outline-offset:3px}
#vinPage .vx-scan-btn:disabled{
  cursor:progress;transform:none;filter:none;
}
#vinPage .vx-scan-btn:disabled::after{left:-45%;animation:vxShimmer 1.25s linear infinite}
#vinPage .vx-scan-btn:disabled::before{
  content:"";width:17px;height:17px;border-radius:50%;flex:none;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:vxSpinner .75s linear infinite;
}

/* Ripple (created by JS) */
#vinPage .button-ripple{
  position:absolute;z-index:0;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.55);pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  animation:vxRipple .62s ease-out forwards;
}

/* VIN gauge + counter */
#vinPage .vx-meter{display:flex;align-items:center;gap:14px;margin-top:13px}
#vinPage .vx-gauge{flex:1 1 auto;display:flex;gap:3px;align-items:center;height:14px;min-width:0}
#vinPage .vx-gauge i{
  flex:1 1 0;min-width:0;height:8px;border-radius:3px;background:#dce7f6;
  transition:background .25s,height .25s var(--vx-ease),box-shadow .25s;
}
#vinPage .vx-gauge i:nth-child(3),
#vinPage .vx-gauge i:nth-child(9){margin-right:7px}
#vinPage .vx-gauge i.on{height:14px;animation:vxPop .32s var(--vx-ease)}
#vinPage .vx-gauge i.on:nth-child(-n+3){background:linear-gradient(180deg,#52c4ee,#1577a8);box-shadow:0 5px 10px -4px rgba(21,119,168,.6)}
#vinPage .vx-gauge i.on:nth-child(n+4):nth-child(-n+9){background:linear-gradient(180deg,#5b8ff0,#2b63d6);box-shadow:0 5px 10px -4px rgba(43,99,214,.6)}
#vinPage .vx-gauge i.on:nth-child(n+10){background:linear-gradient(180deg,#9a80f2,#6c4fcf);box-shadow:0 5px 10px -4px rgba(108,79,207,.6)}
#vinPage #charCount{
  flex:none;min-width:58px;text-align:right;
  font-family:var(--vx-mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#5a6d8c;
  transition:color .25s;
}
#vinPage .vx-scanner[data-full="true"] #charCount{color:var(--vx-green)}
#vinPage p.vx-hint{margin:9px 0 0!important;color:var(--vx-slate)!important;font-size:12.5px;line-height:1.6}

/* Status + loading */
#vinPage .status{
  display:none;align-items:flex-start;gap:10px;
  margin-top:14px;padding:12px 14px;
  border:1px solid #d3e1f5;border-radius:13px;
  background:#f1f6fe;color:#1f3f78;
  font-size:13px;line-height:1.55;font-weight:500;
}
#vinPage .status.show{display:flex;animation:vxRise .4s var(--vx-ease) both}
#vinPage .status::before{
  content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  border:2.5px solid rgba(43,99,214,.22);border-top-color:var(--vx-blue);
  animation:vxSpinner .8s linear infinite;
}
#vinPage .status.success{background:#eefaf4;border-color:#c5eadb;color:#0b6e4d}
#vinPage .status.error{background:#fff2f4;border-color:#f3cdd4;color:#a92f46}
#vinPage .status.success::before,
#vinPage .status.error::before{border:0;border-radius:0;animation:none;background:center/contain no-repeat}
#vinPage .status.success::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a62' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E")}
#vinPage .status.error::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c63a52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4h.01'/%3E%3C/svg%3E")}

#vinPage .loading-track{display:none;position:relative;height:4px;margin-top:10px;border-radius:4px;background:#dfe9f7;overflow:hidden}
#vinPage .loading-track.show{display:block}
#vinPage .loading-track::after{
  content:"";position:absolute;inset:0 auto 0 0;width:38%;border-radius:4px;
  background:linear-gradient(90deg,transparent,#38b6e8,#2b63d6,#6c4fcf,transparent);
  animation:vxLoad 1.3s ease-in-out infinite;
}

/* ---------- Vehicle stage ---------- */
#vinPage .vx-stage{position:relative;min-width:0;min-height:340px;display:grid;place-items:center}
#vinPage .vx-halo{
  position:absolute;left:50%;top:52%;width:78%;aspect-ratio:1.7;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(56,182,232,.34),rgba(108,79,207,.12) 62%,transparent);
  filter:blur(22px);opacity:.85;transition:opacity .6s,transform .8s var(--vx-ease);
}
#vinHero[data-state="scanning"] .vx-halo{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
#vinPage .vx-car{position:relative;z-index:2;display:block;width:min(118%,590px);max-width:none;height:auto;margin-right:-9%;overflow:visible}
#vinPage .vx-float{animation:vxFloat 6.5s ease-in-out infinite}
#vinPage .vx-beam{animation:vxSweep 4.8s cubic-bezier(.45,.05,.35,1) infinite}
#vinPage .vx-rim{transform-box:fill-box;transform-origin:50% 50%;animation:vxSpin 11s linear infinite}
#vinPage .vx-ring{fill:none;stroke-width:1.2}
#vinPage .vx-ring.r1{animation:vxDash 14s linear infinite}
#vinPage .vx-ring.r2{animation:vxDash 18s linear infinite reverse}
#vinHero[data-state="scanning"] .vx-beam{animation-duration:1.6s;animation-timing-function:linear}
#vinHero[data-state="scanning"] .vx-rim{animation-duration:1.1s}
#vinHero[data-state="scanning"] .vx-ring.r1{animation-duration:3s}
#vinHero[data-state="scanning"] .vx-ring.r2{animation-duration:4s}

#vinPage .vx-dot,
#vinPage .vx-bar{position:absolute;z-index:1;left:var(--x);top:var(--y);pointer-events:none;animation:vxDrift var(--t) ease-in-out var(--l) infinite}
#vinPage .vx-dot{width:var(--s);height:var(--s);border-radius:50%;background:linear-gradient(135deg,#8fd8f5,#8b72ea);box-shadow:0 0 12px rgba(80,160,240,.5)}
#vinPage .vx-dot.ring{background:none;border:1.5px solid rgba(43,99,214,.45);box-shadow:none}
#vinPage .vx-bar{width:var(--w);height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(43,99,214,.0),rgba(43,99,214,.38))}

#vinPage .vx-chip{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px 7px 10px;border-radius:999px;
  border:1px solid rgba(190,212,243,.95);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#27406d;font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;
  box-shadow:0 14px 26px -16px rgba(36,84,170,.55);
}
#vinPage .vx-chip i{width:7px;height:7px;border-radius:50%;background:var(--vx-sky);box-shadow:0 0 0 3px rgba(56,182,232,.2)}
#vinPage .vx-chip-a{top:9%;left:3%;animation:vxDrift 8s ease-in-out -2s infinite}
#vinPage .vx-chip-b{top:20%;right:2%;animation:vxDrift 9s ease-in-out -5s infinite}
#vinPage .vx-chip-b i{background:var(--vx-violet);box-shadow:0 0 0 3px rgba(108,79,207,.2)}
#vinPage .vx-chip-c{bottom:8%;left:5%;animation:vxDrift 10s ease-in-out -7s infinite}
#vinPage .vx-chip-c i{background:var(--vx-green);box-shadow:0 0 0 3px rgba(15,138,98,.18)}

/* ---------- Steps ---------- */
#vinPage .vx-steps{
  list-style:none;margin:0 0 26px;padding:6px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #dbe6f4;border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:0 16px 36px -28px rgba(36,84,170,.4);
}
#vinPage .vx-steps li{position:relative;display:flex;align-items:center;gap:13px;padding:13px 18px;color:#3b4f70;font-size:13.5px;font-weight:600;line-height:1.4}
#vinPage .vx-steps li+li::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--vx-line)}
#vinPage .vx-steps b{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,#eef6ff,#e6efff);
  border:1px solid #cfe0f6;color:var(--vx-blue);
  font:700 12px/1 var(--vx-mono);
}

/* ---------- Result cards ---------- */
#vinPage .vx-result{display:none;scroll-margin-top:84px}
#vinPage .vx-result.show{display:block}
#vinPage .vx-card{
  position:relative;margin:0 0 18px;padding:28px;
  border:1px solid #dae5f3;border-radius:26px;
  background:var(--vx-paper);
  box-shadow:0 26px 50px -34px rgba(38,76,140,.42);
}
#vinPage .vx-result.show .vx-card{animation:vxRise .65s var(--vx-ease) both}
#vinPage .vx-result.show .vx-card:nth-child(2){animation-delay:.14s}
#vinPage .vx-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
#vinPage .vx-card-head>div{min-width:0}
#vinPage .vx-card h2{
  margin:0!important;
  font-family:var(--vx-font)!important;font-size:21px!important;line-height:1.3;
  font-weight:700!important;letter-spacing:-.025em!important;color:var(--vx-ink)!important;
}
#vinPage .vx-card-head p{margin:5px 0 0!important;color:var(--vx-slate)!important;font-size:13.5px;line-height:1.55}

#vinPage .vx-pill{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;
  font-size:12.5px;font-weight:650;line-height:1.3;white-space:nowrap;
}
#vinPage .vx-pill-ok{background:#eefaf4;border:1px solid #c5eadb;color:#0b6e4d}
#vinPage .vx-pill-ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vx-green)}
#vinPage .vx-pill-warn{background:#fff6e4;border:1px solid #f0dcae;color:#8a560a;transition:background .3s,color .3s}
#vinPage .vx-pill-warn.is-clear{background:#eefaf4;border-color:#c5eadb;color:#0b6e4d}

#vinPage .vx-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
#vinPage .vx-spec{
  display:flex;align-items:center;gap:15px;min-width:0;
  padding:18px 18px;border:1px solid #dde8f6;border-radius:18px;
  background:linear-gradient(145deg,#f8fbff,#eef5ff);
}
#vinPage .vx-result.show .vx-spec{animation:vxRise .55s var(--vx-ease) both;animation-delay:calc(.2s + var(--k,0)*.09s)}
#vinPage .vx-spec>div{min-width:0}
#vinPage .vx-spec-icon{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:#fff;border:1px solid #d3e2f6;color:var(--vx-blue);
  box-shadow:0 8px 16px -10px rgba(43,99,214,.55);
}
#vinPage .vx-spec:nth-child(2) .vx-spec-icon{color:var(--vx-cyan)}
#vinPage .vx-spec:nth-child(3) .vx-spec-icon{color:var(--vx-violet)}
#vinPage .vx-spec-icon svg{width:22px;height:22px}
#vinPage .vx-spec small{display:block;color:#62758f;font-size:12.5px;font-weight:600;line-height:1.3}
#vinPage .vx-spec strong{
  display:block;margin-top:3px;
  color:var(--vx-ink)!important;
  font-size:clamp(19px,2.1vw,25px);font-weight:700;letter-spacing:-.03em;line-height:1.2;
  overflow-wrap:anywhere;
}
#vinPage p.vx-vin-chip{
  display:inline-flex;align-items:center;gap:9px;max-width:100%;
  margin:18px 0 0!important;padding:9px 15px;
  border:1px solid #d6e3f5;border-radius:12px;background:#f5f9ff;
  color:#2f4466!important;
  font-family:var(--vx-mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;line-height:1.5;
  overflow-wrap:anywhere;
}
#vinPage p.vx-vin-chip:empty{display:none}
#vinPage p.vx-vin-chip::before{
  content:"";flex:none;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Recalls */
#vinPage #recallList{display:grid;gap:10px}
#vinPage .recall{
  border:1px solid #dde7f4;border-radius:17px;background:#fbfdff;overflow:hidden;
  transition:border-color .22s,background-color .22s,box-shadow .22s;
}
#vinPage .vx-result.show .recall{animation:vxRise .5s var(--vx-ease) both;animation-delay:min(calc(.34s + var(--i,0)*.06s),1.3s)}
#vinPage .recall:hover{border-color:#b5cdee}
#vinPage .recall[open]{border-color:#9dbfec;background:#f6faff;box-shadow:0 18px 30px -24px rgba(43,99,214,.5)}
#vinPage .recall summary{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:14px 52px 14px 15px;
  list-style:none;cursor:pointer;
  color:var(--vx-ink);
  -webkit-tap-highlight-color:transparent;
}
#vinPage .recall summary::-webkit-details-marker{display:none}
#vinPage .recall summary::marker{content:""}
#vinPage .recall summary:focus-visible{outline:3px solid rgba(43,99,214,.4);outline-offset:-3px;border-radius:17px}
#vinPage .recall summary::after{
  content:"";position:absolute;right:21px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid #5a77a8;border-bottom:2px solid #5a77a8;
  transform:rotate(45deg);transition:transform .3s var(--vx-ease),margin .3s var(--vx-ease);
}
#vinPage .recall[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
#vinPage .recall-index{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:#e8f1ff;color:var(--vx-blue);
  font:700 12px/1 var(--vx-mono);
}
#vinPage .recall-title{min-width:0;display:flex;flex-direction:column;gap:1px}
#vinPage .recall-id{font-family:var(--vx-mono);font-size:12px;font-weight:600;letter-spacing:.02em;color:#5b7094;overflow-wrap:anywhere}
#vinPage .recall-comp{font-size:14px;font-weight:650;line-height:1.45;color:var(--vx-ink);overflow-wrap:anywhere}
#vinPage .recall-body{padding:4px 20px 14px 63px;border-top:1px solid #e3ecf8}
#vinPage .recall[open] .recall-body{animation:vxOpen .38s var(--vx-ease) both}
#vinPage .recall-body p{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;
  margin:0!important;padding:11px 0;
  color:#44587a!important;font-size:13.5px;line-height:1.7;
  border-top:1px solid #edf2fa;overflow-wrap:anywhere;
}
#vinPage .recall-body p:first-child{border-top:0}
#vinPage .recall-body strong{color:#1c3150!important;font-weight:650;font-size:13px}

#vinPage .empty{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px;border:1.5px dashed #c3d6ef;border-radius:17px;background:#f8fbff;
  color:#4a5d7d;font-size:13.5px;line-height:1.7;
}
#vinPage .empty::before{
  content:"";flex:none;width:20px;height:20px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b63d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
#vinPage #recallError{margin-top:14px}

#vinPage .vx-notice{
  position:relative;margin-top:20px;padding:15px 18px 15px 48px;
  border:1px solid #efdcae;border-radius:15px;background:#fff8e8;
  color:#6b4a10;font-size:13px;line-height:1.75;
}
#vinPage .vx-notice::before{
  content:"";position:absolute;left:17px;top:17px;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9 16H3l9-16z'/%3E%3Cpath d='M12 10v4.2M12 17.2h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
#vinPage .vx-sources{margin-top:18px;color:#5a6d8c;font-size:13px;line-height:1.7}
#vinPage .vx-sources a,
#vinPage .vx-about a{
  color:#1b57c4;font-weight:650;text-decoration:underline;text-decoration-color:rgba(27,87,196,.3);
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s,color .2s;
}
#vinPage .vx-sources a:hover,
#vinPage .vx-about a:hover{color:#123f95;text-decoration-color:currentColor}
#vinPage .vx-sources a:focus-visible,
#vinPage .vx-about a:focus-visible{outline:3px solid rgba(43,99,214,.4);outline-offset:3px;border-radius:4px}
#vinPage p.vx-checked{margin:8px 0 0!important;color:#6a7c97!important;font-size:12.5px}
#vinPage p.vx-checked:empty{display:none}

#vinPage .vx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#vinPage .vx-btn-2{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 20px;margin:0;
  background:#fff!important;color:#24467d!important;
  border:1.5px solid #cbdaf0!important;border-radius:14px!important;
  font-family:var(--vx-font)!important;font-size:13.5px;font-weight:650!important;line-height:1;
  cursor:pointer;box-shadow:0 8px 18px -14px rgba(36,84,170,.5)!important;
  transition:transform .2s var(--vx-ease),background-color .2s,border-color .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
#vinPage .vx-btn-2 svg{width:18px;height:18px;flex:none}
#vinPage .vx-btn-2:hover{background:#f3f8ff!important;border-color:#9fc0ea!important;transform:translateY(-1px);box-shadow:0 14px 22px -14px rgba(43,99,214,.6)!important}
#vinPage .vx-btn-2:active{transform:scale(.97)}
#vinPage .vx-btn-2:focus-visible{outline:3px solid rgba(43,99,214,.45)!important;outline-offset:3px}
#vinPage .vx-btn-2 .button-ripple{background:rgba(43,99,214,.22)}
#vinPage .vx-btn-soft{background:#e9f1ff!important;border-color:#bcd2f3!important;color:#1b4aa8!important}
#vinPage .vx-btn-soft:hover{background:#dde9ff!important;border-color:#8fb2ea!important}

/* ---------- About / SEO content ---------- */
#vinPage .vx-about{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 56px;
  margin-top:28px;padding:36px 40px;
  border:1px solid #dbe6f4;border-radius:26px;
  background:rgba(255,255,255,.82);
}
#vinPage .vx-about h2{
  margin:0 0 10px!important;
  font-family:var(--vx-font)!important;font-size:19px!important;line-height:1.35;
  font-weight:700!important;letter-spacing:-.022em!important;color:var(--vx-ink)!important;
}
#vinPage .vx-about p{margin:0 0 14px!important;max-width:62ch;color:#4d6080!important;font-size:14px;line-height:1.85}
#vinPage .vx-about ul{list-style:none;margin:0 0 16px;padding:0;max-width:62ch}
#vinPage .vx-about li{position:relative;margin:0;padding:6px 0 6px 30px;color:#4d6080;font-size:14px;line-height:1.7}
#vinPage .vx-about li::before{
  content:"";position:absolute;left:0;top:9px;width:19px;height:19px;border-radius:50%;
  background:#fff1f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c63a52' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/11px no-repeat;
  border:1px solid #f3cdd4;
}

/* ---------- Motion ---------- */
#vinPage .vx-hero-copy>*{animation:vxRise .8s var(--vx-ease) both}
#vinPage .vx-hero-copy>:nth-child(1){animation-delay:.05s}
#vinPage .vx-hero-copy>:nth-child(2){animation-delay:.13s}
#vinPage .vx-hero-copy>:nth-child(3){animation-delay:.21s}
#vinPage .vx-hero-copy>:nth-child(4){animation-delay:.3s}
#vinPage .vx-stage{animation:vxStage 1.1s var(--vx-ease) .18s both}
#vinPage .vx-steps{animation:vxRise .8s var(--vx-ease) .45s both}

@keyframes vxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes vxStage{from{opacity:0;transform:translateX(34px) scale(.96)}to{opacity:1;transform:none}}
@keyframes vxSweep{0%{transform:translateX(30px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(540px);opacity:0}}
@keyframes vxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vxSpin{to{transform:rotate(360deg)}}
@keyframes vxDash{to{stroke-dashoffset:-260}}
@keyframes vxDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes vxPop{0%{transform:scaleY(.5)}60%{transform:scaleY(1.18)}100%{transform:scaleY(1)}}
@keyframes vxShimmer{from{transform:translateX(0) rotate(22deg)}to{transform:translateX(620%) rotate(22deg)}}
@keyframes vxSpinner{to{transform:rotate(360deg)}}
@keyframes vxLoad{from{transform:translateX(-110%)}to{transform:translateX(290%)}}
@keyframes vxBlink{50%{opacity:.35}}
@keyframes vxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes vxOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes vxRipple{to{transform:translate(-50%,-50%) scale(24);opacity:0}}

/* ---------- Tablet ---------- */
@media (max-width:1040px){
  #vinPage .vx-hero{padding:34px 32px;gap:8px}
  #vinPage .vx-stage{min-height:300px}
  #vinPage .vx-car{width:min(124%,520px)}
}
@media (max-width:900px){
  html:root body.vx-body main#vinPage{width:min(1240px,calc(100% - 36px))!important;margin-top:20px!important}
  html:root body.vx-body .macha-tool-bar{width:calc(100% - 36px)!important}
  #vinPage .vx-hero{grid-template-columns:minmax(0,1fr);gap:4px;padding:32px 28px 18px;border-radius:26px}
  #vinPage .vx-hero-copy{max-width:none}
  #vinPage p.vx-lede{max-width:600px}
  #vinPage .vx-stage{min-height:250px;margin-top:4px}
  #vinPage .vx-car{width:min(100%,470px);margin-right:0}
  #vinPage .vx-about{grid-template-columns:minmax(0,1fr);gap:0;padding:30px 28px}
}

/* ---------- Mobile ---------- */
@media (max-width:700px){
  html:root body.vx-body main#vinPage{width:calc(100% - 28px)!important;margin:14px auto 56px!important}
  html:root body.vx-body .macha-tool-bar{width:calc(100% - 28px)!important;min-height:58px!important;padding:8px 0!important}
  html:root body.vx-body .macha-tool-brand{font-size:17px!important}
  html:root body.vx-body .macha-tool-brand svg{width:27px;height:27px}
  html:root body.vx-body .macha-home-link{padding:7px 13px;font-size:12.5px!important}
  #vinPage .vx-hero{padding:24px 16px 10px;border-radius:24px;margin-bottom:14px}
  #vinPage .vx-eyebrow{font-size:12px;padding:5px 12px 5px 10px}
  #vinPage h1.vx-title{margin:13px 0 9px!important;font-size:clamp(31px,9vw,40px)!important}
  #vinPage p.vx-lede{margin-bottom:16px!important;font-size:14px!important;line-height:1.65!important}
  #vinPage .vx-scanner{padding:16px 14px 14px;border-radius:20px}
  #vinPage .vx-scanner-head{margin-bottom:13px}
  #vinPage .vx-scanner h2{font-size:16.5px!important}
  #vinPage .vx-scanner-head p{font-size:12.5px}
  #vinPage .vx-state{font-size:11.5px;padding:5px 10px 5px 9px}
  #vinPage .vx-input-row{flex-direction:column;gap:10px}
  #vinPage #vinInput{height:56px;font-size:16px;letter-spacing:.06em;padding:0 12px 0 44px}
  #vinPage #vinInput::placeholder{font-size:12.5px;letter-spacing:.02em}
  #vinPage .vx-input-icon{left:13px;width:20px;height:20px;margin-top:-10px}
  #vinPage .vx-scan-btn{width:100%;height:54px;min-width:0}
  #vinPage .vx-gauge i:nth-child(3),
  #vinPage .vx-gauge i:nth-child(9){margin-right:5px}
  #vinPage .vx-stage{min-height:200px}
  #vinPage .vx-car{width:min(100%,360px)}
  #vinPage .vx-chip{font-size:11px;padding:5px 10px 5px 8px}
  #vinPage .vx-chip-a{top:2%;left:0}
  #vinPage .vx-chip-b{top:14%;right:0}
  #vinPage .vx-chip-c{display:none}
  #vinPage .vx-bar{display:none}
  #vinPage .vx-steps{grid-template-columns:minmax(0,1fr);padding:4px 6px;border-radius:20px;margin-bottom:20px}
  #vinPage .vx-steps li{padding:11px 12px}
  #vinPage .vx-steps li+li::before{left:58px;right:12px;top:0;bottom:auto;width:auto;height:1px}
  #vinPage .vx-card{padding:20px 16px;border-radius:22px}
  #vinPage .vx-card-head{flex-wrap:wrap;gap:10px;margin-bottom:16px}
  #vinPage .vx-card h2{font-size:19px!important}
  #vinPage .vx-spec{padding:14px}
  #vinPage .recall summary{padding:12px 44px 12px 12px;gap:11px}
  #vinPage .recall summary::after{right:17px}
  #vinPage .recall-body{padding:2px 14px 10px}
  #vinPage .recall-body p{grid-template-columns:minmax(0,1fr);gap:1px}
  #vinPage .vx-notice{padding:14px 14px 14px 44px}
  #vinPage .vx-actions{flex-direction:column}
  #vinPage .vx-btn-2{width:100%}
  #vinPage .vx-about{padding:24px 18px;border-radius:22px;margin-top:20px}
}
@media (max-width:380px){
  #vinPage .vx-eyebrow{font-size:11px;letter-spacing:0;padding:5px 11px 5px 9px;gap:7px}
  #vinPage h1.vx-title{font-size:29px!important}
  #vinPage #vinInput::placeholder{font-size:11px;letter-spacing:0}
  #vinPage .vx-hero{padding:22px 13px 8px}
  #vinPage .vx-scanner{padding:14px 11px 12px}
  #vinPage .vx-state{display:none}
  #vinPage #vinInput{font-size:16px;letter-spacing:.03em;padding-left:40px}
  #vinPage .vx-input-icon{left:11px}
  #vinPage .vx-gauge{gap:2px}
  #vinPage .vx-chip-b{display:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html:root:root{scroll-behavior:auto}
  html:root body.vx-body *,
  html:root body.vx-body *::before,
  html:root body.vx-body *::after{animation:none!important;transition:none!important}
  /* Freeze the scan beam mid-car so the illustration still reads as "scanning". */
  #vinPage .vx-beam{transform:translateX(290px)}
}

/* ---------- Print ---------- */
@media print{
  html:root body.vx-body{background:#fff!important;color:#111!important}
  html:root body.vx-body .macha-tool-header,
  #vinPage .vx-hero,
  #vinPage .vx-steps,
  #vinPage .no-print{display:none!important}
  html:root body.vx-body main#vinPage{width:100%!important;max-width:none!important;margin:0!important}
  #vinPage .vx-result:not(.show){display:none!important}
  #vinPage .vx-card,
  #vinPage .vx-about{background:#fff!important;box-shadow:none!important;border:1px solid #ccc!important;border-radius:10px;break-inside:avoid;animation:none!important}
  #vinPage .vx-spec,
  #vinPage .recall,
  #vinPage .recall-body,
  #vinPage .empty{background:#fff!important;border-color:#ccc!important;box-shadow:none!important;animation:none!important}
  #vinPage .recall{break-inside:avoid}
  #vinPage .recall-body{display:block}
  #vinPage .vx-notice{background:#fff8e9!important;color:#4d3510!important}
  #vinPage .vx-sources a,
  #vinPage .vx-about a{color:#174f86}
}