/* LotFlow — interface */

:root {
  --ink:        #0a0c10;
  --surface:    #11141a;
  --surface-2:  #171b22;
  --surface-3:  #1d222b;
  --line:       #252b36;
  --line-soft:  #1c212a;
  --text:       #e9edf3;
  --text-2:     #9aa4b2;
  --text-3:     #6b7482;
  --accent:     #ff5f1f;
  --accent-ink: #ffffff;
  --accent-dim: rgba(255, 95, 31, 0.14);
  --good:       #34d399;
  --warn:       #fbbf24;
  --bad:        #f87171;
  --info:       #60a5fa;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --nav-h:      64px;
  --tap:        48px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

[data-theme="light"] {
  --ink:        #f4f6f9;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;
  --surface-3:  #eef2f7;
  --line:       #dde3ec;
  --line-soft:  #e7ecf3;
  --text:       #101623;
  --text-2:     #55606f;
  --text-3:     #7b8695;
  --accent:     #e8501a;
  --accent-dim: rgba(232, 80, 26, 0.10);
  --good:       #0f9d63;
  --warn:       #b97a09;
  --bad:        #d2453f;
  --info:       #2563eb;
  --shadow:     0 1px 2px rgba(16,22,35,.06), 0 8px 24px rgba(16,22,35,.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
.ic { width: 18px; height: 18px; flex: none; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #fff; }

/* ---------------- app shell ---------------- */
#app { min-height: 100%; display: flex; flex-direction: column; }

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; }
.brand-tag { font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }

.nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500; font-size: 14px;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav a .ic { width: 18px; height: 18px; flex: none; }
.nav a .count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--text-2);
  padding: 2px 7px; border-radius: 20px; min-width: 22px; text-align: center;
}
.nav a.on .count { background: var(--accent); color: #fff; }

.sidebar-foot { padding: 10px; border-top: 1px solid var(--line-soft); }
.userchip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm); text-align: left;
}
.userchip:hover { background: var(--surface-2); }
.userchip .who { min-width: 0; }
.userchip .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .rl { font-size: 11px; color: var(--text-3); }

