:root{
  --paper:#efe7d3;
  --paper-dark:#e3d9bf;
  --card:#fff8ea;
  --ink:#211d18;
  --ink-soft:#4a443b;
  --shop-orange:#e2600f;
  --carbon-red:#b6432f;
  --steel:#4d5c63;
  --steel-dark:#374348;
  --line:#c9bc9c;
  --ok-green:#4f6b4a;
  --stamp-red:#a83a2c;
  --overlay: rgba(33,29,24,0.6);
}
[data-theme="dark"]{
  --paper:#1b1712;
  --paper-dark:#242019;
  --card:#26211a;
  --ink:#f1ead8;
  --ink-soft:#c9bfa9;
  --shop-orange:#ff8330;
  --carbon-red:#ff8570;
  --steel:#8fa6b0;
  --steel-dark:#b7cbd4;
  --line:#463f32;
  --ok-green:#8fbf85;
  --stamp-red:#ff8570;
  --overlay: rgba(0,0,0,0.7);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(128,120,100,0.08) 1px, transparent 1px);
  background-size:14px 14px;
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  line-height:1.5;
  transition:background .2s, color .2s;
}
h1,h2,h3,.display{font-family:'Oswald', sans-serif;text-transform:uppercase;letter-spacing:0.02em;margin:0;}
a{color:inherit;}
button{font-family:inherit;}
select,input{font-family:inherit;color:var(--ink);}

/* ===== Header ===== */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:3px solid var(--ink);background:var(--paper);
  position:sticky;top:0;z-index:50;flex-wrap:wrap;gap:10px;
}
.logo{display:flex;align-items:baseline;gap:8px;}
.logo .mark{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:0.03em;}
.logo .mark span{color:var(--shop-orange);}
.logo .tag{font-size:0.62rem;color:var(--ink-soft);border:1px solid var(--ink-soft);padding:2px 6px;border-radius:2px;}
nav{display:flex;gap:18px;font-size:0.78rem;letter-spacing:0.04em;align-items:center;flex-wrap:wrap;}
nav a{text-decoration:none;text-transform:uppercase;font-weight:600;border-bottom:2px solid transparent;padding-bottom:2px;}
nav a:hover{border-bottom-color:var(--shop-orange);}
.header-controls{display:flex;gap:8px;align-items:center;}
.icon-btn{
  background:transparent;border:1.5px solid var(--ink-soft);color:var(--ink);
  padding:6px 10px;font-size:0.75rem;font-weight:700;cursor:pointer;letter-spacing:0.03em;
}
.icon-btn:hover{border-color:var(--shop-orange);color:var(--shop-orange);}
select.lang-select{
  background:var(--card);border:1.5px solid var(--ink-soft);color:var(--ink);
  padding:6px 8px;font-size:0.75rem;font-weight:600;cursor:pointer;
}

.perf{
  height:16px;background-image:radial-gradient(circle, var(--paper) 3.5px, transparent 3.6px);
  background-size:18px 18px;background-position:center;
  border-top:2px dashed var(--ink-soft);border-bottom:2px dashed var(--ink-soft);
}

/* ===== Hero ===== */
.hero{padding:52px 24px 36px;max-width:920px;margin:0 auto;text-align:center;}
.hero .eyebrow{font-size:0.72rem;letter-spacing:0.14em;color:var(--carbon-red);font-weight:600;text-transform:uppercase;margin-bottom:10px;}
.hero h1{font-size:clamp(1.8rem, 5vw, 3.2rem);line-height:1.05;}
.hero h1 .accent{color:var(--shop-orange);}
.hero p.sub{max-width:560px;margin:14px auto 0;color:var(--ink-soft);font-size:0.92rem;}

.lookup-box{
  margin:32px auto 0;max-width:640px;background:var(--card);border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);padding:22px;position:relative;
}
.lookup-box::before{
  content:attr(data-label);position:absolute;top:-12px;left:16px;background:var(--shop-orange);
  color:#fff8ea;font-family:'Oswald',sans-serif;font-size:0.65rem;letter-spacing:0.1em;padding:3px 10px;font-weight:600;
}
.system-toggle{display:flex;gap:8px;margin-bottom:14px;justify-content:center;}
.system-toggle button{
  flex:1;max-width:140px;padding:8px 10px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-weight:700;font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;
}
.system-toggle button.active{background:var(--ink);color:var(--paper);}

