:root{
  --bg:#0c0e10;
  --panel:#14171a;
  --text:#e6ecf0;
  --muted:#8a99a6;
  --brand:#2d6cdf;
  --accent:#18a957;
  --danger:#ff5555;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}

/* Resets & basics */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Prevent accidental horizontal scroll on mobile */
  overflow-x:hidden;
  /* Safari URL bar friendly viewport sizing */
  min-height:100vh;
  min-height:100dvh
}
a{color:var(--brand);text-decoration:none}
a:focus,button:focus,select:focus,input:focus,textarea:focus{outline:2px solid #3d7cff;outline-offset:2px}
.container{max-width:1320px;margin:0 auto;padding:20px}

/* Small top offset so sticky header never covers first content */
main.container{padding-top:8px}

/* Safe-area support so bottom CTAs never sit behind the home indicator */
main.container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

/* Sticky Header */
.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(12,14,16,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid #1f2327
}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.brand{display:flex;gap:10px;align-items:center}
.brand img{height:28px;width:auto;filter:drop-shadow(0 0 6px rgba(27,129,255,.25))}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:10px}
.nav a.active,.nav a:hover{background:#1b1f24}

/* Hamburger — hidden on desktop */
.nav-hamburger{display:none;background:none;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 10px;cursor:pointer;flex-direction:column;gap:5px;width:44px;height:40px;justify-content:center;align-items:center}
.nav-hamburger span{display:block;width:22px;height:2px;background:#e6ecf0;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Utility (language/currency) */
.util-tray{display:flex;gap:8px;align-items:center;overflow:visible}
.util-tray select{
  background:#1b1f24;color:var(--text);
  border:1px solid #2a2f35;border-radius:10px;padding:6px 10px
}
#currency{min-width:90px}

/* ===== Mobile header layout fixes =====
   - Wrap nav rows
   - Brand first row
   - Util tray becomes full-width row
   - Nav links follow
*/
@media (max-width:960px){
  .nav{display:flex;flex-wrap:wrap;align-items:center}
  .brand{flex:1 1 auto}
  .nav-hamburger{display:flex}
  .nav-links{display:none;flex:1 1 100%;flex-direction:column;gap:4px;padding:10px 0}
  .nav-links.is-open{display:flex}
  .util-tray{
    order:2;
    position:static;              /* remove fixed bubble */
    flex:1 1 100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:8px;
    background:transparent;
    border:0;
    padding:0;
    box-shadow:none;
    z-index:auto;
  }
  .util-tray select{width:100%}
}

/* Hero */
.hero{padding:32px 20px 40px;text-align:center;position:relative;overflow:hidden}
.hero h1{font-size:clamp(28px,4.5vw,46px);line-height:1.06;margin:10px 0;position:relative;z-index:1}
.hero p,.hero .hero-tagline,.hero .hero-cta-row,.hero .how-it-works{position:relative;z-index:1}
@media(max-width:960px){
  .hero::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:70vw;max-width:360px;height:280px;
    background:radial-gradient(ellipse at center top,rgba(27,129,255,.10) 0%,rgba(27,129,255,.03) 40%,transparent 70%);
    pointer-events:none;user-select:none;z-index:0;
  }
}
.hero p{color:var(--muted);font-size:clamp(15px,2.6vw,19px);max-width:520px;margin:0 auto}
.cta-group{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{
  background:var(--brand);border:0;color:#fff;
  padding:12px 18px;border-radius:12px;cursor:pointer;font-weight:600;
  box-shadow:var(--shadow)
}
.btn.secondary{background:#1b1f24;color:#e6ecf0;border:1px solid #2b3137}
.btn.ghost{background:transparent;border:1px solid #2b3137;color:#e6ecf0}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Cards & grids */
.card{
  background:var(--panel);border:1px solid #1f2429;
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px
}
.grid{display:grid;gap:16px}
@media (min-width:900px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
}

/* Tuner tiles (new structure) */
.tiles-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
@media (max-width:960px){ .tiles-3{grid-template-columns:1fr} }
.card.tuner{
  background:#171a21;border:1px solid #2b3240;border-radius:14px;padding:10px;cursor:pointer
}
.card.tuner img{
  width:100%;height:180px;object-fit:cover;border-radius:10px;display:block
}
.card.tuner .card-title{margin:10px 6px 6px;color:#cfe1ff;font-weight:600}
.card.tuner.selected{outline:2px solid #4da3ff}

/* Legacy .tile styles kept for safety (no longer used by tuner) */
.tile{background:#0f1216;border:1px solid #222830;border-radius:12px;padding:10px;cursor:pointer;transition:transform .08s}
.tile:hover{transform:translateY(-2px)}
.tile.selected{outline:2px solid var(--brand)}
.tile img{width:100%;height:auto;border-radius:8px}

/* Non-pulsing "ready" highlight (used when an element is actionable but not the primary next step) */
.ready{
  outline:2px solid rgba(45,108,223,.35);
  outline-offset:2px;
  box-shadow:0 0 0 2px rgba(45,108,223,.12), 0 0 10px rgba(45,108,223,.18)
}

/* Branded tap feedback (scoped: CTAs + tappable tiles only) */
.cta-primary,
.cta-secondary,
.btn,
.tile,
.card.tuner,
.use-basemap-btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  transition:transform 120ms ease, filter 120ms ease;
  will-change:transform
}
button.cta-primary:disabled,
button.cta-secondary:disabled,
button.btn:disabled,
button.use-basemap-btn:disabled{
  transform:none !important;
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(30%);
  box-shadow:none;
}
.cta-primary:active,
.cta-secondary:active,
.btn:not(:disabled):active,
.tile:active,
.card.tuner:active,
.use-basemap-btn:not(:disabled):active{
  transform:scale(.985);
  filter:brightness(1.06)
}

/* Inline spinner for network actions (scoped via .is-loading) */
.cta-primary.is-loading,
.cta-secondary.is-loading,
.btn.is-loading,
.tile.is-loading,
.card.tuner.is-loading,
.use-basemap-btn.is-loading{
  pointer-events:none;
  opacity:.85
}
.cta-primary.is-loading::after,
.cta-secondary.is-loading::after,
.btn.is-loading::after,
.use-basemap-btn.is-loading::after{
  content:"";
  width:14px;height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:inline-block;
  margin-inline-start:8px;
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pricing */
.price{font-weight:800;font-size:32px}
.small{color:var(--muted);font-size:14px}
.bullet{margin:8px 0}

.basemap-emphasis{
  color:#e6ecf0;
  font-size:14px;
  font-weight:700;
  opacity:.96;
  margin:6px 0 10px;
}

.basemap-meta-sections{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}

.basemap-meta-section{
  display:grid;
  gap:8px;
}

.basemap-meta-section-title{
  color:#b0ccde;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.basemap-meta-grid{
  display:grid;
  gap:8px 12px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  min-width:0;
}

.basemap-meta-item{
  min-width:0;
}

.basemap-meta-label{
  color:#b0ccde;
  font-size:14px;
  line-height:1.3;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.02em;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.basemap-meta-value{
  color:#dfe8f1;
  font-size:14px;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.basemap-results-status{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid #243447;
  border-radius:12px;
  background:#141922;
  color:#dfe8f1;
}
.basemap-results-status strong{
  color:#fff;
}
.basemap-results-status .small{
  margin-top:6px;
}
.basemap-results-info{
  margin-top:8px;
  font-size:15px;
  line-height:1.4;
  padding:8px 12px;
  border-radius:8px;
}
.basemap-results-info.is-info{
  background:rgba(27,129,255,.08);
  border:1px solid rgba(27,129,255,.25);
  color:#b3d4ff;
}
.basemap-results-info.is-warn{
  background:rgba(234,179,8,.07);
  border:1px solid rgba(234,179,8,.3);
  color:#ffd97a;
}
/* Empty / status cards in #basemapCards — important copy must not use muted .small */
.basemap-message{
  margin:0;
  padding:14px 16px;
  border-radius:12px;
  font-size:16px;
  line-height:1.45;
  font-weight:500;
}
.basemap-message.is-neutral{
  color:var(--muted);
  font-size:15px;
  font-weight:400;
  padding:10px 12px;
  background:transparent;
  border:1px solid transparent;
}
.basemap-message.is-info{
  background:rgba(27,129,255,.10);
  border:1px solid rgba(27,129,255,.35);
  color:#c7e0ff;
}
.basemap-message.is-warn{
  background:rgba(234,179,8,.12);
  border:1px solid rgba(234,179,8,.45);
  color:#ffe29a;
}
.card.basemap:has(> .basemap-message:not(.is-neutral)){
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  padding:0;
}
/* Account download — injector/CID calibration warning (must not use muted .finder-hint) */
.basemap-download-notes{
  margin-top:12px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(234,179,8,.45);
  background:rgba(234,179,8,.12);
}
.basemap-download-notes-title{
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  margin:0 0 10px;
  color:#ffe29a;
}
.basemap-download-notes-body{
  margin:0;
  font-size:15px;
  line-height:1.5;
  font-weight:500;
  color:#f4f1e6;
}
.basemap-download-notes-body + .basemap-download-notes-body{
  margin-top:10px;
}
.basemap-download-notes-body.is-emphasis{
  color:#fff6d6;
  font-weight:700;
}
.step3-shell{
  display:grid;
  gap:14px;
}
.step3-hero{
  display:grid;
  gap:14px;
}
.step3-compatibility{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.step3-compatibility-item{
  display:grid;
  gap:4px;
}
.step3-compatibility-label{
  color:#8fa1b5;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.step3-compatibility-value{
  color:#f3f7fb;
  font-size:15px;
  font-weight:700;
}
.step3-filters-panel{
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  overflow:visible;
}
.step3-filters-summary{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.step3-filter-toggle-btn,
.step3-filters-summary-action,
.lib-parts-toggle-btn{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  padding:12px 18px;
  border-radius:999px;
  border:2px solid #7ec8ff;
  background:var(--brand);
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
  text-align:center;
  cursor:pointer;
  box-shadow:0 0 0 3px rgba(45,108,223,.28), 0 8px 22px rgba(45,108,223,.35);
}
.step3-filter-toggle-btn:hover,
.step3-filters-summary-action:hover,
.lib-parts-toggle-btn:hover{
  background:#3d7cff;
  border-color:#c5e4ff;
  filter:brightness(1.05);
}
.step3-filter-toggle-btn:focus-visible,
.lib-parts-toggle-btn:focus-visible{
  outline:2px solid #c5e4ff;
  outline-offset:3px;
}
.step3-filter-toggle-btn.has-active,
.step3-filters-panel.is-open .step3-filter-toggle-btn,
.lib-parts-toggle-btn.is-open{
  background:#1a4fb8;
  border-color:#c5e4ff;
}
.step3-filters-summary-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.step3-filters-summary-copy{
  margin:4px 0 0;
  color:#aab6c2;
  font-size:15px;
  line-height:1.45;
}
.step3-filters-summary-text{
  margin-left:6px;
}
@media (max-width:640px){
  .step3-filter-toggle-btn,
  .lib-parts-toggle-btn{
    width:100%;
    margin-left:0;
    padding:14px 18px;
    font-size:16px;
  }
}
.step3-filter-toggle-label{
  display:inline-block;
}
.step3-filters-body{
  padding:0 16px 18px;
  display:none;
  gap:16px;
}
.step3-filters-panel.is-open .step3-filters-body{
  display:grid;
}
.step3-filters-grid{
  display:grid;
  gap:12px;
}
.step3-parts-form{
  display:grid;
  gap:18px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(126,200,255,.16);
  background:
    radial-gradient(circle at 8% 0%,rgba(45,108,223,.16),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.step3-parts-section{
  display:grid;
  gap:10px;
}
.step3-parts-section-title{
  margin:0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#7ec8ff;
}
.step3-parts-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .step3-parts-grid{grid-template-columns:1fr 1fr}
}
.step3-field{
  display:grid;
  align-content:start;
  gap:8px;
  min-width:0;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:#101418;
}
.step3-field label{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  color:#f3f7fb;
  letter-spacing:0;
  text-transform:none;
}
.step3-field-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#c5e4ff;
  background:rgba(27,129,255,.16);
  border:1px solid rgba(126,200,255,.28);
}
.step3-field input,
.step3-field select{
  width:100%;
  min-height:48px;
  font-size:16px;
  font-weight:600;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #2a3340;
  background:#0c0f13;
  color:#e6ecf0;
}
.step3-field input[readonly]{
  color:#fff;
  cursor:default;
}
.step3-field-followup{
  margin-top:2px;
}
.step3-field:has(select option:checked:not([value=""])),
.step3-field:has(input:not([readonly]):not(:placeholder-shown)){
  border-color:rgba(126,200,255,.34);
  background:rgba(27,129,255,.08);
  box-shadow:inset 0 0 0 1px rgba(126,200,255,.08);
}
.step3-field.is-locked{
  background:rgba(255,255,255,.03);
}
.step3-parts-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.step3-parts-actions .cta-primary,
.step3-parts-actions .cta-secondary{
  min-height:48px;
  padding:12px 20px;
  font-size:15px;
  font-weight:700;
}
.step3-hero:has(.step3-filters-panel.is-open) + .step3-results-shell .step3-active-filters{
  display:none !important;
}
.step3-bike-bar{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.step3-bike-item{
  display:grid;
  gap:4px;
}
.step3-bike-label{
  color:#8fa1b5;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.step3-bike-value{
  color:#f3f7fb;
  font-size:16px;
  font-weight:700;
}
.step3-results-shell{
  display:grid;
  gap:14px;
}
/* Ensure step sections and the cards grid land below the fixed nav when scrolled into view */
#step1,#step2,#step3,#step4{scroll-margin-top:72px}
#basemapCards{scroll-margin-top:16px}
.step3-results-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.step3-active-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.step3-active-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(27,129,255,.24);
  background:rgba(27,129,255,.09);
  color:#dbe8ff;
  font-size:14px;
  line-height:1.2;
}
.step3-active-filter-chip strong{
  color:#fff;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.step3-results-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.step3-results-copy{
  margin:4px 0 0;
  color:#aab6c2;
  font-size:15px;
}
.card.basemap{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}
.basemap-card-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  padding:5px 10px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.12);
}
.basemap-card-badge.is-exact{
  color:#dcfce7;
  background:rgba(22,163,74,.14);
  border-color:rgba(22,163,74,.34);
}
.basemap-card-badge.is-closest{
  color:#fde68a;
  background:rgba(234,179,8,.12);
}
/* Legacy "Recommended" (no longer stamped on every card) */
.basemap-card-badge.is-recommended{
  color:#dcfce7;
  background:rgba(22,163,74,.14);
  border-color:rgba(22,163,74,.34);
}
/* Top VIN result only */
.basemap-card-badge.is-best-match{
  color:#dcfce7;
  background:rgba(22,163,74,.14);
  border-color:rgba(22,163,74,.34);
}
/* Catalog → VIN flow: customer's library pick when still in results */
.basemap-card-badge.is-catalog-pick{
  color:#bfdbfe;
  background:rgba(27,129,255,.14);
  border-color:rgba(27,129,255,.34);
}
/* Part difference highlighting — amber for different, green for matching selected part */
.part-diff-amber{
  color:#f59e0b;
  font-weight:600;
}
.part-match-green{
  color:#4ade80;
  font-weight:600;
}
/* Color-key legend shown above basemap cards */
.basemap-color-key{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:6px 10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  font-size:12px;
  color:var(--muted,#8899aa);
  margin-top:8px;
}
.color-key-item{
  display:flex;
  align-items:center;
  gap:5px;
}
.color-key-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.color-key-dot--green{background:#4ade80}
.color-key-dot--amber{background:#f59e0b}
.color-key-sep{opacity:.4}
.card.basemap .card-title{
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}
.card.basemap .basemap-emphasis{
  margin-top:-2px;
}
.card.basemap .basemap-meta-grid{
  margin-bottom:0;
}
.card.basemap.selected{
  border-color:rgba(27,129,255,.6);
  box-shadow:0 0 0 1px rgba(27,129,255,.22) inset, 0 10px 30px rgba(0,0,0,.35);
}
.card.basemap .basemap-card-actions{
  margin-top:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card.basemap .basemap-card-actions .use-basemap-btn{
  margin-top:0;
  width:100%;
  justify-content:center;
}
.card.basemap .use-basemap-btn{
  margin-top:auto;
  width:100%;
  justify-content:center;
}
#basemapCards{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items:start;
}
#basemapCards > .card.basemap{
  height:100%;
}
#basemapCards > .vin-result-group{
  grid-column:1 / -1;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items:start;
}
.vin-result-group-heading{
  grid-column:1 / -1;
  margin:0;
  padding:4px 2px 0;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#93c5fd;
}
.vin-result-group-heading.is-other{
  color:#94a3b8;
  padding-top:8px;
}
.vin-other-toggle{
  grid-column:1 / -1;
  min-height:44px;
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(147,197,253,.35);
  background:rgba(15,23,42,.75);
  color:#e2e8f0;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.vin-other-toggle:focus-visible{
  outline:2px solid #38bdf8;
  outline-offset:2px;
}
.vin-other-cards{
  grid-column:1 / -1;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.vin-other-cards[hidden]{
  display:none;
}
.vin-part-match-summary{
  font-size:14px;
  font-weight:700;
  color:#86efac;
  line-height:1.35;
}
.vin-part-match-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.vin-part-match-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(22,163,74,.14);
  border:1px solid rgba(22,163,74,.34);
  color:#dcfce7;
  font-size:12px;
  font-weight:700;
}
@media (max-width:640px){
  .vin-result-group-heading{
    font-size:12px;
  }
  .vin-other-toggle{
    font-size:14px;
  }
}
#libraryContent .vin-result-group{
  display:grid;
  gap:16px;
  margin:8px 0 16px;
}
#libraryContent .vin-other-toggle{
  grid-column:1 / -1;
}
#libraryContent .vin-other-cards{
  display:block;
}
#libraryContent .vin-other-cards[hidden]{
  display:none;
}
#libResultsStatus.is-part-rank{
  display:block;
  color:#cbd5e1;
  font-size:15px;
  line-height:1.45;
}
/* Tune Library */
.lib-platform-heading{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  padding:22px 4px 6px 4px;
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:4px;
}
.lib-platform-heading:first-child{
  padding-top:6px;
}
.lib-year{
  margin-top:16px;
}
.lib-year-header{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  user-select:none;
}
.lib-year-header:hover{background:rgba(255,255,255,.07)}
.lib-year-header h3{margin:0;font-size:18px;font-weight:700}
.lib-year-header .lib-count{font-size:15px;opacity:.7}
.lib-year-header .lib-chevron{
  margin-left:auto;
  font-size:14px;
  opacity:.6;
  transition:transform .2s ease;
}
.lib-year.open .lib-chevron{transform:rotate(90deg)}
.lib-year-body{
  display:none;
  padding:6px 0 0 0;
}
.lib-year.open .lib-year-body{display:block}

.lib-model{
  margin:8px 0 0 12px;
}
.lib-model-header{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.025);
  user-select:none;
}
.lib-model-header:hover{background:rgba(255,255,255,.06)}
.lib-model-header h4{margin:0;font-size:15px;font-weight:600}
.lib-model-header .lib-count{font-size:14px;opacity:.65}
.lib-model-header .lib-chevron{
  margin-left:auto;
  font-size:15px;
  opacity:.5;
  transition:transform .2s ease;
}
.lib-model.open .lib-chevron{transform:rotate(90deg)}
.lib-model-body{
  display:none;
  padding:4px 0 0 4px;
}
.lib-model.open .lib-model-body{
  display:block;
  padding:8px 0 0 4px;
}
/* Model sub-group inside a year: full-width label + card grid */
.lib-subgroup{
  margin-bottom:14px;
}
.lib-subgroup-label{
  font-size:13px;
  font-weight:700;
  color:#64748b;
  letter-spacing:.05em;
  padding:4px 4px 6px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
}
.lib-subgroup-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));
  gap:10px;
}

.lib-tune{
  margin:6px 0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.lib-tune-hero{
  display:grid;
  gap:4px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(9,12,16,.34);
  margin-bottom:8px;
}
.lib-tune-kicker{
  color:#8fa1b5;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.lib-tune-title{
  font-weight:800;
  font-size:16px;
  line-height:1.25;
  color:#f4f8fc;
}
.lib-rdrs-no{
  color:#fbbf24;
  font-weight:800;
}
.lib-rdrs-yes{
  color:#4ade80;
  font-weight:800;
  display:inline-block;
  animation:lib-rdrs-wave 2.6s ease-in-out infinite;
}
.lib-o2-required{
  color:#fb923c;
  font-weight:800;
}
.lib-transmission-baker{
  color:#fb923c;
  font-weight:800;
}
.lib-transmission-unverified{
  color:#fbbf24;
  font-weight:800;
}
.lib-custom-trike-only{
  color:#fb923c;
  font-weight:800;
}
@keyframes lib-rdrs-wave{
  0%,100%{transform:translateY(0px)}
  25%{transform:translateY(-3px)}
  75%{transform:translateY(2px)}
}
.lib-tune-subtitle{
  color:#b8c5d1;
  font-size:12px;
  line-height:1.3;
}
.lib-tune-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.lib-tune-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:#dfe8f1;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
}
.lib-tune-chip.is-accent{
  border-color:rgba(27,129,255,.28);
  background:rgba(27,129,255,.12);
  color:#b9d7ff;
}
.lib-tune-details{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%, 320px),1fr));
  font-size:15px;
  color:#a3b1bf;
  align-items:start;
}
.lib-tune-section{
  display:grid;
  gap:6px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.lib-tune-section-title{
  color:#b4d0ec;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.lib-tune-section-grid{
  display:grid;
  gap:6px 10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%, 180px),1fr));
}
.lib-tune-section-flex{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
}
.lib-tune-section-flex > div{flex:0 0 auto;min-width:160px;max-width:100%}
.lib-tune-section-grid > div{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.lib-tune-details .lib-label{color:#a8c2d8;font-size:13px;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;word-break:break-word;overflow-wrap:anywhere}
.lib-tune-details .lib-value{color:#eef4fa;font-size:15px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}

.lib-tune-actions{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.lib-tune-actions > button{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  min-height:40px;
  height:40px;
  padding:8px 14px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  box-shadow:none;
}
.lib-tune-actions .lib-select-btn{
  margin-top:0;
}
.lib-copy-vin-btn{
  border:1px solid rgba(99,102,241,.5);
  background:rgba(99,102,241,.12);
  color:#a5b4fc;
  cursor:pointer;
}
.lib-select-btn{
  margin-top:8px;
  padding:7px 12px;
  border-radius:10px;
  background:rgba(27,129,255,.14);
  border:1px solid rgba(27,129,255,.34);
  color:#b9d7ff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.lib-select-btn:hover{
  background:rgba(27,129,255,.24);
  color:#d7e9ff;
}

.lib-empty{
  padding:20px;
  text-align:center;
  opacity:.7;
  font-size:14px;
}

.basemap-match-note{
  color:#ffd28a;
  font-size:15px;
  line-height:1.35;
  margin:0 0 10px;
}

/* Splash */
#splash{
  position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;
  z-index:2000;transition:opacity .5s ease;
  animation:splashFade .6s ease 1.8s forwards;
}
#splash img{width:min(60vw,260px);height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
#splash.hide, #splash.fade{opacity:0;pointer-events:none} /* support both 'hide' and legacy 'fade' */

@keyframes splashFade{
  to{opacity:0;visibility:hidden;pointer-events:none}
}

/* Forms */
label{display:block;margin:8px 0 4px;color:#c9d3dc}
/* Radios/checkboxes must stay intrinsic size. width:100% + flex label
   shoves the caption off the card (account locator, checkout tokens). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,textarea{
  width:100%;background:#0f1216;color:var(--text);
  border:1px solid #232a33;border-radius:10px;padding:10px;
  color-scheme:dark
}
input[type="radio"],
input[type="checkbox"]{
  color-scheme:dark;
  accent-color:#3a7afe;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 9999px #0f1216 inset !important;
  box-shadow:0 0 0 9999px #0f1216 inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text)
}
.field-row{display:grid;gap:12px}
@media(min-width:700px){.field-row{grid-template-columns:1fr 1fr}}

.summary{
  background:#0e1116;border:1px dashed #2a2f35;border-radius:12px;
  padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace
}



/* VIN scan hidden file input (kept clickable on iOS) */
.visually-hidden-file{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}


/* Footer */
footer{
  margin:40px 0;padding:20px;color:#9aa7b3;text-align:center;
  border-top:1px solid #1f2429
}
.version{opacity:.7;font-size:14px}

/* Floating Home button — mobile only */
.home-floating{
  position:fixed;
  left:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:900;        /* keep under header & modals */
  display:none;
}
@media (max-width:800px){
  .home-floating{ display:inline-block; }
  /* Clear Home + Tour FABs so account/download CTAs stay tappable */
  main.container{
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* ===== iOS Safari fix: selects inside sticky + blur headers =====
   Remove blur only on mobile to avoid WebKit event bugs.
*/
@media (max-width:960px){
  .header{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(12,14,16,0.98) !important;
  }
  .util-tray{
    z-index: 1101;
    pointer-events: auto;
  }
  .util-tray select{
    position: relative; z-index: 1102;
    pointer-events: auto;
    -webkit-touch-callout: default;
    touch-action: manipulation;
  }
}

/* ===== Pulse highlight (strong blue halo) ===== */
.pulse {
  position: relative;
  z-index: 1;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(45, 108, 223, 0);
  box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0);
  pointer-events: none;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    border-color: rgba(45, 108, 223, 0);
    box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0);
    opacity: 0.2;
  }
  50% {
    border-color: rgba(45, 108, 223, 0.9);
    box-shadow: 0 0 12px 2px rgba(45, 108, 223, 0.8);
    opacity: 1;
  }
  100% {
    border-color: rgba(45, 108, 223, 0);
    box-shadow: 0 0 0 0 rgba(45, 108, 223, 0.0);
    opacity: 0.2;
  }
}



/* Finder hints */
.finder-hint{
  margin:0 0 8px 0;
  font-size:15px;
  color:var(--muted);
}
.basemap-results-info{
  display:none;
  margin:10px 0 12px 0;
  padding:12px 14px;
  border:1px solid rgba(45,108,223,.35);
  border-radius:12px;
  background:rgba(45,108,223,.08);
  color:#dbe8ff;
}
.basemap-results-info.is-active{
  display:block;
}
.basemap-results-info-line + .basemap-results-info-line{
  margin-top:4px;
}
.basemap-results-info strong{
  color:#fff;
}
.checkout-account-hint{
  display:none;
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#d8e5f4;
}
.checkout-account-hint.is-active{
  display:block !important;
}
.checkout-account-hint.is-subscription{
  border-color:rgba(27,129,255,.45);
  background:rgba(27,129,255,.10);
  color:#eaf3ff;
}
.checkout-account-hint.is-neutral{
  border-color:rgba(255,255,255,.14);
}
.checkout-account-gate{
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.checkout-account-gate-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.checkout-account-gate-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#fff;
}
.checkout-account-gate-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.checkout-account-login-form{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.checkout-account-login-form.is-active{
  display:block;
}
.checkout-account-login-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.checkout-account-login-grid label{
  display:grid;
  gap:6px;
}
.checkout-account-state{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#dbe8ff;
  display:none;
}
.checkout-account-state.is-active{
  display:block;
}
.checkout-account-state.is-subscription{
  border-color:rgba(27,129,255,.45);
  background:rgba(27,129,255,.10);
  color:#eef6ff;
}
.checkout-account-state.is-neutral{
  border-color:rgba(255,255,255,.14);
}
.checkout-account-state.is-ready{
  border-color:rgba(22,163,74,.45);
  background:rgba(22,163,74,.12);
  color:#ecfff1;
}
.checkout-account-continue{
  margin-top:12px;
}
.subscription-interval-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.subscription-interval-btn{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#101318;
  color:#e6ecf0;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}
.subscription-interval-btn.is-selected{
  border-color:rgba(27,129,255,.75);
  background:rgba(27,129,255,.14);
  color:#fff;
  box-shadow:0 0 0 1px rgba(27,129,255,.22) inset;
}
.subscription-interval-btn small{
  display:block;
  margin-top:4px;
  font-size:14px;
  opacity:.78;
  font-weight:500;
}
.subscription-interval-price{
  display:block;
  margin-top:2px;
  font-size:15px;
  font-weight:700;
  color:#6cb4ff;
}
.subscription-interval-btn.is-selected .subscription-interval-price{
  color:#fff;
}
.waiver-highlight-refund{
  margin:16px 0;
  padding:14px 16px;
  border:1px solid rgba(245,158,11,.55);
  border-radius:12px;
  background:rgba(245,158,11,.12);
  box-shadow:0 0 0 1px rgba(245,158,11,.16) inset;
}
.waiver-highlight-refund p{
  margin:0 0 10px 0;
}
.waiver-highlight-refund p:last-child{
  margin-bottom:0;
}
.waiver-highlight-refund strong{
  color:#fff;
}
.finder-hint.tip-callout{
  animation: tipWave 1.3s ease-in-out 2;
}
@keyframes tipWave{
  0%{transform:translateX(0)}
  15%{transform:translateX(2px)}
  30%{transform:translateX(-2px)}
  45%{transform:translateX(2px)}
  60%{transform:translateX(-1px)}
  75%{transform:translateX(1px)}
  100%{transform:translateX(0)}
}

/* iOS zoom guard: ensure form controls are >=16px on small screens */
@media (max-width: 960px){
  input,
  select,
  textarea,
  button,
  .btn,
  .cta-primary,
  .cta-secondary {
    font-size:16px;
  }

  /* iOS tap target ergonomics */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  button,
  .btn,
  .cta-primary,
  .cta-secondary{
    min-height:44px;
  }
}


/* VIN entry ergonomics */
#vinManual{
  padding-top:12px;
  padding-bottom:12px;
}

/* iPhone small-screen: prevent Step 1 overflow clipping (we hide horizontal scroll globally) */
@media (max-width: 420px){
  /* Stack the VIN input + CTA vertically */
  #step1 .field-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  /* Inline min-width in markup can force overflow on small iPhones */
  #vinManualWrap{
    min-width:0 !important;
    flex:1 1 auto !important;
    width:100% !important;
  }
  #vinDecodeBtn,
  #vinScan,
  #vinPhotoBtn{
    width:100% !important;
  }
  #vinPreviewWrap,
  #vinPreviewControls{
    max-width:100%;
  }
  /* Ensure summary cards can shrink without clipping */
  #step1 .card,
  #step1 .vin-card{
    min-width:0;
  }
}

