:root{
  --bg:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --muted:#6e6e73;
  --blue:#0071e3; --blue-d:#0058b0; --line:#e5e5ea;
  --red:#d70015; --amber:#b7791f; --green:#1d7a35; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5}
.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.brand{font-weight:800; font-size:20px; text-decoration:none; color:var(--ink); letter-spacing:.5px}
.brand span{color:var(--blue); font-weight:600}
.topbar nav{display:flex; gap:4px; flex-wrap:wrap}
.topbar nav a{text-decoration:none; color:var(--ink); font-size:14px; padding:8px 10px; border-radius:10px}
.topbar nav a:active{background:#e8e8ed}
main{max-width:720px; margin:0 auto; padding:16px 16px 48px}
.card{background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
h1{font-size:24px; margin:4px 0 12px} h2{font-size:19px; margin:0 0 10px}
.muted{color:var(--muted); font-size:14px}
.btn{display:block; width:100%; border:0; border-radius:var(--radius); background:var(--blue); color:#fff;
  font-size:17px; font-weight:600; padding:14px; margin-top:12px; cursor:pointer}
.btn:active{background:var(--blue-d)}
.btn.ghost{background:#e8e8ed; color:var(--ink)}
input,select,textarea{width:100%; font-size:17px; padding:13px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; margin-top:6px; font-family:inherit}
label{display:block; font-size:14px; color:var(--muted); margin-top:14px}
.flash p{background:#e8f5e9; border-radius:10px; padding:10px 14px; margin:0 0 8px; font-size:14px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px}
.stat{background:var(--card); border-radius:var(--radius); padding:14px 10px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat b{display:block; font-size:26px} .stat span{font-size:12px; color:var(--muted)}
.car-row{display:flex; justify-content:space-between; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  background:var(--card); border-radius:var(--radius); padding:14px; margin-bottom:8px; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.car-row .nm{font-weight:700} .car-row .sub{font-size:13px; color:var(--muted)}
.car-row .locline{font-size:13px; color:var(--ink); margin-top:2px}
.flags{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.flag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px}
.flag.dup{background:#fff3cd; color:var(--amber)} .flag.err{background:#fde8ea; color:var(--red)}
.flag.nophoto{background:#e8e8ed; color:var(--muted)} .flag.loc{background:#e3f2fd; color:var(--blue-d)}
.flag.ok{background:#e6f4ea; color:#1a7f37} .flag .cnt{font-size:10px; font-weight:400; opacity:.8}
/* (gallery styles moved to v0.13 section below) */
.searchbar{display:flex; gap:8px; margin-bottom:12px}
.searchbar input{margin-top:0}
.searchbar .btn{width:auto; margin-top:0; padding:13px 20px}
.steps{display:flex; gap:6px; margin:12px 0}
.stepdot{flex:1; height:6px; border-radius:3px; background:#e0e0e5}
.stepdot.on{background:var(--blue)}
.big-touch{min-height:56px}
.syncbar{position:fixed; bottom:0; left:0; right:0; background:#1d1d1f; color:#fff; font-size:14px;
  padding:10px 16px; display:none; justify-content:space-between; align-items:center; z-index:20}
.syncbar.show{display:flex}
.syncbar button{background:var(--blue); border:0; color:#fff; border-radius:10px; padding:8px 16px; font-size:14px}
/* 12.1 offline — unified queue sync bar (driven by offline.js data-zq-* hooks) */
.zq-syncbar{position:fixed; bottom:0; left:0; right:0; background:#1d1d1f; color:#fff; font-size:14px;
  padding:10px 16px; display:none; justify-content:space-between; align-items:center; z-index:60; gap:10px}
.zq-syncbar.show{display:flex}
.zq-syncbar .btn{background:var(--blue); border:0; color:#fff; border-radius:10px; padding:8px 16px; font-size:14px}
.zq-offbadge{background:#c0392b; color:#fff; font-weight:700; font-size:12px; border-radius:8px; padding:4px 10px; letter-spacing:.5px}
.zq-timer-banner{position:sticky; top:0; z-index:55; background:#0a3d2e; color:#fff; font-size:14px;
  padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.zq-timer-banner button{background:#fff; border:0; border-radius:8px; padding:6px 14px; font-size:14px}
.zq-note{background:#fff8e1; border:1px solid #f0d060; border-radius:10px; padding:10px 14px; margin:10px 0; font-size:14px}
.kv{display:grid; grid-template-columns:110px 1fr; gap:6px 10px; font-size:15px}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:600}
.login-wrap{max-width:380px; margin:8vh auto}
.login-wrap .card{padding:28px 22px}
.badge{font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:#e8f5e9; color:var(--green)}
.badge.work{background:#fff3cd; color:var(--amber)}
.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.menu-grid .btn{margin-top:0; padding:12px 8px; font-size:15px; text-align:center; text-decoration:none}
.btn.small{width:auto; display:inline-block; padding:10px 16px; font-size:14px; margin-top:0}
.tbl{width:100%; border-collapse:collapse; font-size:14px; margin-top:8px}
.tbl th,.tbl td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:start}
.tbl th{color:var(--muted); font-weight:600}
.inline-form{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px}
.inline-form label{margin-top:0; flex:1; min-width:140px}
.inline-form .btn{width:auto; margin-top:0; padding:13px 18px; text-decoration:none; text-align:center}
.jline{border-top:1px solid var(--line); padding-top:6px; margin-top:6px}
/* v0.6 tasks */
.timer-card{border:2px solid var(--blue); background:#f0f7ff}
.timer-card .t{font-weight:800; color:var(--blue-d)}
.timer-card .elapsed{font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; margin:6px 0; direction:ltr; text-align:center}
.task-row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.seg{display:flex; gap:6px; margin:8px 0; flex-wrap:wrap}
.seg label{flex:1; min-width:100px; text-align:center; padding:12px 6px; border:2px solid var(--line); border-radius:12px; font-size:14px; cursor:pointer; margin-top:0}
.seg input{margin-inline-end:6px}
.seg label:has(input:checked){border-color:var(--blue); background:#f0f7ff; font-weight:700}
input[type=range].slider{width:100%; height:44px; accent-color:var(--blue)}

/* --- v0.8 intake --- */
.radio-row{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
.radio-row label{flex:1; min-width:110px; text-align:center; padding:12px 8px; border:2px solid var(--line); border-radius:12px; font-size:14px; cursor:pointer; margin-top:0}
.radio-row input{margin-inline-end:6px}
.radio-row label:has(input:checked){border-color:var(--blue); background:#f0f7ff; font-weight:700}
.vpart{border-top:1px solid var(--line); padding:10px 0}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
.thumbs img{width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.formnav{display:flex; gap:10px; margin-top:16px}
.formnav .btn{margin-top:0}
.btn.primary{background:var(--blue); color:#fff}
.badge{display:inline-block; padding:2px 10px; border-radius:12px; background:#eef2f7; font-size:12px; margin:0 4px}
.badge.danger{background:#fdecea; color:#b3261e}
.review h3{margin:14px 0 4px; font-size:15px}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.filters input,.filters select{flex:1; min-width:140px}
.filters .btn{width:auto; margin-top:0}
/* v0.10 tasks rebuild: urgency groups + priority + big actions */
.grp-head{margin:18px 0 8px;font-size:1.05em}
.grp-overdue{color:#d70015}
.grp-today{color:#b26a00}
.task-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-inline-start:5px solid var(--line)}
.task-row.urg-overdue{border-inline-start-color:#d70015;background:#fff5f5}
.task-row.urg-today{border-inline-start-color:#e8a100;background:#fffdf2}
.task-main{flex:1;text-decoration:none;color:var(--ink);min-width:0}
.task-btns{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.btn-start{min-height:56px;min-width:110px;font-size:1.05em;font-weight:700}
.btn-stop{min-height:56px;font-size:1.05em;font-weight:700;background:#d70015}
.flag.pri{background:#eef}
.task-row.pri-high .flag.pri{background:#ffe9c7}
.task-row.pri-urgent .flag.pri{background:#ffd9d9;color:#a00000;font-weight:700}
.task-row.pri-low .flag.pri{background:#f0f0f0;color:#888}
.flag.type-car{background:#e3f2fd}
.flag.type-yard{background:#f3e5f5}
.flag.type-offyard{background:#fff3e0}
.task-filters{margin-bottom:14px}
.task-filters .filter-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.task-filters select{flex:1;min-width:130px}
.task-detail{border-inline-start:5px solid var(--line)}
.task-detail.pri-urgent{border-inline-start-color:#d70015}
.task-detail.pri-high{border-inline-start-color:#e8a100}
.task-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.voice-big{display:block;min-height:56px;padding:10px;border:2px dashed var(--line);
  border-radius:12px;margin:10px 0;cursor:pointer}
.voice-big input{margin-top:6px}
.hist{padding:8px 12px}
.pri-seg label{border-radius:8px;padding:6px 10px}
.seg label.pri-urgent{background:#ffd9d9}
.seg label.pri-high{background:#ffe9c7}
.vin-wrap{position:relative}
.vin-wrap .vin-input{width:100%;padding-inline-end:58px}
.vin-cam{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;color:#555;padding:6px;margin:0}
.vin-cam svg{width:30px;height:30px}
.vin-cam:active{color:#111}
/* legacy v0.8.1 external scan button (unused now, kept harmless) */
.vin-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:1.35em;font-weight:700;padding:12px 16px;border-radius:12px;margin-bottom:12px;
  background:#e8f5e9;border:2px solid var(--green)}
.vin-banner.warn{background:#fff8e1;border-color:#b7791f}
.vin-banner .chk{font-size:1.25em;line-height:1;display:flex}
.vin-banner .chk svg{width:26px;height:26px}
.vin-banner .car-ic{display:inline-flex;margin-inline-end:10px;vertical-align:-6px}
.vin-banner .car-ic svg{width:32px;height:32px}
.vin-row{display:flex;gap:8px;align-items:flex-end}
.vin-row .vin-field{flex:1;margin-top:0}
.scan-btn{font-size:2rem;line-height:1;min-width:76px;min-height:56px;border-radius:12px;
  border:2px solid var(--line);background:#f5f5f5;cursor:pointer;margin-top:0;padding:6px;
  display:flex;align-items:center;justify-content:center;color:#333}
.scan-btn svg{width:34px;height:34px}
.scan-btn:active{background:#e8e8ed}
details.more-details{margin:14px 0;border-top:1px solid var(--line)}
details.more-details summary{font-size:1.1em;font-weight:700;cursor:pointer;
  padding:14px 4px;min-height:48px;list-style:none}
details.more-details summary::-webkit-details-marker{display:none}
details.more-details summary::before{content:"▸ ";color:var(--blue)}
details.more-details[open] summary::before{content:"▾ "}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.badge{display:inline-block; background:#eef; border-radius:8px; padding:2px 10px; font-size:13px}
.badge.ok{background:#e8f5e9}.badge.warn{background:#fff8e1}.badge.bad{background:#ffebee}
.barcode-box{background:#fff; padding:12px; border-radius:10px; text-align:center; margin:10px 0}
@media print{.topbar,.no-print{display:none!important}body{background:#fff}}
.label-sheet{max-width:420px; margin:20px auto; border:2px dashed #999; padding:18px; text-align:center}

/* v0.11 workshop redesign — light theme */
.wo-stats .stat-alert b{color:var(--red)}
.qactions{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.btn.qa-primary{width:auto; margin-top:0; display:inline-flex; align-items:center; gap:8px; padding:13px 20px}
.btn.qa{width:auto; margin-top:0; padding:13px 18px}
.btn.qa-inline{width:auto; margin-top:0; padding:10px 16px; font-size:15px; display:inline-block}
.btn.qa-next{margin-top:10px; padding:12px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; align-items:center}
.chip{text-decoration:none; color:var(--ink); background:#e8e8ed; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:20px; min-height:40px; display:inline-flex; align-items:center}
.chip.on{background:var(--blue); color:#fff}
.wo-card{background:var(--card); border-radius:var(--radius); margin-bottom:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden}
.wo-photo{width:100%; height:170px; object-fit:cover; display:block}
.wo-main{padding:14px 16px}
.wo-top{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px}
.wo-num{font-weight:800; font-size:17px; text-decoration:none; color:var(--ink)}
.wo-car{font-size:16px; margin-bottom:2px}
.wo-sub{font-size:13px; color:var(--muted)}
.wo-stats3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:12px 0 4px}
.wo-stats3>div{background:#f5f5f7; border-radius:10px; padding:10px 6px; text-align:center}
.wo-stats3 b{display:block; font-size:17px}
.wo-stats3 span{font-size:11px; color:var(--muted)}
.badge.st-scheduled{background:#e8e8ed; color:var(--muted)}
.badge.st-in_progress{background:#e3f2fd; color:var(--blue-d)}
.badge.st-waiting_parts{background:#fff3cd; color:var(--amber)}
.badge.st-quality_check{background:#f3e5f5; color:#7b1fa2}
.badge.st-ready{background:#e6f4ea; color:var(--green)}
.badge.st-invoiced{background:#e0f2f1; color:#00695c}
.badge.st-closed{background:#e8e8ed; color:var(--muted)}
.wo-hero{display:flex; gap:14px; align-items:flex-start}
.wo-hero-photo{width:120px; height:120px; object-fit:cover; border-radius:12px; flex-shrink:0}
.timer-big{display:flex; align-items:center; justify-content:center; gap:10px; font-size:19px; padding:18px}
.timer-big.stop{background:var(--red)}
.next-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
.note-row{display:flex; gap:8px; margin-top:14px}
.note-row input{margin-top:0; flex:1}
.note-row .btn{flex-shrink:0}
.hist{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.hist:last-child{border-bottom:0}
.hist-dot{width:10px; height:10px; border-radius:50%; background:var(--blue); margin-top:6px; flex-shrink:0}
.hist .sub{font-size:13px; color:var(--muted)}
@media (max-width:520px){.wo-hero{flex-direction:column}.wo-hero-photo{width:100%; height:180px}}
.ltr{direction:ltr; unicode-bidi:isolate; text-align:left}
.loc-inline{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.loc-inline select,.loc-inline input{padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:15px; background:#fff; min-width:0}
.loc-inline select{max-width:86px}
.loc-inline input[name=number]{max-width:90px}
.btn-sm{padding:8px 14px; font-size:14px}
/* v0.13 gallery: 2-col grid, lightbox, protected delete */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px}
@media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gitem{position:relative; border-radius:12px; overflow:hidden; background:#eef0f3; cursor:zoom-in}
.gitem img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.gdelform{display:none}
.gallery.editing .gdelform{display:block}
.gallery.editing .gitem{cursor:default}
.gdel{position:absolute; top:6px; inset-inline-end:6px; font-size:12px; padding:6px 12px; border-radius:16px; border:0; background:rgba(0,0,0,.6); color:#fff}
.gdel.armed{background:#c0392b; font-weight:700}
.lb{position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:999; display:flex; align-items:center; justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:94vw; max-height:88vh; border-radius:8px}
.lb-x{position:absolute; top:12px; inset-inline-end:14px; font-size:22px; background:none; border:0; color:#fff; padding:10px}
.lb-cnt{position:absolute; top:18px; inset-inline-start:16px; color:#fff; font-size:14px}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); font-size:34px; background:rgba(255,255,255,.15); border:0; color:#fff; border-radius:50%; width:48px; height:48px}
#lbprev{inset-inline-start:10px}#lbnext{inset-inline-end:10px}
/* Sequential intake wizard (11 steps) */
.wiz{max-width:640px; margin:0 auto}
.wiz-progress{display:flex; gap:6px; margin:12px 0}
.wiz-dot{flex:1; height:6px; border-radius:3px; background:#e5e5ea}
.wiz-dot.done{background:var(--green)}
.wiz-dot.now{background:var(--blue)}
.wiz-step{margin:4px 0 12px}
.wiz-form .pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 16px}
.pick-card{display:flex; align-items:center; gap:8px; padding:14px; border:2px solid var(--line); border-radius:12px; cursor:pointer; font-size:15px}
.pick-card:has(input:checked){border-color:var(--blue); background:#eef6ff}
.pick-card input{width:20px; height:20px}
.pick-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.pick-chip{display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border:1px solid var(--line); border-radius:20px; font-size:13px; cursor:pointer}
.pick-chip:has(input:checked){background:var(--blue); color:#fff; border-color:var(--blue)}
.pick-chip input{display:none}
.wiz-field{margin:12px 0}
.wiz-field label{display:block; margin-bottom:6px; font-weight:600}
.wiz-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wiz-photo-cat{margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:10px}
.wiz-photo-cat label{display:block; margin-bottom:6px; font-weight:600}
.wiz-part{padding:10px 0; border-bottom:1px solid var(--line)}
.wiz-part > span{font-weight:600}
.check-row{display:flex; align-items:center; gap:8px; padding:12px 0; font-size:15px}
.check-row input{width:20px; height:20px}
.slider{width:100%; height:40px}
.wiz-nav{display:flex; gap:10px; margin-top:20px}
.wiz-nav .btn{flex:1}
.loc-inline.big select,.loc-inline.big input{padding:14px; font-size:18px}
.vin-banner{padding:12px; border-radius:10px; margin:10px 0; font-weight:600}
.vin-banner.ok{background:#e8f5e9; color:#1d7a35}
.vin-banner.warn{background:#fff8e1; color:#b7791f}
/* v0.14 HR & reports */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.perm-matrix{border-collapse:collapse;width:100%;font-size:13px}
.perm-matrix th,.perm-matrix td{border:1px solid var(--line,#ddd);padding:6px 8px;text-align:center}
.perm-matrix th{background:#f4f6f8}
.perm-matrix td.res{text-align:start;font-weight:600;white-space:nowrap}
.perm-matrix input[type=checkbox]{width:20px;height:20px}
.rep-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.rep-card{display:block;border:1px solid var(--line,#ddd);border-radius:12px;padding:16px;text-decoration:none;color:inherit;background:#fff}
.rep-card:hover{border-color:#888}
.rep-card b{display:block;font-size:16px;margin-bottom:4px}
.rep-card span{color:#666;font-size:13px}
table.rep{border-collapse:collapse;width:100%;font-size:14px}
table.rep th,table.rep td{border:1px solid var(--line,#ddd);padding:8px;text-align:start}
table.rep th{background:#f4f6f8}
.badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;background:#eef}
.badge.warn{background:#ffe9c7}.badge.ok{background:#d9f2d9}.badge.err{background:#ffd9d9}