.lookup-row{display:flex;gap:10px;}
#codeInput{
  flex:1;font-family:'IBM Plex Mono',monospace;font-size:1.05rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;padding:12px 14px;border:2px solid var(--ink);background:var(--card);color:var(--ink);
}
#codeInput:focus{outline:3px solid var(--shop-orange);outline-offset:1px;}
#lookupBtn{
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:0 20px;font-weight:700;
  font-family:'Oswald',sans-serif;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;font-size:0.82rem;
}
#lookupBtn:hover{background:var(--shop-orange);border-color:var(--shop-orange);}
#lookupMsg{font-size:0.78rem;color:var(--carbon-red);margin-top:10px;min-height:1.2em;text-align:left;font-weight:600;}
.quick-codes{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.chip{border:1.5px solid var(--ink-soft);background:transparent;color:var(--ink);padding:6px 12px;font-size:0.76rem;font-weight:600;letter-spacing:0.03em;cursor:pointer;}
.chip:hover{border-color:var(--shop-orange);color:var(--shop-orange);}

section.block{max-width:920px;margin:0 auto;padding:44px 24px;}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.section-head .num{font-family:'Oswald',sans-serif;font-weight:700;font-size:0.8rem;background:var(--ink);color:var(--paper);padding:4px 9px;}
.section-head h2{font-size:1.2rem;}
.section-note{color:var(--ink-soft);font-size:0.82rem;max-width:640px;margin-bottom:16px;}

/* ===== Ticket ===== */
#ticketArea{max-width:920px;margin:0 auto;padding:0 24px;}
.ticket{background:var(--card);border:2px solid var(--ink);margin-bottom:36px;position:relative;box-shadow:8px 8px 0 var(--steel);}
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px 16px;border-bottom:2px dashed var(--ink-soft);gap:16px;flex-wrap:wrap;}
.ticket-head .code-big{font-family:'Oswald',sans-serif;font-weight:700;font-size:2rem;letter-spacing:0.02em;}
.ticket-head .code-desc{color:var(--ink-soft);font-size:0.9rem;max-width:420px;margin-top:4px;}
.stamp{border:3px solid var(--stamp-red);color:var(--stamp-red);font-family:'Oswald',sans-serif;font-weight:700;font-size:0.7rem;letter-spacing:0.06em;padding:6px 12px;transform:rotate(-6deg);border-radius:4px;white-space:nowrap;text-transform:uppercase;}
.stamp.low{border-color:var(--ok-green);color:var(--ok-green);}
.stamp.med{border-color:var(--shop-orange);color:var(--shop-orange);}
.ticket-body{padding:18px 22px 22px;}
.ticket-sub{font-family:'Oswald',sans-serif;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel-dark);border-bottom:2px solid var(--ink);padding-bottom:5px;margin:22px 0 12px;}
.ticket-sub:first-child{margin-top:0;}

.cause-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);}
.cause-row:last-child{border-bottom:none;}
.cause-rank{font-family:'Oswald',sans-serif;font-weight:700;font-size:0.92rem;width:22px;color:var(--shop-orange);flex-shrink:0;}
.cause-name{flex:1;font-size:0.86rem;}
.conf-bar-wrap{width:110px;flex-shrink:0;}
.conf-bar-track{background:var(--paper-dark);height:8px;border:1px solid var(--ink-soft);}
.conf-bar-fill{background:var(--steel);height:100%;}
.conf-label{font-size:0.66rem;color:var(--ink-soft);text-align:right;margin-top:2px;}

.symptom-list{display:flex;flex-wrap:wrap;gap:8px;}
.symptom-pill{background:var(--paper-dark);border:1px solid var(--ink-soft);font-size:0.74rem;padding:5px 10px;}

.cost-table{width:100%;border-collapse:collapse;font-size:0.84rem;}
.cost-table th,.cost-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);}
.cost-table th{font-family:'Oswald',sans-serif;font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel-dark);}