/* Long VIN/model strings should wrap, not overflow */
#vinResult,
#vinDetected,
.vin-summary,
.pill{
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

/* Account page — mobile: chips and copy stay in the card, not floating */
.account-order-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
@media (max-width: 640px){
  #account,
  #account .vin-card{
    min-width:0;
    max-width:100%;
  }
  #account .vin-summary{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:stretch;
  }
  #account .pill{
    display:block;
    width:100%;
    box-sizing:border-box;
    border-radius:10px;
    line-height:1.45;
    overflow-wrap:break-word;
    word-break:normal;
    white-space:normal;
  }
  #account .field-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #account .field-row > div{
    min-width:0 !important;
    flex:1 1 auto !important;
    width:100%;
  }
  #account .account-order-actions,
  #account .account-order-actions .cta-primary,
  #account .account-order-actions .cta-secondary{
    width:100%;
  }
  #accountLoggedInHeader .btn-logout{
    width:auto;
  }
  #account .bm-find-file,
  #account .basemap-download-notes,
  #account .finder-hint{
    max-width:100%;
    overflow-wrap:break-word;
  }
}

/* Public shop locator + shop listing profile — keep radio copy / fields in the card */
.account-locator-block,
.account-locator-choices,
.account-locator-fields,
.account-locator-media-list,
.account-locator-choice,
.account-locator-actions,
.account-locator-media{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.account-locator-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:8px;
  overflow-wrap:break-word;
  max-width:min(520px, 100%);
}
.account-locator-summary{
  cursor:pointer;
  font-size:14px;
  color:#88b9ff;
  font-weight:600;
  overflow-wrap:break-word;
  max-width:min(520px, 100%);
}
.account-locator-block .finder-hint{
  max-width:min(520px, 100%);
}
.account-locator-choices{
  display:grid;
  gap:8px;
  width:100%;
  max-width:min(520px, 100%);
}
.account-locator-choice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0;
  font-size:15px;
  line-height:1.4;
  cursor:pointer;
  color:#e6ecf0;
}
.account-locator-choice input[type="radio"]{
  flex:0 0 auto;
  width:16px;
  height:16px;
  min-width:16px;
  min-height:16px;
  margin:3px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color-scheme:dark;
  accent-color:#3a7afe;
}
.account-locator-choice span{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}
.account-locator-fields{
  display:grid;
  gap:10px;
  width:100%;
  max-width:min(520px, 100%);
}
.account-locator-field{
  display:grid;
  gap:5px;
  min-width:0;
  margin:0;
}
.account-locator-field > span{
  font-size:14px;
  opacity:.9;
}
.account-locator-field input{
  width:100%;
  font-size:16px;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:#101215;
  color:#e6ecf0;
  box-sizing:border-box;
  max-width:100%;
}
.account-locator-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}
.account-locator-actions .finder-hint{
  min-width:0;
  flex:0 1 auto;
  margin:0;
}
.account-locator-media-list{
  margin-top:18px;
  display:grid;
  gap:16px;
  width:100%;
  max-width:min(520px, 100%);
}
.account-locator-media-title{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  overflow-wrap:break-word;
}
.account-locator-media{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.account-locator-upload{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:8px 12px;
  box-sizing:border-box;
}
@media (max-width: 640px){
  #locatorListingChoiceWrap,
  #accountShopProfileWrap{
    min-width:0;
    max-width:100%;
  }
  .account-locator-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .account-locator-actions .cta-primary,
  .account-locator-actions .finder-hint{
    width:100%;
    flex:1 1 auto;
  }
  .account-locator-media{
    flex-direction:column;
    align-items:stretch;
  }
  .account-locator-media .cta-secondary,
  .account-locator-media .btn,
  .account-locator-media .finder-hint{
    width:100%;
    box-sizing:border-box;
  }
}

