:root{
  --bg:#f8f7fb;
  --panel:#ffffff;
  --ink:#1d2433;
  --muted:#6b7280;
  --line:#ece7f2;
  --brand:#ef018d;
  --brand-dark:#c80073;
  --brand-soft:#fff1f8;
  --accent:#ed1b24;
  --accent-soft:#fff2f3;
  --gold:#f8c60f;
  --gold-soft:#fff8dd;
  --nav:#241d2e;
  --good:#12b76a;
  --warn:#f79009;
  --bad:#f04438;
  --shadow:0 20px 50px rgba(23,28,38,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#fcfbfe 0%,#f7f5fb 100%);color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}
.login-body{min-height:100vh}
.login-wrap{max-width:1280px;margin:0 auto;padding:20px;min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center}
.login-hero{min-height:680px;border-radius:36px;padding:34px;background:linear-gradient(140deg,var(--brand) 0%,var(--accent) 52%,var(--gold) 100%);color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.login-hero:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.12);top:-90px;right:-110px}
.login-hero:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-70px;left:-60px}
.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.login-brand img,.login-logo{width:58px;height:58px;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.16);padding:8px;border:1px solid rgba(255,255,255,.24)}
.login-brand strong{display:block;font-size:22px}
.login-brand span{display:block;font-size:12px;color:#fff5fa;margin-top:4px}
.login-copy{position:relative;z-index:1;margin-top:48px}
.login-copy h1{margin:0;font-size:48px;line-height:1.02;letter-spacing:-.04em;max-width:620px}
.login-copy p{margin:14px 0 0;max-width:590px;line-height:1.7;color:#fff6fb;font-size:15px}
.highlights{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px;max-width:620px}
.highlights div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);border-radius:20px;padding:16px;backdrop-filter:blur(10px)}
.highlights strong{display:block;font-size:14px}
.highlights span{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#fff5fa}
.login-card{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:36px;padding:34px;box-shadow:var(--shadow)}
.login-card h2{margin:14px 0 0;font-size:32px;letter-spacing:-.03em}
.login-card p{margin:10px 0 24px;color:var(--muted);line-height:1.6}

.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--nav) 0%,#1e1728 100%);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.side-brand img{width:46px;height:46px;background:rgba(255,255,255,.12);padding:7px;border-radius:15px}
.side-brand strong{display:block}
.side-brand span{display:block;color:#d6cce5;font-size:12px;margin-top:4px}
.nav-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#aa9fbc;margin:18px 10px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:16px;color:#f2eef8;transition:.2s ease;margin:4px 0}
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.active{background:linear-gradient(135deg,rgba(239,1,141,.22),rgba(248,198,15,.18));border:1px solid rgba(255,255,255,.10)}
.nav-icon{width:24px;height:24px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.09)}
.content-wrap{min-width:0}
.topbar{position:sticky;top:0;z-index:12;background:rgba(252,251,254,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar-inner strong{display:block}
.topbar-inner span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.global-search{min-width:340px;display:flex;background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 14px}
.global-search input{border:none;outline:none;width:100%;font-size:14px;background:transparent}
.user-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:900;font-size:12px}
.main{padding:22px}
.hero{border-radius:30px;padding:26px 26px 22px;background:linear-gradient(135deg,var(--brand-soft) 0%,#fff 42%,#fff9ea 100%);border:1px solid #f4dfec;margin-bottom:20px}
.hero h1{margin:0;font-size:34px;letter-spacing:-.04em}
.hero p{margin:10px 0 0;color:var(--muted);max-width:820px;line-height:1.65}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-tag{padding:10px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:900}
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.stack{display:grid;gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow);margin-bottom:20px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-head h3{margin:0;font-size:20px;letter-spacing:-.02em}
.card-head p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.pill{padding:8px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:900;white-space:nowrap}
.pill.gold{background:var(--gold-soft);color:#8a6600}
.pill.red{background:var(--accent-soft);color:var(--accent)}
.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.action-box{border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fffcfe);border-radius:24px;padding:18px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s ease}
.action-box:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(23,28,38,.08)}
.icon-circle{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--brand-soft),var(--gold-soft));color:var(--brand);display:grid;place-items:center;font-weight:900}
.action-box strong{display:block;margin-top:12px;font-size:16px}
.action-box span{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{border:1px solid var(--line);border-radius:20px;background:#fcfbfe;padding:16px}
.stat span{display:block;font-size:12px;color:var(--muted);font-weight:800}
.stat strong{display:block;margin-top:6px;font-size:26px}
.list{display:grid;gap:10px}
.list-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:20px;background:#fcfbfe;padding:14px}
.list-item strong{display:block}
.list-item small{display:block;color:var(--muted);margin-top:5px}
.item-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{font-size:11px;font-weight:900;padding:8px 10px;border-radius:999px;white-space:nowrap;display:inline-block}
.badge.pass{background:#e8f8f0;color:#087443}
.badge.warn{background:#fff4e6;color:#b54708}
.badge.fail{background:#ffebeb;color:#b42318}
.badge.draft{background:#eef2f7;color:#475467}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px}
.input{width:100%;border:1px solid var(--line);background:#fcfbfe;border-radius:18px;padding:13px 14px;font-size:14px;outline:none;transition:.2s ease}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(239,1,141,.10);background:#fff}
textarea.input{min-height:95px;resize:vertical}
.input.compact{padding:10px 12px;border-radius:14px;margin-bottom:6px}
.input.remark{min-width:180px}
.btn{display:inline-block;border:none;border-radius:18px;padding:13px 18px;font-size:14px;font-weight:900;cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;box-shadow:0 14px 28px rgba(239,1,141,.22)}
.btn.soft{background:var(--brand-soft);color:var(--brand)}
.btn.dark{background:var(--nav);color:#fff}
.btn.gold{background:var(--gold-soft);color:#8a6600}
.btn.full{width:100%;text-align:center}
.link-btn{border:none;background:var(--brand-soft);color:var(--brand);padding:10px 12px;border-radius:14px;font-size:12px;font-weight:900;cursor:pointer}
.check-section{margin-bottom:18px}
.check-section h4{margin:0 0 10px}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.check{border:1px solid var(--line);border-radius:20px;background:#fcfbfe;padding:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.check strong{display:block;font-size:14px}
.check small{display:block;color:var(--muted);margin-top:5px;line-height:1.45}
.tyre-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.visual{display:grid;place-items:center;border:1px solid var(--line);border-radius:22px;background:#fcfbfe;padding:16px}
.car{width:150px;height:290px;border-radius:46px;border:3px solid #f1d8e7;background:linear-gradient(180deg,#ffe7f4,#ffffff);position:relative}
.car:before{content:"";position:absolute;left:25px;right:25px;top:22px;height:58px;border-radius:24px;background:#ffd4ea}
.car:after{content:"";position:absolute;left:34px;right:34px;bottom:24px;height:48px;border-radius:18px;background:#ffeef7}
.tyre{position:absolute;width:30px;height:68px;background:#263142;border-radius:13px}
.tyre.good{background:#12b76a}
.tyre.warn{background:#f79009}
.t1{left:-18px;top:46px}.t2{right:-18px;top:46px}.t3{left:-18px;bottom:46px}.t4{right:-18px;bottom:46px}
.table{display:grid;gap:10px;margin-top:16px}
.row{display:grid;grid-template-columns:1fr .95fr .8fr .8fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:18px;padding:12px 14px}
.row.header{background:#fcfbfe;color:var(--muted);font-size:12px;font-weight:900}
.row span,.row small{color:var(--muted)}
.owner-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.owner-grid.one{grid-template-columns:1fr}
.owner-card{border:1px solid var(--line);border-radius:22px;background:#fcfbfe;padding:15px;display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center}
.owner-avatar{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--brand-soft),var(--gold-soft));display:grid;place-items:center;color:var(--brand);font-weight:900}
.vehicle-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vehicle-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.dot.warn{background:var(--warn)}
.bottom-note,.quick-note{margin-top:14px;padding:14px;border-radius:18px;background:linear-gradient(180deg,#fffcfe,#fff8ec);border:1px dashed #ecd9be;color:var(--muted);font-size:13px;line-height:1.6}
.bottom-save{position:sticky;bottom:12px;z-index:10;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:var(--shadow);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.empty{border:1px dashed var(--line);background:#fcfbfe;border-radius:18px;padding:18px;color:var(--muted);text-align:center}
.alert.error{background:#ffebeb;color:#b42318;border:1px solid #ffd0d0;border-radius:16px;padding:12px;margin-bottom:14px}
.full-field{grid-column:1/-1}
.button-field{display:flex;align-items:end}
.report-card{max-width:1100px;margin:0 auto 20px}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.report-head img{width:70px;height:70px;object-fit:contain}
.report-head h1{margin:0;font-size:28px}
.report-head p{margin:6px 0 0;color:var(--muted)}
.qr-box{width:76px;height:76px;border:2px solid var(--nav);display:grid;place-items:center;text-align:center;font-weight:900;font-size:12px}
.report-stats{margin-bottom:16px}
.report-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.report-info p{margin:0;border:1px solid var(--line);border-radius:16px;padding:12px;background:#fcfbfe}
.report-row{grid-template-columns:1fr 1.4fr .6fr 1.2fr}
.note-box{border:1px solid var(--line);border-radius:18px;background:#fcfbfe;padding:16px;margin-bottom:16px}
.photo-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.photo-preview img{width:100%;height:130px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.photo-preview span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.signature-grid div{border-top:1px solid var(--ink);padding-top:10px}
.signature-grid span{display:block;margin-top:6px;color:var(--muted)}
.print-actions{display:flex;gap:10px;margin-top:20px}

@media (max-width:1180px){
  .login-wrap{grid-template-columns:1fr}
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .stats,.form-grid,.form-grid.two,.owner-grid{grid-template-columns:repeat(2,1fr)}
  .action-grid,.checklist,.tyre-wrap,.photo-preview{grid-template-columns:1fr}
  .global-search{min-width:0;width:100%}
  .topbar-inner{align-items:flex-start;flex-direction:column}
  .top-right{width:100%}
  .sidebar{display:block}
  .row,.row.header{grid-template-columns:1fr;gap:6px}
  .row.header{display:none}
  .report-info{grid-template-columns:1fr}
}
@media (max-width:640px){
  .main{padding:16px}
  .hero{padding:20px}
  .hero h1{font-size:28px}
  .card{padding:16px;border-radius:22px}
  .stats,.form-grid,.form-grid.two,.owner-grid,.highlights,.signature-grid{grid-template-columns:1fr}
  .login-copy h1{font-size:34px}
  .login-actions{flex-direction:column;align-items:stretch}
  .login-card,.login-hero{border-radius:28px;padding:24px}
  .owner-card{grid-template-columns:48px 1fr}
  .owner-card .link-btn{grid-column:1/-1}
}
@media print{
  .sidebar,.topbar,.print-actions{display:none!important}
  .app-shell{display:block}
  .main{padding:0}
  .card{box-shadow:none;border:none}
  body{background:#fff}
}


/* V5 revised inspection flow */
.lookup-card{
  background:linear-gradient(135deg,#fff 0%,#fff7fb 100%);
}
.lookup-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.lookup-input{
  width:100%;
  border:2px solid #f0d3e3;
  background:#fff;
  border-radius:22px;
  padding:18px 18px;
  font-size:22px;
  font-weight:900;
  letter-spacing:.04em;
  outline:none;
  text-transform:uppercase;
}
.lookup-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 5px rgba(239,1,141,.10);
}
.type-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.type-card{
  display:block;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  background:#fcfbfe;
  cursor:pointer;
  transition:.2s ease;
}
.type-card:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 28px rgba(23,28,38,.08);
}
.type-card input{
  accent-color:var(--brand);
  margin-bottom:12px;
}
.type-card strong{
  display:block;
  font-size:22px;
  color:var(--brand);
}
.type-card span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.detail-grid div{
  background:#fcfbfe;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}
.detail-grid span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.detail-grid strong{
  display:block;
  margin-top:6px;
}
.modern-report{
  background:#fff;
}
.report-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.report-logo-block{
  display:flex;
  align-items:center;
  gap:16px;
}
.report-logo-block img{
  width:78px;
  height:78px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:22px;
  padding:8px;
  background:#fff7fb;
}
.report-logo-block h1{
  margin:0;
  font-size:30px;
  letter-spacing:-.03em;
}
.report-logo-block p{
  margin:7px 0 0;
  color:var(--muted);
}
.report-status{
  display:flex;
  align-items:center;
  gap:14px;
}
.pdf-hero{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  background:linear-gradient(135deg,var(--brand-soft),#fff8dd);
  border:1px solid #f2d7e6;
  border-radius:24px;
  padding:16px;
  margin-bottom:16px;
}
.pdf-hero span,.pdf-box span,.pdf-summary span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.pdf-hero strong{
  display:block;
  font-size:22px;
  margin-top:6px;
}
.pdf-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:18px;
}
.pdf-grid.three{
  grid-template-columns:repeat(3,1fr);
}
.pdf-box{
  border:1px solid var(--line);
  background:#fcfbfe;
  border-radius:18px;
  padding:14px;
}
.pdf-box strong{
  display:block;
  margin-top:6px;
}
.pdf-box small{
  display:block;
  color:var(--muted);
  margin-top:6px;
}
.pdf-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}
.pdf-summary div{
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#fffcfe);
  border:1px solid var(--line);
  padding:16px;
}
.pdf-summary strong{
  display:block;
  margin-top:6px;
  font-size:28px;
}
.report-actions{
  margin-top:18px;
}
.two-stats{
  grid-template-columns:repeat(2,1fr);
}
.checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}
.checkbox input{
  accent-color:var(--brand);
}
.outside-field{
  display:none;
}
body:has(input[name="ownership_type"][value="Outside"]:checked) .outside-field{
  display:block;
}
body:has(input[name="ownership_type"][value="Outside"]:checked) .own-field{
  display:none;
}

@media(max-width:900px){
  .lookup-form,.type-cards,.detail-grid,.pdf-hero,.pdf-grid,.pdf-grid.three,.pdf-summary{
    grid-template-columns:1fr;
  }
  .lookup-input{
    font-size:18px;
  }
  .report-top,.report-logo-block,.report-status{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media print{
  .modern-report{
    box-shadow:none;
    border:none;
  }
  .pdf-hero,.pdf-box,.pdf-summary div{
    break-inside:avoid;
  }
}


/* V6 wizard + icon status UI */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
}
.badge-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:rgba(255,255,255,.72);
  font-weight:900;
  line-height:1;
}
.badge-label{
  display:inline-block;
}
.wizard-shell{
  position:sticky;
  top:78px;
  z-index:8;
}
.wizard-progress{
  height:9px;
  background:#f1edf6;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:14px;
}
.wizard-progress > div{
  height:100%;
  width:20%;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--gold));
  border-radius:999px;
  transition:.25s ease;
}
.wizard-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-bottom:6px;
}
.wizard-tab{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:18px;
  padding:12px 10px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:.2s ease;
}
.wizard-tab span{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--brand-soft);
  color:var(--brand);
  display:grid;
  place-items:center;
  font-size:12px;
}
.wizard-tab.active{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 24px rgba(239,1,141,.18);
}
.wizard-tab.active span{
  background:#fff;
  color:var(--brand);
}
.wizard-page{
  display:none;
  animation:wizardIn .22s ease both;
}
.wizard-page.active{
  display:block;
}
@keyframes wizardIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.wizard-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding-top:16px;
  margin-top:16px;
  border-top:1px solid var(--line);
}
.legend-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.legend{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line);
}
.legend b{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.legend.pass{background:#e8f8f0;color:#087443}
.legend.warn{background:#fff4e6;color:#b54708}
.legend.fail{background:#ffebeb;color:#b42318}
.legend.draft{background:#eef2f7;color:#475467}
.compact-checklist{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.compact-check{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fcfbfe;
  padding:12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
.check-name strong{
  display:block;
  font-size:13px;
}
.check-name small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
}
.status-picker{
  display:grid;
  grid-template-columns:repeat(4,34px);
  gap:5px;
}
.status-choice{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}
.status-choice:hover{
  transform:translateY(-1px);
}
.status-choice.pass{color:#087443}
.status-choice.warn{color:#b54708}
.status-choice.fail{color:#b42318}
.status-choice.draft{color:#475467}
.status-choice.pass.active{background:#e8f8f0;border-color:#b7e4ca}
.status-choice.warn.active{background:#fff4e6;border-color:#fed797}
.status-choice.fail.active{background:#ffebeb;border-color:#f3b5af}
.status-choice.draft.active{background:#eef2f7;border-color:#d0d5dd}
.compact-check .remark{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  padding:9px 11px;
  border-radius:13px;
  margin:0;
}
.mini-history{
  margin-top:16px;
}
.mini-history h4{
  margin:0 0 10px;
}
.compact-list{
  padding:10px 12px;
}
.review-summary strong{
  font-size:18px;
}
.type-card.active{
  border-color:var(--brand);
  background:linear-gradient(180deg,#fff,#fff7fb);
}

@media(max-width:1180px){
  .wizard-shell{
    position:relative;
    top:auto;
  }
}
@media(max-width:900px){
  .wizard-steps{
    display:flex;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .wizard-tab{
    min-width:140px;
    white-space:nowrap;
  }
  .compact-checklist{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .compact-check{
    grid-template-columns:1fr;
  }
  .status-picker{
    grid-template-columns:repeat(4,42px);
  }
  .status-choice{
    width:42px;
    height:42px;
  }
  .wizard-actions .btn{
    flex:1;
  }
  .badge-label{
    display:none;
  }
}


/* V7 Step 4 tyre marking and photo upload */
.step-help{
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,var(--brand-soft),#fff8dd);
  border:1px solid #f2d7e6;
  border-radius:18px;
  padding:12px 14px;
  margin-bottom:16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.step-help strong{
  color:var(--ink);
  white-space:nowrap;
}
.tyre-status-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
}
.tyre-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fcfbfe;
  padding:12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
.tyre-card-head strong{
  display:block;
  font-size:14px;
}
.tyre-picker{
  grid-template-columns:repeat(4,34px);
}
.tyre-mini-grid{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.tyre-card .remark{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
  margin:0;
}
.photo-upload-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:14px;
}
.upload-box{
  min-height:96px;
  border:1.5px dashed #d9c9d6;
  border-radius:18px;
  background:#fffcfe;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition:.2s ease;
  text-align:center;
  padding:12px;
}
.upload-box:hover{
  transform:translateY(-2px);
  border-color:var(--brand);
  background:#fff7fb;
}
.upload-box input{
  display:none;
}
.upload-box strong{
  color:var(--ink);
}
.upload-box span{
  color:var(--muted);
  font-size:12px;
}
.upload-box.has-file{
  border-style:solid;
  border-color:var(--brand);
  background:var(--brand-soft);
}
.final-observation{
  min-height:150px;
}
@media(max-width:900px){
  .photo-upload-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:640px){
  .step-help{
    align-items:flex-start;
    flex-direction:column;
  }
  .tyre-card{
    grid-template-columns:1fr;
  }
  .tyre-picker{
    grid-template-columns:repeat(4,42px);
  }
  .photo-upload-grid{
    grid-template-columns:1fr;
  }
}


/* V8 QR report and tyre percentage indicators */
.qr-code-box{
  width:130px;
  min-height:130px;
  border:2px solid var(--nav);
  border-radius:18px;
  padding:8px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.qr-code-box img{
  width:96px;
  height:96px;
  object-fit:contain;
}
.qr-code-box span{
  display:block;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  text-align:center;
  color:var(--nav);
}
.tyre-percent{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  height:26px;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
  background:#eef2f7;
}
.tyre-percent .tyre-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  opacity:.45;
}
.tyre-percent.pass .tyre-fill{background:#12b76a}
.tyre-percent.warn .tyre-fill{background:#f79009}
.tyre-percent.fail .tyre-fill{background:#f04438}
.tyre-percent.draft .tyre-fill{background:#98a2b3}
.tyre-percent .tyre-label{
  position:relative;
  z-index:1;
  font-size:11px;
  font-weight:900;
  color:var(--ink);
}
.tyre-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.tyre-card-head:after{
  content:"";
  width:36px;
  height:18px;
  border-radius:12px;
  border:2px solid #293244;
  background:linear-gradient(90deg,#12b76a 70%,#eef2f7 70%);
  display:inline-block;
}
@media print{
  .qr-code-box{
    width:115px;
    min-height:115px;
  }
  .qr-code-box img{
    width:82px;
    height:82px;
  }
}


/* V9 actual PDF download and six-step workflow */
.six-steps{
  grid-template-columns:repeat(6,1fr);
}
.photo-step-grid{
  grid-template-columns:repeat(3,1fr);
}
.report-status{
  align-items:flex-start;
}
.print-actions .btn.primary{
  text-decoration:none;
}
.qr-code-box{
  border-color:var(--accent);
  border-width:3px;
}
.qr-code-box span{
  font-size:9px;
}
@media(max-width:1100px){
  .six-steps{
    display:flex;
    overflow-x:auto;
  }
  .six-steps .wizard-tab{
    min-width:138px;
  }
}
@media(max-width:900px){
  .photo-step-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .photo-step-grid{
    grid-template-columns:1fr;
  }
}


/* V10 dashboard and A4 checklist summary */
.dashboard-hero{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:20px;
  align-items:stretch;
  border-radius:32px;
  padding:26px;
  background:linear-gradient(135deg,var(--brand-soft) 0%,#fff 46%,#fff8dd 100%);
  border:1px solid #f4dfec;
  margin-bottom:18px;
}
.dashboard-hero .eyebrow{
  display:inline-flex;
  padding:8px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--brand);
  font-size:12px;
  font-weight:900;
}
.dashboard-hero h1{
  margin:14px 0 8px;
  font-size:38px;
  letter-spacing:-.04em;
}
.dashboard-hero p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  max-width:760px;
}
.start-inspection-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:0 16px 30px rgba(23,28,38,.08);
}
.start-inspection-card label{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
}
.start-inspection-card div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.start-inspection-card input{
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 14px;
  outline:none;
  font-size:16px;
  font-weight:900;
  text-transform:uppercase;
}
.start-inspection-card small{
  display:block;
  color:var(--muted);
  line-height:1.5;
  margin-top:10px;
}
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:20px;
}
.kpi-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
}
.kpi-card span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.kpi-card strong{
  display:block;
  font-size:32px;
  margin-top:7px;
}
.kpi-card small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.kpi-card.warning{
  background:linear-gradient(180deg,#fff,#fff8ec);
}
.kpi-card.danger{
  background:linear-gradient(180deg,#fff,#fff2f3);
}
.dashboard-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:20px;
}
.dashboard-main,.dashboard-side{
  display:grid;
  gap:20px;
}
.dash-action-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.dash-action{
  display:block;
  border:1px solid var(--line);
  background:#fcfbfe;
  border-radius:24px;
  padding:18px;
  transition:.2s ease;
}
.dash-action:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(23,28,38,.08);
}
.dash-action.primary-action{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
}
.dash-action-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--brand);
  font-weight:900;
  margin-bottom:14px;
}
.dash-action.primary-action .dash-action-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.dash-action strong{
  display:block;
  font-size:17px;
}
.dash-action small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  line-height:1.5;
}
.dash-action.primary-action small{
  color:#fff5fa;
}
.status-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.status-tile{
  border-radius:20px;
  padding:16px;
  display:grid;
  gap:8px;
  border:1px solid var(--line);
}
.status-tile b{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
}
.status-tile span{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.status-tile strong{
  font-size:26px;
}
.status-tile.pass{background:#e8f8f0;color:#087443}
.status-tile.warn{background:#fff4e6;color:#b54708}
.status-tile.fail{background:#ffebeb;color:#b42318}
.status-tile.draft{background:#eef2f7;color:#475467}
.report-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.report-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:#fcfbfe;
}
.report-list-item strong{display:block}
.report-list-item small{display:block;color:var(--muted);margin-top:4px}
.compact-side-list{
  display:grid;
  gap:10px;
}
.compact-side-list > div{
  border:1px solid var(--line);
  background:#fcfbfe;
  border-radius:18px;
  padding:12px;
}
.compact-side-list strong{
  display:block;
}
.compact-side-list strong small{
  color:var(--brand);
  font-weight:900;
}
.compact-side-list span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
}
.admin-note-card p{
  color:var(--muted);
  line-height:1.5;
}
.a4-preview{
  max-width:1080px;
}
.summary-table{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}
.summary-row{
  display:grid;
  grid-template-columns:1.8fr .45fr .35fr .35fr .35fr .35fr .5fr;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
}
.summary-row.header{
  background:#fcfbfe;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.exception-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:18px;
}
.exception-list div{
  border:1px solid var(--line);
  background:#fcfbfe;
  border-radius:18px;
  padding:12px;
}
.exception-list strong{
  display:block;
}
.exception-list span{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}
.exception-list small{
  display:block;
  margin-top:6px;
  color:var(--muted);
}
.compact-note{
  padding:12px;
}
.details-box{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 14px;
  margin-top:14px;
  background:#fcfbfe;
}
.details-box summary{
  cursor:pointer;
  font-weight:900;
  color:var(--brand);
}
@media(max-width:1180px){
  .dashboard-hero,.dashboard-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:900px){
  .kpi-grid,.dash-action-grid,.status-strip,.report-list,.exception-list{
    grid-template-columns:1fr 1fr;
  }
  .summary-row{
    grid-template-columns:1fr;
  }
  .summary-row.header{
    display:none;
  }
}
@media(max-width:640px){
  .dashboard-hero{
    padding:20px;
  }
  .dashboard-hero h1{
    font-size:30px;
  }
  .start-inspection-card div,.kpi-grid,.dash-action-grid,.status-strip,.report-list,.exception-list{
    grid-template-columns:1fr;
  }
}
@media print{
  .a4-preview{
    max-width:100%;
    box-shadow:none;
    border:none;
  }
  .details-box,.print-actions{
    display:none!important;
  }
}


/* V11 document expiry image uploads */
.document-check-panel{
  margin-top:16px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.document-check-panel h4{
  margin:0 0 6px;
  font-size:16px;
}
.document-check-panel p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.document-upload-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:14px;
}
.doc-upload-card{
  border:1px solid var(--line);
  background:#fcfbfe;
  border-radius:20px;
  padding:14px;
}
.doc-upload-card > strong{
  display:block;
  font-size:15px;
  margin-bottom:8px;
}
.doc-upload-card > label{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  margin:8px 0 6px;
}
.doc-upload-card > small{
  display:block;
  color:var(--muted);
  margin:6px 0 10px;
}
.small-upload{
  min-height:82px;
  margin-top:10px;
}
.small-upload strong{
  font-size:13px;
}
.mini-file-link{
  display:inline-flex;
  margin-top:7px;
  padding:6px 8px;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:11px;
  font-weight:900;
}
.pdf-file-box{
  height:130px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,var(--brand-soft),#fff8dd);
  display:grid;
  place-items:center;
  font-weight:900;
  color:var(--brand);
}
@media(max-width:900px){
  .document-upload-grid{
    grid-template-columns:1fr;
  }
}


/* V12 mobile hamburger and lookup next-window flow */
.top-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.hamburger-btn{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:22px;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sidebar-overlay{
  display:none;
}
.lookup-result-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  border-radius:24px;
  padding:18px;
  margin-bottom:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.lookup-result-card.found{
  background:linear-gradient(135deg,#e8f8f0,#fff);
  border-color:#c7ead5;
}
.lookup-result-card.not-found{
  background:linear-gradient(135deg,#fff4e6,#fff);
  border-color:#fed797;
}
.lookup-result-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:24px;
  font-weight:900;
}
.lookup-result-card.found .lookup-result-icon{
  color:#087443;
}
.lookup-result-card.not-found .lookup-result-icon{
  color:#b54708;
}
.lookup-result-card strong{
  display:block;
  font-size:18px;
}
.lookup-result-card span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}
.lookup-result-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.next-window{
  display:none;
}
.next-window.show{
  display:block;
  animation:wizardIn .22s ease both;
}
.three-steps{
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:1180px){
  .app-shell{
    display:block;
  }
  .hamburger-btn{
    display:inline-flex;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    height:100vh!important;
    width:290px;
    z-index:1001;
    transform:translateX(-110%);
    transition:.25s ease;
    overflow-y:auto;
  }
  .sidebar.open{
    transform:translateX(0);
  }
  .sidebar-overlay.show{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    z-index:1000;
  }
  .content-wrap{
    min-width:0;
  }
}
@media(max-width:900px){
  .lookup-result-card{
    grid-template-columns:1fr;
  }
  .lookup-result-actions{
    justify-content:stretch;
  }
  .lookup-result-actions .btn{
    flex:1;
  }
  .three-steps{
    display:flex;
    overflow-x:auto;
  }
  .three-steps .wizard-tab{
    min-width:130px;
  }
}
@media(max-width:640px){
  .topbar-inner{
    padding:10px 12px;
  }
  .top-title-wrap{
    width:100%;
  }
  .global-search{
    display:none;
  }
  .user-chip{
    max-width:100%;
  }
}


/* V13 cleaner mobile layout */
.mobile-only-note{
  display:none;
}

@media(max-width:760px){
  body{
    background:#f8f7fb;
  }

  .main{
    padding:10px;
  }

  .topbar{
    position:sticky;
    top:0;
  }

  .topbar-inner{
    gap:8px;
  }

  .top-title-wrap{
    align-items:center;
  }

  .top-title-wrap > div strong{
    font-size:15px;
    line-height:1.2;
  }

  .top-title-wrap > div span{
    display:none;
  }

  .top-right{
    display:none;
  }

  .hamburger-btn{
    min-width:40px;
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .hero{
    display:none;
  }

  .dashboard-hero{
    display:block;
    padding:16px;
    border-radius:22px;
    margin-bottom:10px;
  }

  .dashboard-hero .eyebrow{
    display:none;
  }

  .dashboard-hero h1{
    font-size:24px;
    margin:0 0 6px;
  }

  .dashboard-hero p{
    font-size:13px;
    line-height:1.45;
  }

  .start-inspection-card{
    margin-top:14px;
    padding:12px;
    border-radius:18px;
  }

  .start-inspection-card label{
    font-size:12px;
    margin-bottom:6px;
  }

  .start-inspection-card div{
    grid-template-columns:1fr;
  }

  .start-inspection-card input{
    padding:12px;
    border-radius:14px;
    font-size:16px;
  }

  .start-inspection-card .btn{
    width:100%;
    padding:12px;
    border-radius:14px;
  }

  .kpi-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-bottom:10px;
  }

  .kpi-card{
    padding:12px;
    border-radius:18px;
    box-shadow:none;
  }

  .kpi-card strong{
    font-size:24px;
  }

  .kpi-card small{
    display:none;
  }

  .dashboard-layout{
    display:block;
  }

  .dashboard-main,
  .dashboard-side{
    display:block;
  }

  .card{
    padding:14px;
    border-radius:20px;
    margin-bottom:10px;
    box-shadow:none;
  }

  .card-head{
    margin-bottom:10px;
  }

  .card-head h3{
    font-size:17px;
  }

  .card-head p{
    display:none;
  }

  .dash-action-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .dash-action{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:10px;
    align-items:center;
    padding:12px;
    border-radius:18px;
  }

  .dash-action-icon{
    width:40px;
    height:40px;
    margin:0;
    border-radius:14px;
  }

  .dash-action strong{
    font-size:15px;
  }

  .dash-action small{
    display:none;
  }

  .status-strip{
    grid-template-columns:repeat(4,1fr);
    gap:7px;
  }

  .status-tile{
    padding:10px;
    border-radius:16px;
    text-align:center;
  }

  .status-tile b{
    width:28px;
    height:28px;
    margin:auto;
  }

  .status-tile span{
    display:none;
  }

  .status-tile strong{
    font-size:20px;
  }

  .report-list{
    grid-template-columns:1fr;
    gap:7px;
  }

  .report-list-item{
    padding:10px;
    border-radius:16px;
  }

  .dashboard-side .card:nth-child(n+2){
    display:none;
  }

  .compact-side-list > div{
    border-radius:16px;
    padding:10px;
  }

  .lookup-card{
    padding:14px;
  }

  .lookup-form{
    grid-template-columns:1fr;
  }

  .lookup-input{
    font-size:17px;
    padding:14px;
    border-radius:18px;
  }

  .lookup-result-card{
    padding:14px;
    border-radius:20px;
    gap:10px;
    box-shadow:none;
  }

  .lookup-result-icon{
    width:42px;
    height:42px;
    font-size:20px;
  }

  .lookup-result-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .next-window.show{
    margin-top:8px;
  }

  .wizard-shell{
    position:relative;
    top:auto;
    padding:12px;
  }

  .wizard-progress{
    height:7px;
    margin-bottom:10px;
  }

  .wizard-steps{
    gap:7px;
    padding-bottom:2px;
  }

  .wizard-tab{
    min-width:118px;
    padding:9px 10px;
    border-radius:15px;
    font-size:12px;
  }

  .wizard-tab span{
    width:24px;
    height:24px;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .stat{
    padding:11px;
    border-radius:16px;
  }

  .stat strong{
    font-size:20px;
  }

  .detail-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .detail-grid div{
    padding:10px;
    border-radius:16px;
  }

  .form-grid,
  .form-grid.two{
    grid-template-columns:1fr;
    gap:8px;
  }

  .field{
    margin-bottom:8px;
  }

  .field label{
    margin-bottom:5px;
  }

  .input{
    padding:12px;
    border-radius:15px;
  }

  .document-upload-grid,
  .photo-upload-grid,
  .photo-step-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .doc-upload-card{
    padding:11px;
    border-radius:17px;
  }

  .upload-box{
    min-height:76px;
    border-radius:16px;
  }

  .compact-checklist{
    gap:8px;
  }

  .compact-check{
    padding:10px;
    border-radius:16px;
    gap:8px;
  }

  .check-name strong{
    font-size:13px;
  }

  .status-picker{
    grid-template-columns:repeat(4,38px);
  }

  .status-choice{
    width:38px;
    height:38px;
    border-radius:13px;
  }

  .tyre-wrap{
    grid-template-columns:1fr;
  }

  .visual{
    display:none;
  }

  .tyre-card{
    padding:10px;
    border-radius:16px;
  }

  .tyre-mini-grid{
    grid-template-columns:1fr 1fr;
  }

  .pdf-summary{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .review-summary strong{
    font-size:15px;
  }

  .wizard-actions{
    position:sticky;
    bottom:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    padding:10px;
    margin:10px -14px -14px;
    border-top:1px solid var(--line);
    z-index:6;
  }

  .wizard-actions .btn{
    flex:1;
    padding:12px;
    border-radius:14px;
    font-size:13px;
  }
}

@media(max-width:420px){
  .kpi-grid{
    grid-template-columns:1fr 1fr;
  }
  .kpi-card span{
    font-size:11px;
  }
  .kpi-card strong{
    font-size:22px;
  }
  .status-strip{
    grid-template-columns:repeat(2,1fr);
  }
}


/* V15 approved compact document reminders */
.doc-reminder-list{
  display:grid;
  gap:10px;
}
.doc-reminder-card{
  border:1px solid var(--line);
  background:#fcfbfe;
  border-radius:18px;
  padding:12px;
}
.doc-reminder-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.doc-reminder-title strong{
  font-size:16px;
}
.doc-reminder-title small{
  font-size:11px;
  color:var(--brand);
  font-weight:900;
  background:var(--brand-soft);
  padding:5px 8px;
  border-radius:999px;
}
.doc-reminder-grid{
  display:grid;
  gap:7px;
}
.doc-reminder-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  background:#fff;
  border:1px solid #eeeaf4;
  border-radius:14px;
  padding:9px 10px;
}
.doc-reminder-row span{
  display:block;
  font-size:12px;
  font-weight:900;
  color:var(--ink);
}
.doc-reminder-row small{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}
.doc-status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.doc-status-chip b{
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:11px;
}
.doc-status-chip.valid{
  background:#e8f8f0;
  color:#087443;
}
.doc-status-chip.due{
  background:#fff4e6;
  color:#b54708;
}
.doc-status-chip.expired{
  background:#ffebeb;
  color:#b42318;
}
.doc-status-chip.draft{
  background:#eef2f7;
  color:#475467;
}
@media(max-width:760px){
  .doc-reminder-card{
    border-radius:18px;
    padding:12px;
  }
  .doc-reminder-row{
    border-radius:14px;
    padding:9px 10px;
  }
  .doc-status-chip{
    font-size:11px;
    padding:6px 8px;
  }
}


/* V16 remove duplicate vehicle type step */
.two-steps{
  grid-template-columns:repeat(2,1fr);
}
.selected-type-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(135deg,var(--brand-soft),#fff8dd);
  border:1px solid #f2d7e6;
  border-radius:20px;
  padding:12px 14px;
  margin:12px 0;
}
.selected-type-strip strong{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.selected-type-strip span{
  display:block;
  margin-top:3px;
  font-weight:900;
  color:var(--ink);
}
.selected-type-actions{
  display:flex;
  gap:8px;
}
.type-switch-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--brand);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.type-switch-btn.active{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;
  border-color:transparent;
}
#newVehicleWindow.type-own .outside-field{
  display:none!important;
}
#newVehicleWindow.type-own .own-field{
  display:block!important;
}
#newVehicleWindow.type-outside .own-field{
  display:none!important;
}
#newVehicleWindow.type-outside .outside-field{
  display:block!important;
}
@media(max-width:760px){
  .two-steps{
    grid-template-columns:repeat(2,1fr);
    display:grid;
  }
  .selected-type-strip{
    align-items:flex-start;
    flex-direction:column;
    padding:12px;
    border-radius:18px;
  }
  .selected-type-actions{
    width:100%;
  }
  .type-switch-btn{
    flex:1;
    padding:10px;
  }
}


/* V17 admin-only CRUD icons */
.icon-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.icon-action{
  width:36px;
  height:36px;
  border-radius:13px;
  border:1px solid var(--line);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--brand);
  font-weight:900;
  transition:.18s ease;
  position:relative;
}
.icon-action span{
  font-size:16px;
  line-height:1;
}
.icon-action em{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.icon-action:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(23,28,38,.08);
  border-color:var(--brand);
}
.icon-action.danger{
  color:#b42318;
  background:#fff5f5;
  border-color:#ffd6d6;
}
.icon-action.muted{
  color:var(--muted);
  background:#f8fafc;
  pointer-events:none;
}
.crud-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.btn-icon{
  display:inline-block;
  margin-right:7px;
}
.owner-card{
  grid-template-columns:auto 1fr auto;
}
@media(max-width:760px){
  .icon-actions{
    justify-content:flex-start;
  }
  .icon-action{
    width:40px;
    height:40px;
    border-radius:14px;
  }
  .owner-card{
    grid-template-columns:auto 1fr;
  }
  .owner-card .icon-actions{
    grid-column:1 / -1;
    padding-top:6px;
  }
  .crud-toolbar .btn{
    flex:1;
  }
}