/* MechHead — clean product UI. No builder branding. */
:root {
  --ink: #1c2430;
  --muted: #67717f;
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #e3e8ef;
  --navy: #022044;
  --navy-2: #0a3060;
  --accent: #084888;
  --accent-dark: #022044;
  --blue: #2563eb;
  --green: #15803d;
  --green-bg: #e8f5ec;
  --red: #b91c1c;
  --red-bg: #fdecec;
  --amber: #b45309;
  --amber-bg: #fdf3e3;
  --radius: 12px;
  --input: #ffffff;
  --chip: #eef1f6;
  --surface2: #fbfcfe;
  --shadow: 0 1px 3px rgba(20, 28, 43, 0.08), 0 4px 14px rgba(20, 28, 43, 0.06);
}
* { box-sizing: border-box; }
/* The hidden attribute always wins — several components (.btn, .card)
   set their own display, which would otherwise defeat hidden toggling. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 0; }
.muted { color: var(--muted); margin: 0.25rem 0 0; }
.small { font-size: 0.82rem; }
a { color: var(--blue); }

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, #084888 100%);
}
.auth-card {
  background: var(--card);
  border-radius: 16px;
  padding: 2.25rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
}
.auth-sub { color: var(--muted); margin: 0.25rem 0 1.5rem; }
.auth-forgot { margin: 0.9rem 0 0; font-size: 0.9rem; text-align: center; }
.auth-note { color: var(--muted); font-size: 0.92rem; margin: 0 0 1rem; }
.form-note {
  background: var(--green-bg, #e7f6ec); color: var(--green, #1c7a3d);
  border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.88rem; margin-bottom: 0.85rem;
}
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.auth-tab {
  flex: 1;
  padding: 0.55rem;
  border: 1px solid var(--line);
  background: var(--input);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.25rem; }
.brand-logo { width: 230px; max-width: 85%; height: auto; display: block; }
.brand-auth { justify-content: center; }
.brand-icon { width: 38px; height: 38px; border-radius: 10px; display: block; }

/* ---------- Shell / top bar ----------
   Standing rule (Kevin, 2026-11-03): the navigation bar stays toward
   the TOP of the screen on every viewport and stays reachable while
   scrolling. One pattern everywhere: a sticky top bar (the sidebar
   layout is retired — on phones it scrolled away with the page and
   buried the workspace under a tall static block). Sticky, not fixed,
   so the bar holds its own space in the flow and content can never
   slide underneath it. Secondary items (support links, Display
   controls) live in a drop-down panel from the bar, keeping the bar
   itself to one slim row. */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy); color: #dbe2ee;
  box-shadow: 0 2px 10px rgba(2, 32, 68, 0.35);
}
.topbar-main {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.55rem 1rem;
}
.topbar .brand { color: #fff; font-size: 1.08rem; flex: 0 0 auto; }
.topbar .brand-icon { width: 32px; height: 32px; border-radius: 8px; }
.topbar nav {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar-side { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; flex: 0 0 auto; }
.nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
  color: #c4cddd; text-decoration: none;
  font-weight: 500; font-size: 0.95rem;
  white-space: nowrap; flex: 0 0 auto;
}
.nav-link:hover { background: var(--navy-2); color: #fff; }
.nav-link.active { background: var(--navy-2); color: #fff; box-shadow: inset 0 -3px 0 #F8C808; }
.nav-link.disabled { opacity: 0.45; cursor: not-allowed; }
.nav-link .soon {
  margin-left: auto; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.12); padding: 0.1rem 0.45rem; border-radius: 20px;
}
.user-chip { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.user-email { font-size: 0.85rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.user-tier { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8fc3ff; }
.topbar-panel {
  position: absolute; top: 100%; right: 0.75rem;
  width: min(320px, calc(100vw - 1.5rem));
  background: var(--navy-2); border: 1px solid rgba(255,255,255,0.14); border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 0.9rem; box-shadow: 0 14px 34px rgba(2, 32, 68, 0.45);
}
.topbar-panel .btn-support { display: flex; width: 100%; margin: 0 0 0.6rem; }
.topbar-panel .dispctl:last-child { margin-bottom: 0; }

.main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 2rem 2.25rem; }

/* Top bar on tablet/phone: brand + account stay on row one and the nav
   becomes a horizontally scrollable row inside the same sticky bar —
   the destinations stay visible at the top, never scrolled away. */
@media (max-width: 1120px) {
  .topbar-main { flex-wrap: wrap; row-gap: 0.4rem; }
  .topbar nav { order: 3; flex: 0 0 100%; padding-bottom: 0.1rem; }
}
@media (max-width: 560px) {
  .topbar .brand-name { display: none; }
  .topbar .user-email { display: none; }
  .user-chip { text-align: left; }
}

/* ---------- Page / cards ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.clickable { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,28,43,0.1); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow); }
.stat .num { font-size: 1.9rem; font-weight: 750; letter-spacing: -0.02em; }
.stat .lbl { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat.alert .num { color: var(--red); }

.vehicle-card h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.vehicle-card .vsub { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.6rem; }
.vehicle-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pill {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  padding: 0.18rem 0.6rem; border-radius: 20px; background: var(--chip); color: var(--muted);
}
.pill.due { background: var(--amber-bg); color: var(--amber); }
.pill.ok { background: var(--green-bg); color: var(--green); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* ---------- Vehicle detail ---------- */
.back-link { display: inline-block; margin-bottom: 1rem; text-decoration: none; font-weight: 500; }
.vehicle-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; align-items: flex-start; }
.vehicle-sub { color: var(--muted); margin: 0.2rem 0 0.8rem; }
.mileage-row { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.mileage-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.mileage-input { width: 140px; }
.type-badge {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--navy); color: #fff; padding: 0.3rem 0.7rem; border-radius: 20px;
}

.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 0.9rem; }
.section-actions { display: flex; gap: 0.6rem; }

.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip-filter {
  border: 1px solid var(--line); background: var(--input); border-radius: 20px;
  padding: 0.35rem 0.9rem; font-size: 0.85rem; cursor: pointer; color: var(--muted); font-weight: 500;
}
.chip-filter.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.task-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.task-card .desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.6rem; }
.task-meta { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.cat-chip { background: #eaf0fb; color: #2b4a8f; }
.pri-high { background: var(--red-bg); color: var(--red); }
.pri-medium { background: var(--amber-bg); color: var(--amber); }
.pri-low { background: var(--chip); color: var(--muted); }
.due-line { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.7rem; }
.task-card.done { opacity: 0.75; }
.task-card.done h3 { text-decoration: line-through; }

.service-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.service-row:last-child { border-bottom: none; }
.service-row .t { font-weight: 600; }
.service-row .m { color: var(--muted); font-size: 0.85rem; }
.service-row .cost { font-weight: 700; white-space: nowrap; }

/* ---------- Forms / dialogs ---------- */
label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.85rem; }
input, select {
  font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.55rem 0.7rem; background: var(--input); color: var(--ink); width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.opt { font-weight: 400; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.85rem; }

.dlg { border: none; border-radius: 16px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,0.25); background: var(--card); color: var(--ink); }
.dlg::backdrop { background: rgba(20, 28, 43, 0.55); }
.dlg-form { padding: 1.6rem; }
.dlg-form h2 { margin-bottom: 1.1rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }
.form-error {
  background: var(--red-bg); color: var(--red);
  border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.88rem; margin-bottom: 0.85rem;
}
.preset-row { margin-bottom: 0.9rem; }
.preset-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 0.45rem; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.preset-chip {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: var(--input); color: var(--accent); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.75rem;
}
.preset-chip:hover { border-color: var(--accent); }
.preset-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* VIN decode (2026-11-03): the box at the top of the Add-vehicle form and
   the vehicle page's factory-specs card. */
.vin-decode-box {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 0.85rem 0.95rem; margin-bottom: 1rem; background: var(--surface2);
}
.vin-decode-row { display: flex; gap: 0.6rem; align-items: flex-end; }
.vin-decode-row label { flex: 1; margin: 0; }
.vin-decode-row .btn { white-space: nowrap; }
.vin-note { border-radius: 8px; padding: 0.55rem 0.75rem; font-size: 0.88rem; margin: 0.7rem 0 0; }
.vin-note.ok { background: var(--green-bg); color: var(--green); font-weight: 600; }
.vin-note.info { background: var(--amber-bg); color: var(--amber); }
.factory-specs { margin: 0 0 1rem; padding: 1rem 1.15rem; }
.factory-specs h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.spec-grid { display: flex; flex-wrap: wrap; gap: 0.45rem 1.6rem; }
.spec-item { font-size: 0.92rem; }
.spec-item .spec-k { color: var(--muted); font-weight: 600; margin-right: 0.35rem; }
/* Vehicle intelligence (2026-11-03, Research sweep) */
.intel-block { padding: 0.55rem 0 0.35rem; border-bottom: 1px solid var(--line, #e3e8f0); }
.intel-block:last-child { border-bottom: none; }
.intel-block-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.intel-block .m, .intel-value-line { margin: 0.25rem 0; }
.intel-stars { font-size: 1.25rem; letter-spacing: 0.15em; color: #F8C808; line-height: 1.2; }
.intel-stars-num { font-size: 0.9rem; letter-spacing: normal; color: var(--ink); margin-left: 0.5rem; vertical-align: middle; }
.intel-web-card { border-left: 4px solid var(--accent); }
.intel-verify { font-weight: 600; background: var(--amber-bg); color: var(--amber); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.88rem; }
.intel-list { margin: 0.3rem 0 0.7rem; padding-left: 1.2rem; }
.intel-web-card h4 { margin: 0.8rem 0 0.35rem; font-size: 0.95rem; }
.schedule-nudge {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--green-bg); color: var(--ink); border-radius: var(--radius);
  padding: 0.8rem 1rem; margin: 0 0 1rem; font-size: 0.95rem;
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: 0.9rem;
  border-radius: 9px; padding: 0.6rem 1.1rem;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary { background: var(--input); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--surface2); }
.btn-ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,0.25); color: #dbe2ee; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-sm { padding: 0.45rem 0.8rem; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-danger-ghost { background: transparent; border: 1px solid var(--line); color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-bg); }
.btn-support {
  background: #F8C808; color: #022044; font-weight: 700;
  text-decoration: none; text-align: center;
  box-shadow: 0 1px 3px rgba(20, 28, 43, 0.18);
}
.btn-support:hover { background: #ffd92e; color: #022044; }
.auth-card .btn-support { margin-top: 1rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 0.7rem 1.2rem;
  border-radius: 10px; box-shadow: var(--shadow); z-index: 100;
  font-size: 0.9rem;
}

.placeholder { text-align: center; padding: 3rem 2rem; }
.placeholder h2 { margin-bottom: 0.5rem; }

/* ---------- Phase 10: nav badge, photos, fuel, inspections, docs, recalls ---------- */
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  padding: 0.22rem 0.45rem; border-radius: 20px;
}
.vehicle-card { padding: 0; overflow: hidden; }
.vehicle-img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--navy); }
.vc-body { padding: 1.15rem 1.25rem; }

