:root{
  --ink:#232427;--muted:#5B6070;--soft:#3F4456;--line:#E6E7EB;--bg:#F4F5F7;--card:#FFFFFF;
  --teal:#007C7A;--teal-d:#005E5C;--teal-l:#DDF3F1;--peri:#7A7FBC;--aqua:#00B3B0;
  --red:#B42318;--red-l:#FDECEA;--amber:#7A4E00;--amber-l:#FFF4DC;--green:#14632F;--green-l:#E3F4EA;
  --blue:#1E4A9E;--blue-l:#E3ECFB;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:var(--teal)}
.boot{padding:40px;text-align:center;color:var(--muted)}
.wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:12px;padding-top:max(12px,env(safe-area-inset-top))}
.top img{height:32px;width:auto}
.top .who{margin-left:auto;text-align:right;font-size:12px;color:var(--muted);line-height:1.3}
.top .who b{display:block;color:var(--ink);font-size:13px}
.icon-btn{width:44px;height:44px;border:none;background:transparent;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.icon-btn:hover{background:var(--bg)}
.main{flex:1;width:100%;max-width:980px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:14px}
.scr{animation:in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em}
h2{margin:0;font-size:16px;font-weight:800}
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;justify-content:space-between;align-items:center;gap:8px}
.muted{color:var(--muted)}
.small{font-size:12px}
.card{background:var(--card);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(35,36,39,.05)}
.btn{height:46px;padding:0 16px;border:none;border-radius:12px;background:var(--teal);color:#fff;font-weight:800;font-size:14px;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;border:1.5px solid #D6D9E1;color:var(--soft);font-weight:700}
.btn.wide{width:100%}
.btn.sm{height:44px;font-size:13px;padding:0 12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.input{height:48px;border:1.5px solid #D6D9E1;border-radius:12px;padding:0 14px;font-size:15px;background:#fff;width:100%;outline-color:var(--teal)}
textarea.input{height:auto;min-height:80px;padding:12px 14px}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;min-width:44px;justify-content:center;height:44px;padding:0 12px;border-radius:999px;border:1.5px solid #D6D9E1;background:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip .n{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;background:#EEF0F4;color:var(--soft)}
.chip.on .n{background:#fff;color:var(--teal-d)}
.chip.warn .n{background:var(--red-l);color:var(--red)}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.oc{text-align:left;border:none;background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:0 1px 2px rgba(35,36,39,.06);border-left:4px solid transparent;transition:transform .12s}
.oc:active{transform:scale(.98)}
.oc.late{border-left-color:#D92D20}
.oc.mine{border-left-color:var(--aqua)}
.plate{font-size:13px;font-weight:800;background:var(--ink);color:#fff;padding:4px 9px;border-radius:7px;letter-spacing:.03em;white-space:nowrap}
.pill{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:#EEF0F4;color:var(--soft);white-space:nowrap}
.pill.teal{background:var(--teal-l);color:var(--teal-d)}
.pill.red{background:var(--red-l);color:var(--red)}
.pill.amber{background:var(--amber-l);color:var(--amber)}
.pill.green{background:var(--green-l);color:var(--green)}
.pill.blue{background:var(--blue-l);color:var(--blue)}
.model{font-size:15px;font-weight:700}
.bar{height:6px;background:#EEF0F4;border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--peri),var(--aqua));border-radius:999px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.note{font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;align-self:flex-start}
.note.amber{background:var(--amber-l);color:var(--amber)}
.note.red{background:var(--red-l);color:var(--red)}
.note.grey{background:#EEF0F4;color:var(--soft)}
.note.orange{background:#FFF0E0;color:#7A4300}
.banner{border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.banner.red{background:var(--red-l);color:#7A1810}
.banner.amber{background:var(--amber-l);color:#5C3B00}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:40px 12px}
/* order */
.ohead{background:#fff;border-radius:16px;padding:12px 16px 0;display:flex;flex-direction:column;gap:9px}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tab{height:44px;border:none;background:transparent;font-size:13px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent}
.tab.on{color:var(--ink);border-bottom-color:var(--teal)}
.steps{display:flex;flex-direction:column}
.st{display:flex;gap:14px}
.st .rail{display:flex;flex-direction:column;align-items:center;width:30px;flex-shrink:0}
.dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#E3E5EB;color:var(--muted);flex-shrink:0}
.dot.done{background:var(--teal);color:#fff}
.dot.active{background:var(--ink);color:#fff;animation:pulse 1.6s ease-in-out infinite}
.dot.late{background:var(--red);color:#fff}
.dot.lock{background:var(--amber-l);color:var(--amber)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,124,122,.4)}50%{box-shadow:0 0 0 8px rgba(0,124,122,0)}}
.line{width:2px;flex:1;min-height:14px;background:#E3E5EB}
.line.done{background:var(--teal)}
.st .body{flex:1;min-width:0;padding:4px 0 18px;display:flex;flex-direction:column;gap:6px}
.st .ttl{font-weight:700;font-size:15px}
.st.dim .ttl{color:var(--muted)}
.stamp{font-size:12px;font-weight:700;color:var(--muted)}
.stamp.late{color:var(--red)}
.own{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.own-Sales{background:var(--teal-l);color:var(--teal-d)}
.own-SalesManager{background:#E2E8F0;color:#1F3A5C}
.own-SalesAdmin{background:#FFF0E0;color:#7A4300}
.own-ConsignAdmin{background:#F3E8F5;color:#6B2C78}
.own-BDC{background:#E9EAF6;color:#3E4383}
.own-Fleet{background:#E6F4EA;color:#1E6B34}
.ctl{display:flex;flex-direction:column;gap:8px;background:#F7F8FA;border-radius:12px;padding:12px;margin-top:2px}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;border:none;background:transparent;text-align:left;padding:0;font-size:14px;font-weight:600}
.box{width:24px;height:24px;border-radius:7px;border:2px solid #C3C7D1;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.box.on{background:var(--teal);border-color:var(--teal)}
.files{display:flex;flex-direction:column;gap:4px}
.file{font-size:13px;display:flex;align-items:center;gap:6px;color:var(--soft)}
.upl{position:relative;overflow:hidden;min-height:48px;border-radius:12px;border:2px dashed #C3C7D1;background:#fff;color:var(--soft);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upl.on{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;color:var(--muted);font-size:12px;font-weight:700;padding:8px 6px}
table.t td{padding:9px 6px;border-top:1px solid #EEF0F4}
.scroll{overflow-x:auto}
/* booking */
.opt{text-align:left;background:#fff;border:2px solid transparent;border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.opt.on{border-color:var(--teal)}
/* dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:#fff;border-radius:16px;padding:14px 16px}
.kpi b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em}
.kpi span{font-size:13px;font-weight:600;color:var(--muted)}
.kpi.dark{background:var(--ink);color:#fff}.kpi.dark span{color:#C4C5CA}
.kpi.redk{background:var(--red-l);color:#7A1810}.kpi.redk span{color:#7A1810}
.hbar{display:flex;align-items:center;gap:10px;font-size:13px;border:none;background:transparent;padding:4px 0;text-align:left;width:100%}
.hbar .lab{width:170px;flex-shrink:0;font-weight:600;color:var(--soft)}
.hbar .trk{flex:1;height:16px;background:#F1F2F5;border-radius:5px;overflow:hidden}
.hbar .trk i{display:block;height:100%;border-radius:5px;animation:grow .8s cubic-bezier(.2,.8,.2,1);transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.seg{display:grid;gap:4px;background:#E6E7EB;padding:4px;border-radius:12px}
.seg button{height:44px;border:none;border-radius:9px;background:transparent;font-weight:800;font-size:13px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(35,36,39,.14)}
.step-btn{width:32px;height:32px;border-radius:8px;border:1.5px solid #D6D9E1;background:#fff;font-weight:800}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(92vw,420px);background:var(--ink);color:#fff;border-radius:14px;padding:14px 16px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(35,36,39,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:20}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
#toast.err{background:#7A1810}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (min-width:760px){.main{padding:24px 24px 60px}}

/* loan document checklist */
.docs{display:flex;flex-direction:column;border:1px solid #E4E6EC;border-radius:12px;overflow:hidden}
.doc{display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:56px;background:#fff}
.doc+.doc{border-top:1px solid #EEF0F4}
.dck{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #C3C7D1;display:grid;place-items:center;color:#fff}
.dck svg{width:14px;height:14px}
.doc.ok .dck{background:var(--teal);border-color:var(--teal)}
.dbody{flex:1;min-width:0}
.dname{font-size:14px;font-weight:700}
.doc:not(.ok) .dname{color:var(--soft)}
.dfiles{display:flex;flex-direction:column;gap:2px;margin-top:3px}
.dfiles span,.dfiles a{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfiles a{color:var(--teal-d);text-decoration:none;font-weight:600}
.dfiles svg{flex:none;width:12px;height:12px}
.dup{position:relative;overflow:hidden;flex:none;min-width:76px;height:36px;padding:0 12px;border-radius:10px;background:var(--teal);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;cursor:pointer}
.dup.more{background:var(--teal-l);color:var(--teal-d)}
.dup input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dup:focus-within{outline:2px solid var(--teal-d);outline-offset:2px}

a.file{color:var(--teal-d);text-decoration:none;font-weight:600}
a.file:hover,.dfiles a:hover{text-decoration:underline}

.doc.amend{background:#FEF3F2}
.doc.amend .dck{background:#D92D20;border-color:#D92D20;color:#fff;font-weight:800;font-size:14px}
.doc.amend .dname{color:var(--ink)}
.dup.redo{background:#D92D20;color:#fff}
.dstate{flex:none;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.dstate svg{width:12px;height:12px}
.dstate.muted{color:var(--muted)}.dstate.teal{color:var(--teal-d)}.dstate.soft{color:var(--soft)}.dstate.red{color:#B42318}

/* ---------- One App: top tabs, stock frame, three lanes ---------- */
.apptabs{display:flex;gap:4px;background:#fff;border-bottom:1px solid var(--line);padding:0 12px;position:sticky;top:0;z-index:5}
.apptab{flex:1;max-width:200px;height:46px;border:none;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent}
.apptab.on{color:var(--ink);border-bottom-color:var(--teal)}
#stockFrame{position:fixed;left:0;right:0;bottom:0;width:100%;height:auto;border:0;background:var(--bg);z-index:4}
body.stk-on{overflow:hidden}
.main.stk{display:none}
.dealer-link{min-height:44px;display:flex;align-items:center;align-self:center;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;padding:8px}
.seg .n{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;background:#EEF0F4;color:var(--soft);margin-left:4px}
.seg .on .n{background:var(--ink);color:#fff}
.seg .n.red{background:var(--red-l);color:var(--red)}
.lane-h{font-size:15px;margin:0 0 8px;display:none}
.lane{display:none}
.lane.show{display:block}
@media (min-width:820px){
  .lanes-seg{display:none}
  .main:has(.lanes){max-width:1240px}
  .lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
  .lane,.lane.show{display:block}
  .lane-h{display:block}
}
.oc.sk{display:flex;flex-direction:column;gap:10px;pointer-events:none}
.oc.sk i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#E9EBF0 25%,#F4F5F7 50%,#E9EBF0 75%);background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.oc.sk i{animation:none}}

/* ---------- step remarks, doc hints, grid, Car Prep, My KPI ---------- */
.linkbtn{align-self:flex-start;border:none;background:transparent;padding:4px 0;font-size:12px;font-weight:700;color:var(--muted)}
.snote{background:#F7F8FA;border-radius:10px;padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px;white-space:pre-wrap}
.dhint{font-size:12px;color:var(--muted);margin-top:1px}
.lview{max-width:240px;display:none}
@media (min-width:820px){.lview{display:grid}.main:has(.gridwrap){max-width:1400px}}
table.grid{font-size:12px;white-space:nowrap}
table.grid th{text-align:center;font-size:12px;padding:8px 6px;vertical-align:bottom}
table.grid th span{display:block;font-weight:600;font-size:10px;max-width:86px;white-space:normal;line-height:1.2;margin:2px auto 0}
table.grid td{text-align:center;padding:8px 6px;font-weight:700}
table.grid .gfix{text-align:left;position:sticky;left:0;background:#fff;z-index:1;padding-left:14px}
table.grid td.gfix span{display:block;font-weight:500;color:var(--muted);font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr:hover td{background:#F7F8FA}
.g-done{color:var(--teal-d)}.g-done svg{vertical-align:-2px}
.g-now{background:var(--teal-l);color:var(--teal-d)}
.g-late{background:var(--red-l);color:var(--red)}
.g-na{color:#C3C7D1}
.sbar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.sbar i{height:8px;border-radius:4px;background:#E3E5EB}
.sbar i.p{background:var(--teal)}.sbar i.f{background:#D92D20}.sbar i.x{background:#B9BDC9}
.mbars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;text-align:center}
.mbars div{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end}
.mbars i{display:block;width:100%;max-width:44px;border-radius:6px}
.mbars b{font-size:13px}.mbars span{font-size:11px;color:var(--muted);font-weight:700}
.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tiles .kpi{border:none;text-align:left;font:inherit;padding:12px 10px}
.tiles .kpi b{font-size:22px}.tiles .kpi span{font-size:12px}
/* ---------- menu (replaces the tab bar) ---------- */
.top{position:sticky;top:0;z-index:6;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}
.top .icon-btn{position:relative}
.top .here{margin-left:auto;font-size:15px;font-weight:800}
.navdot{position:absolute;top:9px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--aqua);border:2px solid #fff}
.scrim{position:fixed;inset:0;background:rgba(35,36,39,.42);opacity:0;pointer-events:none;transition:opacity .22s;z-index:30}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(82vw,300px);background:#fff;z-index:31;display:flex;flex-direction:column;gap:2px;padding:max(16px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom));transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);box-shadow:8px 0 30px rgba(35,36,39,.16);visibility:hidden}
.drawer.on{transform:none;visibility:visible}
.dwho{padding:6px 12px 14px;margin-bottom:6px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.dwho b{font-size:17px;font-weight:800}.dwho span{font-size:13px;color:var(--muted)}
.navitem{display:flex;align-items:center;gap:14px;height:52px;padding:0 12px;border:none;background:transparent;border-radius:12px;font:inherit;font-size:15px;font-weight:700;color:var(--soft);text-align:left}
.navitem.on{background:var(--teal-l);color:var(--teal-d)}
.navitem span{flex:1}
.navn{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--teal);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.navitem.out{margin-top:auto;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}
.tiles .kpi{padding:10px 8px;min-width:0}.tiles .kpi span{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.navcnt{position:absolute;top:1px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--teal);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
/* keyboard focus: one visible ring everywhere (design audit, 12 Nov) */
button:focus-visible,a:focus-visible,label.upl:focus-within,[data-a]:focus-visible{outline:2px solid var(--teal-d);outline-offset:2px}