.part-card{background:var(--paper-dark);border:1px solid var(--ink-soft);padding:12px;margin-bottom:10px;}
.part-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.part-img{width:64px;height:64px;flex-shrink:0;background:var(--card);border:1px solid var(--ink-soft);display:flex;align-items:center;justify-content:center;}
.part-img svg{width:42px;height:42px;}
.part-info{flex:1;min-width:160px;}
.part-name{font-size:0.85rem;font-weight:600;}
.part-caption{font-size:0.66rem;color:var(--ink-soft);font-style:italic;margin-top:3px;}
.part-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.part-link{font-size:0.66rem;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:0.03em;padding:5px 9px;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;background:none;}
.part-link:hover{background:var(--ink);color:var(--paper);}

.disclaimer{font-size:0.7rem;color:var(--ink-soft);margin-top:18px;border-top:1px solid var(--line);padding-top:10px;}

/* ===== Garage ===== */
.garage-wrap{background:var(--card);border:2px solid var(--ink);padding:20px;}
.garage-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.garage-tabs button{padding:7px 12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;cursor:pointer;}
.garage-tabs button.active{background:var(--ink);color:var(--paper);}
.garage-pane{display:none;}
.garage-pane.active{display:block;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px;}
.form-grid select,.form-grid input{padding:9px 10px;border:1.5px solid var(--ink);background:var(--card);font-size:0.82rem;}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.inline-form input{flex:1;min-width:140px;padding:9px 10px;border:1.5px solid var(--ink);background:var(--card);font-size:0.82rem;text-transform:uppercase;}
.btn-primary{background:var(--shop-orange);color:#fff8ea;border:1.5px solid var(--shop-orange);padding:9px 16px;font-weight:700;font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);}
.field-hint{font-size:0.68rem;color:var(--ink-soft);margin:-6px 0 12px;}
.garage-list{display:grid;gap:10px;margin-top:6px;}
.stub{display:flex;justify-content:space-between;align-items:center;border:1px dashed var(--ink-soft);padding:10px 14px;font-size:0.84rem;background:var(--paper);flex-wrap:wrap;gap:8px;}
.stub .stub-info{display:flex;flex-direction:column;}
.stub .stub-sub{font-size:0.68rem;color:var(--ink-soft);}
.stub-actions{display:flex;gap:8px;}
.stub-actions button{background:none;border:1.5px solid var(--ink-soft);font-weight:700;cursor:pointer;font-size:0.68rem;text-transform:uppercase;padding:4px 8px;}
.stub-actions button.remove{color:var(--carbon-red);border-color:var(--carbon-red);}
.stub-actions button.use{color:var(--ok-green);border-color:var(--ok-green);}
.stub.active-car{border:2px solid var(--shop-orange);border-style:solid;}
.empty-note{color:var(--ink-soft);font-size:0.8rem;font-style:italic;}
.active-banner{font-size:0.78rem;background:var(--paper-dark);border:1px solid var(--ink-soft);padding:8px 12px;margin-bottom:14px;}
.active-banner strong{color:var(--shop-orange);}

/* ===== Generic code index ===== */
.code-index-search{margin-bottom:14px;}
.code-index-search input{width:100%;padding:10px 12px;border:1.5px solid var(--ink);background:var(--card);font-size:0.85rem;}
.code-index-grid{max-height:420px;overflow-y:auto;border:1px solid var(--line);}
.code-index-row{display:flex;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:0.78rem;cursor:pointer;align-items:center;}
.code-index-row:hover{background:var(--paper-dark);}
.code-index-row .ci-code{font-weight:700;width:70px;flex-shrink:0;font-family:'Oswald',sans-serif;}
.code-index-row .ci-title{color:var(--ink-soft);}
.code-index-row .ci-flag{font-size:0.62rem;background:var(--shop-orange);color:#fff8ea;padding:2px 6px;margin-left:auto;text-transform:uppercase;font-weight:700;flex-shrink:0;}

/* ===== OBD1 ===== */
.obd1-select{padding:9px 10px;border:1.5px solid var(--ink);background:var(--card);font-size:0.85rem;margin-bottom:14px;}
.obd1-instructions{background:var(--paper-dark);border:1px solid var(--ink-soft);padding:14px;font-size:0.82rem;margin-bottom:14px;}
.obd1-table{width:100%;border-collapse:collapse;font-size:0.82rem;}
.obd1-table th,.obd1-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);}
.obd1-table th{font-family:'Oswald',sans-serif;font-size:0.66rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--steel-dark);}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--card);border:2px solid var(--ink);max-width:420px;width:100%;padding:22px;box-shadow:8px 8px 0 var(--ink);}
.modal-box h3{font-size:1rem;margin-bottom:10px;}
.modal-box p{font-size:0.82rem;color:var(--ink-soft);margin:0 0 14px;}
.modal-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.modal-actions button{flex:1;}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink-soft);padding:9px 14px;font-weight:700;font-size:0.78rem;text-transform:uppercase;cursor:pointer;}
.saved-car-pick{display:grid;gap:8px;margin-bottom:14px;}
.saved-car-pick button{text-align:left;padding:9px 12px;border:1.5px solid var(--ink-soft);background:var(--paper);cursor:pointer;font-size:0.82rem;}
.saved-car-pick button:hover{border-color:var(--shop-orange);}

