:root{--ink:#0a0a0b;--ink2:#1c1d21;--bg:#f3f3f4;--card:#fff;--line:#e3e4e7;--text:#16171a;--muted:#62656c;--amber:#e10600;--amber2:#c10500;--green:#15803d;--red:#e10600;--blue:#1d4ed8;--glass:rgba(255,255,255,.5);--r:14px;--safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font:15.5px/1.5 Saira,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;color:var(--text);background:var(--bg)}
a{color:inherit}h1,h2{margin:0;line-height:1.2}.muted{color:var(--muted)}.sm{font-size:13px}
.i{width:20px;height:20px;flex:none}
.mark{width:38px;height:38px;border-radius:10px;background:var(--amber);color:#1a1200;display:grid;place-items:center;font:800 15px system-ui;flex:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);font:600 14px system-ui;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn .i{width:17px;height:17px}.btn.sm{padding:7px 12px;font-size:13px}.btn.lg{padding:14px 18px;font-size:16px}.btn.block{width:100%}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.wa{background:#25d366;border-color:#25d366;color:#fff}
.btn.danger{background:#fff;color:var(--red);border-color:#f3c4c4}
.icon-btn{border:0;background:none;padding:6px;color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;border-radius:8px}.icon-btn:hover{background:#f1eee8;color:var(--text)}
/* layout */
.side{position:fixed;inset:0 auto 0 0;width:250px;background:var(--ink);color:#c9ccd3;display:flex;flex-direction:column;z-index:30}
.sbrand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;text-decoration:none;color:#fff}.sbrand b{font-size:16px;line-height:1.2}
.side nav{flex:1;overflow:auto;padding:6px 10px}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:14.5px;margin-bottom:2px}
.side nav a:hover{background:#1c2029;color:#fff}.side nav a.on{background:#262a34;color:#fff}.side nav a.on .i{color:var(--amber)}
.side nav a em{margin-left:auto;background:var(--amber);color:#1a1200;font:700 11px system-ui;border-radius:10px;padding:2px 7px;font-style:normal}
.sgroup{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6b707b;padding:16px 12px 6px}
.sfoot{display:flex;align-items:center;gap:6px;padding:14px 16px;border-top:1px solid #232730}.sfoot div{flex:1}.sfoot b{display:block;color:#fff;font-size:14px}.sfoot small{font-size:12px}
.sfoot a{padding:6px;border-radius:8px;display:grid}.sfoot a:hover{background:#1c2029;color:#fff}
.main{margin-left:250px;min-height:100vh}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:16px 28px;background:rgba(244,242,238,.92);backdrop-filter:blur(8px)}
.top h1{font-size:22px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tact{display:flex;gap:8px}
.tback{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.content{padding:0 28px 40px;max-width:1000px}
.main>.alert{margin:0 28px 12px;max-width:1000px}
.alert{padding:11px 14px;border-radius:10px;font-size:14px}.alert.ok{background:#e7f6ec;color:#146c34}.alert.err{background:#fdecec;color:#9b1c1c}
.tabs{display:none}
/* panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
.panel h2{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.panel h2.pad{padding:16px 16px 0}
.panel.flush{padding:0;overflow:hidden}.panel.warn{border-color:#f5cf8a;background:#fffaf0}
.panel.dark{background:var(--ink);color:#fff;border-color:var(--ink)}.panel.dark label{color:#aeb2bb}.panel.dark input{background:#1b1e25;border-color:#2c313b;color:#fff}
.count{background:var(--amber);color:#1a1200;border-radius:10px;padding:1px 8px;font-size:12px}
.empty{padding:22px;text-align:center;color:var(--muted);margin:0}
.hint{font-size:12px;color:#8a8f99;margin:4px 0 0}
/* forms */
label{display:block;font-size:12.5px;font-weight:600;color:#4a4e57;margin-bottom:11px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:10px 11px;border:1.5px solid var(--line);border-radius:10px;font:15px system-ui;background:#fff;color:var(--text);min-height:42px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--amber)}
label.check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px}label.check input{width:18px;height:18px;min-height:0;margin:0}
.pad-top{padding-top:26px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
form.inline{display:flex;gap:8px;align-items:center}form.inline select,form.inline input{margin:0;flex:1}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.filters>*{margin:0}.filters select,.filters input{width:auto;margin:0}
.filters .search{flex:1;min-width:200px;position:relative}.filters .search .i{position:absolute;left:11px;top:11px;color:var(--muted)}.filters .search input{width:100%;padding-left:38px}
label.mini{display:flex;align-items:center;gap:6px;margin:0}label.mini input{margin:0}
.chips{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}.chips a{padding:6px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);text-decoration:none;font-size:13px}.chips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sticky-save{position:sticky;bottom:0;padding:10px 0;background:linear-gradient(transparent,var(--bg) 30%)}
/* calculator */
.calc-out{background:#1b1e25;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.calc-out .row{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;color:#aeb2bb}.calc-out .row b{color:#fff;font-weight:600}
.calc-out .total{border-top:1px dashed #3a3f4a;margin-top:6px;padding-top:9px}.calc-out .total b{color:var(--amber);font-size:22px;font-weight:800}
/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}.stats.three{grid-template-columns:repeat(3,1fr)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}.stat small{display:block;font-size:12px;color:var(--muted)}.stat b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.stat.hl{background:var(--ink);color:#fff;border-color:var(--ink)}.stat.hl small{color:#aeb2bb}.stat.hl b{color:var(--amber)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.qbtn{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;font-weight:600}.qbtn .i{color:var(--amber2)}
/* rows */
.brow,.crow,.krow,.lrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0ede6;text-decoration:none}
.panel:not(.flush) .brow{margin:0 -18px;padding:12px 18px}.brow:last-child,.crow:last-child,.krow:last-child,.lrow:last-child{border-bottom:0}
.brow:hover,.crow:hover,.lrow:hover{background:#faf8f4}
.bdate{width:46px;text-align:center;background:#f4f2ee;border-radius:10px;padding:5px 0;flex:none}.bdate b{display:block;font-size:18px;line-height:1.1}.bdate small{font-size:11px;text-transform:uppercase;color:var(--muted)}
.bmain{flex:1;min-width:0}.bmain b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bmain small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bend{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.bend b{font-size:14px}.bend small{font-size:12px;color:var(--muted)}
.krow .bend{flex-direction:row;align-items:center;gap:8px}.krow .bmain small{white-space:normal}
.ref{font-weight:500;font-size:11.5px;color:var(--muted);background:#f4f2ee;border-radius:6px;padding:1px 6px;margin-left:4px}
.av{width:38px;height:38px;border-radius:50%;background:#fdf1dc;color:var(--amber2);display:grid;place-items:center;font-weight:800;flex:none}
.off{opacity:.5}
.badge{display:inline-block;font:700 11px system-ui;padding:3px 8px;border-radius:20px;border:0;cursor:default;background:#eee;color:#555}
.s-pending{background:#fff3db;color:#a15c00}.s-confirmed{background:#e3edff;color:#1d4ed8}.s-completed{background:#e3f6e9;color:#15803d}.s-cancelled{background:#f3f3f3;color:#888}
form.tiny{margin:0}form.tiny .badge{cursor:pointer}
/* booking view */
.head-card .hc-top{display:flex;justify-content:space-between;align-items:start}.big{font-size:20px;display:block}.head-card small{color:var(--muted)}
.route{display:flex;align-items:center;gap:10px;margin:14px 0;font-weight:700;font-size:16px}.route i{color:var(--amber2);font-style:normal}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kv div{background:#f7f5f0;border-radius:10px;padding:8px 10px}.kv small{display:block;font-size:11.5px}.kv b{font-size:14px}
.note{background:#fffaf0;border-radius:10px;padding:10px;font-size:14px;margin:12px 0 0}
.actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.statusbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.statusbar button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 4px;font:600 13px system-ui;cursor:pointer}
.statusbar button.on{border-color:transparent}
.xlist{margin:-4px 0 12px}.xrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f0ede6}.xrow div{flex:1}.xrow small{display:block;color:var(--muted);font-size:12px}.xrow form{margin:0}
.xtypes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.xtypes label{margin:0;position:relative}.xtypes input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.xtypes span{display:block;padding:7px 12px;border-radius:20px;border:1.5px solid var(--line);font-weight:600;font-size:13px;cursor:pointer}.xtypes input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.totals div{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}.totals .grand{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;font-size:16px}
.totals .bal{font-size:17px;font-weight:800}.totals .bal.due b,.txt-due{color:var(--red)}.totals .bal.paid b{color:var(--green)}.totals+form{margin-top:12px}
.danger-zone{margin:6px 0 20px;text-align:right}
/* vehicles & listings */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.vtile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:3px}
.vt-img{height:90px;border-radius:10px;background:linear-gradient(160deg,#20242d,#0f1115);display:grid;place-items:center;overflow:hidden;margin-bottom:6px}.vt-img .veh-svg{width:70%;color:var(--amber)}.vt-img img{width:100%;height:100%;object-fit:cover}
.vtile small{color:var(--muted);font-size:12px}.vt-rates{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px;flex:1;align-content:flex-start}.vt-rates span{font-size:11.5px;background:#f4f2ee;border-radius:6px;padding:2px 6px}
.lthumb{width:64px;height:48px;border-radius:8px;overflow:hidden;background:#20242d;display:grid;place-items:center;flex:none}.lthumb img{width:100%;height:100%;object-fit:cover}.lthumb .veh-svg{width:80%;color:#5b606b}
.imgs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.imgs label{width:110px;margin:0}.imgs img{width:110px;height:80px;object-fit:cover;border-radius:8px}.imgs span{display:flex;gap:4px;align-items:center;font-weight:500}.imgs input{width:auto;min-height:0;margin:0}
.lead{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f0ede6;align-items:start}.lead.is-new{background:#fffaf0}.lead p{margin:6px 0 0;font-size:14px}
.lead .bmain small,.lead .bmain b{white-space:normal}.lead-act{display:flex;gap:6px;align-items:center}.lead-act form{margin:0}.lead-act select{margin:0;width:auto;min-height:36px;padding:6px}
.tbl{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}td{padding:8px;border-bottom:1px solid #f2efe9}.r{text-align:right}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.menu a{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid #f0ede6;text-decoration:none;font-weight:500}.menu a span{flex:1}.menu a i{color:var(--muted);font-style:normal;font-size:20px}.menu a .i{color:var(--amber2)}
.me-row{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid #f0ede6}.me-row b{display:block}.me-row small{color:var(--muted)}
/* auth */
body.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 400px at 80% -10%,#3b2c10,transparent 60%),var(--ink)}
.auth-card{width:100%;max-width:380px;background:#fff;border-radius:18px;padding:26px}.auth-card h1{font-size:22px;margin-bottom:12px}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:20px}.auth-brand b{display:block;font-size:18px}.auth-brand small{color:var(--muted)}
/* invoice */
.inv-page{background:#e9e6e0;padding:20px 12px 40px}
.inv-bar{max-width:800px;margin:0 auto 14px;display:flex;gap:8px;flex-wrap:wrap}
.invoice{max-width:800px;margin:0 auto;background:#fff;border-radius:6px;padding:40px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.inv-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:3px solid var(--ink)}
.inv-brand{display:flex;gap:12px}.inv-brand b{font-size:20px;display:block}.inv-brand small{display:block;color:var(--muted);font-size:12.5px}
.inv-meta{text-align:right}.inv-meta h1{font-size:28px;letter-spacing:.12em;color:var(--amber2)}.inv-meta p{margin:2px 0;font-size:14px}
.pill{display:inline-block;padding:3px 10px;border-radius:6px;font:700 11px system-ui;letter-spacing:.08em;margin-top:6px!important}.pill.due{background:#fdecec;color:var(--red)}.pill.paid{background:#e3f6e9;color:var(--green)}
.inv-parties{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;padding:22px 0}.inv-parties small{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted)}.inv-parties b{display:block;font-size:16px}.inv-parties span{display:block;font-size:13.5px;color:#4a4e57}
.inv-table th{background:#f4f2ee;padding:10px}.inv-table td{padding:11px 10px}
.inv-sum{margin-left:auto;max-width:300px;padding-top:12px}.inv-sum div{display:flex;justify-content:space-between;padding:5px 0}.inv-sum .bal{border-top:2px solid var(--ink);margin-top:6px;padding-top:10px;font-size:18px;font-weight:800}
.inv-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;text-align:center}
@media print{.no-print{display:none!important}.inv-page{background:#fff;padding:0}.invoice{box-shadow:none;padding:0}}
/* mobile */
@media(max-width:860px){
 .side{display:none}.main{margin-left:0;padding-bottom:calc(76px + var(--safe))}
 .top{padding:12px 14px;background:var(--ink);color:#fff}.top h1{font-size:18px}.tback{background:#262a34;border-color:#262a34;color:#fff}
 .top .btn{background:#262a34;border-color:#262a34;color:#fff}.top .btn.primary{background:var(--amber);border-color:var(--amber);color:#1a1200}
 .content{padding:12px 12px 20px}.main>.alert{margin:10px 12px 0}
 .stats{grid-template-columns:1fr 1fr}.stats .stat.hl{grid-column:1/-1}.stats.three{grid-template-columns:1fr 1fr 1fr}.stats.three .stat.hl{grid-column:auto}.stats.three b{font-size:15px}
 .quick{grid-template-columns:1fr 1fr 1fr}.qbtn{flex-direction:column;gap:4px;font-size:12.5px;text-align:center;padding:12px 6px}
 .g3{grid-template-columns:1fr 1fr}.kv{grid-template-columns:1fr 1fr}.vgrid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}
 .panel{padding:14px;border-radius:12px}.panel:not(.flush) .brow{margin:0 -14px;padding:12px 14px}
 .filters select,.filters input[type=date]{flex:1}
 .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe));justify-content:space-around;align-items:center}
 .tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:11px;color:var(--muted);flex:1}
 .tabs a .i{width:22px;height:22px}
 .tabs .fab{flex:none;width:52px;height:52px;border-radius:16px;background:var(--amber);color:#1a1200;display:grid;place-items:center;margin-top:-22px;box-shadow:0 6px 18px rgba(245,165,36,.45)}
 .tabs .fab .i{width:26px;height:26px}
 .invoice{padding:20px}.inv-head{flex-direction:column}.inv-meta{text-align:left}.inv-parties{grid-template-columns:1fr}
 .lead{flex-direction:column}
}
@media(max-width:420px){.g2{grid-template-columns:1fr}.statusbar{grid-template-columns:1fr 1fr}}

.mode-day .km-only,.mode-km .day-only{display:none!important}.hide{display:none!important}
.seg{display:flex;background:#f1eee8;border-radius:10px;padding:4px;margin-bottom:12px}
.seg label{flex:1;margin:0;text-align:center;position:relative}.seg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.seg span{display:block;padding:9px 6px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:500}
.seg input:checked+span{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);font-weight:700}
.s-quote{background:#f1e8ff;color:#6d28d9}
.quote-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#f6f0ff;border:1px solid #e3d4ff;border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.quote-bar p{flex:1;margin:0;min-width:200px;font-size:14px;color:#4c1d95}
.btn.convert{background:var(--green);border-color:var(--green);color:#fff}
.inv-valid{font-size:13px;color:var(--muted)}
.quick.four{grid-template-columns:repeat(4,1fr)}
.quote-link{display:flex;align-items:center;gap:12px;text-decoration:none;border-color:#e3d4ff;background:#faf6ff}.quote-link .i{color:#6d28d9}.quote-link span{flex:1}.quote-link b,.quote-link small{display:block}.quote-link small{color:var(--muted)}.quote-link i{font-style:normal;font-size:20px;color:var(--muted)}
@media(max-width:860px){.quick.four{grid-template-columns:repeat(2,1fr)}.quick.four .qbtn{flex-direction:row;font-size:13.5px}}

.inv-parties .tour{background:#f7f5f0;border-radius:8px;padding:8px 10px;margin:6px 0;color:#2b2f37;white-space:normal}
.inv-daynote{margin-top:22px;background:#fff6e5;border-left:4px solid var(--amber);padding:12px 14px;border-radius:6px;font-size:14px}
.inv-custom{margin-top:12px;font-size:14px;color:#3c4049}
.ie-row{display:grid;grid-template-columns:1.1fr 1.6fr .9fr auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #f0ede6}
.ie-row input,.ie-row select{margin:0}.ie-row label.check{margin:0;font-size:12.5px;white-space:nowrap}
@media(max-width:700px){.ie-row{grid-template-columns:1fr 1fr}.ie-row .ie-note{grid-column:1/-1;order:3}}
@media print{.inv-daynote{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* pricing switch: hide fields by selected option (works without JS) */
form:has([name=pricing][value=day]:checked) .km-only,
form:has([name=pricing][value=km]:checked) .day-only{display:none!important}

.inv-link{max-width:800px;margin:0 auto 12px;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.inv-link input{margin:0;flex:1;min-height:34px;padding:6px 10px;font-size:13px;background:#fff}
.pdf-mode .invoice{box-shadow:none;border-radius:0;width:740px!important;max-width:none!important;padding:34px!important;margin:0!important}
.pdf-mode .inv-head{flex-direction:row!important}.pdf-mode .inv-meta{text-align:right!important}
.pdf-mode .inv-parties{grid-template-columns:1fr 1.4fr!important}



/* ===== v1.9 Black & Red ===== */
h1,h2,h3{font-family:Saira,system-ui,sans-serif;font-stretch:85%;letter-spacing:-.005em}
.top h1{font-style:italic;font-weight:800;font-size:26px}
input,select,textarea,.btn,button{font-family:Saira,system-ui,sans-serif}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
input,select,textarea{border-radius:8px;font-weight:500}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,6,0,.13)}
label{color:#2e3035;font-weight:700}
.btn{font-weight:700;border-radius:7px;text-align:center}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 18px -8px rgba(225,6,0,.6)}.btn.primary:hover{background:#c10500}
.mark{background:var(--red);color:#fff;font-style:italic;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);border-radius:0;width:42px}

/* sidebar */
.side{background:#0a0a0b;color:#a3a6ad;border-right:1px solid #1d1e22}
.sbrand{border-bottom:1px solid #1d1e22;margin-bottom:6px}.sbrand b{font-style:italic;font-stretch:85%;font-size:18px}
.side nav a{color:#b9bcc2;font-weight:600;position:relative}
.side nav a:hover{background:#17181b;color:#fff}
.side nav a.on{background:#17181b;color:#fff}.side nav a.on:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--red);border-radius:2px}
.side nav a.on .i{color:var(--red)}
.side nav a em{background:var(--red);color:#fff}
.sgroup{color:#62656c;text-transform:none;letter-spacing:0;font-size:13px;font-weight:700}
.sfoot{border-top-color:#1d1e22}.sfoot a:hover{background:#17181b}

/* panels & tiles */
.panel{border-radius:14px}.panel h2{font-size:18px;font-weight:800;font-style:italic}
.panel.warn{background:#fff6f5;border-color:#ffc9c6}
.stat{border-radius:14px;position:relative;overflow:hidden}.stat small{font-weight:600}.stat b{font-weight:800;font-size:24px;font-stretch:85%}
.stat:after{content:"";position:absolute;left:0;top:0;width:36px;height:3px;background:var(--red)}
.stat.hl{background:#0a0a0b;border-color:#0a0a0b}.stat.hl small{color:#9a9ea6}.stat.hl b{color:#fff}
.stat.hl:after{width:100%;height:3px;top:auto;bottom:0}
.qbtn{border-radius:12px;font-weight:700}.qbtn .i{color:var(--red)}.qbtn:hover{border-color:var(--red)}

/* fare calculator = digital dashboard */
.panel.dark{background:linear-gradient(180deg,#151619,#0b0b0c);border-color:#0b0b0c;position:relative;overflow:hidden}
.panel.dark:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.panel.dark h2{color:#fff}.panel.dark label{color:#b9bcc2}
.panel.dark input{background:#1c1d21;border-color:#2a2c31;color:#fff}.panel.dark input:focus{border-color:var(--red)}
.panel.dark .hint{color:#7e828a}
.calc-out{background:#0a0a0b;border:1px solid #232428}
.calc-out .row{color:#9a9ea6}.calc-out .row span{white-space:nowrap}.calc-out .total{flex-wrap:wrap;row-gap:2px;border-top:1px solid #2a2c31}
.calc-out .total b{margin-left:auto;white-space:nowrap;color:var(--red);font-size:clamp(22px,7vw,30px);font-style:italic;font-stretch:85%;text-shadow:0 0 20px rgba(225,6,0,.35)}

/* switches & lists */
.seg{background:#ebebed;gap:4px}.seg span{font-weight:700;color:var(--muted)}
.seg input:checked+span{background:#0a0a0b;color:#fff;box-shadow:inset 0 -3px 0 var(--red)}
.bdate{background:#0a0a0b;color:#fff}.bdate small{color:#ff4d47}
.brow:hover,.crow:hover,.lrow:hover{background:#fafafa}
.av{background:#0a0a0b;color:#fff}
.ref{background:#f1f1f2;color:#3a3c42;font-weight:700}
.chips a.on{background:#0a0a0b;border-color:#0a0a0b}
.xtypes input:checked+span{background:#0a0a0b;border-color:#0a0a0b;box-shadow:inset 0 -2px 0 var(--red)}
.statusbar button{font-weight:700;border-radius:8px;color:var(--text)}
.statusbar button.on{background:#0a0a0b;border-color:#0a0a0b;color:#fff;box-shadow:inset 0 -3px 0 var(--red)}
.kv div{background:#f5f5f6}
.route i{color:var(--red)}
.menu a .i{color:var(--red)}
.badge{font-weight:800;border-radius:5px}
.s-pending{background:#fff1d6;color:#8a5a00}.s-confirmed{background:#0a0a0b;color:#fff}.s-completed{background:#e3f5e9;color:#15803d}.s-quote{background:#ffe9e8;color:#c10500}
.quote-link{background:#fff;border-color:var(--line);border-left:4px solid var(--red)}.quote-link .i{color:var(--red)}
.quote-bar{background:#fff6f5;border-color:#ffc9c6}.quote-bar p{color:#7a1310}
.btn.convert{background:#0a0a0b;border-color:#0a0a0b;color:#fff}
.totals .grand b,.totals .bal b{font-stretch:85%}

/* login */
body.auth{background:radial-gradient(700px 420px at 80% 10%,rgba(225,6,0,.3),transparent 60%),#0a0a0b;position:relative;overflow:hidden}
body.auth:before{content:"";position:fixed;top:-20%;bottom:-20%;right:12%;width:110px;background:var(--red);transform:skewX(-18deg);opacity:.9}
.auth-card{border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);position:relative;z-index:1}
.auth-brand b{font-style:italic;font-stretch:85%;font-size:21px}

/* invoice */
.inv-head{border-bottom:3px solid var(--red)}
.inv-meta h1{color:#0a0a0b;font-style:italic;letter-spacing:.02em}
.inv-brand b{font-style:italic}
.inv-table th{background:#0a0a0b;color:#fff}
.inv-sum .bal{border-top-color:#0a0a0b}.inv-sum .bal b{color:var(--red)}
.inv-daynote{border-left-color:var(--red);background:#fff6f5}

@media(max-width:860px){
 .top{background:#0a0a0b;border-bottom:3px solid var(--red)}
 .top h1{font-size:21px}
 .top .btn{background:#1c1d21;border-color:transparent;color:#fff}
 .top .btn.primary{background:var(--red);color:#fff}
 .tback{background:#1c1d21;border-color:transparent;color:#fff}
 .tabs{background:#0a0a0b;border-top:1px solid #1d1e22}
 .tabs a{color:#8b8f97;font-weight:600}
 .tabs .fab{background:var(--red);color:#fff;box-shadow:0 6px 20px rgba(225,6,0,.5);border-radius:14px;transform:skewX(-8deg)}
 .tabs .fab .i{transform:skewX(8deg)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.calc-out .row{gap:12px}.calc-out .row b{text-align:right}
body{background:#f2f2f3}.inv-page{background:#e9e9eb}
.inv-bar .btn.primary{box-shadow:none}
/* logo */
.sbrand{align-items:center}.sbrand .logo{height:40px;width:auto}
.sbrand b{font-size:13px!important;color:#9a9ea6;letter-spacing:.18em;font-style:italic;border-left:1px solid #2a2c31;padding-left:10px}
.auth-brand{flex-direction:column;align-items:flex-start;gap:8px}.auth-brand .logo{height:58px;width:auto}
.inv-brand{align-items:center}.inv-brand .logo{height:58px;width:auto;flex:none}
.top-logo{display:none}
@media(max-width:860px){.top-logo{display:block;flex:none}.top-logo img{height:30px;width:auto;display:block}}

/* PDF sheet: fixed A4 width, desktop layout regardless of screen size */
.pdf-sheet{width:720px;background:#fff}
.pdf-sheet .invoice{width:720px!important;max-width:none!important;margin:0!important;padding:28px!important;box-shadow:none!important;border-radius:0!important}
.pdf-sheet .inv-head{flex-direction:row!important;justify-content:space-between!important}
.pdf-sheet .inv-meta{text-align:right!important}
.pdf-sheet .inv-parties{grid-template-columns:1fr 1.4fr!important}
.pdf-sheet .inv-daynote{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.html2pdf__container{left:0!important;right:auto!important;margin:0!important}
/* roles */
.roles-help{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.roles-help div{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;padding:10px 12px}
.roles-help b{display:block;font-size:14.5px}.roles-help small{color:var(--muted);font-size:12.5px;line-height:1.35;display:block}
.role-desc{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:5px}
.stat b .sub{font-size:15px;color:#9a9ea6;font-weight:700}
.lock{font-size:14px;opacity:.6;padding:6px}
.opt{font-weight:500;color:var(--muted)}
@media(max-width:860px){.roles-help{grid-template-columns:1fr}}
/* report tabs */
.rtabs{display:flex;gap:6px;margin:0 0 12px;background:#e9e9eb;padding:4px;border-radius:10px;max-width:520px}
.rtabs a{flex:1;text-align:center;padding:9px 6px;border-radius:7px;text-decoration:none;font-weight:700;font-size:14px;color:var(--muted)}
.rtabs a.on{background:#0a0a0b;color:#fff;box-shadow:inset 0 -3px 0 var(--red)}
.drow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #f0ede6;text-decoration:none}
.drow:hover{background:#fafafa}.drow:last-child{border-bottom:0}
.dnums{display:grid;grid-template-columns:repeat(4,minmax(86px,auto));gap:14px;text-align:right}
.dnums small{display:block;font-size:11.5px;color:var(--muted)}.dnums b{font-size:14px;white-space:nowrap}
.chev{font-style:normal;font-size:22px;color:var(--muted)}
.total-row{background:#fafafa}
@media(max-width:760px){.drow{flex-wrap:wrap}.dnums{order:3;width:100%;grid-template-columns:repeat(4,1fr);gap:6px;text-align:left;padding-left:50px}.dnums b{font-size:13px}.chev{margin-left:auto}}
/* v2.6 driver profit */
.txt-ok{color:var(--green)}
.uname{font-weight:500;font-size:12.5px;color:var(--muted);margin-left:4px}
.dnums{grid-template-columns:repeat(5,minmax(84px,auto))}
.dnums .pf b{font-size:15px}
.totals .total-row{font-weight:800;font-size:16px;border-top:2px solid var(--ink,#0a0a0b);padding-top:10px;margin-top:4px}
@media(max-width:760px){.dnums{grid-template-columns:repeat(3,1fr);padding-left:0;row-gap:10px}.dnums .pf{order:-1}}
.totals b{white-space:nowrap}
/* v2.8 showroom / driver expense */
.acct-q{font-weight:700;margin:0 0 8px}
.acct-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.acct-pick label{position:relative;margin:0;cursor:pointer}
.acct-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.acct-pick span{display:block;border:2px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;transition:.15s}
.acct-pick b{display:block;font-size:15px}.acct-pick small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.acct-pick input:checked+span{border-color:var(--red);background:#fff5f5;box-shadow:0 0 0 3px rgba(225,29,42,.12)}
.acct-pick input:focus-visible+span{outline:2px solid var(--red)}
.khata-form .acct-driver{display:none}.khata-form.is-driver .acct-driver{display:block}
.khata-form:has([name=acct][value=driver]:checked) .acct-driver{display:block}
.acct{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;margin-right:2px}
.acct.shw{background:#f1f1f3;color:#333}.acct.drv{background:#fff0f0;color:var(--red)}
/* v2.9 routes & rates */
.form .other-in{display:none}
.form.pickup-is-other .pickup-other,.form.dropoff-is-other.mode-km .dropoff-other{display:block}
.calc-out.no-rate [data-k=total]{font-size:.85em}
.rate-hint{color:var(--red)!important}
.loc-add{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.loc-add input[name=name]{flex:1 1 280px}
.tick{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;font-weight:600;font-size:13.5px;white-space:nowrap}
.tick input{width:auto!important;margin:0}
.loc-list{display:grid;gap:8px}
.loc-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fafafa}
.loc-row input[name=name]{flex:1 1 200px;min-width:0}
.chips .cnt{font-style:normal;background:var(--red);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;margin-left:4px}
.rcard{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;background:#fff}
.rcard h3{margin:0 0 10px;font-size:16px}.rcard .arr{color:var(--red)}
.rgrid{display:grid;grid-template-columns:minmax(90px,1.3fr) 1fr;gap:8px;align-items:center}
.rgrid .rh{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.rgrid .rv{font-weight:600;font-size:14px}
.rgrid input{width:100%;min-width:0}
.rgrid input::placeholder{color:#aaa}
@media(min-width:1000px){.rate-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rate-form .rcard{margin:0}.rate-form .sticky-save{grid-column:1/-1}}
@media(min-width:1000px){.rate-form .sticky-save{position:static;grid-row:auto}}
@media(max-width:600px){.loc-row,.loc-add{gap:8px 12px}.loc-row input[name=name],.loc-add input[name=name]{flex-basis:100%}.loc-row .btn{margin-left:auto}
 .rgrid{grid-template-columns:minmax(78px,1.2fr) 1fr;gap:6px}.rgrid input{padding-left:8px;padding-right:6px}.rgrid .rv{font-size:13px}}
/* v3.0 site analytics */
.stat.live .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-right:4px;box-shadow:0 0 0 3px rgba(22,163,74,.2);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}}
.vchart{display:flex;align-items:flex-end;gap:2px;height:170px;padding:8px 0 0;border-bottom:1px solid var(--line)}
.vc-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative;text-decoration:none;min-width:0}
.vc-bar{width:100%;max-width:22px;background:#d9d9de;border-radius:4px 4px 0 0;transition:.15s}
.vc-col.in .vc-bar{background:var(--red)}
.vc-col:hover .vc-bar{filter:brightness(.85)}
.vc-x{font-size:10px;color:var(--muted);margin-top:4px;height:12px;line-height:12px}
.vc-col[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#0a0a0b;color:#fff;font-size:12px;padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:5;pointer-events:none}
.vchart:has(.vc-col:nth-child(32)) .vc-x{visibility:hidden}.vchart:has(.vc-col:nth-child(32)) .vc-col:nth-child(5n+1) .vc-x{visibility:visible}
@media(max-width:600px){.vchart .vc-col:nth-child(even) .vc-x{visibility:hidden}}
.an-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 14px}
.blist{position:relative;display:flex;justify-content:space-between;gap:10px;padding:7px 10px;margin-bottom:5px;border-radius:8px;overflow:hidden;font-size:14px}
.blist i{position:absolute;left:0;top:0;bottom:0;background:rgba(225,29,42,.11);border-radius:8px;z-index:0}
.blist span{position:relative;z-index:1}.bl-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bl-n{font-weight:700}
.vrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0ede6;text-decoration:none;color:inherit}
.vrow:hover{background:#fafafa}.vrow .bmain{flex:1;min-width:0}.vrow .bmain small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .bend{text-align:right}.vrow .bend small{display:block;color:var(--muted);font-size:11px}
.vrow .av{font-size:18px;background:#f4f4f5}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:#f1f1f3;color:#444;margin-left:4px;vertical-align:1px}
.tag.ev{background:#fff0f0;color:var(--red)}
.vis-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}.vis-top b{display:block;font-size:17px}.vis-top small{color:var(--muted)}
.av.big{width:48px;height:48px;font-size:24px;background:#f4f4f5}
.vday{padding:8px 16px;background:#fafafa;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #f0ede6}
.vhit{display:flex;gap:12px;padding:9px 16px;border-bottom:1px solid #f4f2ec}.vhit .t{font-size:12.5px;color:var(--muted);width:62px;flex:none;padding-top:2px}
.vhit .p{min-width:0}.vhit b{display:block;font-size:14px}.vhit small{display:block;color:var(--muted);font-size:12px;word-break:break-all}
.vhit.ev{background:#fff7f7}.vhit.ev b{color:var(--red)}