/* VIN preview: prevent iOS Live Text / callout overlay hijacking controls */
#vinPreview{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* Prefer canvas preview on iOS to avoid Live Text overlay */
#vinPreviewCanvas{
  display:block;
  background:#0b0b0f;
  border:1px solid rgba(255,255,255,.10);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:pan-y;
}

/* Preview surface + inline "draw to guide OCR" overlay */
#vinPreviewSurface{
  position:relative;
  width:min(260px, 100%);
  max-width:260px;
}
#vinPreviewMarkOverlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  z-index:5;
  border-radius:10px;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  background:transparent;
}

/* iPhone fallback: full-screen photo modal (allows Live Text inside modal image) */
#vinFullScreenModal{
  position:fixed;
  inset:0;
  z-index:3500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.72);
}
#vinFullScreenModal .vin-fs-sheet{
  width:min(980px, 96vw);
  max-height:92vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
#vinFullScreenModal img{
  width:100%;
  height:auto;
  border-radius:12px;
  background:#0b0b0f;
  border:1px solid rgba(255,255,255,.10);
  /* Ensure iOS callout/Live Text isn't suppressed here. */
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
#vinFullScreenModal .vin-fs-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:10px;
}

/* VIN mark-line modal (touch overlay) */
#vinMarkModal{
  position:fixed;
  inset:0;
  z-index:3600;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.72);
}
#vinMarkModal .vin-fs-sheet{
  width:min(980px, 96vw);
  max-height:92vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