footer{border-top:3px solid var(--ink);padding:26px 24px 40px;text-align:center;font-size:0.72rem;color:var(--ink-soft);}
footer strong{color:var(--ink);}
::selection{background:var(--shop-orange);color:#fff;}

/* ===== Animations ===== */
@keyframes fadeSlideUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes stampPop{ 0%{transform:rotate(-6deg) scale(0);} 70%{transform:rotate(-6deg) scale(1.15);} 100%{transform:rotate(-6deg) scale(1);} }
@keyframes stampPopMed{ 0%{transform:rotate(-6deg) scale(0);} 70%{transform:rotate(-6deg) scale(1.15);} 100%{transform:rotate(-6deg) scale(1);} }
@keyframes barGrow{ from{width:0;} }
@keyframes spin{ to{transform:rotate(360deg);} }
@keyframes modalScaleIn{ from{opacity:0; transform:scale(0.94) translateY(8px);} to{opacity:1; transform:scale(1) translateY(0);} }
@keyframes heroFadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes pulseGlow{ 0%,100%{box-shadow:6px 6px 0 var(--ink);} 50%{box-shadow:8px 8px 0 var(--shop-orange);} }

body{animation:fadeIn .35s ease;}
.hero{animation:heroFadeIn .5s ease both;}
.hero .eyebrow, .hero h1, .hero p.sub{animation:heroFadeIn .5s ease both;}
.hero h1{animation-delay:.05s;}
.hero p.sub{animation-delay:.1s;}
.lookup-box{animation:heroFadeIn .5s ease both; animation-delay:.15s;}

.ticket{animation:fadeSlideUp .45s cubic-bezier(.2,.7,.3,1) both;}
.stamp{animation:stampPop .5s cubic-bezier(.3,1.4,.4,1) both; animation-delay:.15s;}
.cause-row{animation:fadeSlideUp .35s ease both;}
.cause-row:nth-child(1){animation-delay:.05s;} .cause-row:nth-child(2){animation-delay:.1s;}
.cause-row:nth-child(3){animation-delay:.15s;} .cause-row:nth-child(4){animation-delay:.2s;}
.cause-row:nth-child(5){animation-delay:.25s;}
.conf-bar-fill{transition:width .6s cubic-bezier(.3,.9,.4,1);}
.part-card{animation:fadeSlideUp .4s ease both;}
.symptom-pill, .chip, .part-link, .icon-btn, .btn-primary, .btn-secondary, .stub-actions button, nav a, .garage-tabs button{
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip:hover, .symptom-pill:hover{transform:translateY(-2px);}
.part-link:hover{transform:translateY(-2px); box-shadow:2px 2px 0 var(--ink);}
.btn-primary:hover, #lookupBtn:hover{transform:translateY(-2px); box-shadow:3px 3px 0 var(--steel);}
.btn-primary:active, #lookupBtn:active, .part-link:active, .chip:active{transform:translateY(0); box-shadow:none;}
.icon-btn:hover{transform:translateY(-1px);}
.stub{transition:transform .15s ease, border-color .2s ease; animation:fadeSlideUp .3s ease both;}
.stub:hover{transform:translateX(2px);}
.stub-actions button:hover{transform:translateY(-1px);}
.garage-tabs button:hover{transform:translateY(-1px);}
.code-index-row{transition:background .15s ease, padding-left .15s ease;}
.code-index-row:hover{padding-left:18px;}
.lookup-box{transition:box-shadow .2s ease;}
.lookup-box:focus-within{animation:pulseGlow 1.6s ease infinite;}
#codeInput{transition:outline-color .15s ease;}

.modal-overlay{transition:background .2s ease;}
.modal-box{animation:modalScaleIn .25s cubic-bezier(.2,.8,.3,1) both;}
.saved-car-pick button{transition:transform .15s ease, border-color .15s ease;}
.saved-car-pick button:hover{transform:translateX(3px); border-color:var(--shop-orange);}

.loading-spin{
  display:inline-block; width:14px; height:14px; border:2px solid var(--ink-soft);
  border-top-color:var(--shop-orange); border-radius:50%; animation:spin .7s linear infinite; margin-right:6px; vertical-align:middle;
}
.icon-btn, select.lang-select, [data-theme]{transition:background .25s ease, color .25s ease, border-color .25s ease;}
html{transition:background .25s ease;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ===== Mobile responsiveness ===== */
@media (max-width: 640px){
  header{padding:12px 16px;gap:8px;}
  .logo .mark{font-size:1.25rem;}
  .logo .tag{display:none;}
  nav{gap:10px;font-size:0.68rem;width:100%;order:3;}
  .header-controls{gap:6px;}
  select.lang-select{font-size:0.68rem;padding:5px 6px;max-width:92px;}
  .icon-btn{font-size:0.68rem;padding:5px 8px;}

  .hero{padding:32px 16px 24px;}
  .lookup-box{padding:16px;}
  .lookup-row{flex-direction:column;}
  #lookupBtn{padding:12px;width:100%;}
  .quick-codes{gap:6px;}
  .chip{font-size:0.7rem;padding:5px 10px;}

  section.block{padding:30px 16px;}
  .ticket{box-shadow:4px 4px 0 var(--steel);margin-bottom:26px;}
  .ticket-head{padding:16px 16px 12px;}
  .ticket-head .code-big{font-size:1.6rem;}
  .ticket-body{padding:14px 16px 18px;}
  .stamp{font-size:0.62rem;padding:5px 9px;}
  .conf-bar-wrap{width:84px;}

  .part-top{flex-wrap:wrap;}
  .part-img{width:52px;height:52px;}
  .part-img svg{width:34px;height:34px;}

  .garage-wrap{padding:14px;}
  .garage-tabs{gap:5px;}
  .garage-tabs button{flex:1;padding:8px 6px;font-size:0.66rem;}
  .form-grid{grid-template-columns:1fr;}
  .inline-form{flex-direction:column;}
  .inline-form input{min-width:0;}
  .stub{flex-direction:column;align-items:flex-start;}
  .stub-actions{width:100%;}
  .stub-actions button{flex:1;}

  .code-index-row{font-size:0.72rem;padding:8px 10px;flex-wrap:wrap;}
  .code-index-row .ci-code{width:56px;}
  .code-index-row .ci-flag{margin-left:0;}

  .obd1-select{width:100%;}

  .modal-box{padding:16px;max-width:100%;}
  .modal-actions{flex-direction:column;}
  .saved-car-pick button{font-size:0.78rem;}

  .cost-table, .obd1-table{font-size:0.76rem;}
  .cost-table th, .cost-table td, .obd1-table th, .obd1-table td{padding:6px 4px;}
}

@media (max-width: 380px){
  .hero h1{font-size:1.6rem;}
  .logo .mark{font-size:1.1rem;}
  nav a{font-size:0.64rem;}
}