.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--text-2);
}
.avatar.lg { width: 40px; height: 40px; font-size: 13px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.page-title { font-size: 19px; font-weight: 680; letter-spacing: -0.02em; }
.page-sub { font-size: 12px; color: var(--text-3); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.searchbox {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; min-width: 260px;
  color: var(--text-3); font-size: 13px; white-space: nowrap;
}
.searchbox:hover { border-color: var(--accent); color: var(--text-2); }
.searchbox kbd {
  margin-left: auto; font: 600 10px var(--mono);
  background: var(--surface-3); border: 1px solid var(--line);
  padding: 2px 5px; border-radius: 5px;
}

.content { padding: 22px; max-width: 1360px; width: 100%; }

/* ---------------- generic ui ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.card.pad-0 { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.card-head .right { margin-left: auto; }

.grid { display: grid; gap: 14px; }
.grid.top { align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 10px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 13.5px; font-weight: 600;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn.block { width: 100%; }
.btn.big { padding: 15px 20px; font-size: 15.5px; border-radius: 12px; min-height: var(--tap); }
.btn.sm { padding: 6px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .ic { width: 17px; height: 17px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid transparent; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* status tones */
.t-slate   { color:#94a3b8; background:rgba(148,163,184,.12); }
.t-amber   { color:#fbbf24; background:rgba(251,191,36,.13); }
.t-blue    { color:#60a5fa; background:rgba(96,165,250,.13); }
.t-cyan    { color:#22d3ee; background:rgba(34,211,238,.12); }
.t-violet  { color:#a78bfa; background:rgba(167,139,250,.14); }
.t-indigo  { color:#818cf8; background:rgba(129,140,248,.14); }
.t-green   { color:#4ade80; background:rgba(74,222,128,.13); }
.t-teal    { color:#2dd4bf; background:rgba(45,212,191,.13); }
.t-orange  { color:#fb923c; background:rgba(251,146,60,.14); }
.t-emerald { color:#34d399; background:rgba(52,211,153,.14); }
.t-gray    { color:#8b95a5; background:rgba(139,149,165,.12); }
[data-theme="light"] .t-slate{color:#516073;background:rgba(81,96,115,.10)}
[data-theme="light"] .t-amber{color:#a16207;background:rgba(161,98,7,.10)}
[data-theme="light"] .t-blue{color:#1d4ed8;background:rgba(29,78,216,.09)}
[data-theme="light"] .t-cyan{color:#0e7490;background:rgba(14,116,144,.10)}
[data-theme="light"] .t-violet{color:#6d28d9;background:rgba(109,40,217,.09)}
[data-theme="light"] .t-indigo{color:#4338ca;background:rgba(67,56,202,.09)}
[data-theme="light"] .t-green{color:#15803d;background:rgba(21,128,61,.10)}
[data-theme="light"] .t-teal{color:#0f766e;background:rgba(15,118,110,.10)}
[data-theme="light"] .t-orange{color:#c2410c;background:rgba(194,65,12,.10)}
[data-theme="light"] .t-emerald{color:#047857;background:rgba(4,120,87,.10)}
[data-theme="light"] .t-gray{color:#4b5563;background:rgba(75,85,99,.09)}

.prio-high   { color: var(--bad); }
.prio-medium { color: var(--warn); }
.prio-low    { color: var(--text-3); }

.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -0.01em; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- dashboard ---------------- */
.goal-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px;
}
.goal-card::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 26px, color-mix(in srgb, var(--text) 4%, transparent) 26px 28px);
  opacity: .5; pointer-events: none;
}
.goal-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.goal-num { font-size: 54px; font-weight: 750; letter-spacing: -0.035em; line-height: .95; }
.goal-num span { color: var(--text-3); font-size: 28px; font-weight: 600; }
.goal-meta { display: flex; flex-direction: column; gap: 2px; padding-bottom: 5px; }
.goal-pct { font-size: 15px; font-weight: 700; color: var(--accent); }

.track {
  position: relative; z-index: 1;
  height: 12px; border-radius: 999px; margin-top: 16px;
  background: var(--surface-3); overflow: hidden;
}
.track .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ff8c4a); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.track .pace-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: .55; }
.goal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; position: relative; z-index: 1; font-size: 12px; color: var(--text-2); }
.goal-legend b { color: var(--text); font-weight: 650; }

.stat { display: flex; flex-direction: column; gap: 3px; }
.stat .v { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.stat .l { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.stat .sub { font-size: 12px; color: var(--text-2); }

/* funnel */
.funnel { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 16px; }
.funnel-row {
  display: grid; grid-template-columns: 118px 1fr 44px; align-items: center; gap: 12px;
  padding: 7px 0; border-radius: 8px;
}
.funnel-row:hover { background: var(--surface-2); }
.funnel-row .fl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.funnel-bar { height: 22px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); opacity: .85; transition: width .5s; }
.funnel-row .fv { font-size: 15px; font-weight: 700; text-align: right; letter-spacing: -0.02em; }
.funnel-row.hot .funnel-bar i { background: var(--warn); }

/* insights */
.insight {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; line-height: 1.4;
}
.insight:last-child { border-bottom: none; }
.insight:hover { background: var(--surface-2); }
.insight .bulb { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--info); }
.insight.warn .bulb { background: var(--warn); }
.insight.bad .bulb { background: var(--bad); }
.insight.good .bulb { background: var(--good); }

/* ---------------- tables / lists ---------------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--text); }
table.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tbl tbody tr { cursor: pointer; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
.stock-cell { font-family: var(--mono); font-weight: 650; letter-spacing: -0.02em; }
.ymm { font-weight: 600; }
.ymm small { display: block; color: var(--text-3); font-weight: 500; font-size: 11.5px; }

.age-chip { font-family: var(--mono); font-size: 12px; font-weight: 650; }
.age-31-60, .age-60\+ { color: var(--bad); }
.age-15-30 { color: var(--warn); }

/* filter bar */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.field {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0 10px; height: 38px;
}
.field label { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.field select, .field input {
  background: transparent; border: none; outline: none;
  font-size: 13px; font-weight: 550; padding: 8px 0; max-width: 180px;
}
.field select { cursor: pointer; }
.field:focus-within { border-color: var(--accent); }

/* ---------------- vehicle page ---------------- */
.veh-head {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.veh-title { font-size: 25px; font-weight: 720; letter-spacing: -0.03em; line-height: 1.15; }
.veh-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.veh-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px,1fr));
  gap: 2px 14px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft);
}
.fact .k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fact .v { font-size: 14px; font-weight: 620; margin-top: 1px; }

.stepper { display: flex; gap: 4px; overflow-x: auto; padding: 14px 16px; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.step {
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; border-radius: 9px; min-width: 96px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-3); text-align: left;
}
.step .sl { font-weight: 650; font-size: 12px; }
.step.done { color: var(--text-2); }
.step.done .sl { color: var(--text); }
.step.done::before { content: '✓'; font-size: 10px; color: var(--good); font-weight: 800; }
.step.now { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.step.now .sl { color: var(--accent); }
.step .st { font-family: var(--mono); font-size: 10px; opacity: .8; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.tab .n { font-size: 11px; color: var(--text-3); margin-left: 4px; }

/* action rail */
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }

/* photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.photo-tile {
  position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line-soft);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 6px; font-size: 10.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
}
.photo-tile .kill {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(10,12,16,.72); color: #fff;
  display: grid; place-items: center; opacity: 0; transition: opacity .12s;
}
.photo-tile:hover .kill { opacity: 1; }
.photo-tile.slot {
  display: grid; place-items: center; border: 1px dashed var(--line);
  background: transparent; color: var(--text-3); font-size: 11px;
  font-weight: 650; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 8px;
}
.photo-tile.slot.missing { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }

.cat-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.cat-head h4 { margin: 0; font-size: 13px; font-weight: 650; }
.cat-head .cnt { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }

.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(4,6,9,.94);
  display: grid; place-items: center; padding: 20px;
}
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; }
.lightbox .lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 14px; align-items: center; color: #fff; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; display: grid; place-items: center; }
.lightbox .lb-prev { left: 14px; } .lightbox .lb-next { right: 14px; }

/* timeline */
.timeline { position: relative; padding: 6px 16px 16px 16px; }
.tl-item { position: relative; display: flex; gap: 12px; padding: 9px 0 9px 4px; }
.tl-item::before {
  content: ''; position: absolute; left: 8px; top: 26px; bottom: -9px; width: 1px; background: var(--line);
}
.tl-item:last-child::before { display: none; }
.tl-dot { width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 3px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line); z-index: 1; }
.tl-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.tl-item.status .tl-dot i { background: var(--accent); }
.tl-item.sale .tl-dot i { background: var(--good); }
.tl-item.issue .tl-dot i { background: var(--bad); }
.tl-body { min-width: 0; }
.tl-text { font-size: 13.5px; }
.tl-meta { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* today lanes */
.lane-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.lane-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lane-head .n { font-size: 22px; font-weight: 750; letter-spacing: -0.03em; margin-left: auto; }

.task {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.task:last-child { border-bottom: none; }
.task:hover { background: var(--surface-2); }
.task .tinfo { min-width: 0; flex: 1; cursor: pointer; }
.task .tmain { font-size: 14px; font-weight: 620; letter-spacing: -0.01em; }
.task .tmeta { font-size: 11.5px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.task .tgo { flex: none; }
.prio-bar { width: 3px; align-self: stretch; border-radius: 3px; background: var(--text-3); flex: none; }
.prio-bar.high { background: var(--bad); }
.prio-bar.medium { background: var(--warn); }
.prio-bar.low { background: var(--line); }

/* empty states */
.empty { padding: 34px 20px; text-align: center; color: var(--text-3); }
.empty .big { font-size: 15px; font-weight: 620; color: var(--text-2); margin-bottom: 4px; }

/* ---------------- modal / sheet ---------------- */
.scrim {
  position: fixed; inset: 0; z-index: 150; background: rgba(4,6,9,.62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow); overflow: hidden;
}
.modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -0.02em; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.modal-foot .btn { flex: 1; }

.form-row { margin-bottom: 13px; }
.form-row > label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 5px;
}
.input, select.input, textarea.input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 12px; outline: none;
  font-size: 15px; font-weight: 550; min-height: 44px;
}
.input:focus { border-color: var(--accent); }
textarea.input { min-height: 88px; resize: vertical; line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.chip-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-select button {
  padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  min-height: 40px;
}
.chip-select button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* search palette */
.palette { align-items: flex-start; padding-top: 12vh; }
.palette .modal { width: min(620px, 100%); }
.palette-input {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 19px; font-weight: 550; padding: 18px 18px; letter-spacing: -0.01em;
}
.palette-results { max-height: 52vh; overflow-y: auto; border-top: 1px solid var(--line-soft); }
.presult { display: flex; align-items: center; gap: 12px; padding: 11px 16px; width: 100%; text-align: left; }
.presult:hover, .presult.cursor { background: var(--surface-2); }
.presult .pstock { font-family: var(--mono); font-weight: 700; font-size: 13.5px; min-width: 58px; }
.presult .pmain { flex: 1; min-width: 0; }
.presult .pt { font-size: 13.5px; font-weight: 600; }
.presult .pm { font-size: 11.5px; color: var(--text-3); }

/* toast */
.toasts { position: fixed; z-index: 300; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 18px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: min(420px, calc(100% - 28px)); }
.toast {
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  padding: 11px 15px; border-radius: 11px; font-size: 13.5px; font-weight: 560;
  box-shadow: var(--shadow); animation: pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.toast.good { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.toast.bad  { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------------- mobile ---------------- */
.tabbar { display: none; }
.mobile-only { display: none; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  button.mobile-only, a.mobile-only { display: inline-flex; }
  .content { padding: 14px 14px calc(var(--nav-h) + 34px); }
  .topbar { padding: 11px 14px; }
  .page-title { font-size: 17px; }
  .searchbox { min-width: 0; flex: 1; }
  .searchbox kbd { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .grid.g4.stats-row { grid-template-columns: 1fr 1fr; }
  .goal-num { font-size: 46px; }
  .veh-title { font-size: 21px; }
  .actions { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .modal { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; margin-top: auto; }
  .scrim { padding: 0; align-items: flex-end; }
  .palette { padding: 0; }
  .palette .modal { border-radius: 16px 16px 0 0; }
  .modal-foot .btn { min-height: var(--tap); }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 10px; font-weight: 650; color: var(--text-3); letter-spacing: .01em;
    border-radius: 10px; padding: 4px 2px;
  }
  .tabbar a .ic { width: 21px; height: 21px; }
  .tabbar a.on { color: var(--accent); }
  .tabbar a.scan { color: var(--accent); }
  .tabbar a.scan .scan-btn {
    width: 46px; height: 46px; border-radius: 15px; margin-top: -16px;
    background: var(--accent); color: #fff; display: grid; place-items: center;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .tabbar a.scan .scan-btn .ic { width: 24px; height: 24px; }
  table.tbl th:nth-child(n+5), table.tbl td:nth-child(n+5) { display: none; }
  .toasts { bottom: calc(var(--nav-h) + 22px); }
}

@media (min-width: 901px) { .tabbar { display: none; } }

/* scanner */
.scanner { position: fixed; inset: 0; z-index: 220; background: #000; display: flex; flex-direction: column; }
.scanner video { flex: 1; width: 100%; object-fit: cover; }
.scan-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(74vw, 300px); aspect-ratio: 1; border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.75);
}
/* VIN barcodes are long and thin, so the reticle is too */
.scan-frame.wide { width: min(92vw, 460px); aspect-ratio: 3.2 / 1; border-radius: 12px; }
.scan-frame.wide::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%;
  height: 2px; background: var(--accent); opacity: .85;
  box-shadow: 0 0 12px var(--accent);
}
.scan-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 16px; color: #fff; }
.scan-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px calc(26px + env(safe-area-inset-bottom,0px)); color: #fff; text-align: center; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.keypad button { height: 56px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 21px; font-weight: 650; }

/* sign-in */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin-card { width: min(420px, 100%); }
.signin .brand-big { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.signin .brand-big .mark { width: 62px; height: 62px; }
.signin h1 { margin: 0; font-size: 27px; font-weight: 740; letter-spacing: -0.035em; }
.signin .tagline { font-size: 12.5px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.who-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); margin-bottom: 8px;
  min-height: 62px;
}
.who-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.who-btn .nm { font-size: 14.5px; font-weight: 650; }
.who-btn .rl { font-size: 12px; color: var(--text-3); }
.who-btn .tag { margin-left: auto; }

.demo-banner {
  display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600;
  padding: 8px 14px; background: var(--accent-dim); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
}

.loading { min-height: 100vh; display: grid; place-items: center; color: var(--text-3); }
.spin { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

@media print {
  .sidebar, .tabbar, .topbar-actions, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}