.vehicle-head { align-items: stretch; }
.vehicle-photo { width: 190px; min-height: 130px; object-fit: cover; border-radius: 9px; background: var(--navy); flex-shrink: 0; }
.vehicle-head-main { flex: 1; }
.photo-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; align-items: center; }
.photo-upload-label { margin-bottom: 0; cursor: pointer; }

.doc-row, .fuel-row, .insp-row, .recall-row, .reminder-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line); align-items: flex-start;
}
.doc-row:last-child, .fuel-row:last-child, .insp-row:last-child, .recall-row:last-child, .reminder-row:last-child { border-bottom: none; }
.doc-row .t, .fuel-row .t, .insp-row .t, .recall-row .t, .reminder-row .t { font-weight: 600; }
.email-reminders-card { margin-bottom: .9rem; }
.email-reminders-toggle { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.email-reminders-toggle input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: #084888; flex: none; }
/* Tier-locked panels (2026-10-26): shown to Personal users where a
   Premium/Fleet feature lives. The server gate is the real lock — these
   panels are the visible explanation that stands in its place. */
.locked-panel { display: flex; gap: .7rem; align-items: flex-start; }
.locked-panel .locked-lock { font-size: 1.2rem; line-height: 1.35; }
.locked-panel p { margin: 0; }
.locked-card h2 { margin-top: 0; }
.doc-row .m, .fuel-row .m, .insp-row .m, .recall-row .m, .reminder-row .m { color: var(--muted); font-size: 0.85rem; }
.row-actions { display: flex; gap: 0.45rem; flex-shrink: 0; align-items: center; }
.reminder-row.dismissed { opacity: 0.55; }
.reminder-row .t a { color: var(--ink); text-decoration: none; }
.reminder-row .t a:hover { text-decoration: underline; }

.dlg-wide { width: min(720px, 96vw); }
.insp-item { border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.9rem; margin-bottom: 0.7rem; }
.insp-item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; font-weight: 600; }
.insp-item-head .safety { color: var(--red); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.seg { display: flex; gap: 0.45rem; }
.seg button {
  flex: 1; font: inherit; font-weight: 600; font-size: 0.95rem;
  padding: 0.65rem 0.5rem; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--input); color: var(--muted);
  min-height: 48px;
}
.seg button.sel-pass { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.seg button.sel-fail { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.seg button.sel-na { background: var(--chip); border-color: var(--muted); color: var(--ink); }
.insp-item .fail-extra { margin-top: 0.6rem; }
.insp-item .fail-extra label { margin-bottom: 0.5rem; }
.insp-fail-list { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--red); font-size: 0.88rem; }

/* ---- Tire pressure (2026-10-23) ---- */
.tire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.7rem; }
.tire-cell { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.85rem; background: var(--surface2); }
.tire-cell.spare { grid-column: 1 / -1; }
.tire-cell.ok { background: var(--green-bg); border-color: #bfe3cb; }
.tire-cell.low, .tire-cell.high { background: var(--amber-bg); border-color: #f0dcb4; }
.tire-cell.critical { background: var(--red-bg); border-color: #f3c2c2; }
.tire-cell.unset { background: var(--chip); }
.tire-pos { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tire-psi { font-size: 1.45rem; font-weight: 750; letter-spacing: -0.01em; }
.tire-unit { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.tire-sub { font-size: 0.82rem; color: var(--muted); }
.tire-cell.ok .tire-sub { color: var(--green); }
.tire-cell.low .tire-sub, .tire-cell.high .tire-sub { color: var(--amber); }
.tire-cell.critical .tire-sub { color: var(--red); font-weight: 700; }
.tire-hist-head { font-size: 0.95rem; margin: 1rem 0 0.25rem; }
.tire-hist-row { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.tire-hist-row:last-child { border-bottom: none; }
.tire-hist-row .t { font-weight: 600; font-size: 0.9rem; }
.tire-hist-row .m { color: var(--muted); font-size: 0.85rem; }
.tire-flag.low, .tire-flag.high { color: var(--amber); font-weight: 700; }
.tire-flag.critical { color: var(--red); font-weight: 700; }

/* ---- Parts Advisor chat (Phase 5) ---- */
.chat-setup h2 { margin-top: 0; }
.chat-card { display: flex; flex-direction: column; gap: 0.75rem; }
.chat-log { display: flex; flex-direction: column; gap: 0.9rem; max-height: 62vh; overflow-y: auto; padding: 0.25rem; }
.msg { max-width: 88%; }
.msg.user { align-self: flex-end; }
.msg.user .msg-body { background: var(--navy); color: #fff; border-radius: 14px 14px 4px 14px; padding: 0.6rem 0.85rem; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; width: 100%; }
.msg-who { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--navy); font-size: 0.85rem; margin-bottom: 0.3rem; }
.msg-who img { width: 22px; height: 22px; border-radius: 6px; }
.msg.assistant .msg-body { background: #f2f6fb; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 0.7rem 0.9rem; }
.msg-body.md p { margin: 0 0 0.6rem; }
.msg-body.md p:last-child { margin-bottom: 0; }
.msg-body.md ul, .msg-body.md ol { margin: 0.2rem 0 0.6rem 1.2rem; padding: 0; }
.msg-body.md code { background: #e4ebf4; border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.88em; }
.md-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.7rem; font-size: 0.92rem; background: #fff; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 0.4rem 0.55rem; text-align: left; }
.md-table th { background: #e8eff8; color: var(--navy); }
.chat-status { color: var(--muted); font-size: 0.9rem; font-style: italic; }
.chat-composer { display: flex; gap: 0.6rem; align-items: flex-end; }
.chat-composer textarea {
  flex: 1; resize: vertical; min-height: 46px; max-height: 150px;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
@media (max-width: 760px) {
  .msg { max-width: 96%; }
  .chat-log { max-height: 55vh; }
}

@media (max-width: 760px) {
  .main { padding: 1.25rem; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .vehicle-head { flex-direction: column; }
  .vehicle-photo { width: 100%; height: 180px; }
}

/* ---- History report (2026-10-25) ---- */
.report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.report-toolbar .back-link { margin-bottom: 0; }
.report {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.75rem 2rem;
}
.report-head {
  display: flex; gap: 1.1rem; align-items: center;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 1.1rem; margin-bottom: 1.25rem;
}
.report-icon { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; }
.report-head h1 { font-size: 1.45rem; }
.report-vehicle { font-size: 1.05rem; font-weight: 650; margin-top: 0.15rem; }
.report-stats { margin-bottom: 0.25rem; }
.report-section { margin-top: 1.5rem; }
.report-section h2 {
  font-size: 1.05rem; border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem; margin-bottom: 0.35rem;
}
.report .m { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0; }
.report-foot {
  margin-top: 1.75rem; border-top: 1px solid var(--line);
  padding-top: 0.9rem; color: var(--muted); font-size: 0.82rem;
}
.report-foot p { margin: 0 0 0.4rem; }

/* ---- Membership / billing (2026-10-29) ---- */
.membership-launch-note { margin-bottom: 1.5rem; border-color: var(--amber); background: var(--amber-bg); }
.membership-launch-note h2 { margin-top: 0; }
#membership-current { margin-bottom: 0.5rem; }
#membership-current h2 { margin-top: 0; }
.plan-card { display: flex; flex-direction: column; }
.plan-card.plan-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan-card h3 { margin: 0 0 0.15rem; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.plan-price { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.01em; margin: 0.6rem 0 0.4rem; color: var(--navy); }
.plan-features { margin: 0.2rem 0 1rem; padding-left: 1.15rem; color: var(--muted); font-size: 0.92rem; }
.plan-features li { margin-bottom: 0.3rem; }
.plan-actions { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; }

/* Ad slots (2026-10-31) — filled ONLY for ad-supported accounts; the server
   decides via GET /api/ads and the containers are removed when no ad fills
   them, so ad-free plans never see a slot or an empty gap. The card carries
   MechHead's navy gradient with a Gear Yellow "Ad" label on every creative
   (honesty now, network compliance later). */
.ad-slot { margin-bottom: 1.5rem; }
.ad-card {
  position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--navy), var(--navy-2));
  color: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}
.ad-tag {
  position: absolute; top: 0.55rem; right: 0.65rem;
  background: #F8C808; color: var(--navy);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.12rem 0.42rem; border-radius: 4px;
}
.ad-body { min-width: 220px; flex: 1; }
.ad-headline { display: block; font-size: 1.02rem; }
.ad-text { margin: 0.2rem 0 0; color: #c9dcf2; font-size: 0.9rem; }
.ad-cta { color: var(--navy); flex-shrink: 0; }
.ad-cta:hover { filter: brightness(1.07); }

/* QR labels & Scan (2026-11-03): a label is a 3.3in card — QR, nickname,
   year/make/model, Code 128 strip — printable from the vehicle page or
   as a garage sheet. */
.qr-label-wrap { display: flex; justify-content: center; padding: 0.5rem 0 2rem; }
.qr-label {
  width: 3.3in; max-width: 100%; background: #fff; color: var(--ink);
  border: 2px solid var(--navy); border-radius: 12px;
  padding: 0.85rem 0.6rem 0.7rem; text-align: center; break-inside: avoid;
}
.qr-label .qr-img { width: 68%; max-width: 210px; height: auto; display: block; margin: 0 auto; }
.qr-name { font-weight: 800; font-size: 1.12rem; color: var(--navy); margin-top: 0.35rem; overflow-wrap: anywhere; }
.qr-detail { color: var(--muted); font-size: 0.92rem; }
.qr-brand { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }
/* Code 128 strip (2026-11-03): runs along the label's bottom — bars
   with the human-readable MH-number beneath, for laser guns and
   type-it-by-hand fallback. SVG from the server, sized here. */
.qr-barcode { margin-top: 0.55rem; border-top: 1px solid #dfe4ec; padding-top: 0.5rem; }
.qr-barcode svg { width: 82%; max-width: 230px; height: auto; display: block; margin: 0 auto; }
.qr-barcode-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink); margin-top: 0.15rem; }
.qr-sheet { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1rem; }
.label-pick { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-weight: 500; }
.label-help { max-width: 640px; margin-bottom: 1rem; }
.scan-card { max-width: 560px; }
#scan-video { width: 100%; border-radius: 10px; background: #111; margin-bottom: 0.75rem; }
.scan-manual { margin-top: 1.1rem; }
.scan-manual label { display: block; margin-bottom: 0.5rem; font-size: 0.92rem; }
.scan-row { display: flex; gap: 0.5rem; }
.scan-row input { flex: 1; }

/* Print: the History Report page prints as just the report — no app chrome. */
@media print {
  @page { margin: 14mm; }
  .topbar, .no-print, .toast { display: none !important; }
  .shell { display: block; min-height: 0; }
  .main { max-width: none; padding: 0; }
  body { background: #fff; }
  a { color: inherit; text-decoration: none; }
  .report { border: none; box-shadow: none; border-radius: 0; padding: 0; }
  .report-head, .report-stats, .report-foot { break-inside: avoid; }
  .report-section h2 { break-after: avoid; }
  .service-row, .doc-row, .insp-row { break-inside: avoid; }
  .stat { box-shadow: none; }
  /* QR label + sheet print as clean labels — one card per label, no chrome. */
  .qr-label { box-shadow: none; }
  .qr-sheet { gap: 10px; margin-top: 0; }
}

/* ---- Display preferences: themes + text size (per device) ----
   Light is the palette above, untouched. The navy top bar and the
   sign-in gradient never change — what changes is the workspace.
   The printed QR label is a physical label and stays white. */
.dispctl { display: block; font-size: 0.8rem; font-weight: 600; color: #c4cddd; margin-bottom: 0.7rem; }
.dispctl select { display: block; width: 100%; margin-top: 0.3rem; background: var(--navy-2); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.88rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
@media screen {
  html[data-ts="115"] body { zoom: 1.15; }
  html[data-ts="130"] body { zoom: 1.30; }
  html[data-ts="145"] body { zoom: 1.45; }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E8EEF6; --muted: #9FB0C3; --bg: #0A141F; --card: #12222F; --line: #26405A;
  --accent: #4DA3FF; --accent-dark: #2B7CD3; --blue: #66B2FF;
  --green: #4ADE80; --green-bg: #0C2E1A; --red: #FF8296; --red-bg: #3D0F16;
  --amber: #FBBF24; --amber-bg: #33270A;
  --input: #0E1B28; --chip: #1B3049; --surface2: #0E1B28;
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
}
html[data-theme="contrast"] {
  color-scheme: dark;
  --ink: #FFFFFF; --muted: #D7DEE8; --bg: #000000; --card: #0A0A0A; --line: #8D99AE;
  --accent: #66B2FF; --accent-dark: #99CCFF; --blue: #FFD23F;
  --green: #00E676; --green-bg: #052E16; --red: #FF8296; --red-bg: #3D0A14;
  --amber: #FFD23F; --amber-bg: #2E2303;
  --input: #000000; --chip: #1A1A1A; --surface2: #101010;
  --shadow: 0 1px 3px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .btn-primary { background: #1F6FEB; }
html[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #2B7CD3; }
html[data-theme="contrast"] .btn-primary { background: #0057D9; }
html[data-theme="contrast"] .btn-primary:hover:not(:disabled) { background: #2B7CD3; }
html[data-theme="contrast"] .auth-wrap { background: #000000; }
html[data-theme="dark"] .msg.assistant .msg-body, html[data-theme="contrast"] .msg.assistant .msg-body { background: var(--surface2); }
html[data-theme="dark"] .msg-body.md code { background: #1B3049; }
html[data-theme="contrast"] .msg-body.md code { background: #1F2937; }
html[data-theme="dark"] .md-table, html[data-theme="contrast"] .md-table { background: var(--card); }
html[data-theme="dark"] .md-table th { background: #16283F; color: var(--ink); }
html[data-theme="contrast"] .md-table th { background: #141414; color: var(--ink); }
html[data-theme="dark"] .msg-who, html[data-theme="contrast"] .msg-who { color: var(--blue); }
html[data-theme="dark"] .plan-price, html[data-theme="contrast"] .plan-price { color: var(--ink); }
html[data-theme="dark"] .cat-chip { background: #16283F; color: #8FC3FF; }
html[data-theme="contrast"] .cat-chip { background: #0A2447; color: #99CCFF; }
html[data-theme="dark"] .op-table tbody tr:hover, html[data-theme="contrast"] .op-table tbody tr:hover { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .tire-cell.ok, html[data-theme="contrast"] .tire-cell.ok { border-color: #2F7A4D; }
html[data-theme="dark"] .tire-cell.low, html[data-theme="dark"] .tire-cell.high,
html[data-theme="contrast"] .tire-cell.low, html[data-theme="contrast"] .tire-cell.high { border-color: #8A6A1F; }
html[data-theme="dark"] .tire-cell.critical, html[data-theme="contrast"] .tire-cell.critical { border-color: #B33647; }
html[data-theme="dark"] .qr-label, html[data-theme="contrast"] .qr-label { color: #1C2430; }
html[data-theme="dark"] .qr-label .qr-detail, html[data-theme="dark"] .qr-label .qr-brand,
html[data-theme="contrast"] .qr-label .qr-detail, html[data-theme="contrast"] .qr-label .qr-brand { color: #67717F; }
html[data-theme="dark"] .qr-barcode-text, html[data-theme="contrast"] .qr-barcode-text { color: #1C2430; }