#vinMarkImg{
  width:100%;
  height:auto;
  border-radius:12px;
  background:#0b0b0f;
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  z-index:1;
  pointer-events:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
#vinMarkOverlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:auto;
  border-radius:12px;
  touch-action:none;
  z-index:2;
  background:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

/* OCR scanning spinner (inline, no new i18n keys) */
#vinOcrScanStatus.scanning{
  display:flex;
  align-items:center;
  gap:8px;
}
#vinOcrScanStatus.scanning::before{
  content:"";
  width:14px;height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:inline-block;
  animation:spin .8s linear infinite
}

/* OCR candidates (minimal reading, big tap targets) */
#vinOcrPanel{max-width:520px}
#vinOcrCandidates{display:grid;gap:10px}
.vin-candidate-select{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #2a2f35;
  background:#0f1216;
  color:var(--text);
  text-align:start;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.04em;
  flex:1 1 auto;
}
.vin-candidate-select strong{font-weight:800}
.vin-candidate-select.selected{outline:2px solid var(--brand)}
.vin-ltr{
  direction:ltr;
  unicode-bidi:embed;
}
.vin-char-uncertain{
  color:#cfe1ff;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:2px;
  opacity:.9;
}

.vin-char-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:0 2px;
  border-radius:6px;
  border:1px solid rgba(45,108,223,.45);
  background:rgba(45,108,223,.10);
  color:#eaf2ff;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vin-char-toggle:active{filter:brightness(1.08)}

/* Secondary action: manual VIN entry link */
.linkish{
  background:transparent;
  border:0;
  padding:10px 0;
  min-height:44px;
  color:var(--brand);
  font-weight:700;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  -webkit-tap-highlight-color:transparent;
}
.linkish:active{opacity:.85}

/* Make VIN photo buttons feel like big tap targets, especially on mobile */
#vinScan,
#vinPhotoBtn{
  display:block;
  width:100%;
  margin-bottom:8px;
}

/* Emphasize VIN photo buttons so they stand out as the first action */
#vinScan.btn.secondary,
#vinPhotoBtn.btn.secondary{
  background:var(--brand);
  color:#fff;
  border:0;
}

/* ── JCES™ Branding ──────────────────────────────────────────────────────── */

/* Inline badge: "Powered by JCES™" */
.jces-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(27,129,255,.10);
  border: 1px solid rgba(27,129,255,.22);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Hero trust line */
.jces-hero-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px auto 0;
  max-width: 540px;
  opacity: .6;
}
.jces-trust-copy {
  font-size: 11px;
  line-height: 1.4;
}

/* "What is JCES™?" section */
.jces-about {
  margin-top: 24px;
  padding: 18px 20px;
  background: rgba(27,129,255,.05);
  border: 1px solid rgba(27,129,255,.14);
  border-radius: 10px;
}
.jces-about__heading {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.jces-about__body {
  font-size: 13px;
  line-height: 1.55;
  opacity: .82;
  margin: 0 0 8px;
}
.jces-about__body + .jces-about__body {
  margin-top: 6px;
}

/* ── Save to Compare (library modal) ─────────────────────────────────────── */
.lib-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background: rgba(27, 129, 255, 0.2);
  border: 1px solid rgba(147, 197, 253, 0.7);
  color: #f8fafc;
}
.lib-save-btn:hover,
.lib-save-btn:focus-visible {
  background: rgba(27, 129, 255, 0.34);
  color: #fff;
  outline: none;
}
.lib-save-btn.is-saved {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.75);
  color: #bbf7d0;
}
.card.basemap .basemap-card-actions .lib-save-btn {
  width: 100%;
}
.saved-compare-dock {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 24px));
  padding: 10px 12px 10px 16px;
  background: #0b1a36;
  border: 1px solid rgba(147, 197, 253, 0.5);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.saved-compare-dock[hidden] {
  display: none !important;
}
.saved-compare-dock-copy {
  flex: 1;
  min-width: 0;
}
.saved-compare-dock-count {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
}
.saved-compare-dock-hint {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #bfdbfe;
}
.saved-compare-dock-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.saved-compare-dock-btn:hover,
.saved-compare-dock-btn:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
body.has-saved-compare-dock {
  padding-bottom: 92px;
}
.saved-banner-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}
.saved-compare-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(27, 129, 255, 0.18);
  border: 1px solid rgba(27, 129, 255, 0.5);
  color: #dbeafe;
}
.saved-compare-action:hover,
.saved-compare-action:focus-visible {
  background: rgba(27, 129, 255, 0.3);
  color: #fff;
  outline: none;
}
.saved-compare-action.is-close {
  min-width: 40px;
  padding: 4px 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
.saved-vin-known {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 4px;
}
.saved-compare-text-link {
  background: none;
  border: none;
  padding: 0;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.saved-compare-intro {
  margin: 0 0 12px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}
.saved-compare-baseline-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.saved-compare-baseline-wrap label {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
}
.saved-compare-baseline-wrap select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(27,129,255,.4);
  background: rgba(15,31,61,.9);
  color: #e2e8f0;
  font-size: 14px;
}
.saved-compare-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.saved-compare-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 6px;
}
.saved-compare-closest {
  border: 1px solid rgba(27,129,255,.35);
  border-radius: 14px;
  padding: 16px;
  background: rgba(27,129,255,.08);
}
.saved-compare-closest-title {
  font-size: 20px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.3;
}
.saved-compare-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.saved-compare-line-text {
  font-size: 15px;
  line-height: 1.45;
  color: #cbd5e1;
}
.saved-compare-line-text strong,
.saved-compare-line-title {
  color: #f8fafc;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.saved-compare-cam-delta {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #93c5fd;
}
.saved-compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.saved-compare-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(147, 197, 253, 0.28);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.saved-compare-diff-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.saved-compare-diff-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-left-width: 4px;
}
.saved-compare-diff-row[data-diff-kind="cam"] {
  border-left-color: #38bdf8;
  background: rgba(56, 189, 248, 0.10);
}
.saved-compare-diff-row[data-diff-kind="cam"] .saved-compare-diff-label {
  color: #7dd3fc;
}
.saved-compare-diff-row[data-diff-kind="air"] {
  border-left-color: #34d399;
  background: rgba(52, 211, 153, 0.10);
}
.saved-compare-diff-row[data-diff-kind="air"] .saved-compare-diff-label {
  color: #6ee7b7;
}
.saved-compare-diff-row[data-diff-kind="exhaust"] {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
}
.saved-compare-diff-row[data-diff-kind="exhaust"] .saved-compare-diff-label {
  color: #fcd34d;
}
.saved-compare-diff-row[data-diff-kind="other"] {
  border-left-color: #c084fc;
  background: rgba(192, 132, 252, 0.10);
}
.saved-compare-diff-row[data-diff-kind="other"] .saved-compare-diff-label {
  color: #d8b4fe;
}
.saved-compare-diff-label {
  flex: 0 0 110px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
}
.saved-compare-diff-vals {
  flex: 1 1 180px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.35;
}
.saved-compare-diff-vals strong {
  color: #fff;
  font-weight: 800;
}
.saved-compare-diff-vs {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.saved-compare-diff-vals em {
  font-style: normal;
  color: #cbd5e1;
  font-weight: 600;
}
.saved-compare-parts {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #cbd5e1;
}
.saved-choose-basemap,
#libSavedModal .saved-choose-basemap.lib-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  margin-top: 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  background: rgba(45, 108, 223, 0.28);
  border: 1px solid rgba(147, 197, 253, 0.55);
  color: #fff;
}
.saved-choose-basemap.is-primary,
#libSavedModal .saved-choose-basemap.is-primary.lib-select-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  font-size: 17px;
  letter-spacing: .01em;
  background: var(--brand);
  border: 0;
  color: #fff;
  box-shadow: var(--shadow);
}
.saved-compare-map {
  border: 1px solid rgba(27,129,255,.2);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(27,129,255,.04);
}
.saved-compare-map-title {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
}
.saved-compare-map-cam {
  margin-top: 2px;
  font-size: 13px;
  color: #93c5fd;
}
.saved-compare-vs {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #93c5fd;
}
.saved-compare-heading {
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.saved-compare-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148,163,184,.12);
  font-size: 13px;
}
.saved-compare-row span,
.saved-compare-row-label {
  color: #94a3b8;
}
.saved-compare-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  flex: 1;
  min-width: 200px;
}
.saved-compare-col {
  min-width: 0;
}
.saved-compare-col em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
.saved-compare-col.is-base em {
  color: #64748b;
}
.saved-compare-row.is-diff strong,
.saved-compare-delta {
  color: #fbbf24;
  font-weight: 700;
  text-align: left;
}
.saved-compare-col.is-base strong {
  color: #93c5fd;
}
.saved-compare-empty {
  font-size: 13px;
  color: #94a3b8;
}
.saved-compare-coach {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.45);
}
.saved-compare-coach-card {
  width: min(420px, 100%);
  background: #0f1f3d;
  border: 1px solid rgba(27,129,255,.4);
  border-radius: 16px;
  padding: 18px 18px 16px;
}
.saved-compare-coach-title {
  font-size: 16px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
}
.saved-compare-coach-body {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #94a3b8;
}
#libSavedModal .lib-select-btn,
#libSavedModal #savedVinCheckBtn,
#libSavedModal #savedModalClearBtn {
  min-height: 40px;
}
@media (max-width: 640px) {
  #libSavedModal > div {
    margin: 12px auto 24px;
    padding: 0 10px;
    max-width: 100%;
  }
  .saved-compare-row {
    flex-direction: column;
    gap: 2px;
  }
  .saved-compare-pair {
    grid-template-columns: 1fr;
  }
  .saved-compare-row.is-diff strong,
  .saved-compare-delta {
    text-align: left;
  }
}