/* =====================================================================
   Chip.IT Mechanical — Enterprise Design System v2
   ---------------------------------------------------------------------
   Mobile-first, accessible, production-grade.
   - Royal blue brand, layered neutrals, true dark mode
   - 4pt spacing grid, Inter typography, consistent radii & shadows
   - Defensive SVG sizing (no more 300x150 icon blowouts)
   - Responsive app shell (off-canvas sidebar on mobile)
   - Split-panel auth that collapses gracefully on phones
   ===================================================================== */

/* =====================================================================
   1. Design tokens
   ===================================================================== */
:root,
:root[data-theme="light"] {
  /* Brand — royal blue */
  --brand-50:  #eef3ff;
  --brand-100: #dbe4ff;
  --brand-200: #b8c9ff;
  --brand-300: #8ea8ff;
  --brand-400: #5c80ff;
  --brand-500: #2a5dff;
  --brand-600: #1e50e0;
  --brand-700: #153fb8;
  --brand-800: #0a2d8f;
  --brand-900: #051c66;

  /* Surfaces */
  --bg:            #f4f6fb;
  --bg-elev:       #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f1f4fa;
  --surface-3:     #e6ebf4;
  --border:        #e1e6f0;
  --border-strong: #ccd4e2;
  --overlay:       rgba(10, 16, 32, .55);

  /* Text */
  --text:    #0b1b3d;
  --text-2:  #31405f;
  --muted:   #6a7489;
  --muted-2: #96a0b4;

  /* Semantic */
  --primary:       var(--brand-600);
  --primary-fg:    #ffffff;
  --primary-hover: var(--brand-700);
  --primary-soft:  var(--brand-50);

  --success:    #0c8c54;
  --success-bg: #e6f6ee;
  --success-bd: #a8dfc2;
  --warn:       #b36b00;
  --warn-bg:    #fff3dc;
  --warn-bd:    #f0cd88;
  --danger:     #c9302c;
  --danger-bg:  #fde8e8;
  --danger-bd:  #f0b4b4;
  --info:       var(--brand-600);
  --info-bg:    var(--brand-50);
  --info-bd:    var(--brand-200);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(13, 35, 90, .05);
  --shadow-sm: 0 1px 3px rgba(13, 35, 90, .07), 0 1px 2px rgba(13, 35, 90, .04);
  --shadow-md: 0 4px 14px rgba(13, 35, 90, .09), 0 2px 4px rgba(13, 35, 90, .05);
  --shadow-lg: 0 12px 32px rgba(13, 35, 90, .14), 0 4px 8px rgba(13, 35, 90, .06);
  --shadow-xl: 0 24px 60px rgba(13, 35, 90, .18);
  --focus-ring: 0 0 0 3px rgba(30, 80, 224, .24);

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Layout */
  --sidebar-w:   264px;
  --topbar-h:    60px;
  --content-max: 1240px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand-50:  rgba(59, 109, 255, .10);
  --brand-100: rgba(59, 109, 255, .18);
  --brand-200: rgba(59, 109, 255, .28);
  --brand-300: #6a8bff;
  --brand-400: #5478ff;
  --brand-500: #3b6dff;
  --brand-600: #3b6dff;
  --brand-700: #1e50e0;
  --brand-800: #153fb8;
  --brand-900: #0a2d8f;

  --bg:            #05070f;
  --bg-elev:       #0a1020;
  --surface:       #0e1528;
  --surface-2:     #141d38;
  --surface-3:     #1a2547;
  --border:        #1f2a4a;
  --border-strong: #2a3863;
  --overlay:       rgba(0, 0, 0, .65);

  --text:    #eef2fa;
  --text-2:  #c4cde0;
  --muted:   #8c97b2;
  --muted-2: #5f6a85;

  --primary:       var(--brand-500);
  --primary-fg:    #ffffff;
  --primary-hover: var(--brand-400);
  --primary-soft:  rgba(59, 109, 255, .14);

  --success:    #3ec47a;
  --success-bg: rgba(34, 197, 94, .10);
  --success-bd: rgba(34, 197, 94, .35);
  --warn:       #f5b042;
  --warn-bg:    rgba(245, 158, 11, .12);
  --warn-bd:    rgba(245, 158, 11, .35);
  --danger:     #f06363;
  --danger-bg:  rgba(239, 68, 68, .10);
  --danger-bd:  rgba(239, 68, 68, .38);
  --info:       var(--brand-500);
  --info-bg:    rgba(59, 109, 255, .10);
  --info-bd:    rgba(59, 109, 255, .38);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, .65);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, .75);
  --focus-ring: 0 0 0 3px rgba(59, 109, 255, .34);

  color-scheme: dark;
}

/* =====================================================================
   2. Reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }

/* ---------------------------------------------------------------------
   DEFENSIVE SVG SIZING — prevents icon blow-outs.
   Any inline <svg> without explicit width/height AND without a class
   defaults to 1em so icons can never balloon to 300x150. SVGs that ship
   a class are assumed to be sized by that class (e.g. .cluster-gauge-svg
   needs to fill its wrapper), so we exempt those — otherwise this rule
   wins on specificity (0,2,1 vs a class's 0,1,0) and crushes them to 16px.
   --------------------------------------------------------------------- */
svg:not([width]):not([height]):not([class]) {
  width: 1em;
  height: 1em;
}
svg { flex-shrink: 0; max-width: 100%; }

button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }

/* =====================================================================
   3. Typography
   ===================================================================== */
h1, h2, h3, h4, h5 {
  font-family: "Inter Tight", "Inter Display", "Inter", sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
}
h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem); }
h2 { font-size: 1.25rem; font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 600; }
h4 { font-size: .95rem; font-weight: 600; }

p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--brand-600); color: #fff; }

code, kbd, pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .88em;
}
code {
  background: var(--surface-2);
  padding: .08em .35em;
  border-radius: 5px;
  border: 1px solid var(--border);
}

/* Text scale */
.text-xs     { font-size: .75rem;   line-height: 1.4; }
.text-sm     { font-size: .8125rem; line-height: 1.45; }
.text-center { text-align: center; }
.text-md  { font-size: .875rem; line-height: 1.5; }
.text-lg  { font-size: 1rem;    line-height: 1.5; }
.text-xl  { font-size: 1.125rem; line-height: 1.4; }
.text-2xl { font-size: 1.375rem; line-height: 1.3; }

.muted    { color: var(--muted); }
.muted-2  { color: var(--muted-2); }
.text-2   { color: var(--text-2); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.small  { font-size: .8125rem; color: var(--muted); }
.center { text-align: center; }

.kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: inherit;
  font-size: .72rem;
  color: var(--muted);
  background: var(--surface-2);
}

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* Flex helpers */
.row         { display: flex; align-items: center; gap: .5rem; }
.row-wrap    { flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.stack       { display: flex; flex-direction: column; gap: .75rem; }
.stack-lg    { display: flex; flex-direction: column; gap: 1.25rem; }
.hstack      { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.spacer      { flex: 1; }

/* =====================================================================
   4. App shell — mobile-first
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar"
    "content";
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* -------- Sidebar (off-canvas on mobile) -------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: min(86vw, 300px);
  height: 100%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.3, .8, .3, 1);
  box-shadow: var(--shadow-xl);
  padding: .5rem .5rem;
  padding-top: calc(.5rem + env(safe-area-inset-top));
}
.sidebar.is-open { transform: translateX(0); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
}
.sidebar-brand:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.sidebar-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.sidebar-brand-text .name {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.sidebar-brand-text .tag {
  font-size: .65rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.sidebar-brand .dot { color: var(--primary); margin: 0 2px; }

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
}
.nav-section {
  padding: 0 .25rem;
  margin-bottom: 1rem;
}
.nav-section-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: .5rem .75rem .3rem;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .75rem;
  margin: 1px 0;
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.nav-link.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: var(--primary);
  border-radius: 2px;
}
.nav-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.nav-link .badge {
  margin-left: auto;
  font-size: .7rem;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 600;
}
.nav-link.is-active .badge {
  background: var(--brand-600);
  color: #fff;
}

/* Sidebar footer / user block */
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: .75rem .5rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}
.user-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.user-info { min-width: 0; flex: 1; }
.user-info .name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-info .email {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card a.logout {
  color: var(--muted);
  padding: 6px;
  border-radius: var(--r-sm);
  display: inline-grid;
  place-items: center;
}
.user-card a.logout:hover {
  background: var(--surface-3);
  color: var(--danger);
}
.user-card a.logout svg { width: 16px; height: 16px; }

/* -------- Topbar -------- */
.topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  padding-top: env(safe-area-inset-top);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
@media (min-width: 640px) {
  .topbar { gap: .75rem; padding: 0 1rem; }
}

/* Topbar actions are desktop-only; on mobile they move to page-actions-bar. */
.topbar-actions-desktop { display: none; }
@media (min-width: 640px) {
  .topbar-actions-desktop { display: inline-flex; gap: .5rem; align-items: center; }
}

/* Page-level action bar (Add vehicle, Log service, etc.). Full-width stack on
   mobile so primary actions stay thumb-reachable; right-aligned on desktop.
   Hidden on desktop to avoid duplicating the topbar actions. */
.page-actions-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  margin-top: -.25rem;
}
.page-actions-bar > .btn,
.page-actions-bar > a,
.page-actions-bar > form {
  flex: 1 1 auto;
  min-width: 0;
}
.page-actions-bar > .btn { width: 100%; }
@media (min-width: 640px) {
  .page-actions-bar { display: none; }
}
.topbar-title-group {
  min-width: 0;
  line-height: 1.2;
  flex: 1;
}
.topbar-title {
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* -------- Content -------- */
.content {
  grid-area: content;
  padding: 1rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.content-inner {
  width: 100%;
  max-width: min(var(--content-max), 100%);
  margin: 0 auto;
  min-width: 0;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 .2rem; }
.page-head .page-sub {
  color: var(--muted);
  font-size: .88rem;
}
.page-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* -------- Footer -------- */
.footer {
  padding: 1.25rem 1rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-elev);
}
.footer .brand-line {
  font-weight: 600;
  color: var(--text-2);
}

/* -------- Sidebar toggle (hamburger) -------- */
.sidebar-toggle { display: inline-grid; }

/* -------- Desktop (>= 960px): persistent sidebar -------- */
@media (min-width: 960px) {
  .app {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar content";
  }
  .sidebar {
    position: sticky;
    grid-area: sidebar;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: auto;
    transform: none;
    box-shadow: none;
    padding: .75rem .55rem;
    padding-top: calc(.75rem + env(safe-area-inset-top));
  }
  .sidebar-backdrop { display: none !important; }
  .sidebar-toggle { display: none; }
  .topbar { padding: 0 1.5rem; }
  .content { padding: 1.5rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   5. Icon buttons / theme toggle
   ===================================================================== */
.icon-btn {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.subtle { border-color: transparent; }
.icon-btn.subtle:hover { background: var(--surface-2); }

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Optional topbar search */
.searchbar {
  display: none;
  align-items: center;
  gap: .5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 .65rem;
  height: 38px;
  min-width: 260px;
  color: var(--muted);
}
.searchbar input {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  width: 100%;
  font-size: .875rem;
}
.searchbar:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
@media (min-width: 1100px) { .searchbar { display: flex; } }

/* =====================================================================
   6. Alerts / flash messages
   ===================================================================== */
.alert {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .8rem .95rem;
  border-radius: var(--r-lg);
  border: 1px solid;
  font-size: .88rem;
  margin-bottom: 1rem;
  line-height: 1.45;
}
.alert svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.alert-ok   { background: var(--success-bg); border-color: var(--success-bd); color: var(--success); }
.alert-err  { background: var(--danger-bg);  border-color: var(--danger-bd);  color: var(--danger); }
.alert-info { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info); }
.alert-warn { background: var(--warn-bg);    border-color: var(--warn-bd);    color: var(--warn); }
.alert strong { color: inherit; font-weight: 600; }

.flash {
  padding: .8rem .95rem;
  border-radius: var(--r-lg);
  border: 1px solid;
  font-size: .88rem;
  margin-bottom: 1rem;
}
.flash-ok   { background: var(--success-bg); border-color: var(--success-bd); color: var(--success); }
.flash-err  { background: var(--danger-bg);  border-color: var(--danger-bd);  color: var(--danger); }
.flash-info { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info); }

/* =====================================================================
   7. Cards & surfaces
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 640px) { .card { padding: 1.25rem; } }
.card + .card { margin-top: 1rem; }
.card.padded-0 { padding: 0; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.card-header h2, .card-header h3 { margin: 0; }
.card-body { padding: 1.1rem; }
.card-foot {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.section-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75rem 0 .75rem;
}

a.card {
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
a.card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
a.card:active { transform: translateY(1px); }

/* =====================================================================
   8. KPI stats
   ===================================================================== */

/* =====================================================================
   Instrument Cluster — automotive-style dashboard hero
   ===================================================================== */
.instrument-cluster {
  position: relative;
  padding: 1.1rem 1.15rem 1rem;
  border-radius: 20px;
  background:
    radial-gradient(160% 110% at 0% 0%, rgba(100, 140, 255, .22), transparent 55%),
    linear-gradient(180deg, #0a1d54 0%, #040d36 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 24px 50px -28px rgba(5, 20, 60, .6),
    0 6px 18px -6px rgba(5, 20, 60, .25),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  margin-bottom: 1.5rem;
  isolation: isolate;
}
.instrument-cluster::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.025) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px);
  pointer-events: none;
  z-index: 0;
}
.instrument-cluster::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, #1E50E0 0 14px, rgba(255,255,255,.85) 14px 28px);
  opacity: .5;
  z-index: 1;
}
.instrument-cluster > * { position: relative; z-index: 2; }

.cluster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.cluster-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .72);
}
.cluster-label svg { color: rgba(255, 255, 255, .55); }
.cluster-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cluster-pill.ok   { background: rgba(34, 197, 94, .15); border: 1px solid rgba(34, 197, 94, .35); color: #86efac; }
.cluster-pill.warn { background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .35); color: #fcd34d; }
.cluster-pill.bad  { background: rgba(239, 68, 68, .14);  border: 1px solid rgba(239, 68, 68, .4);  color: #fca5a5; }
.cluster-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cluster-pill.ok .dot   { background: #22c55e; animation: showcasePulse 1.8s ease-in-out infinite; }
.cluster-pill.warn .dot { background: #f59e0b; }
.cluster-pill.bad  .dot { background: #ef4444; animation: showcasePulse 1.4s ease-in-out infinite; }

.cluster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}
.cluster-gauge-wrap {
  display: flex;
  justify-content: center;
  /* Mobile-first: let the gauge fill the card so the percentage and
     "GARAGE HEALTH" label inside the SVG are readable. The aspect-ratio
     on .cluster-gauge-svg keeps it proportional. */
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(30, 80, 224, .4));
}
.cluster-gauge-svg,
.auth-gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 120;
}

.cluster-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
/* Cluster stat — grid layout with the LABEL across the top of the card,
   the icon + numeric value side-by-side in the middle, and the supporting
   "sub" line spanning the FULL width at the bottom so it never truncates.
   The 4th tile's "0 NFC chips" or "vehicles" text now wraps cleanly under
   the value instead of getting cut off as ellipsis. */
.cluster-stat {
  display: grid;
  grid-template-areas:
    "label label"
    "icon  value"
    "sub   sub";
  grid-template-columns: auto 1fr;
  column-gap: .6rem;
  row-gap: 2px;
  padding: .55rem .7rem .6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  min-width: 0;
  transition: border-color .15s, background .15s;
}
.cluster-stat:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
}
/* The body wrapper itself isn't laid out — its children participate in the
   parent grid via display:contents so we get the layout above without any
   HTML changes. */
.cluster-stat-body { display: contents; min-width: 0; }
.cluster-stat-icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  background: rgba(59, 130, 246, .18);
  color: #93c5fd;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: center;
}
.cluster-stat.warn .cluster-stat-icon { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.cluster-stat.bad  .cluster-stat-icon { background: rgba(239, 68, 68, .18);  color: #fca5a5; }
.cluster-stat .label {
  grid-area: label;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.cluster-stat .value {
  grid-area: value;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  align-self: center;
}
.cluster-stat.bad .value { color: #fca5a5; }
.cluster-stat .sub {
  grid-area: sub;
  font-size: .68rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.25;
  margin-top: 2px;
  /* Full-width row at the bottom — wrap cleanly instead of ellipsis */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.cluster-foot {
  margin-top: .8rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .25);
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.cluster-foot svg { color: #93c5fd; flex-shrink: 0; }
.cluster-foot strong { color: #fff; font-weight: 700; }
.cluster-foot.warn { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); }
.cluster-foot.warn svg { color: #fcd34d; }
.cluster-foot.bad  { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .3); }
.cluster-foot.bad  svg { color: #fca5a5; }

@media (min-width: 820px) {
  .instrument-cluster { padding: 1.5rem 1.75rem 1.25rem; }
  .cluster-head { margin-bottom: .75rem; }
  .cluster-grid {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.75rem;
    align-items: center;
  }
  .cluster-gauge-wrap { max-width: 360px; margin: 0; }
  .cluster-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
  }
}
@media (min-width: 1200px) {
  .cluster-grid { grid-template-columns: minmax(300px, 380px) 1fr; }
  .cluster-stats { grid-template-columns: repeat(4, 1fr); }
  .cluster-stat { padding: .85rem .9rem; }
  .cluster-stat .value { font-size: 1.3rem; }
}

/* Asset-card status badge (automotive pill overlaid on the thumb) */
.asset-status-badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.asset-status-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.asset-status-badge.ok {
  background: rgba(220, 252, 231, .9);
  border: 1px solid rgba(34, 197, 94, .45);
  color: #15803d;
}
.asset-status-badge.ok .dot { background: #22c55e; }
.asset-status-badge.warn {
  background: rgba(254, 243, 199, .9);
  border: 1px solid rgba(245, 158, 11, .5);
  color: #a16207;
}
.asset-status-badge.warn .dot { background: #f59e0b; }
.asset-status-badge.bad {
  background: rgba(254, 226, 226, .92);
  border: 1px solid rgba(239, 68, 68, .55);
  color: #b91c1c;
}
.asset-status-badge.bad .dot { background: #ef4444; animation: showcasePulse 1.4s ease-in-out infinite; }
:root[data-theme="dark"] .asset-status-badge.ok   { background: rgba(34, 197, 94, .2);  color: #86efac; }
:root[data-theme="dark"] .asset-status-badge.warn { background: rgba(245, 158, 11, .18); color: #fcd34d; }
:root[data-theme="dark"] .asset-status-badge.bad  { background: rgba(239, 68, 68, .2);  color: #fca5a5; }

.asset-card.status-warn { border-left: 3px solid var(--warn); }
.asset-card.status-bad  { border-left: 3px solid var(--danger); }

.stats-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.25rem;
}
@media (min-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
a.stat { color: inherit; text-decoration: none; }
a.stat:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.stat .stat-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.stat .stat-label svg { width: 14px; height: 14px; }
.stat .stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-family: "Inter Tight", "Inter Display", "Inter", sans-serif;
  color: var(--text);
  line-height: 1.1;
}
.stat .stat-foot { font-size: .78rem; color: var(--muted); }
.stat .stat-foot .chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-bd);
  font-weight: 600;
  font-size: .72rem;
}
.stat .stat-foot .chip.bad {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-bd);
}
.stat.brand {
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(30, 80, 224, .32);
  position: relative;
}
.stat.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(135deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
  pointer-events: none;
  opacity: .7;
}
.stat.brand > * { position: relative; z-index: 1; }
.stat.brand .stat-label,
.stat.brand .stat-value,
.stat.brand .stat-foot { color: #fff; }
.stat.brand .stat-label { color: rgba(255, 255, 255, .82); }
.stat.brand .stat-foot  { color: rgba(255, 255, 255, .84); }

/* =====================================================================
   9. Forms
   ===================================================================== */
.form-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .9rem;
}
.form-row label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
}
.form-row .hint { font-size: .75rem; color: var(--muted); }

/* Use explicit type selectors (lower specificity than :not() chains)
   so per-case overrides like the icon-prefixed input can win cleanly. */
.input,
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="search"],
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row input[type="time"],
.form-row input:not([type]),
.form-row select,
.form-row textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: .92rem;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .form-row input[type="text"],
:root[data-theme="dark"] .form-row input[type="email"],
:root[data-theme="dark"] .form-row input[type="password"],
:root[data-theme="dark"] .form-row input[type="number"],
:root[data-theme="dark"] .form-row input[type="tel"],
:root[data-theme="dark"] .form-row input[type="url"],
:root[data-theme="dark"] .form-row input[type="search"],
:root[data-theme="dark"] .form-row input[type="date"],
:root[data-theme="dark"] .form-row input[type="datetime-local"],
:root[data-theme="dark"] .form-row input[type="time"],
:root[data-theme="dark"] .form-row input:not([type]),
:root[data-theme="dark"] .form-row select,
:root[data-theme="dark"] .form-row textarea {
  background: var(--bg);
  border-color: var(--border-strong);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  background: var(--surface);
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input[type="file"] {
  display: block;
  width: 100%;
  padding: .55rem .6rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .85rem;
}

/* Icon-prefixed input — reserve left padding for the icon.
   Selector is specific enough to win against every base input rule above. */
.form-row .input-with-icon { position: relative; }
.form-row .input-with-icon > input,
.form-row .input-with-icon > input[type="text"],
.form-row .input-with-icon > input[type="email"],
.form-row .input-with-icon > input[type="password"],
.form-row .input-with-icon > input[type="number"],
.form-row .input-with-icon > input[type="tel"],
.form-row .input-with-icon > input[type="url"],
.form-row .input-with-icon > input[type="search"] {
  padding-left: 2.6rem;
}
.form-row .input-with-icon > svg {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.form-row .input-with-icon:focus-within > svg { color: var(--primary); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-help { font-size: .78rem; color: var(--muted); margin-top: .3rem; }

/* =====================================================================
   10. Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 1rem;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .05s, box-shadow .15s;
  box-shadow: var(--shadow-xs);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--text);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary);
}
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
  border-color: var(--brand-700);
  color: var(--primary-fg);
  box-shadow:
    0 1px 2px rgba(13, 35, 90, .18),
    0 4px 14px rgba(30, 80, 224, .28),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-600) 100%);
  border-color: var(--brand-700);
  color: var(--primary-fg);
  box-shadow:
    0 2px 4px rgba(13, 35, 90, .22),
    0 8px 22px rgba(30, 80, 224, .34),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}
.btn-primary:active {
  box-shadow:
    0 1px 2px rgba(13, 35, 90, .18),
    inset 0 1px 2px rgba(0, 0, 0, .18);
}
.btn-secondary {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}
.btn-secondary:hover {
  background: var(--brand-100);
  color: var(--primary);
  border-color: transparent;
}
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: var(--danger);
  filter: brightness(1.08);
  color: #fff;
  border-color: var(--danger);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text);
}

.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 .75rem; font-size: .82rem; }
.btn-lg { height: 46px; padding: 0 1.25rem; font-size: .95rem; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }

/* =====================================================================
   11. Tables
   ===================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap + .table-wrap { margin-top: 1rem; }
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
  min-width: 600px;
}
table.data th,
table.data td {
  padding: .75rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data th {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions .btn { margin-left: .3rem; }
table.data td code { font-size: .78rem; }

.filter-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
  align-items: center;
}
.filter-row .filter-input {
  flex: 1 1 200px;
  min-width: 0;
}
.filter-row .filter-select {
  flex: 0 0 auto;
  max-width: 160px;
}
@media (max-width: 520px) {
  .filter-row { gap: .4rem; }
  .filter-row .filter-input { flex-basis: 100%; }
  .filter-row .filter-select { flex-basis: 100%; max-width: none; }
  .filter-row .btn { flex: 1 1 auto; }
}

/* Badges / pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.55;
}
.badge.dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.badge-ok    { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.badge-warn  { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-bd); }
.badge-err   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-bd); }
.badge-info  { background: var(--info-bg);    color: var(--info);    border-color: var(--info-bd); }
.badge-muted { background: var(--surface-2);  color: var(--muted);   border-color: var(--border); }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}
.tag-pill.ok  { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.tag-pill.off { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-bd); }

/* =====================================================================
   12. Asset grid
   ===================================================================== */
.asset-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .asset-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* Wrapper sits as a positioning context for the floating mileage button so
   we can overlay the button on the card thumb without nesting interactive
   elements inside the <a> (which would be invalid HTML). */
.asset-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Floating odometer chip — over the bottom-right of the card thumb */
.mileage-chip {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(11, 19, 40, .82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55);
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s;
  max-width: calc(100% - 1.2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mileage-chip svg { color: #93c5fd; flex-shrink: 0; pointer-events: none; }
.mileage-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  pointer-events: none;
}
.mileage-chip:hover,
.mileage-chip:focus-visible {
  transform: translateY(-1px);
  background: rgba(30, 80, 224, .92);
  border-color: rgba(120, 170, 255, .55);
  outline: none;
  box-shadow: 0 10px 22px -8px rgba(30, 80, 224, .65);
}
.mileage-chip.is-empty {
  background: rgba(30, 80, 224, .85);
  border-color: rgba(120, 170, 255, .45);
}
.mileage-chip.is-empty svg { color: #cfdcff; }

@media (max-width: 480px) {
  .mileage-chip {
    top: .5rem;
    right: .5rem;
    padding: .25rem .55rem;
    font-size: .68rem;
  }
}

.asset-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.asset-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--text);
}
.asset-thumb {
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--surface-2) center / cover no-repeat;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--muted-2);
  border-bottom: 1px solid var(--border);
}
.asset-thumb svg { width: 36px; height: 36px; opacity: .5; }
.asset-thumb .asset-type-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .asset-thumb .asset-type-badge {
  background: rgba(14, 21, 40, .85);
}
.asset-body {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.asset-name {
  font-weight: 600;
  margin: 0;
  font-size: .95rem;
  color: var(--text);
  letter-spacing: -.005em;
}
.asset-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .2rem;
  gap: .5rem;
}

/* Dashboard two-column */
.dash-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 1100px) {
  .dash-layout { grid-template-columns: 1fr 360px; }
}

/* Empty state */
.empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.empty .empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin: 0 auto .9rem;
}
.empty .empty-icon svg { width: 26px; height: 26px; }
.empty h3 {
  color: var(--text);
  margin: .1rem 0 .35rem;
}
.empty p {
  max-width: 420px;
  margin: 0 auto 1rem;
  color: var(--muted);
  font-size: .88rem;
}

/* =====================================================================
   13. Timeline (maintenance logs)
   ===================================================================== */
.timeline {
  position: relative;
  padding-left: 1.25rem;
  margin-top: .5rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .3rem;
  bottom: .3rem;
  width: 2px;
  background: var(--border);
}
.tl-item {
  position: relative;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 1.2rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--bg);
}
.tl-head {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.tl-title {
  font-weight: 600;
  margin: 0;
  font-size: .95rem;
  color: var(--text);
}
.tl-date { color: var(--muted); font-size: .8rem; }
.tl-meta { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.tl-notes {
  margin: .5rem 0 .3rem;
  white-space: pre-wrap;
  font-size: .88rem;
  color: var(--text-2);
}
.tl-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}
.tl-thumbs .tl-thumb,
.tl-thumbs a {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: var(--r-md);
  background: var(--surface-2) center / cover no-repeat;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tl-thumbs .tl-thumb:hover,
.tl-thumbs .tl-thumb:focus-visible {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 6px 14px -6px rgba(30, 80, 224, .45);
  outline: none;
}
.tl-due {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-bd);
}
.tl-due.overdue {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-bd);
}

/* =====================================================================
   14. Detail hero (asset view)
   ===================================================================== */
.detail-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 720px) {
  .detail-hero {
    grid-template-columns: 320px 1fr;
    padding: 1.25rem;
  }
}
.hero-img {
  aspect-ratio: 4 / 3;
  background: var(--surface-2) center / cover no-repeat;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
  width: 100%;
}
.hero-img svg { width: 48px; height: 48px; opacity: .55; }
.detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.25rem;
  margin: .5rem 0 0;
}
.detail-meta > div { min-width: 0; }
.detail-meta dt {
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.detail-meta dd {
  margin: .15rem 0 0;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  /* Long emails, asset URLs, etc. can blow up the grid on narrow phones —
     allow them to break across lines mid-word instead of overflowing. */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
/* On phones, stack the meta into a single column so each label/value has
   the full row width. Two-column 12px-gutter 180px phones is too tight. */
@media (max-width: 520px) {
  .detail-meta { grid-template-columns: 1fr; gap: .6rem; }
}

/* Reminder banner */
.reminder-banner {
  display: flex;
  gap: .85rem;
  align-items: center;
  background: linear-gradient(135deg, var(--warn-bg), transparent);
  border: 1px solid var(--warn-bd);
  color: var(--warn);
  padding: .9rem 1.1rem;
  border-radius: var(--r-lg);
  margin-bottom: 1.25rem;
}
.reminder-banner .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--warn-bg);
  display: grid;
  place-items: center;
  color: var(--warn);
  flex-shrink: 0;
}
.reminder-banner .icon svg { width: 18px; height: 18px; }
.reminder-banner .text { flex: 1; min-width: 0; }
.reminder-banner .text strong {
  color: var(--text);
  display: block;
}
.reminder-banner .text .sub {
  color: var(--muted);
  font-size: .82rem;
}
.reminder-banner a {
  color: var(--warn);
  font-weight: 600;
  text-decoration: underline;
}

/* NFC chip reference panel */
.chip-ref {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
}
.chip-ref img {
  width: 64px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .15));
}
.chip-ref-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: .15rem;
}
.chip-ref-text .muted {
  color: var(--muted);
  font-size: .85rem;
}

/* =====================================================================
   Splash overlay — shared by the real splash AND the settings preview.
   The screen starts pitch BLACK, holds for a beat, then the image
   smoothly animates in. No text overlay — just the image + lighting.
   The .splash-anim-* entry animation runs once on .splash-canvas.
   ===================================================================== */
/* The splash element is always rendered in the DOM when the user has a
   custom splash, but we only flip it to visible when the early inline
   script in <head> has decided this page load is a "real launch" (fresh
   tab / PWA icon tap / refresh). Internal nav clicks get display:none
   so there's zero flash. */
#splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity .55s ease;
  background: #000;
  overflow: hidden;
}
html.chipit-splash-play #splash { display: block; }
#splash.hidden { opacity: 0; pointer-events: none; }

#splash .splash-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}
#splash .splash-canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================================================================
   Entry animations — applied to .splash-canvas. Each starts invisible
   on a black screen, waits a short beat, then smoothly animates in over
   roughly 0.9–1.3s so the motion feels cinematic instead of popping.
   All use `both` fill so the "from" state (opacity: 0) is enforced
   before the animation starts — that's how we guarantee a black screen
   during the animation-delay window.
   ===================================================================== */
@keyframes splash-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-zoom   { from { opacity: 0; transform: scale(1.1); }  to { opacity: 1; transform: scale(1); } }
@keyframes splash-slideU { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes splash-slideD { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
@keyframes splash-flip   {
  0%   { opacity: 0; transform: perspective(1200px) rotateY(55deg) scale(1.04); }
  60%  { opacity: 1; transform: perspective(1200px) rotateY(-4deg) scale(1); }
  100% { opacity: 1; transform: perspective(1200px) rotateY(0deg)  scale(1); }
}
@keyframes splash-reveal {
  0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes splash-bounce {
  0%   { opacity: 0; transform: scale(1.2); }
  60%  { opacity: 1; transform: scale(.98); }
  80%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* 220ms delay gives you a clean black flash, then the image swings in */
.splash-anim-fade       { animation: splash-fade   1.1s ease-out               .22s both; }
.splash-anim-zoom       { animation: splash-zoom   1.1s cubic-bezier(.2,.7,.2,1) .22s both; }
.splash-anim-slide-up   { animation: splash-slideU 1.0s cubic-bezier(.2,.7,.2,1) .22s both; }
.splash-anim-slide-down { animation: splash-slideD 1.0s cubic-bezier(.2,.7,.2,1) .22s both; }
.splash-anim-flip       { animation: splash-flip   1.2s cubic-bezier(.2,.7,.2,1) .22s both; }
.splash-anim-reveal     { animation: splash-reveal 1.1s cubic-bezier(.77,0,.18,1) .22s both; }
.splash-anim-bounce     { animation: splash-bounce 1.3s cubic-bezier(.22,1.15,.36,1) .22s both; }

/* =====================================================================
   Lighting effects — true overlays on top of the full-screen image.
   Uses ::before / ::after on .splash-canvas so no extra markup is needed.
   ===================================================================== */
.splash-canvas::before,
.splash-canvas::after { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 2; }

.splash-fx-none::before,
.splash-fx-none::after { display: none; }

/* GLOW — pulsing blue vignette that breathes in from the edges.
   Uses a radial-gradient background (transparent center → colored edges)
   with a screen blend mode so the color lifts the underlying image. */
@keyframes splash-glow-pulse {
  0%,100% { opacity: .5; }
  50%     { opacity: 1;  }
}
.splash-fx-glow::before {
  background: radial-gradient(
    ellipse 85% 70% at 50% 50%,
    transparent 35%,
    rgba(30,80,224,.35) 70%,
    rgba(90,140,255,.7) 100%
  );
  mix-blend-mode: screen;
  animation: splash-glow-pulse 2.4s ease-in-out infinite;
}
.splash-fx-glow::after { display: none; }

/* NEON — pulsing neon border hugging the screen edges + inner glow.
   Using a visible `border` (not inset box-shadow, which some browsers
   refused to paint on transparent pseudos) plus a screen-blended inner
   radial glow on ::after for the soft falloff. */
@keyframes splash-neon-border {
  0%,100% {
    border-color: rgba(59,109,255,.75);
    box-shadow: 0 0 22px 2px rgba(59,109,255,.55);
  }
  50% {
    border-color: rgba(160,200,255,1);
    box-shadow: 0 0 44px 6px rgba(120,170,255,.85);
  }
}
@keyframes splash-neon-inner {
  0%,100% { opacity: .55; }
  50%     { opacity: .95; }
}
.splash-fx-neon::before {
  border: 4px solid rgba(90,140,255,.85);
  border-radius: inherit;
  animation: splash-neon-border 1.4s ease-in-out infinite;
}
.splash-fx-neon::after {
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(59,109,255,.45) 100%
  );
  mix-blend-mode: screen;
  animation: splash-neon-inner 1.4s ease-in-out infinite;
}

/* SWEEP — a wide diagonal light bar travels across the whole screen */
@keyframes splash-sweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%)  skewX(-18deg); }
}
.splash-fx-sweep::before {
  inset: -20% -40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.1) 46%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,.1) 54%,
    transparent 60%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  animation: splash-sweep 2.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
.splash-fx-sweep::after { display: none; }

/* SCAN — horizontal scan line travels top → bottom across the FULL screen.
   We animate `top` (not transform) so percentage values are relative to
   the parent canvas, guaranteeing a full-height sweep. */
@keyframes splash-scan {
  0%   { top: -22%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.splash-fx-scan::before {
  left: 0; right: 0;
  top: -22%;
  bottom: auto;
  height: 22%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(120,180,255,.0) 25%,
    rgba(120,180,255,.7) 50%,
    rgba(120,180,255,.0) 75%,
    transparent 100%
  );
  animation: splash-scan 2.2s linear infinite;
  mix-blend-mode: screen;
}
.splash-fx-scan::after {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.05) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: overlay;
  opacity: .6;
}

/* SPOTLIGHT — bright center glow + dark vignette edges, pulsing.
   ::before = bright warm center, ::after = strong dark outer ring. */
@keyframes splash-spot-pulse {
  0%,100% { opacity: .55; transform: scale(1);   }
  50%     { opacity: 1;   transform: scale(1.08);}
}
.splash-fx-spotlight::before {
  background: radial-gradient(
    ellipse 60% 45% at 50% 50%,
    rgba(255,255,255,.45) 0%,
    rgba(255,230,180,.25) 35%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transform-origin: center;
  animation: splash-spot-pulse 2.4s ease-in-out infinite;
}
.splash-fx-spotlight::after {
  background: radial-gradient(
    ellipse 85% 75% at 50% 50%,
    transparent 35%,
    rgba(0,0,0,.55) 75%,
    rgba(0,0,0,.85) 100%
  );
  mix-blend-mode: multiply;
}

/* HOLOGRAM — tinted hue shift + scanlines + chromatic wash (applied to img) */
@keyframes splash-holo-shift {
  0%,100% { filter: hue-rotate(0deg)    saturate(1.1); }
  50%     { filter: hue-rotate(-20deg)  saturate(1.35); }
}
@keyframes splash-holo-drift {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,3px,0); }
}
.splash-fx-hologram img { animation: splash-holo-shift 3.2s ease-in-out infinite, splash-holo-drift 2.8s ease-in-out infinite; }
.splash-fx-hologram::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(120,220,255,.18) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: screen;
  opacity: .55;
}
.splash-fx-hologram::after {
  background: linear-gradient(120deg, rgba(180,120,255,.22), rgba(90,200,255,.22) 50%, rgba(255,140,200,.22));
  mix-blend-mode: screen;
  opacity: .45;
}

/* =====================================================================
   Entry animations — applied to .splash-canvas. Each is a single-shot,
   forward-filled animation that completes well inside 400–3500ms.
   ===================================================================== */
@keyframes splash-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-zoom   { from { opacity: 0; transform: scale(.8); }  to { opacity: 1; transform: scale(1); } }
@keyframes splash-slideU { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes splash-slideD { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes splash-flip   {
  0%   { opacity: 0; transform: perspective(800px) rotateY(80deg) scale(.9); }
  60%  { opacity: 1; transform: perspective(800px) rotateY(-8deg) scale(1); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg) scale(1); }
}
@keyframes splash-reveal {
  0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes splash-bounce {
  0%   { opacity: 0; transform: scale(.3); }
  55%  { opacity: 1; transform: scale(1.08); }
  75%  { transform: scale(.96); }
  100% { transform: scale(1); }
}

.splash-anim-fade       { animation: splash-fade   .55s ease-out both; }
.splash-anim-zoom       { animation: splash-zoom   .6s  cubic-bezier(.2,.9,.2,1.05) both; }
.splash-anim-slide-up   { animation: splash-slideU .6s  cubic-bezier(.2,.9,.2,1) both; }
.splash-anim-slide-down { animation: splash-slideD .6s  cubic-bezier(.2,.9,.2,1) both; }
.splash-anim-flip       { animation: splash-flip   .85s cubic-bezier(.2,.9,.2,1.05) both; }
.splash-anim-reveal     { animation: splash-reveal .75s cubic-bezier(.77,0,.18,1) both; }
.splash-anim-bounce     { animation: splash-bounce .9s  cubic-bezier(.22,1.3,.36,1) both; }

/* =====================================================================
   Lighting effects — ambient visual layers that play continuously while
   the splash is on screen. Each is a pseudo-element on .splash-canvas so
   it can clip/overlay the image without extra markup.
   ===================================================================== */
.splash-canvas::before,
.splash-canvas::after { content: ""; pointer-events: none; }

.splash-fx-none::before,
.splash-fx-none::after { display: none; }

/* GLOW — soft colored halo pulsing around the image */
@keyframes splash-glow-pulse {
  0%,100% { box-shadow: 0 0 60px 0 rgba(30,80,224,.35), 0 0 140px 10px rgba(30,80,224,.18); }
  50%     { box-shadow: 0 0 90px 4px rgba(90,140,255,.55), 0 0 200px 24px rgba(30,80,224,.25); }
}
.splash-fx-glow { animation: splash-glow-pulse 2.4s ease-in-out infinite; }
.splash-fx-glow::before,
.splash-fx-glow::after { display: none; }

/* NEON — pulsing crisp neon outline (brand blue) */
@keyframes splash-neon-pulse {
  0%,100% {
    box-shadow:
      0 0 0 2px rgba(59,109,255,.9),
      0 0 18px 2px rgba(59,109,255,.7),
      0 0 48px 6px rgba(59,109,255,.35);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(120,170,255,1),
      0 0 32px 4px rgba(120,170,255,.85),
      0 0 80px 14px rgba(59,109,255,.45);
  }
}
.splash-fx-neon { animation: splash-neon-pulse 1.4s ease-in-out infinite; }
.splash-fx-neon::before {
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(180,210,255,.6);
  mix-blend-mode: screen;
}
.splash-fx-neon::after { display: none; }

/* SWEEP — a diagonal light bar slides across */
@keyframes splash-sweep {
  0%   { transform: translateX(-120%) rotate(20deg); }
  100% { transform: translateX(220%)  rotate(20deg); }
}
.splash-fx-sweep::before {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.08) 54%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-120%) rotate(20deg);
  animation: splash-sweep 2.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
.splash-fx-sweep::after { display: none; }

/* SCAN — horizontal scan line sliding top→bottom */
@keyframes splash-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%);  opacity: 0; }
}
.splash-fx-scan::before {
  position: absolute; left: 0; right: 0; top: 0;
  height: 22%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(120,180,255,.0) 30%,
    rgba(120,180,255,.55) 50%,
    rgba(120,180,255,.0) 70%,
    transparent 100%
  );
  animation: splash-scan 2.2s linear infinite;
  mix-blend-mode: screen;
}
.splash-fx-scan::after {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.04) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: overlay;
  opacity: .65;
}

/* SPOTLIGHT — radial spotlight pulses behind the image */
@keyframes splash-spot-pulse {
  0%,100% { opacity: .55; transform: scale(1);   }
  50%     { opacity: .85; transform: scale(1.15);}
}
.splash-fx-spotlight::before {
  position: absolute; inset: -30%;
  background: radial-gradient(closest-side, rgba(255,255,255,.25), transparent 70%);
  mix-blend-mode: screen;
  animation: splash-spot-pulse 2.4s ease-in-out infinite;
}
.splash-fx-spotlight::after {
  position: absolute; inset: 0;
  background: radial-gradient(closest-side at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
}

/* HOLOGRAM — tinted color shift + soft scanlines + subtle drift */
@keyframes splash-holo-shift {
  0%,100% { filter: hue-rotate(0deg)   saturate(1.1); }
  50%     { filter: hue-rotate(-18deg) saturate(1.3); }
}
@keyframes splash-holo-drift {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,2px,0); }
}
.splash-fx-hologram { animation: splash-holo-shift 3.2s ease-in-out infinite; }
.splash-fx-hologram img { animation: splash-holo-drift 2.8s ease-in-out infinite; }
.splash-fx-hologram::before {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(120,220,255,.16) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: screen;
  opacity: .6;
}
.splash-fx-hologram::after {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(180,120,255,.18), rgba(90,200,255,.18) 50%, rgba(255,140,200,.18));
  mix-blend-mode: screen;
  opacity: .55;
}

/* =====================================================================
   Splash Studio (settings page UI)
   Defensive: the card itself and all grid cells use min-width: 0 and
   max-width: 100% so the horizontally-scrollable chip picker inside
   can scroll cleanly without pushing the card wider than the viewport.
   ===================================================================== */
.splash-studio {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;             /* belt-and-suspenders containment */
}
.splash-studio .studio-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
}
.splash-studio .studio-grid > * { min-width: 0; max-width: 100%; }
@media (min-width: 900px) {
  .splash-studio .studio-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
}

/* Dropzone upload */
.splash-studio .dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--border-strong, rgba(0,0,0,.15));
  border-radius: 14px;
  background:
    radial-gradient(400px 160px at 50% 0%, rgba(30,80,224,.08), transparent 70%),
    var(--surface-2, var(--surface));
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .12s;
  text-align: center;
}
.splash-studio .dropzone:hover,
.splash-studio .dropzone.is-drag {
  border-color: var(--primary);
  background:
    radial-gradient(400px 160px at 50% 0%, rgba(30,80,224,.16), transparent 70%),
    var(--surface);
  transform: translateY(-1px);
}
.splash-studio .dropzone svg { color: var(--primary); }
.splash-studio .dropzone-title { font-size: .92rem; font-weight: 600; color: var(--text); }
.splash-studio .dropzone-title u { text-decoration: underline; text-underline-offset: 3px; }
.splash-studio .dropzone-hint  { font-size: .76rem; color: var(--muted); }
.splash-studio .dropzone-file  {
  font-size: .8rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: .25rem;
  display: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.splash-studio .dropzone.has-file .dropzone-file { display: block; }
.splash-studio .dropzone.has-file { border-style: solid; border-color: var(--primary); }

/* Live phone-shaped stage — mimics a real device so users see exactly
   how the splash will look on their phone. The .phone-frame is the body
   of the device, .phone-screen is the 9:19.5 display area, and the
   actual .splash-preview-canvas fills it edge-to-edge like a real boot
   splash. Effects apply via .splash-fx-* classes and animate via
   .splash-anim-*, identical to the real thing. */
.splash-studio .studio-stage {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.splash-studio .stage-frame {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  min-height: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
}
.splash-studio .phone-frame {
  position: relative;
  width: 160px;
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
  padding: 7px;
  background: linear-gradient(160deg, #1b1f2a 0%, #0c0e14 100%);
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
/* Dynamic-island style notch at the top of the phone */
.splash-studio .phone-frame::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 16px;
  border-radius: 999px;
  background: #05070c;
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.splash-studio .phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.splash-studio .splash-preview-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: #0a1020;
}
.splash-studio .splash-preview-canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.splash-studio .splash-preview-canvas::before,
.splash-studio .splash-preview-canvas::after { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 2; }
.splash-studio .splash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  text-align: center;
  padding: 1rem;
  z-index: 1;
  position: relative;
}
.splash-studio .splash-empty svg { color: rgba(255,255,255,.45); }
.splash-studio .splash-preview-brand {
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  text-align: center;
  font-size: .6rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  z-index: 3;
  pointer-events: none;
}
.splash-studio .stage-caption { margin-top: .75rem; text-align: center; }

/* Studio controls */
.splash-studio .studio-block { margin-bottom: 1.1rem; min-width: 0; }
.splash-studio .studio-left,
.splash-studio .studio-right { min-width: 0; max-width: 100%; }
.splash-studio .studio-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.splash-studio .studio-block-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.splash-studio .studio-value {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.splash-studio .studio-range {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, rgba(30,80,224,.25), rgba(30,80,224,1));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.splash-studio .studio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 4px rgba(30,80,224,.18);
  cursor: pointer;
  transition: transform .12s;
}
.splash-studio .studio-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.splash-studio .studio-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 4px rgba(30,80,224,.18);
  cursor: pointer;
}
.splash-studio .studio-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
  font-size: .68rem;
  color: var(--muted);
}

.splash-studio .studio-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
}
.splash-studio .studio-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, transform .12s, background .15s, box-shadow .15s;
  min-width: 0;
}
.splash-studio .studio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.splash-studio .studio-chip:hover {
  border-color: var(--border-strong, var(--primary));
  transform: translateY(-1px);
}
.splash-studio .studio-chip.is-selected {
  border-color: var(--primary);
  background: rgba(30,80,224,.08);
  box-shadow: 0 0 0 3px rgba(30,80,224,.14);
}
.splash-studio .studio-chip-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.splash-studio .studio-chip-hint {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.25;
}

:root[data-theme="dark"] .splash-studio .studio-chip {
  background: var(--surface-2, var(--surface));
}
:root[data-theme="dark"] .splash-studio .studio-chip.is-selected {
  background: rgba(59,109,255,.18);
  box-shadow: 0 0 0 3px rgba(59,109,255,.2);
}

.splash-studio .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Splash Studio — compact mobile layout (≤ 720px).
   Strategy: turn the stacked layout into a dense 2-up layout — tiny
   phone preview on the left, controls on the right — then use
   horizontally scrollable chip rows for animation + effect so they
   don't consume vertical space even with 7 options each.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .splash-studio { padding: 1rem; }
  .splash-studio .row-between { flex-direction: row; align-items: center; gap: .5rem; }
  .splash-studio .row-between > div { min-width: 0; flex: 1; }
  .splash-studio .row-between h2 { font-size: 1.05rem; }
  /* Description: hide on mobile — the preview + labels are self-explanatory */
  .splash-studio .row-between p { display: none; }

  .splash-studio .studio-grid { gap: 1rem; }

  /* Dropzone collapses to a single tidy strip */
  .splash-studio .dropzone {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem .75rem;
    padding: .75rem .85rem;
    text-align: left;
    min-width: 0;
  }
  .splash-studio .dropzone svg { width: 22px; height: 22px; flex-shrink: 0; }
  .splash-studio .dropzone-title {
    font-size: .82rem;
    min-width: 0;
    flex: 1;
  }
  .splash-studio .dropzone-hint  { display: none; }
  .splash-studio .dropzone-file  {
    font-size: .72rem;
    flex-basis: 100%;
    margin-top: 0;
  }

  /* Stage moves up top and goes small — phone sits centered */
  .splash-studio .studio-stage { margin-top: .75rem; }
  .splash-studio .phone-frame  { width: 120px; border-radius: 22px; padding: 5px; }
  .splash-studio .phone-frame::before { width: 42px; height: 12px; top: 9px; }
  .splash-studio .phone-screen { border-radius: 18px; }
  .splash-studio .stage-caption { display: none; }

  /* Controls tighten up */
  .splash-studio .studio-block { margin-bottom: .85rem; }
  .splash-studio .studio-block-head { margin-bottom: .35rem; }
  .splash-studio .studio-block-label { font-size: .72rem; }
  .splash-studio .studio-value { font-size: .95rem; }
  .splash-studio .studio-range-scale { font-size: .62rem; }

  /* Animation + effect chips: wrap onto multiple short rows so every
     option is visible at once with no horizontal scrolling. At ~375px
     we get 3 columns, on wider phones 4. Hint text is hidden so each
     chip is just the compact label tile. */
  .splash-studio .studio-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: .4rem;
    overflow: visible;
    padding: 0;
    margin: 0;
    min-width: 0;
    max-width: 100%;
  }
  .splash-studio .studio-chip {
    min-width: 0;
    padding: .5rem .55rem;
    text-align: center;
    align-items: center;
  }
  .splash-studio .studio-chip-title {
    font-size: .76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .splash-studio .studio-chip-hint  { display: none; }
}

/* Very narrow phones: phone preview shrinks further, save button full width,
   and the chip grid drops to 3 crisp columns so every entrance + effect
   option stays readable without a sideways swipe. */
@media (max-width: 400px) {
  .splash-studio .phone-frame { width: 104px; padding: 4px; border-radius: 20px; }
  .splash-studio .phone-frame::before { width: 36px; height: 10px; top: 8px; }
  .splash-studio .phone-screen { border-radius: 16px; }
  .splash-studio .btn-row .btn { flex: 1; }
  .splash-studio .studio-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }
  .splash-studio .studio-chip { padding: .45rem .4rem; }
  .splash-studio .studio-chip-title { font-size: .72rem; }
}

/* =====================================================================
   15. AUTH SHELL — split-panel (brand + form), mobile-first
   ===================================================================== */
body.auth-body {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100%;
}
.auth-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Floating theme toggle */
.theme-toggle-wrap {
  position: absolute;
  top: calc(.75rem + env(safe-area-inset-top));
  right: .75rem;
  z-index: 3;
}

/* ---------- Auth hero (brand panel) ---------- */
.auth-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(59, 109, 255, .38), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(30, 80, 224, .55), transparent 55%),
    linear-gradient(160deg, #0a2d8f 0%, #051c66 55%, #020611 100%);
  padding: 1.75rem 1.25rem;
  padding-top: calc(1.75rem + env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  isolation: isolate;
}
/* Industrial blueprint grid — evokes CAD / engineering */
.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
/* Subtle orbit glow */
.auth-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 140, 255, .35), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-width: 0;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.auth-brand img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}
.auth-brand .name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.auth-brand .name .dot { color: var(--brand-300); margin: 0 2px; }
.auth-brand .tag {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .7);
  font-weight: 600;
  margin-top: 2px;
}

.auth-hero-copy { max-width: 520px; }
.auth-hero-copy h1 {
  color: #fff;
  font-family: "Inter Tight", "Inter Display", "Inter", sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .7rem;
}
.auth-hero-copy p {
  color: rgba(255, 255, 255, .85);
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height: 1.55;
  max-width: 460px;
}

.auth-features {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
  max-width: 480px;
}
.auth-feature {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: rgba(255, 255, 255, .9);
  font-size: .88rem;
  line-height: 1.45;
}
.auth-feature .mark {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.auth-feature .mark svg {
  width: 14px !important;
  height: 14px !important;
  color: #fff;
}
.auth-feature strong {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px;
}

.auth-hero-foot {
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Decorative tachometer watermark (hidden by default, shown on desktop) */
.auth-hero-watermark {
  display: none;
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 520px;
  height: 520px;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  animation: watermarkDrift 18s ease-in-out infinite alternate;
}
@keyframes watermarkDrift {
  from { transform: rotate(-4deg) scale(1); }
  to   { transform: rotate(4deg)  scale(1.03); }
}

/* Capability strip (hidden on mobile, shown on desktop) */
.auth-capstrip {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: .5rem;
  max-width: 500px;
}
.auth-capstrip .cap {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-width: 0;
}
.auth-capstrip .cap svg {
  color: #93c5fd;
  flex-shrink: 0;
}
.auth-capstrip .cap > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.auth-capstrip .cap strong {
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-capstrip .cap span {
  color: rgba(255, 255, 255, .58);
  font-size: .68rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Automotive dashboard showcase card ---------- */
.auth-showcase {
  position: relative;
  display: block;
  margin: .25rem 0 .5rem;
}
.showcase-card {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 20px;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(100, 140, 255, .22), transparent 55%),
    linear-gradient(180deg, rgba(9, 22, 66, .88) 0%, rgba(4, 11, 38, .92) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, .85),
    0 8px 24px -8px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  isolation: isolate;
  animation: showcasePop .75s cubic-bezier(.2,.9,.2,1.02) both;
}
/* Carbon-fiber style texture */
.showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.02) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);
  pointer-events: none;
  z-index: 0;
}
/* Racing checker accent strip */
.showcase-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      #1E50E0 0 14px,
      rgba(255,255,255,.85) 14px 28px);
  opacity: .55;
  z-index: 1;
}
.showcase-card > * { position: relative; z-index: 2; }

.showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}
.showcase-vin {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .02em;
}
.showcase-vin svg { color: rgba(255, 255, 255, .6); }
.showcase-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .35);
  color: #86efac;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.showcase-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
  animation: showcasePulse 1.8s ease-in-out infinite;
}
@keyframes showcasePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  50%     { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.gauge {
  margin: .25rem auto .35rem;
  max-width: 240px;
  filter: drop-shadow(0 8px 18px rgba(30, 80, 224, .35));
}

.showcase-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat-cell .label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
}
.stat-cell .value {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-cell .value em {
  font-style: normal;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  font-size: .7em;
  margin-left: 2px;
  letter-spacing: .04em;
}
.stat-cell .value.accent {
  color: #fbbf24;
}

.showcase-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .7rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .25);
  color: rgba(255, 255, 255, .85);
  font-size: .72rem;
  line-height: 1.35;
}
.showcase-foot svg { color: #93c5fd; flex-shrink: 0; }

@keyframes showcasePop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   MOBILE AUTH — must fit in the viewport, no page scrolling.
   Hero is a compact branded header; form panel fills the rest.
   Showcase card + long marketing copy only show on taller phones that
   have room for it — otherwise every element is suppressed for fit.
   ===================================================================== */
@media (max-width: 639px) {
  /* Lock the auth page to the viewport so nothing leaks out */
  body.auth-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .auth-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  /* Hero: slim branded header */
  .auth-hero {
    padding: .7rem 1rem .85rem;
    padding-top: calc(.7rem + env(safe-area-inset-top));
    gap: .6rem;
    min-height: 0;
    flex: 0 0 auto;
  }
  .auth-hero-inner {
    gap: .55rem;
    height: auto;
    min-width: 0;
  }

  /* By default on mobile we strip EVERYTHING except brand. Taller phones
     (see min-height block below) get the showcase back. */
  .auth-hero-copy,
  .auth-showcase,
  .auth-features,
  .auth-hero-foot,
  .auth-capstrip { display: none; }

  .auth-brand { gap: .65rem; }
  .auth-brand img { width: 36px; height: 36px; }
  .auth-brand .name { font-size: .92rem; line-height: 1.05; }
  .auth-brand .tag { font-size: .6rem; margin-top: 1px; letter-spacing: .1em; }

  /* Form panel fills the remaining viewport. Internal scroll only as a
     safety net for extreme cases (e.g. keyboard open + small phone). */
  .auth-panel {
    flex: 1 1 auto;
    min-height: 0;
    padding: .95rem 1rem 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }
  .auth-panel-inner {
    max-width: 100%;
    min-width: 0;
  }
  .auth-panel h2 {
    font-size: 1.2rem;
    margin: 0 0 .15rem;
  }
  .auth-panel .auth-sub {
    font-size: .82rem;
    line-height: 1.4;
    margin-bottom: .75rem;
  }
  .auth-panel .form-row { margin-bottom: .55rem; }
  .auth-panel .form-row label { margin-bottom: .28rem; font-size: .78rem; }
  .auth-panel .form-row input[type="text"],
  .auth-panel .form-row input[type="email"],
  .auth-panel .form-row input[type="password"],
  .auth-panel .form-row input[type="number"],
  .auth-panel .form-row input[type="tel"],
  .auth-panel .form-row select {
    padding: .6rem .8rem;
    font-size: .92rem;
  }
  .auth-panel .form-row .input-with-icon > input {
    padding-left: 2.45rem;
  }
  .auth-panel .btn-lg { height: 42px; padding: 0 1.1rem; font-size: .92rem; }
  .auth-panel .alert { padding: .6rem .75rem; font-size: .82rem; margin-bottom: .75rem; }
  .auth-panel .text-xs { font-size: .68rem; }
  .auth-foot { margin-top: .7rem; font-size: .8rem; }

  /* Compact Google button + divider on phones */
  .google-btn-wrap { margin-bottom: .65rem; }
  .auth-divider { margin-bottom: .65rem; font-size: .66rem; }
  .auth-divider::before,
  .auth-divider::after { width: calc(50% - 3rem); }

  /* Password + confirm side-by-side on any phone wider than 360px — saves a row */
}

/* Slightly wider phones: put password + confirm side-by-side so the
   register form loses an entire row of height. */
@media (max-width: 639px) and (min-width: 380px) {
  .auth-panel .form-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
}

/* Taller phones have room to bring back the cool dashboard preview */
@media (max-width: 639px) and (min-height: 760px) {
  .auth-hero {
    padding: .9rem 1rem 1.1rem;
    padding-top: calc(.9rem + env(safe-area-inset-top));
    gap: .9rem;
  }
  .auth-hero-inner { gap: .9rem; }
  .auth-showcase { display: block; margin: 0; }
  .auth-brand img { width: 40px; height: 40px; }
  .auth-brand .name { font-size: .98rem; }
  .gauge { max-width: 220px; margin: .1rem auto .25rem; }
  .showcase-card { padding: .9rem 1rem 1rem; border-radius: 18px; }
  .showcase-head { margin-bottom: .4rem; }
  .showcase-stats { padding-top: .4rem; gap: .4rem; }
  .stat-cell .value { font-size: .9rem; }
  .stat-cell .label { font-size: .56rem; }
  .showcase-foot {
    margin-top: .55rem;
    padding: .5rem .65rem;
    font-size: .68rem;
  }
}

/* Tablet: constrain showcase width */
@media (min-width: 640px) and (max-width: 979px) {
  .auth-showcase { max-width: 460px; margin: 0 auto; }
}

/* Desktop: showcase is too literal next to the marketing copy — hide it.
   The marketing copy + features carry the hero on desktop. */
@media (min-width: 980px) {
  .auth-showcase { display: none; }
}

/* ---------- Auth form panel ---------- */
.auth-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 1rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--bg);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.auth-panel-inner {
  width: 100%;
  max-width: 420px;
  min-width: 0;
}
.auth-panel h2 {
  font-size: 1.45rem;
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.auth-panel .auth-sub {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 1.15rem;
}
.auth-panel .form-row { margin-bottom: .75rem; }
.auth-foot {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 1rem;
  text-align: center;
}

/* ---------- Google Sign-In button + "or" divider ----------
   Google renders the button inside an <iframe> that it sizes based on the
   data-width attribute on .g_id_signin. We can't shrink the iframe's
   internal rendering via CSS (it's cross-origin), so the data-width on the
   markup must fit the narrowest container (see login.php/register.php:
   data-width="300"). These rules just center the iframe and guarantee it
   can never push past its parent, which prevents right-edge clipping when
   auth-panel has overflow-x: hidden. */
.google-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 .85rem;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.google-btn-wrap > .g_id_signin,
.google-btn-wrap > div {
  display: inline-flex !important;
  justify-content: center;
  max-width: 100% !important;
  min-width: 0;
}
.google-btn-wrap iframe {
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

.auth-divider {
  position: relative;
  text-align: center;
  margin: 0 0 .85rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 2.4rem);
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-divider span {
  display: inline-block;
  padding: 0 .5rem;
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Desktop: true split-panel — tightened so it fits a laptop viewport */
@media (min-width: 980px) {
  .auth-split {
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .auth-hero {
    padding: 2rem 2.5rem;
    gap: 1.1rem;
    justify-content: center;
  }
  .auth-hero-inner {
    justify-content: flex-start;
    gap: 1.25rem;
    max-width: 540px;
    margin: 0;
    height: auto;
  }
  .auth-hero-watermark { display: block; }
  .auth-capstrip { display: grid; }
  /* Features hidden on desktop — capstrip replaces them */
  .auth-features { display: none; }

  .auth-brand img { width: 42px; height: 42px; }
  .auth-brand .name { font-size: 1.05rem; }
  .auth-brand .tag { font-size: .65rem; }

  .auth-hero-copy { max-width: 500px; }
  .auth-hero-copy h1 {
    font-size: clamp(1.6rem, 1rem + 1.3vw, 2rem);
    line-height: 1.18;
    margin-bottom: .5rem;
  }
  .auth-hero-copy p {
    font-size: .92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 480px;
  }
  .auth-hero-foot { margin-top: 1rem; font-size: .72rem; }

  /* Form panel: give it real presence */
  .auth-panel {
    align-items: center;
    padding: 1.5rem 1.75rem;
    background:
      radial-gradient(520px 360px at 100% 0%, var(--brand-50) 0%, transparent 60%),
      radial-gradient(420px 300px at 0% 100%, var(--brand-50) 0%, transparent 55%),
      var(--bg);
  }
  .auth-panel-inner {
    max-width: 380px;
    padding: 1.75rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow:
      0 40px 80px -40px rgba(15, 30, 80, .22),
      0 8px 20px -8px rgba(15, 30, 80, .08);
  }
  .auth-panel h2 {
    font-size: 1.45rem;
    margin-bottom: .35rem;
  }
  .auth-panel .auth-sub {
    margin-bottom: 1.1rem;
    font-size: .88rem;
  }
  .auth-panel .form-row { margin-bottom: .7rem; }
  .auth-foot { margin-top: 1rem; font-size: .82rem; }
}

/* Short viewports (laptops ~720–840px tall) — squeeze a touch more */
@media (min-width: 980px) and (max-height: 840px) {
  .auth-hero {
    padding: 1.25rem 2.25rem;
    gap: .85rem;
  }
  .auth-hero-inner { gap: .95rem; }
  .auth-brand img { width: 36px; height: 36px; }
  .auth-brand .name { font-size: .98rem; }
  .auth-hero-copy h1 { font-size: 1.4rem; line-height: 1.2; margin-bottom: .35rem; }
  .auth-hero-copy p { font-size: .85rem; line-height: 1.45; }
  .auth-capstrip { gap: .45rem; margin-top: .35rem; }
  .auth-capstrip .cap { padding: .45rem .55rem; }
  .auth-capstrip .cap strong { font-size: .75rem; }
  .auth-capstrip .cap span { font-size: .64rem; }
  .auth-hero-foot { margin-top: .6rem; font-size: .68rem; }

  .auth-panel { padding: 1.25rem 1.75rem; }
  .auth-panel-inner { padding: 1.5rem 1.85rem; border-radius: 16px; }
  .auth-panel h2 { font-size: 1.35rem; margin-bottom: .3rem; }
  .auth-panel .auth-sub { margin-bottom: .95rem; font-size: .85rem; }
  .auth-panel .form-row { margin-bottom: .6rem; }
  .auth-panel .form-row label { margin-bottom: .3rem; font-size: .84rem; }
  .auth-panel .btn-lg { padding: .8rem 1.1rem; font-size: .98rem; }
  .auth-foot { margin-top: .85rem; font-size: .8rem; }
}

/* Very short (~720p) — collapse capstrip to single column */
@media (min-width: 980px) and (max-height: 740px) {
  .auth-capstrip { grid-template-columns: 1fr 1fr; gap: .35rem; }
  .auth-capstrip .cap span { display: none; }
  .auth-capstrip .cap { padding: .4rem .55rem; }
}

/* =====================================================================
   16. Motion preferences
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================================
   17. Micro-interactions & polish
   ===================================================================== */
/* Subtle body gradient so the app doesn't read as flat-flat-flat */
body {
  background:
    radial-gradient(1200px 600px at 100% -200px, rgba(30, 80, 224, .06), transparent 60%),
    radial-gradient(900px 500px at -200px 120%, rgba(30, 80, 224, .05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -200px, rgba(59, 109, 255, .08), transparent 60%),
    radial-gradient(900px 500px at -200px 120%, rgba(30, 80, 224, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Asset thumbnail hover — subtle zoom */
.asset-card .asset-thumb { transition: transform .3s ease; }
.asset-card:hover .asset-thumb { transform: scale(1.02); }

/* Ring the stats when hovered */
a.stat { cursor: pointer; }
a.stat:hover { transform: translateY(-1px); }

/* Input hover state (non-focus) */
.form-row input:hover:not(:focus),
.form-row select:hover:not(:focus),
.form-row textarea:hover:not(:focus),
.input:hover:not(:focus) {
  border-color: var(--border-strong);
}

/* Fade content in on first paint — fast and subtle */
@keyframes chipit-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-inner > * { animation: chipit-fade-up .35s ease both; }
.content-inner > *:nth-child(2) { animation-delay: .04s; }
.content-inner > *:nth-child(3) { animation-delay: .08s; }
.content-inner > *:nth-child(4) { animation-delay: .12s; }

/* =====================================================================
   19. List rows (dashboard side-cards) — mobile-first, crisp on tiny phones
   ===================================================================== */
.list-rows { display: flex; flex-direction: column; }
.list-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.list-row:hover { background: var(--surface-2); text-decoration: none; }
.list-row:last-child { border-bottom: none; }
.list-row-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--warn-bg);
  color: var(--warn);
}
.list-row-icon.bad   { background: var(--danger-bg);  color: var(--danger); }
.list-row-icon.warn  { background: var(--warn-bg);    color: var(--warn); }
.list-row-icon.brand { background: var(--brand-50);   color: var(--primary); }
.list-row-icon.sm    { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; }
.list-row-body { flex: 1; min-width: 0; }
.list-row-title {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.list-row-sub {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 1px;
}
.list-row-meta {
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.list-row-meta.bad   { color: var(--danger); }
.list-row-meta.warn  { color: var(--warn); }
.list-row-meta.muted { color: var(--muted); font-weight: 500; }

@media (max-width: 400px) {
  .list-row { padding: .65rem .85rem; gap: .6rem; }
  .list-row-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; }
  .list-row-icon.sm { width: 28px; height: 28px; min-width: 28px; }
}

/* =====================================================================
   20. Subnav (back link + utility action at top of detail pages)
   ===================================================================== */
.subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.subnav-back {
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
}
.subnav-back:hover { color: var(--text); text-decoration: underline; }
.subnav-danger { color: var(--danger); }
.subnav-danger:hover { color: var(--danger); border-color: var(--danger-bd); background: var(--danger-bg); }

/* =====================================================================
   21. Dashboard instrument cluster — tighter on narrow phones
   ===================================================================== */
@media (max-width: 480px) {
  .instrument-cluster {
    padding: .9rem .95rem .85rem;
    border-radius: 16px;
    margin-bottom: 1.1rem;
  }
  .cluster-head { margin-bottom: .45rem; }
  .cluster-label { font-size: .62rem; letter-spacing: .12em; }
  .cluster-pill { padding: 3px 8px; font-size: .6rem; }
  .cluster-grid { gap: .6rem; }
  /* Keep the gauge readable on phones — drop the cap so it fills the
     card width instead of shrinking to a tiny dial. */
  .cluster-gauge-wrap { max-width: 100%; }
  .cluster-stats { gap: .45rem; }
  .cluster-stat {
    padding: .5rem .6rem .55rem;
    column-gap: .5rem;
  }
  .cluster-stat-icon {
    width: 28px; height: 28px; min-width: 28px;
    border-radius: 8px;
  }
  .cluster-stat-icon svg { width: 14px; height: 14px; }
  .cluster-stat .label { font-size: .55rem; letter-spacing: .12em; margin-bottom: 1px; }
  .cluster-stat .value { font-size: 1.05rem; }
  .cluster-stat .sub   { font-size: .62rem; }
  .cluster-foot {
    padding: .55rem .7rem;
    font-size: .76rem;
    gap: .45rem;
  }
}

/* Extra-narrow phones (iPhone SE, 320–360px): switch stats to single column
   so each cell has breathing room and values don't collide with the labels. */
@media (max-width: 360px) {
  .cluster-stats { grid-template-columns: 1fr; }
  .cluster-stat { padding: .6rem .7rem; }
  .cluster-stat .value { font-size: 1.15rem; }
}

/* =====================================================================
   22. Dashboard 2-up on mobile — breathing room between sections
   ===================================================================== */
.dash-layout > section + aside,
.dash-layout > aside + section { margin-top: .25rem; }

/* Card header a touch tighter on phones so the list rows underneath don't
   fight for vertical space */
@media (max-width: 480px) {
  .card-header { padding: .75rem .9rem; }
  .card-header h2, .card-header h3 { font-size: .95rem; }
}

/* Content padding tightens on narrow phones */
@media (max-width: 400px) {
  .content { padding: .85rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .card { padding: 1rem; }
}

/* =====================================================================
   ONBOARDING — install-app + enable-notifications popups shown on first
   launch / first sign-in. Inspired by myClubVault's one-time setup flow.
   The overlay dims the page; the card slides up with a subtle bounce.
   ===================================================================== */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(5, 7, 15, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  padding-top:    calc(1rem + env(safe-area-inset-top));
  animation: onboard-fade .28s ease both;
}
@keyframes onboard-fade { from { opacity: 0; } to { opacity: 1; } }
.onboard-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  color: var(--text);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  text-align: center;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  animation: onboard-rise .42s cubic-bezier(.22,1.1,.36,1) both;
}
@keyframes onboard-rise {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.onboard-icon {
  width: 66px; height: 66px;
  border-radius: 18px;
  margin: 0 auto .9rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1e50e0 0%, #4a7bff 100%);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(30,80,224,.6);
}
.onboard-icon svg { width: 32px; height: 32px; }

/* When the onboard card hosts the actual app icon (install popup), let it
   show through as a real app tile — no gradient background, just a crisp
   rounded PNG matching the artwork that lands on the user's home screen. */
.onboard-icon:has(.onboard-app-icon) {
  background: transparent;
  box-shadow: 0 18px 36px -14px rgba(11,19,40,.55);
  width: 84px; height: 84px;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
}
.onboard-app-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.onboard-title {
  margin: 0 0 .5rem;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.onboard-text {
  margin: 0 0 1.1rem;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
}
.onboard-actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.onboard-actions .btn { width: 100%; justify-content: center; }
.onboard-skip {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: .85rem;
  padding: .45rem;
  cursor: pointer;
  font-weight: 500;
}
.onboard-skip:hover { color: var(--text); }
.onboard-never {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .75rem;
  color: var(--muted);
  padding: .25rem 0 0;
  cursor: pointer;
  user-select: none;
}
.onboard-never input { accent-color: var(--primary); }

/* Step-by-step manual install instructions (iOS / Samsung / fallback) */
.onboard-steps {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0 0 1rem;
  text-align: left;
}
.onboard-step {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem .85rem;
  background: var(--surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--text);
}
.onboard-step b { color: var(--text); font-weight: 700; }
.onboard-step-num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e50e0, #4a7bff);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  display: grid;
  place-items: center;
}
.onboard-step svg { flex-shrink: 0; color: var(--primary); }
:root[data-theme="dark"] .onboard-step { background: rgba(255,255,255,.03); }

/* =====================================================================
   SETTINGS — App card row (Install / Notifications). A shared row
   layout with label + supporting text on the left and a control
   (button or toggle) on the right, stacking on narrow phones.
   ===================================================================== */
.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.app-row:first-child { border-top: 0; padding-top: 0; }
.app-row:last-child  { padding-bottom: 0; }
.app-row-main { flex: 1; min-width: 0; }
.app-row-main > b {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.app-row-main > p {
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}
.app-row-ctrl { flex-shrink: 0; }
.app-row-ctrl .btn { white-space: nowrap; }
.app-row-note {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--muted);
}
.app-row-note a { color: var(--primary); font-weight: 600; }

@media (max-width: 520px) {
  .app-row { flex-direction: column; align-items: stretch; gap: .6rem; }
  .app-row-ctrl { align-self: flex-start; }
  .app-row-ctrl .btn { width: 100%; }
}

/* iOS-style toggle switch. Accessible via the hidden native checkbox. */
.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-strong, #cbd1dc);
  border-radius: 999px;
  transition: background .2s ease;
}
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.1);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), background .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(30,80,224,.2); }
.toggle-switch.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}
.toggle-switch.is-disabled input { pointer-events: none; }
:root[data-theme="dark"] .toggle-track { background: rgba(255,255,255,.15); }

/* iOS nudge banner that sits at the bottom of the screen */
.ios-install-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.22,1.1,.36,1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ios-install-banner.show { transform: translateY(0); }
.ios-banner-icon {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e50e0 0%, #4a7bff 100%);
  display: grid;
  place-items: center;
  color: #fff;
}
.ios-banner-icon svg { width: 20px; height: 20px; }
.ios-banner-text { flex: 1; min-width: 0; line-height: 1.3; }
.ios-banner-text strong { display: block; font-size: .92rem; font-weight: 700; color: var(--text); }
.ios-banner-text span   { font-size: .78rem; color: var(--muted); }
.ios-banner-close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2, rgba(0,0,0,.05));
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ios-banner-close:hover { background: rgba(0,0,0,.1); color: var(--text); }
:root[data-theme="dark"] .ios-banner-close { background: rgba(255,255,255,.06); }

/* =====================================================================
   22. Service-log template picker + smart due chips + history list
   ===================================================================== */

/* Template info card shown under the dropdown on /logs/add.php */
.template-info {
  margin: -.4rem 0 1rem;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, rgba(30, 80, 224, .06), rgba(30, 80, 224, .02));
  border: 1px solid rgba(30, 80, 224, .22);
  border-radius: 12px;
}
:root[data-theme="dark"] .template-info {
  background: linear-gradient(180deg, rgba(74, 123, 255, .12), rgba(74, 123, 255, .03));
  border-color: rgba(74, 123, 255, .28);
}
.template-info-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: .35rem;
}
.template-info-label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
}
.template-info-pill {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(30, 80, 224, .14);
  color: #1e50e0;
  border: 1px solid rgba(30, 80, 224, .22);
}
:root[data-theme="dark"] .template-info-pill {
  background: rgba(74, 123, 255, .2);
  color: #cfdcff;
  border-color: rgba(74, 123, 255, .35);
}
.template-info-desc {
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}
.template-info-tips {
  margin: .35rem 0 0 1rem;
  padding: 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
}
.template-info-projection {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed rgba(120, 140, 180, .28);
}
.template-info-projection .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.template-info-projection .chip-cal  { color: #1e50e0; border-color: rgba(30, 80, 224, .35); }
.template-info-projection .chip-mile { color: #b45309; border-color: rgba(180, 83, 9, .35); }
:root[data-theme="dark"] .template-info-projection .chip-cal  { color: #93c5fd; border-color: rgba(120, 170, 255, .45); }
:root[data-theme="dark"] .template-info-projection .chip-mile { color: #fcd34d; border-color: rgba(252, 211, 77, .35); }

/* Standalone select control (outside .form-row) — used on service-history filter */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--input-bg, var(--surface));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .9rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  min-width: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23687387' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  padding-right: 2rem;
}
.form-select:focus {
  outline: none;
  border-color: var(--primary, #1e50e0);
  box-shadow: 0 0 0 3px rgba(30, 80, 224, .15);
}

/* Badge-muted token used in service history listing */
.badge-muted {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(120, 140, 180, .14);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 600;
}

/* Generic fieldset used on the next-due group */
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem 1rem 1rem;
  margin: 0 0 1rem;
  background: var(--surface);
}
.form-fieldset legend {
  padding: 0 .4rem;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Smart due chips on the asset detail timeline */
.tl-due-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  font-size: .78rem;
}
.tl-head { display: flex; align-items: flex-start; gap: .75rem; }
.tl-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.due-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .74rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.due-chip svg { flex-shrink: 0; }
.due-chip.due-ok      { background: rgba(34, 197, 94, .1);  color: #166534; border-color: rgba(34, 197, 94, .3); }
.due-chip.due-soon    { background: rgba(245, 158, 11, .12); color: #92400e; border-color: rgba(245, 158, 11, .35); }
.due-chip.due-overdue { background: rgba(239, 68, 68, .12);  color: #991b1b; border-color: rgba(239, 68, 68, .35); }
:root[data-theme="dark"] .due-chip.due-ok      { color: #86efac; }
:root[data-theme="dark"] .due-chip.due-soon    { color: #fcd34d; }
:root[data-theme="dark"] .due-chip.due-overdue { color: #fca5a5; }

/* =============================================================================
 * Settings → service history page (refreshed)
 *
 * Layout principles:
 *   • Sticky toolbar so the chip filter + sort always stay reachable while
 *     scrolling a long list.
 *   • Compact rows — each log fits in ~3 lines (title, meta, due chips) so
 *     a screen full of records feels scannable instead of overwhelming.
 *   • Per-category tone — one shared palette of soft tints. Categories
 *     get a tone-* token; the row pulls a tinted left rail + matching
 *     icon background so users learn the colour mapping at a glance.
 * ============================================================================= */

/* Header card */
.sh-summary { padding: 1rem 1.2rem; }
.sh-summary-head { gap: .75rem; align-items: flex-start; }
.settings-row-main { flex: 1; min-width: 0; }

/* Sticky toolbar with vehicle filter, sort, and category chips */
.sh-toolbar {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 6;
  background: var(--bg);
  padding: .75rem 0 .25rem;
  margin-top: 1rem;
  border-bottom: 1px solid var(--border);
}
.sh-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  align-items: flex-end;
  margin-bottom: .65rem;
}
.sh-toolbar-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .2rem;
}
.sh-vehicle-filter, .sh-sort {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 180px;
}
.sh-vehicle-filter .form-select,
.sh-sort .form-select { width: 100%; }

/* Horizontal scrollable category chip bar */
.sh-chips {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .25rem .15rem .45rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sh-chips::-webkit-scrollbar { height: 4px; }
.sh-chips::-webkit-scrollbar-thumb { background: rgba(120,140,180,.3); border-radius: 4px; }

.sh-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  scroll-snap-align: start;
}
.sh-chip:hover { color: var(--text); border-color: rgba(120,140,180,.45); }
.sh-chip svg { flex-shrink: 0; }
.sh-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 .4rem;
  border-radius: 999px;
  background: rgba(120,140,180,.15);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}
.sh-chip.is-active {
  background: var(--primary, #1e50e0);
  color: #fff;
  border-color: var(--primary, #1e50e0);
  box-shadow: 0 4px 12px rgba(30, 80, 224, .25);
}
.sh-chip.is-active .sh-chip-count {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Per-tone chip tinting (used both on the bar and on row category badges).
   Inactive chips show a tinted icon stroke + dot; active chip overrides. */
.sh-chip.tone-amber  { color: #b45309; }
.sh-chip.tone-slate  { color: #475569; }
.sh-chip.tone-red    { color: #991b1b; }
.sh-chip.tone-cyan   { color: #0e7490; }
.sh-chip.tone-violet { color: #6d28d9; }
.sh-chip.tone-orange { color: #c2410c; }
.sh-chip.tone-lime   { color: #4d7c0f; }
.sh-chip.tone-yellow { color: #a16207; }
.sh-chip.tone-blue   { color: #1d4ed8; }
.sh-chip.tone-green  { color: #15803d; }
.sh-chip.tone-muted  { color: var(--muted); }
:root[data-theme="dark"] .sh-chip.tone-amber  { color: #fcd34d; }
:root[data-theme="dark"] .sh-chip.tone-slate  { color: #cbd5e1; }
:root[data-theme="dark"] .sh-chip.tone-red    { color: #fca5a5; }
:root[data-theme="dark"] .sh-chip.tone-cyan   { color: #67e8f9; }
:root[data-theme="dark"] .sh-chip.tone-violet { color: #c4b5fd; }
:root[data-theme="dark"] .sh-chip.tone-orange { color: #fdba74; }
:root[data-theme="dark"] .sh-chip.tone-lime   { color: #bef264; }
:root[data-theme="dark"] .sh-chip.tone-yellow { color: #fde68a; }
:root[data-theme="dark"] .sh-chip.tone-blue   { color: #93c5fd; }
:root[data-theme="dark"] .sh-chip.tone-green  { color: #86efac; }

/* List + groups */
.sh-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.sh-group {
  padding: 1rem 1.2rem;
  transition: opacity .15s;
}
.sh-group.is-filtered-out { display: none; }
.sh-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  padding-bottom: .55rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}
.sh-group-head h3 { font-size: 1rem; }
.sh-group-head h3 a { color: var(--text); text-decoration: none; }
.sh-group-head h3 a:hover { color: var(--primary); }
.sh-group-meta { font-variant-numeric: tabular-nums; }
.sh-group-empty { padding: .5rem 0 0; }

/* Compact rows */
.sh-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sh-row {
  display: flex;
  gap: .7rem;
  padding: .55rem .15rem .55rem .55rem;
  border-bottom: 1px solid rgba(120,140,180,.14);
  border-left: 3px solid transparent;
  border-radius: 8px;
  transition: background .12s, border-color .12s;
  position: relative;
}
.sh-row:last-child { border-bottom: none; }
.sh-row:hover { background: rgba(120, 140, 180, .05); }

.sh-row-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120,140,180,.12);
  color: var(--muted);
}
.sh-row-body { flex: 1; min-width: 0; }

.sh-row-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .15rem;
}
.sh-row-title {
  margin: 0;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.25;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.sh-row-cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(120,140,180,.12);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.sh-row-meta {
  font-size: .74rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  font-variant-numeric: tabular-nums;
}
.sh-meta-date { font-weight: 600; color: var(--text); }
.sh-row-notes {
  margin: .3rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  /* Clamp so a giant notes block doesn't blow up row height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sh-row-due {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .4rem;
}
.sh-due-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .7rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.sh-due-chip.due-ok      { background: rgba(34, 197, 94, .1);  color: #166534; border-color: rgba(34, 197, 94, .3); }
.sh-due-chip.due-soon    { background: rgba(245, 158, 11, .12); color: #92400e; border-color: rgba(245, 158, 11, .35); }
.sh-due-chip.due-overdue { background: rgba(239, 68, 68, .12);  color: #991b1b; border-color: rgba(239, 68, 68, .35); }
:root[data-theme="dark"] .sh-due-chip.due-ok      { color: #86efac; }
:root[data-theme="dark"] .sh-due-chip.due-soon    { color: #fcd34d; }
:root[data-theme="dark"] .sh-due-chip.due-overdue { color: #fca5a5; }

/* Per-tone row decoration — left rail + tinted icon background */
.sh-row.tone-amber  { border-left-color: rgba(245, 158, 11, .55); }
.sh-row.tone-amber  .sh-row-icon { background: rgba(245, 158, 11, .14); color: #b45309; }
.sh-row.tone-amber  .sh-row-cat  { background: rgba(245, 158, 11, .14); color: #b45309; }

.sh-row.tone-slate  { border-left-color: rgba(100, 116, 139, .55); }
.sh-row.tone-slate  .sh-row-icon { background: rgba(100, 116, 139, .15); color: #475569; }
.sh-row.tone-slate  .sh-row-cat  { background: rgba(100, 116, 139, .15); color: #475569; }

.sh-row.tone-red    { border-left-color: rgba(239, 68, 68, .55); }
.sh-row.tone-red    .sh-row-icon { background: rgba(239, 68, 68, .12); color: #991b1b; }
.sh-row.tone-red    .sh-row-cat  { background: rgba(239, 68, 68, .12); color: #991b1b; }

.sh-row.tone-cyan   { border-left-color: rgba(14, 165, 233, .55); }
.sh-row.tone-cyan   .sh-row-icon { background: rgba(14, 165, 233, .14); color: #0e7490; }
.sh-row.tone-cyan   .sh-row-cat  { background: rgba(14, 165, 233, .14); color: #0e7490; }

.sh-row.tone-violet { border-left-color: rgba(124, 58, 237, .55); }
.sh-row.tone-violet .sh-row-icon { background: rgba(124, 58, 237, .14); color: #6d28d9; }
.sh-row.tone-violet .sh-row-cat  { background: rgba(124, 58, 237, .14); color: #6d28d9; }

.sh-row.tone-orange { border-left-color: rgba(234, 88, 12, .55); }
.sh-row.tone-orange .sh-row-icon { background: rgba(234, 88, 12, .14); color: #c2410c; }
.sh-row.tone-orange .sh-row-cat  { background: rgba(234, 88, 12, .14); color: #c2410c; }

.sh-row.tone-lime   { border-left-color: rgba(132, 204, 22, .55); }
.sh-row.tone-lime   .sh-row-icon { background: rgba(132, 204, 22, .15); color: #4d7c0f; }
.sh-row.tone-lime   .sh-row-cat  { background: rgba(132, 204, 22, .15); color: #4d7c0f; }

.sh-row.tone-yellow { border-left-color: rgba(234, 179, 8, .55); }
.sh-row.tone-yellow .sh-row-icon { background: rgba(234, 179, 8, .15); color: #a16207; }
.sh-row.tone-yellow .sh-row-cat  { background: rgba(234, 179, 8, .15); color: #a16207; }

.sh-row.tone-blue   { border-left-color: rgba(59, 130, 246, .55); }
.sh-row.tone-blue   .sh-row-icon { background: rgba(59, 130, 246, .14); color: #1d4ed8; }
.sh-row.tone-blue   .sh-row-cat  { background: rgba(59, 130, 246, .14); color: #1d4ed8; }

.sh-row.tone-green  { border-left-color: rgba(34, 197, 94, .55); }
.sh-row.tone-green  .sh-row-icon { background: rgba(34, 197, 94, .14); color: #15803d; }
.sh-row.tone-green  .sh-row-cat  { background: rgba(34, 197, 94, .14); color: #15803d; }

.sh-row.tone-muted  { border-left-color: rgba(120, 140, 180, .35); }

/* Dark mode — bump tone text colours to lighter values */
:root[data-theme="dark"] .sh-row.tone-amber  .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-amber  .sh-row-cat  { color: #fcd34d; }
:root[data-theme="dark"] .sh-row.tone-slate  .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-slate  .sh-row-cat  { color: #cbd5e1; }
:root[data-theme="dark"] .sh-row.tone-red    .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-red    .sh-row-cat  { color: #fca5a5; }
:root[data-theme="dark"] .sh-row.tone-cyan   .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-cyan   .sh-row-cat  { color: #67e8f9; }
:root[data-theme="dark"] .sh-row.tone-violet .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-violet .sh-row-cat  { color: #c4b5fd; }
:root[data-theme="dark"] .sh-row.tone-orange .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-orange .sh-row-cat  { color: #fdba74; }
:root[data-theme="dark"] .sh-row.tone-lime   .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-lime   .sh-row-cat  { color: #bef264; }
:root[data-theme="dark"] .sh-row.tone-yellow .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-yellow .sh-row-cat  { color: #fde68a; }
:root[data-theme="dark"] .sh-row.tone-blue   .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-blue   .sh-row-cat  { color: #93c5fd; }
:root[data-theme="dark"] .sh-row.tone-green  .sh-row-icon,
:root[data-theme="dark"] .sh-row.tone-green  .sh-row-cat  { color: #86efac; }

/* Edit mode — delete buttons hidden by default; revealed when the user
   explicitly toggles edit mode on the page. Adds intentional friction. */
.sh-row-actions { display: none; align-self: center; }
.sh-list.is-edit .sh-row-actions { display: flex; }
.sh-row-actions .btn {
  padding: .35rem .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-danger {
  background: rgba(239, 68, 68, .12);
  color: #991b1b;
  border: 1px solid rgba(239, 68, 68, .35);
}
.btn.btn-danger:hover {
  background: rgba(239, 68, 68, .2);
  color: #7f1d1d;
}
:root[data-theme="dark"] .btn.btn-danger { color: #fca5a5; border-color: rgba(239, 68, 68, .45); }
:root[data-theme="dark"] .btn.btn-danger:hover { color: #fecaca; }

@media (max-width: 640px) {
  .sh-summary-head { flex-direction: column; align-items: stretch; }
  .sh-summary-head > div + button { align-self: flex-end; }
  .sh-toolbar { padding-top: .6rem; }
  .sh-toolbar-row { gap: .6rem; }
  .sh-vehicle-filter, .sh-sort { flex: 1 1 0; min-width: 140px; }

  .sh-row {
    padding: .55rem .15rem .65rem .5rem;
    gap: .55rem;
  }
  .sh-row-icon { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; }
  .sh-row-icon svg { width: 14px; height: 14px; }
  .sh-row-title { font-size: .87rem; }
  .sh-row-cat   { font-size: .6rem; padding: .1rem .4rem; }
  .sh-row-meta  { font-size: .72rem; }
  .sh-due-chip  { font-size: .67rem; padding: .1rem .42rem; }
}

/* =============================================================================
 * Asset detail (assets/view.php) — service history block
 *
 * Reuses the .sh-row + .sh-chip vocabulary defined above so the per-asset
 * timeline looks identical to the global one. Adds:
 *   • A header row with overdue chip pill
 *   • A horizontal chip + sort toolbar tuned for a single-vehicle context
 *   • Photo thumbnail strip (lightbox-driven)
 * ============================================================================= */

.ah-history { margin-top: 1.5rem; }
.ah-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.ah-history-title { display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; }
.ah-history-title h2 { font-size: 1.15rem; }

.ah-overdue-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, .12);
  color: #991b1b;
  border: 1px solid rgba(239, 68, 68, .35);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
:root[data-theme="dark"] .ah-overdue-chip { color: #fca5a5; }

/* Toolbar: chips + sort. Chips scroll horizontally, sort is fixed-width. */
.ah-toolbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .9rem;
  flex-wrap: nowrap;
}
.ah-chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem .4rem 0;
  scroll-snap-type: x proximity;
  flex: 1;
  min-width: 0;
}
.ah-chips::-webkit-scrollbar { height: 4px; }
.ah-chips::-webkit-scrollbar-thumb { background: rgba(120,140,180,.3); border-radius: 4px; }
.ah-sort {
  flex: 0 0 auto;
}
.ah-sort .form-select {
  padding: .4rem .85rem;
  padding-right: 1.85rem;
  font-size: .8rem;
  background-position: right .55rem center;
}

/* =============================================================================
 * Asset detail — premium service-history CARD system.
 *
 * Each log is a self-contained card that visually reads like a dashboard
 * cluster tile in a high-end automotive app:
 *   • Category tone-coloured rail across the top
 *   • Big category badge w/ glyph + eyebrow label
 *   • Instrument-cluster style date block (MONTH / DAY / YEAR stacked)
 *   • Mileage stat + status pill in a flex stat row
 *   • Notes in a subtle quote-style block
 *   • Due chips in their own labelled row
 *   • Real photo gallery (proper aspect-ratio square thumbs with hover zoom)
 *
 * Hover lifts the card. Overdue cards pulse a soft red glow so they're
 * impossible to miss when scanning a long list.
 * ============================================================================= */

.ah-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 1rem;
}

.ah-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(0,0,0,.015) 100%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.05rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
}
:root[data-theme="dark"] .ah-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(15,22,40,.65) 0%, rgba(15,22,40,.85) 100%);
}
.ah-card:hover {
  transform: translateY(-2px);
  border-color: rgba(120, 140, 180, .45);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.35), 0 4px 10px -4px rgba(0,0,0,.15);
}

/* Top accent rail — 3px stripe coloured by category tone */
.ah-card-rail {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor 18%, currentColor 82%, transparent);
  opacity: .85;
  pointer-events: none;
}
.ah-card.tone-amber  .ah-card-rail { color: #f59e0b; }
.ah-card.tone-slate  .ah-card-rail { color: #64748b; }
.ah-card.tone-red    .ah-card-rail { color: #ef4444; }
.ah-card.tone-cyan   .ah-card-rail { color: #06b6d4; }
.ah-card.tone-violet .ah-card-rail { color: #8b5cf6; }
.ah-card.tone-orange .ah-card-rail { color: #ea580c; }
.ah-card.tone-lime   .ah-card-rail { color: #84cc16; }
.ah-card.tone-yellow .ah-card-rail { color: #eab308; }
.ah-card.tone-blue   .ah-card-rail { color: #3b82f6; }
.ah-card.tone-green  .ah-card-rail { color: #22c55e; }
.ah-card.tone-muted  .ah-card-rail { color: rgba(120, 140, 180, .55); }

/* Overdue cards pulse softly so they stand out at a glance */
.ah-card.due-overdue {
  border-color: rgba(239, 68, 68, .45);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, .25) inset,
    0 12px 30px -16px rgba(239, 68, 68, .35);
}
.ah-card.due-overdue::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 50% -10%, rgba(239,68,68,.10), transparent 60%);
  pointer-events: none;
}

/* Header: category badge ←→ date block.
 *
 * The category badge takes available space (flex: 1 1 auto, min-width: 0
 * so its text can truncate). The date block is fixed-size and never
 * shrinks — it always reads cleanly even on a 320px-wide phone. */
.ah-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}

.ah-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.ah-cat-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 140, 180, .12);
  color: var(--muted);
  flex-shrink: 0;
  position: relative;
}
.ah-cat-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.ah-cat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}
.ah-cat-eyebrow {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ah-cat-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tone-tinted icon badges per category */
.ah-card.tone-amber  .ah-cat-icon { background: rgba(245, 158, 11, .14); color: #b45309; }
.ah-card.tone-slate  .ah-cat-icon { background: rgba(100, 116, 139, .15); color: #475569; }
.ah-card.tone-red    .ah-cat-icon { background: rgba(239, 68, 68, .14);  color: #b91c1c; }
.ah-card.tone-cyan   .ah-cat-icon { background: rgba(6, 182, 212, .14);  color: #0e7490; }
.ah-card.tone-violet .ah-cat-icon { background: rgba(139, 92, 246, .14); color: #6d28d9; }
.ah-card.tone-orange .ah-cat-icon { background: rgba(234, 88, 12, .14);  color: #c2410c; }
.ah-card.tone-lime   .ah-cat-icon { background: rgba(132, 204, 22, .15); color: #4d7c0f; }
.ah-card.tone-yellow .ah-cat-icon { background: rgba(234, 179, 8, .15);  color: #a16207; }
.ah-card.tone-blue   .ah-cat-icon { background: rgba(59, 130, 246, .14); color: #1d4ed8; }
.ah-card.tone-green  .ah-cat-icon { background: rgba(34, 197, 94, .14);  color: #15803d; }
.ah-card.tone-muted  .ah-cat-icon { background: rgba(120, 140, 180, .12); color: var(--muted); }
:root[data-theme="dark"] .ah-card.tone-amber  .ah-cat-icon { color: #fcd34d; }
:root[data-theme="dark"] .ah-card.tone-slate  .ah-cat-icon { color: #cbd5e1; }
:root[data-theme="dark"] .ah-card.tone-red    .ah-cat-icon { color: #fca5a5; }
:root[data-theme="dark"] .ah-card.tone-cyan   .ah-cat-icon { color: #67e8f9; }
:root[data-theme="dark"] .ah-card.tone-violet .ah-cat-icon { color: #c4b5fd; }
:root[data-theme="dark"] .ah-card.tone-orange .ah-cat-icon { color: #fdba74; }
:root[data-theme="dark"] .ah-card.tone-lime   .ah-cat-icon { color: #bef264; }
:root[data-theme="dark"] .ah-card.tone-yellow .ah-cat-icon { color: #fde68a; }
:root[data-theme="dark"] .ah-card.tone-blue   .ah-cat-icon { color: #93c5fd; }
:root[data-theme="dark"] .ah-card.tone-green  .ah-cat-icon { color: #86efac; }

/* Instrument-cluster style date block (MONTH / DAY / YEAR stacked) */
.ah-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .25rem .6rem;
  border-radius: 10px;
  background: rgba(120, 140, 180, .08);
  border: 1px solid var(--border);
  min-width: 56px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .04em;
}
.ah-date-month {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .15rem;
}
.ah-date-day {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}
.ah-date-year {
  font-size: .58rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: .15rem;
}

.ah-card-body { display: flex; flex-direction: column; gap: .55rem; }

.ah-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.01em;
  word-break: break-word;
}
.ah-card-tpl {
  margin: -.3rem 0 0;
  font-size: .76rem;
  color: var(--muted);
  font-weight: 500;
}

/* Stat row — mileage chip + status pill */
.ah-stat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .15rem;
}
.ah-stat {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .35rem .6rem;
  border-radius: 9px;
  background: rgba(120, 140, 180, .08);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.ah-stat svg {
  align-self: center;
  flex-shrink: 0;
  color: var(--muted);
}
.ah-stat-num {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.ah-stat-unit {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

.ah-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ah-status-pill .ah-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(120,140,180,.18);
}
.ah-status-pill.due-ok      { color: #15803d; background: rgba(34,197,94,.1);   border-color: rgba(34,197,94,.3); }
.ah-status-pill.due-soon    { color: #92400e; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.ah-status-pill.due-overdue { color: #991b1b; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.4); }
.ah-status-pill.due-overdue .ah-status-dot { animation: ahPulse 1.6s ease-in-out infinite; }
@keyframes ahPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
:root[data-theme="dark"] .ah-status-pill.due-ok      { color: #86efac; }
:root[data-theme="dark"] .ah-status-pill.due-soon    { color: #fcd34d; }
:root[data-theme="dark"] .ah-status-pill.due-overdue { color: #fca5a5; }

/* Notes — quote-style with subtle left rail */
.ah-card-notes {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
  padding: .55rem .7rem .55rem .8rem;
  border-left: 3px solid rgba(120, 140, 180, .25);
  background: rgba(120, 140, 180, .04);
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Due chips row */
.ah-due-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding-top: .2rem;
}
.ah-due-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .15rem;
}
.ah-due-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .76rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ah-due-chip.due-ok      { background: rgba(34, 197, 94, .1);  color: #166534; border-color: rgba(34, 197, 94, .3); }
.ah-due-chip.due-soon    { background: rgba(245, 158, 11, .12); color: #92400e; border-color: rgba(245, 158, 11, .35); }
.ah-due-chip.due-overdue { background: rgba(239, 68, 68, .12);  color: #991b1b; border-color: rgba(239, 68, 68, .4); }
:root[data-theme="dark"] .ah-due-chip.due-ok      { color: #86efac; }
:root[data-theme="dark"] .ah-due-chip.due-soon    { color: #fcd34d; }
:root[data-theme="dark"] .ah-due-chip.due-overdue { color: #fca5a5; }

/* Photo gallery — FIXED-size square thumbs in a flex row.
 *
 * IMPORTANT: previously this was a CSS grid with `minmax(96px, 1fr)` which
 * stretched a single photo to fill the entire card width (because the
 * 1/1 aspect-ratio then made the thumb the full card width × full card
 * width — a huge square). We use a flex row with hard-coded 88px square
 * tiles so a thumbnail is always a thumbnail. Wraps to multiple lines
 * naturally; on phones we shrink to 76px so 4 fit per row comfortably. */
.ah-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}
.ah-photo {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ah-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ah-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.ah-photo-icon {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ah-photo:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -10px rgba(30, 80, 224, .5);
}
.ah-photo:hover img      { transform: scale(1.06); }
.ah-photo:hover::after   { opacity: 1; }
.ah-photo:hover .ah-photo-icon { opacity: 1; transform: translateY(0); }
.ah-photo:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 80, 224, .3);
}

.ah-empty { text-align: center; padding: 1rem 0; }

/* Mobile tuning */
@media (max-width: 720px) {
  .ah-rows { grid-template-columns: 1fr; gap: .8rem; }
}
@media (max-width: 640px) {
  .ah-history-title h2 { font-size: 1.05rem; }
  .ah-toolbar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .ah-sort { align-self: stretch; }
  .ah-sort .form-select { width: 100%; }

  .ah-card { padding: .85rem .9rem .95rem; border-radius: 14px; }
  .ah-card-head { gap: .6rem; }
  .ah-cat-icon { width: 34px; height: 34px; border-radius: 10px; }
  .ah-cat-icon svg { width: 16px; height: 16px; }
  .ah-cat-name { font-size: .78rem; }
  .ah-date-day { font-size: 1.2rem; }
  .ah-date-block { min-width: 50px; padding: .2rem .5rem; }

  .ah-card-title { font-size: .98rem; }
  .ah-stat-num { font-size: .9rem; }

  .ah-photo { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 10px; }
  .ah-gallery { gap: .4rem; }
}

/* Garage management list — visually similar to service history list but
   each row has a vehicle thumbnail + meta + remove button. */
.garage-manage-list { list-style: none; padding: 0; margin: 0; }
.garage-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.2rem;
}
.garage-manage-main {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 1;
  min-width: 0;
}
.garage-manage-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--surface);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.garage-manage-text { min-width: 0; flex: 1; }
.garage-manage-name {
  margin: 0 0 .15rem;
  font-weight: 600;
  font-size: .95rem;
}
.garage-manage-name a { color: var(--text); text-decoration: none; }
.garage-manage-name a:hover { color: var(--primary); }
.garage-manage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .76rem;
  color: var(--muted);
}
.garage-manage-actions { display: none; }
.garage-manage-list.is-edit .garage-manage-actions { display: flex; }

@media (max-width: 480px) {
  .garage-manage-row { padding: .8rem .9rem; }
  .garage-manage-thumb { width: 48px; height: 48px; border-radius: 10px; }
  .garage-manage-name { font-size: .9rem; }
}

/* =====================================================================
   23. Mileage modal — quick-update odometer dialog
   The modal is permanently `display: grid` so the browser doesn't have
   to flip layout modes on every open. We toggle visibility with an
   `.is-open` class + transitions, which renders cleanly without the
   double-animation flicker that `[hidden]` + CSS animation produces.
   ===================================================================== */
.mileage-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(11, 19, 40, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease-out, visibility 0s linear .18s;
}
.mileage-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease-out, visibility 0s linear 0s;
}
/* Hard hide for SSR / no-JS — overrides everything else. */
.mileage-modal[hidden] { display: none; }

.mileage-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
  text-align: center;
  transform: translateY(8px) scale(.97);
  transition: transform .22s cubic-bezier(.2, .9, .2, 1.05);
}
.mileage-modal.is-open .mileage-modal-card {
  transform: none;
}
.mileage-modal-close {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s, border-color .12s;
}
.mileage-modal-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-bd);
}
.mileage-modal-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  margin: 0 auto .9rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1e50e0 0%, #4a7bff 100%);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(30, 80, 224, .55);
}
.mileage-modal-title {
  margin: 0 0 .35rem;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.mileage-modal-sub {
  margin: 0 0 1.1rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
}
.mileage-modal-form { text-align: left; }
.mileage-input-label {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.mileage-input-label:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30, 80, 224, .15);
}
.mileage-input-prefix,
.mileage-input-suffix {
  display: grid;
  place-items: center;
  padding: 0 .85rem;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
}
.mileage-input-prefix { color: var(--primary); }
.mileage-input-label input {
  flex: 1;
  border: none;
  outline: none;
  padding: .85rem .25rem;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--text);
  background: transparent;
  text-align: center;
  min-width: 0;
}
.mileage-modal-hint {
  margin: .55rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
}
.mileage-modal-hint.is-error {
  color: var(--danger);
  font-weight: 600;
}
.mileage-modal-actions {
  display: flex;
  gap: .55rem;
  margin-top: 1.1rem;
  justify-content: stretch;
}
.mileage-modal-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 420px) {
  .mileage-modal-card { padding: 1.4rem 1.15rem 1.2rem; border-radius: 16px; }
  .mileage-modal-icon { width: 48px; height: 48px; border-radius: 14px; }
  .mileage-modal-title { font-size: 1.1rem; }
  .mileage-modal-sub   { font-size: .82rem; }
  .mileage-input-label input { font-size: 1.2rem; padding: .75rem .2rem; }
}

/* =====================================================================
   SAVING OVERLAY — full-screen "Saving…" spinner shown the moment a
   user submits a form that uploads images. Server-side image
   recompression can take a couple seconds; without this the page
   feels frozen. Built off the mileage-modal pattern so transitions
   match the rest of the app.
   ===================================================================== */
.saving-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;            /* above the mileage modal & onboarding */
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(11, 19, 40, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease-out, visibility 0s linear .18s;
}
.saving-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease-out, visibility 0s linear 0s;
}
.saving-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 1.6rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
  text-align: center;
  transform: translateY(8px) scale(.97);
  transition: transform .22s cubic-bezier(.2, .9, .2, 1.05);
}
.saving-overlay.is-open .saving-card { transform: none; }
.saving-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto .9rem;
  display: grid;
  place-items: center;
}
.saving-spinner svg {
  width: 100%;
  height: 100%;
  animation: savingSpin 1s linear infinite;
}
.saving-spinner circle {
  stroke: var(--primary, #1e50e0);
  stroke-linecap: round;
  stroke-dasharray: 90 60;
  filter: drop-shadow(0 4px 10px rgba(30, 80, 224, .35));
}
.saving-title {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .25rem;
}
.saving-sub {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--muted);
}
.saving-sub[hidden] { display: none; }

@keyframes savingSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .saving-spinner svg { animation-duration: 2.4s; }
  .saving-card { transition: none; transform: none; }
}

/* =====================================================================
   IMAGE LIGHTBOX — full-screen photo viewer for clicked thumbnails.
   In-app (no _blank navigation) so the user never gets stranded in
   the OS browser when running as an installed PWA. Closes on:
     • Tap the close (×) button
     • Tap anywhere on the dark backdrop
     • ESC key
     • Browser/system back gesture (we push a history entry)
   ===================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 11500;
  display: grid;
  place-items: center;
  padding: 0;
  /* Fully-opaque background — earlier I had backdrop-filter: blur() but
     mobile Chrome/Safari intermittently drop the blur layer after a
     few seconds of compositing, causing rectangles of pure black to
     flash through. A solid color avoids the bug entirely and looks
     identical at this opacity. */
  background: #05070f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease-out, visibility 0s linear .18s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease-out, visibility 0s linear 0s;
}
.lightbox-img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
  background: #000;
  transform: scale(.96);
  transition: transform .22s cubic-bezier(.2, .9, .2, 1.05);
  /* Allow pinch-zoom on phones once the lightbox is open. */
  touch-action: pinch-zoom;
}
.lightbox.is-open .lightbox-img { transform: none; }

/* Close affordance — pinned to the top-right with a comfy 44×44 tap
   target. iOS users can still close via the OS back gesture, but a
   visible close button is the obvious win. */
.lightbox-close {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 14px);
  right: max(env(safe-area-inset-right, 0px), 14px);
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, transform .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(239, 68, 68, .8);
  border-color: rgba(239, 68, 68, 1);
  transform: scale(1.04);
  outline: none;
}
.lightbox-close svg { width: 22px; height: 22px; }

/* "Tap anywhere to close" hint — subtle, fades in once open and
   fades out after a couple seconds so it doesn't sit there forever.
   Forced single-line so it stays a tidy pill instead of wrapping. */
.lightbox-hint {
  position: fixed;
  left: 50%;
  bottom: max(env(safe-area-inset-bottom, 0px), 18px);
  transform: translateX(-50%);
  font-size: .74rem;
  color: rgba(255, 255, 255, .65);
  background: rgba(0, 0, 0, .35);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
@media (max-width: 380px) {
  .lightbox-hint { font-size: .68rem; padding: 4px 10px; }
}
.lightbox.is-open .lightbox-hint {
  opacity: 1;
  animation: lightboxHintFade 4s ease-out forwards;
}
@keyframes lightboxHintFade {
  0%, 25% { opacity: 1; }
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-img { transition: none; transform: none; }
  .lightbox.is-open .lightbox-hint { animation: none; }
}

/* =====================================================================
   24. Service Viewer (assets/view.php) — premium multi-view system
   ---------------------------------------------------------------------
   The .sv-* layer wraps the existing .ah-card vocabulary with a rich
   shell: stats tiles, sticky toolbar, search, segmented view switcher
   (Timeline / Grid / List / Stats), category & status quick-filters,
   group-by, density toggle, and an empty-state. Per-asset state lives
   in localStorage so the user's preferred slicing sticks.
   ===================================================================== */

.sv-shell {
  margin-top: 1.5rem;
  --sv-tone: rgba(120, 140, 180, .55);
}

/* Tone variables — same palette already used by .ah-card / .sh-chip. */
.sv-shell [data-tone="amber"],  .sv-card.tone-amber,  .sv-list-row.tone-amber,
.sv-tl-item.tone-amber,         .sv-bar-row--cat.tone-amber,
.sv-list-cat-pill.tone-amber,   .sv-tl-cat.tone-amber,   .sv-chip.tone-amber  { --sv-tone: #f59e0b; }
.sv-shell .tone-slate,  .sv-card.tone-slate,  .sv-list-row.tone-slate,
.sv-tl-item.tone-slate, .sv-bar-row--cat.tone-slate,
.sv-list-cat-pill.tone-slate,  .sv-tl-cat.tone-slate,  .sv-chip.tone-slate  { --sv-tone: #64748b; }
.sv-shell .tone-red,    .sv-card.tone-red,    .sv-list-row.tone-red,
.sv-tl-item.tone-red,   .sv-bar-row--cat.tone-red,
.sv-list-cat-pill.tone-red,    .sv-tl-cat.tone-red,    .sv-chip.tone-red    { --sv-tone: #ef4444; }
.sv-shell .tone-cyan,   .sv-card.tone-cyan,   .sv-list-row.tone-cyan,
.sv-tl-item.tone-cyan,  .sv-bar-row--cat.tone-cyan,
.sv-list-cat-pill.tone-cyan,   .sv-tl-cat.tone-cyan,   .sv-chip.tone-cyan   { --sv-tone: #06b6d4; }
.sv-shell .tone-violet, .sv-card.tone-violet, .sv-list-row.tone-violet,
.sv-tl-item.tone-violet,.sv-bar-row--cat.tone-violet,
.sv-list-cat-pill.tone-violet, .sv-tl-cat.tone-violet, .sv-chip.tone-violet { --sv-tone: #8b5cf6; }
.sv-shell .tone-orange, .sv-card.tone-orange, .sv-list-row.tone-orange,
.sv-tl-item.tone-orange,.sv-bar-row--cat.tone-orange,
.sv-list-cat-pill.tone-orange, .sv-tl-cat.tone-orange, .sv-chip.tone-orange { --sv-tone: #ea580c; }
.sv-shell .tone-lime,   .sv-card.tone-lime,   .sv-list-row.tone-lime,
.sv-tl-item.tone-lime,  .sv-bar-row--cat.tone-lime,
.sv-list-cat-pill.tone-lime,   .sv-tl-cat.tone-lime,   .sv-chip.tone-lime   { --sv-tone: #84cc16; }
.sv-shell .tone-yellow, .sv-card.tone-yellow, .sv-list-row.tone-yellow,
.sv-tl-item.tone-yellow,.sv-bar-row--cat.tone-yellow,
.sv-list-cat-pill.tone-yellow, .sv-tl-cat.tone-yellow, .sv-chip.tone-yellow { --sv-tone: #eab308; }
.sv-shell .tone-blue,   .sv-card.tone-blue,   .sv-list-row.tone-blue,
.sv-tl-item.tone-blue,  .sv-bar-row--cat.tone-blue,
.sv-list-cat-pill.tone-blue,   .sv-tl-cat.tone-blue,   .sv-chip.tone-blue   { --sv-tone: #3b82f6; }
.sv-shell .tone-green,  .sv-card.tone-green,  .sv-list-row.tone-green,
.sv-tl-item.tone-green, .sv-bar-row--cat.tone-green,
.sv-list-cat-pill.tone-green,  .sv-tl-cat.tone-green,  .sv-chip.tone-green  { --sv-tone: #22c55e; }
.sv-shell .tone-muted,  .sv-card.tone-muted,  .sv-list-row.tone-muted,
.sv-tl-item.tone-muted, .sv-bar-row--cat.tone-muted,
.sv-list-cat-pill.tone-muted,  .sv-tl-cat.tone-muted,  .sv-chip.tone-muted  { --sv-tone: rgba(120,140,180,.7); }

/* ---------- Header ---------- */
.sv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.sv-head-title { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.sv-head-title h2 { font-size: 1.15rem; }
.sv-head-count {
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(120, 140, 180, .1);
  border: 1px solid var(--border);
  font-weight: 600;
}
.sv-head-sub { margin: 0; flex-basis: 100%; }

/* ---------- Stats strip ---------- */
.sv-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  margin: 0 0 1rem;
}
.sv-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  font-family: inherit;
  color: var(--text);
  overflow: hidden;
  min-width: 0;
}
.sv-stat[data-static="1"] { cursor: default; }
.sv-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%);
}
.sv-stat:hover:not([data-static="1"]) {
  transform: translateY(-1px);
  border-color: rgba(120, 140, 180, .45);
  box-shadow: 0 6px 18px -10px rgba(13, 35, 90, .25);
}
.sv-stat-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(120, 140, 180, .12);
  color: var(--muted);
}
.sv-stat-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sv-stat-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sv-stat-value {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sv-stat-value em {
  font-style: normal;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  margin-left: .1rem;
}
.sv-stat-sub {
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-stat-sub-inline {
  font-size: .65rem;
  color: var(--muted);
  font-weight: 600;
  margin-left: .15rem;
}
.sv-stat--overdue.is-active,
.sv-stat--overdue:hover:not([data-static="1"]) {
  border-color: rgba(239, 68, 68, .55);
  background: linear-gradient(180deg, rgba(239,68,68,.06), rgba(239,68,68,0)), var(--surface);
}
.sv-stat--overdue .sv-stat-icon { background: rgba(239,68,68,.14); color: #b91c1c; }
.sv-stat--soon.is-active,
.sv-stat--soon:hover:not([data-static="1"]) {
  border-color: rgba(245, 158, 11, .55);
  background: linear-gradient(180deg, rgba(245,158,11,.07), rgba(245,158,11,0)), var(--surface);
}
.sv-stat--soon .sv-stat-icon { background: rgba(245,158,11,.14); color: #b45309; }
.sv-stat--ok.is-active,
.sv-stat--ok:hover:not([data-static="1"]) {
  border-color: rgba(34, 197, 94, .55);
  background: linear-gradient(180deg, rgba(34,197,94,.07), rgba(34,197,94,0)), var(--surface);
}
.sv-stat--ok .sv-stat-icon { background: rgba(34,197,94,.14); color: #15803d; }
.sv-stat--all.is-active,
.sv-stat--all:hover:not([data-static="1"]) {
  border-color: rgba(30, 80, 224, .45);
  background: linear-gradient(180deg, rgba(30,80,224,.06), rgba(30,80,224,0)), var(--surface);
}
.sv-stat--all .sv-stat-icon { background: var(--brand-50); color: var(--brand-700); }
.sv-stat--info .sv-stat-icon { background: rgba(120,140,180,.12); color: var(--muted); }
.sv-stat.is-empty .sv-stat-value { color: var(--muted); font-weight: 700; }

:root[data-theme="dark"] .sv-stat--overdue.is-active { background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,0)), var(--surface); }
:root[data-theme="dark"] .sv-stat--soon.is-active    { background: linear-gradient(180deg, rgba(245,158,11,.20), rgba(245,158,11,0)), var(--surface); }
:root[data-theme="dark"] .sv-stat--ok.is-active      { background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(34,197,94,0)), var(--surface); }
:root[data-theme="dark"] .sv-stat--all.is-active     { background: linear-gradient(180deg, rgba(59,109,255,.22), rgba(59,109,255,0)), var(--surface); }
:root[data-theme="dark"] .sv-stat--overdue .sv-stat-icon { color: #fca5a5; }
:root[data-theme="dark"] .sv-stat--soon    .sv-stat-icon { color: #fcd34d; }
:root[data-theme="dark"] .sv-stat--ok      .sv-stat-icon { color: #86efac; }
:root[data-theme="dark"] .sv-stat--all     .sv-stat-icon { color: #93c5fd; background: rgba(59,109,255,.18); }

/* ---------- Toolbar ---------- */
.sv-toolbar {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .75rem .85rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: calc(var(--topbar-h, 60px) + .5rem);
  z-index: 5;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
:root[data-theme="dark"] .sv-toolbar {
  background: linear-gradient(180deg, rgba(20,29,56,.92), rgba(20,29,56,.86));
}

.sv-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border-radius: 10px;
  background: rgba(120, 140, 180, .07);
  border: 1px solid transparent;
  transition: border-color .14s ease, background .14s ease;
}
.sv-search:focus-within {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}
.sv-search > svg { color: var(--muted); flex-shrink: 0; }
.sv-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--text);
  padding: .15rem 0;
  min-width: 0;
}
.sv-search input::placeholder { color: var(--muted-2); }
.sv-search input::-webkit-search-cancel-button { display: none; }
.sv-search-clear {
  border: 0;
  background: rgba(120,140,180,.18);
  color: var(--muted);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .14s ease, color .14s ease;
}
.sv-search-clear:hover { background: rgba(239, 68, 68, .18); color: #b91c1c; }

.sv-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.sv-segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(120, 140, 180, .06);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.sv-seg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .75rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sv-seg:hover { color: var(--text); }
.sv-seg.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(13, 35, 90, .12);
}
:root[data-theme="dark"] .sv-seg.is-active { background: var(--surface-3); color: var(--text); }
.sv-seg svg { flex-shrink: 0; }

.sv-control {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.sv-control-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sv-control[hidden] { display: none !important; }
.sv-select {
  padding: .42rem .8rem;
  padding-right: 1.85rem;
  font-size: .82rem;
  background-position: right .55rem center;
}

.sv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
  flex-shrink: 0;
}
.sv-icon-btn:hover { color: var(--text); border-color: rgba(120, 140, 180, .45); }
.sv-icon-btn[hidden] { display: none !important; }
.sv-icon-btn .sv-ico-compact { display: none; }
.sv-icon-btn.is-compact .sv-ico-comfort { display: none; }
.sv-icon-btn.is-compact .sv-ico-compact { display: block; }
.sv-icon-btn.is-compact { color: var(--primary); border-color: rgba(30,80,224,.4); background: var(--brand-50); }

/* ---------- Category chips (.sv-chip lookalike to .sh-chip) ---------- */
.sv-chips {
  display: flex;
  gap: .35rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 .25rem;
  scroll-snap-type: x proximity;
  margin: 0 -.2rem;
}
.sv-chips::-webkit-scrollbar { height: 4px; }
.sv-chips::-webkit-scrollbar-thumb { background: rgba(120,140,180,.3); border-radius: 4px; }
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
  white-space: nowrap;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.sv-chip:hover { color: var(--text); border-color: rgba(120,140,180,.45); }
.sv-chip svg { flex-shrink: 0; color: var(--sv-tone); opacity: .9; }
.sv-chip-count {
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: rgba(120,140,180,.14);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sv-chip.is-active {
  color: var(--text);
  background: var(--brand-50);
  border-color: var(--brand-200);
  box-shadow: 0 1px 0 rgba(30, 80, 224, .12) inset;
}
.sv-chip.is-active .sv-chip-count {
  background: var(--brand-600);
  color: #fff;
}
.sv-chip.is-active.tone-amber  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); }
.sv-chip.is-active.tone-slate  { background: rgba(100,116,139,.14); border-color: rgba(100,116,139,.4); }
.sv-chip.is-active.tone-red    { background: rgba(239, 68, 68,.12); border-color: rgba(239, 68, 68,.4); }
.sv-chip.is-active.tone-cyan   { background: rgba( 6,182,212,.12); border-color: rgba( 6,182,212,.4); }
.sv-chip.is-active.tone-violet { background: rgba(139, 92,246,.12); border-color: rgba(139, 92,246,.4); }
.sv-chip.is-active.tone-orange { background: rgba(234, 88, 12,.12); border-color: rgba(234, 88, 12,.4); }
.sv-chip.is-active.tone-lime   { background: rgba(132,204, 22,.14); border-color: rgba(132,204, 22,.4); }
.sv-chip.is-active.tone-yellow { background: rgba(234,179,  8,.14); border-color: rgba(234,179,  8,.4); }
.sv-chip.is-active.tone-blue   { background: rgba( 59,130,246,.12); border-color: rgba( 59,130,246,.4); }
.sv-chip.is-active.tone-green  { background: rgba( 34,197, 94,.12); border-color: rgba( 34,197, 94,.4); }
.sv-chip.is-active.tone-muted  { background: rgba(120,140,180,.14); border-color: rgba(120,140,180,.4); }

/* ---------- Active filter pills ---------- */
.sv-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  padding-top: .25rem;
  border-top: 1px dashed var(--border);
  margin-top: .15rem;
}
.sv-active-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.sv-active-chips { display: contents; }
.sv-active-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.sv-active-chip:hover { background: var(--brand-100); }
.sv-active-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.sv-active-clear:hover { color: var(--text); }

/* ---------- Empty state ---------- */
.sv-empty-results {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
}
.sv-empty-results .empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: .55rem;
  border-radius: 50%;
  background: rgba(120, 140, 180, .12);
  color: var(--muted);
}
.sv-empty-results h3 { margin: 0 0 .25rem; font-size: 1rem; color: var(--text); }
.sv-empty-results p { margin: 0 0 .65rem; font-size: .85rem; }

/* =====================================================================
   Group headers — used in Timeline / Grid / List views
   ===================================================================== */
.sv-group-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin: 0 0 .65rem;
}
.sv-group-head .sv-group-name { color: var(--text); letter-spacing: .04em; text-transform: none; font-size: .92rem; }
.sv-group-head .sv-group-count {
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: rgba(120,140,180,.14);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   TIMELINE VIEW
   ===================================================================== */
.sv-view--timeline { padding: .25rem 0 1rem; }
.sv-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}
.sv-timeline::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px;
  left: 11px;
  width: 2px;
  background:
    linear-gradient(180deg, transparent 0, rgba(120,140,180,.35) 12px, rgba(120,140,180,.35) calc(100% - 12px), transparent 100%);
  border-radius: 2px;
}
.sv-tl-item {
  position: relative;
  padding: 0 0 1rem 18px;
}
.sv-tl-item:last-child { padding-bottom: .25rem; }
.sv-tl-node {
  position: absolute;
  left: -25px;
  top: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--sv-tone);
  color: var(--sv-tone);
  box-shadow: 0 0 0 4px var(--bg);
  z-index: 1;
}
.sv-tl-item.due-overdue .sv-tl-node {
  border-color: #ef4444; color: #ef4444;
  animation: svPulse 1.6s ease-in-out infinite;
}
@keyframes svPulse {
  0%,100% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 0 rgba(239,68,68,.4); }
  50%     { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px rgba(239,68,68,0); }
}
.sv-group-head--tl {
  list-style: none;
  position: relative;
  margin-left: -18px;
  padding-left: 18px;
  padding-top: .85rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .8rem;
}
.sv-group-head--tl::before {
  content: '';
  position: absolute;
  left: -19px; top: .9rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand-600);
  box-shadow: 0 0 0 4px var(--bg);
}

.sv-tl-card {
  position: relative;
  padding: .85rem 1rem;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.sv-tl-stamp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
}
.sv-tl-day {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.sv-tl-year {
  padding: .05rem .45rem;
  border-radius: 999px;
  background: rgba(120,140,180,.12);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.sv-tl-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .76rem;
  color: var(--muted);
}
.sv-tl-cat {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sv-tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sv-tone) 40%, transparent);
  color: var(--sv-tone);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
}
.sv-tl-mile {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

/* =====================================================================
   GRID VIEW
   ===================================================================== */
.sv-view--grid { padding-top: .25rem; }
.sv-grid-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 1rem;
}
.sv-shell[data-density="compact"] .sv-grid-rows {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .75rem;
}
.sv-shell[data-density="compact"] .ah-card {
  padding: .75rem .85rem .85rem;
  border-radius: 12px;
}
.sv-shell[data-density="compact"] .ah-card-head { gap: .55rem; margin-bottom: .55rem; }
.sv-shell[data-density="compact"] .ah-cat-icon { width: 32px; height: 32px; border-radius: 9px; }
.sv-shell[data-density="compact"] .ah-cat-icon svg { width: 15px; height: 15px; }
.sv-shell[data-density="compact"] .ah-cat-name { font-size: .76rem; }
.sv-shell[data-density="compact"] .ah-card-title { font-size: .92rem; }
.sv-shell[data-density="compact"] .ah-date-block { min-width: 50px; padding: .2rem .5rem; }
.sv-shell[data-density="compact"] .ah-date-day { font-size: 1.1rem; }
.sv-shell[data-density="compact"] .ah-card-notes { display: none; }
.sv-shell[data-density="compact"] .ah-gallery { gap: .35rem; }
.sv-shell[data-density="compact"] .ah-photo { flex-basis: 64px; width: 64px; height: 64px; border-radius: 9px; }
.sv-shell[data-density="compact"] .ah-card-tpl { display: none; }

/* =====================================================================
   LIST VIEW — table-style
   ===================================================================== */
.sv-view--list { padding-top: .25rem; }
.sv-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.sv-list-head,
.sv-list-row {
  display: grid;
  grid-template-columns:
    minmax(140px, 1fr)
    minmax(180px, 2.5fr)
    minmax(110px, .9fr)
    minmax(90px, .8fr)
    minmax(150px, 1.4fr);
  gap: .75rem;
  align-items: center;
  padding: .65rem 1rem;
}
.sv-list-head {
  background: rgba(120, 140, 180, .07);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sv-list-body { display: flex; flex-direction: column; }
.sv-list-row {
  border-bottom: 1px solid var(--border);
  transition: background .14s ease;
  font-size: .85rem;
  position: relative;
}
.sv-list-row:last-child { border-bottom: 0; }
.sv-list-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sv-tone);
  opacity: .85;
}
.sv-list-row:hover { background: rgba(120, 140, 180, .06); }
.sv-list-row.due-overdue { background: rgba(239,68,68,.04); }
.sv-list-row.due-overdue:hover { background: rgba(239,68,68,.08); }
.sv-list-col { min-width: 0; }
.sv-list-col em { font-style: normal; color: var(--muted); font-size: .72rem; font-weight: 600; }
.sv-list-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sv-tone) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--sv-tone) 35%, transparent);
  color: var(--sv-tone);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sv-list-cat-ico { display: inline-flex; flex-shrink: 0; }
.sv-list-cat-text { overflow: hidden; text-overflow: ellipsis; }
.sv-list-title {
  display: block;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-list-tpl {
  display: block;
  font-size: .73rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-list-col--mileage { font-variant-numeric: tabular-nums; font-weight: 600; }
.sv-list-col--due { display: flex; flex-wrap: wrap; gap: .25rem; }
.sv-due-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}
.sv-due-chip.due-ok      { background: rgba(34, 197, 94, .1);  color: #166534; border-color: rgba(34, 197, 94, .3); }
.sv-due-chip.due-soon    { background: rgba(245, 158, 11, .12); color: #92400e; border-color: rgba(245, 158, 11, .35); }
.sv-due-chip.due-overdue { background: rgba(239, 68, 68, .12);  color: #991b1b; border-color: rgba(239, 68, 68, .4); }
:root[data-theme="dark"] .sv-due-chip.due-ok      { color: #86efac; }
:root[data-theme="dark"] .sv-due-chip.due-soon    { color: #fcd34d; }
:root[data-theme="dark"] .sv-due-chip.due-overdue { color: #fca5a5; }

.sv-shell[data-density="compact"] .sv-list-head,
.sv-shell[data-density="compact"] .sv-list-row { padding: .5rem 1rem; font-size: .8rem; }

/* On smaller screens we collapse into stacked cards (no hidden columns) */
@media (max-width: 880px) {
  .sv-list-head { display: none; }
  .sv-list-row {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .8rem 1rem .85rem 1.1rem;
    border-bottom: 1px solid var(--border);
  }
  .sv-list-col--cat   { order: 1; }
  .sv-list-col--title { order: 2; }
  .sv-list-col--date,
  .sv-list-col--mileage,
  .sv-list-col--due { order: 3; }
  .sv-list-col--date::before    { content: 'Date · '; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .sv-list-col--mileage:not(:has(.muted))::before { content: 'Mileage · '; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .sv-list-col--mileage,
  .sv-list-col--date { font-size: .78rem; color: var(--text); font-weight: 500; }
}

/* =====================================================================
   STATS VIEW
   ===================================================================== */
.sv-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.sv-stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  box-shadow: var(--shadow-xs);
}
.sv-stats-card--wide { grid-column: 1 / -1; }
.sv-stats-card-head h3 {
  margin: 0 0 .15rem;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.sv-stats-card-head p { margin: 0; }
.sv-cadence {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  padding: .4rem 0 .15rem;
}
.sv-cadence-value {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sv-cadence-value em {
  font-style: normal;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
  margin-left: .1rem;
}
.sv-cadence-meta { color: var(--muted); font-size: .82rem; }

.sv-bars {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sv-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr 36px;
  align-items: center;
  gap: .65rem;
  font-size: .82rem;
  --sv-bar-tone: rgba(120, 140, 180, .55);
}
.sv-bar-row.due-ok      { --sv-bar-tone: #22c55e; }
.sv-bar-row.due-soon    { --sv-bar-tone: #f59e0b; }
.sv-bar-row.due-overdue { --sv-bar-tone: #ef4444; }
.sv-bar-row.due-none    { --sv-bar-tone: rgba(120,140,180,.5); }
.sv-bar-row--cat        { --sv-bar-tone: var(--sv-tone); }
.sv-bar-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text);
  font-weight: 600;
}
.sv-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sv-bar-tone) 15%, transparent);
  color: var(--sv-bar-tone);
}
.sv-bar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(120, 140, 180, .14);
  overflow: hidden;
}
.sv-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sv-bar-tone) 70%, transparent), var(--sv-bar-tone));
  border-radius: inherit;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
  width: 0;
}
.sv-bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

.sv-yearbars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(36px, 1fr);
  gap: .35rem;
  padding: .3rem 0 0;
  height: 160px;
  align-items: end;
}
.sv-yearbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  position: relative;
  min-width: 0;
}
.sv-yearbar-bar {
  position: relative;
  flex: 0 0 auto;
  margin-top: auto;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  border-radius: 8px 8px 4px 4px;
  min-height: 4px;
  transition: height .45s cubic-bezier(.2,.8,.2,1);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.sv-yearbar-num {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.sv-yearbar-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-top: .35rem;
}

/* =====================================================================
   Responsive tuning
   ===================================================================== */
@media (max-width: 1100px) {
  .sv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-stat--info { grid-column: span 3; }
}
@media (max-width: 720px) {
  .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .sv-stat--info { grid-column: span 2; }
  .sv-stat { padding: .65rem .7rem; gap: .55rem; }
  .sv-stat-icon { width: 32px; height: 32px; border-radius: 9px; }
  .sv-stat-value { font-size: 1.25rem; }

  .sv-toolbar { padding: .65rem .7rem; gap: .55rem; }
  .sv-toolbar-controls { gap: .4rem; }
  .sv-segmented { width: 100%; }
  .sv-seg { flex: 1; justify-content: center; padding: .42rem .5rem; }
  .sv-seg span { display: none; }
  .sv-control { flex: 1; min-width: 0; }
  .sv-control .sv-control-label { display: none; }
  .sv-select { width: 100%; }

  .sv-stats-grid { grid-template-columns: 1fr; gap: .85rem; }
  .sv-yearbars { height: 120px; }

  /* Timeline rail tightens up on phones */
  .sv-timeline { padding-left: 24px; }
  .sv-timeline::before { left: 9px; }
  .sv-tl-node { left: -22px; width: 24px; height: 24px; }
  .sv-tl-node svg { width: 12px; height: 12px; }
}
@media (max-width: 460px) {
  .sv-stats { grid-template-columns: 1fr; }
  .sv-stat--info { grid-column: span 1; }
  .sv-bar-row { grid-template-columns: minmax(90px, max-content) 1fr 32px; gap: .45rem; font-size: .76rem; }
  .sv-yearbars { height: 100px; gap: .25rem; }
  .sv-yearbar-num { font-size: .58rem; }
}

/* =====================================================================
   Reduced motion — respect user preference
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv-tl-item.due-overdue .sv-tl-node { animation: none; }
  .sv-bar-fill, .sv-yearbar-bar { transition: none; }
}

/* =====================================================================
   25. NFC chip management UI
   ---------------------------------------------------------------------
   Used by:
     - assets/view.php  (per-vehicle chip card)
     - settings/chips.php  (My NFC chips overview)
     - admin/nfc_generate.php  (batched URL output)

   The vocabulary deliberately mirrors the .ah-card / .sv-* layers so
   chips slot into the existing surface system. We rely on `--brand-*`,
   `--surface`, and standard badges so no new design tokens are needed.
   ===================================================================== */

/* Hero chip-pill links shown above the vehicle hero — turn the existing
   `.badge` into a tappable anchor that subtly hints at interactivity. */
.chip-summary { flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip-summary-pill { text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.chip-summary-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-700, var(--brand)) 22%, transparent); }
.chip-summary-pill svg { vertical-align: -1px; margin-right: .15rem; }

/* Header card */
.chip-card { padding: 1.25rem 1.4rem; }
.chip-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.chip-card-head-text { min-width: 0; flex: 1; }

/* Divider used between "currently paired here" and "available to pair"
   sections inside the same card — gives the card a clear two-zone feel
   without splitting it into two boxes. */
.chip-card-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0 .75rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-2, var(--muted));
}
.chip-card-divider::before,
.chip-card-divider::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--border, color-mix(in srgb, currentColor 18%, transparent));
}

/* List + row */
.chip-list { display: flex; flex-direction: column; gap: .55rem; }
.chip-list--available .chip-row { background: color-mix(in srgb, var(--brand-700, var(--brand)) 4%, var(--surface)); }

.chip-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: .85rem;
  align-items: center;
  padding: .75rem .9rem;
  border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.chip-row:hover {
  border-color: color-mix(in srgb, var(--brand-700, var(--brand)) 35%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-700, var(--brand)) 10%, transparent);
}
.chip-row.is-disabled { opacity: .65; }

.chip-row-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-700, var(--brand)) 9%, transparent);
  color: var(--brand-700, var(--brand));
}
.chip-row-icon svg { display: block; }

.chip-row-main { min-width: 0; }
.chip-row-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .98rem;
}
.chip-row-title code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.chip-row-meta {
  display: flex; flex-wrap: wrap; gap: .15rem .35rem;
  margin-top: .15rem;
  font-size: .78rem; color: var(--text-2, var(--muted));
  line-height: 1.45;
}
.chip-row-meta strong { color: var(--text); font-weight: 600; }
.chip-row-url {
  margin-top: .35rem;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  font-size: .72rem;
}
.chip-row-url-label { color: var(--text-2, var(--muted)); }
.chip-row-url code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; word-break: break-all;
  padding: .12rem .4rem; border-radius: 6px;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.chip-row-actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.chip-row-actions--stack { flex-direction: column; align-items: stretch; gap: .35rem; }
.chip-row-actions form { margin: 0; }
.chip-repair-form { display: flex; gap: .35rem; align-items: center; }
.chip-repair-form select.input { font-size: .85rem; padding: .35rem .5rem; min-width: 140px; }

/* Stats strip on /settings/chips.php */
.chip-stats-card { padding: 1.1rem 1.25rem; }
.chip-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
}
.chip-stat {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-700, var(--brand)) 6%, transparent);
}
.chip-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1; }
.chip-stat-label { font-size: .76rem; color: var(--text-2, var(--muted)); }

/* Welcome / claim screens — used by /nfc/tap.php */
.chip-claim { max-width: 560px; margin: 0 auto; padding: 1.5rem; }
.chip-claim--locked .chip-ref-text strong { color: var(--text); }

.chip-claim-steps {
  display: flex; flex-direction: column; gap: .6rem;
  margin: 1.1rem 0 1.25rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-700, var(--brand)) 5%, transparent);
}
.chip-claim-step {
  display: flex; align-items: center; gap: .75rem;
  font-size: .92rem; color: var(--text);
}
.chip-claim-step-num {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-700, var(--brand));
  color: #fff;
  font-weight: 700; font-size: .82rem;
  flex-shrink: 0;
}
.chip-claim-cta { gap: .6rem; flex-wrap: wrap; }

/* Generator tabs (admin/nfc_generate.php) */
.chip-batch-card { padding: 0; overflow: hidden; }
.chip-batch-tabs {
  display: flex; align-items: center; gap: .25rem;
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.chip-batch-tab {
  appearance: none; border: 0; background: transparent;
  padding: .45rem .75rem; border-radius: 8px;
  font-size: .85rem; color: var(--text-2, var(--muted));
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.chip-batch-tab:hover { color: var(--text); background: color-mix(in srgb, currentColor 6%, transparent); }
.chip-batch-tab.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--border); }
.chip-batch-spacer { flex: 1; }
.chip-batch-pane {
  margin: 0;
  padding: 1rem 1.15rem;
  font-size: .82rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-all;
  color: var(--text-2, var(--muted));
  max-height: 420px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 640px) {
  .chip-row { grid-template-columns: 32px 1fr; }
  .chip-row-icon { width: 32px; height: 32px; }
  .chip-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .chip-row-actions--stack { flex-direction: row; flex-wrap: wrap; }
  .chip-repair-form { flex: 1; }
  .chip-repair-form select.input { flex: 1; min-width: 0; }
  .chip-card-head { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   17b. In-browser chip writer (Web NFC)
   ===================================================================== */

.chip-writer { padding: 1.1rem 1.2rem 1.2rem; }
.chip-writer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.chip-writer-cap {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip-writer-cap[data-tone="ok"] {
  background: var(--ok-bg, #e7f8ee);
  color:      var(--ok, #0a7d3e);
  border-color: var(--ok-bd, #b9e6c9);
}
.chip-writer-cap[data-tone="warn"] {
  background: var(--warn-bg, #fff6e0);
  color:      var(--warn, #a85d00);
  border-color: var(--warn-bd, #f1d186);
}
.chip-writer-cap[data-tone="err"] {
  background: var(--err-bg, #ffe8e8);
  color:      var(--err, #b71f1f);
  border-color: var(--err-bd, #f5b8b8);
}

/* Live status overlay — fades in while a write is armed. */
.chip-writer-status {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: .85rem;
  position: relative;
  overflow: hidden;
}
.chip-writer-status[data-state="arming"] {
  border-color: var(--brand-200);
  background: var(--primary-soft, var(--brand-50));
  color: var(--brand-800);
}
.chip-writer-status[data-state="success"] {
  border-color: var(--ok-bd, #b9e6c9);
  background: var(--ok-bg, #e7f8ee);
  color: var(--ok, #0a7d3e);
}
.chip-writer-status[data-state="error"] {
  border-color: var(--err-bd, #f5b8b8);
  background: var(--err-bg, #ffe8e8);
  color: var(--err, #b71f1f);
}
.chip-writer-status-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.chip-writer-status-icon svg { width: 22px; height: 22px; }
.chip-writer-status[data-state="arming"] .chip-writer-status-icon {
  animation: cw-pulse 1.4s ease-in-out infinite;
}
@keyframes cw-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(42, 93, 255, .35); }
  50%      { transform: scale(1.05);box-shadow: 0 0 0 12px rgba(42, 93, 255, 0); }
}
.chip-writer-status-text { flex: 1; min-width: 0; line-height: 1.35; }
.chip-writer-status-text strong { display: block; }

/* Toolbar above the chip list. */
.chip-writer-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.chip-writer-spacer { flex: 1; }
.chip-writer-toolbar [data-cw-batch].is-active {
  background: var(--ok, #0a7d3e);
  border-color: var(--ok, #0a7d3e);
  cursor: default;
}

/* Chip list. */
.chip-writer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.chip-writer-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.chip-writer-row.is-arming {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(42, 93, 255, .18);
  background: var(--primary-soft, var(--brand-50));
}
.chip-writer-row[data-cw-already-encoded] {
  background: var(--ok-bg, #e7f8ee);
  border-color: var(--ok-bd, #b9e6c9);
}
.chip-writer-row[data-cw-already-encoded] .chip-writer-row-icon { color: var(--ok, #0a7d3e); }
.chip-writer-row-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
}
.chip-writer-row-main { min-width: 0; }
.chip-writer-row-code code {
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.chip-writer-row-url {
  font-size: .76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.chip-writer-row-state { white-space: nowrap; }
.chip-writer-row-actions {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}

.chip-writer-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
}
.chip-writer-pill--done {
  background: var(--ok, #0a7d3e);
  color: #fff;
}

/* iPhone / desktop fallback panel. */
.chip-writer-fallback {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
}
.chip-writer-fallback h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
}
.chip-writer-fallback a { font-weight: 600; }

/* Pending-encoding details on admin/nfc.php. */
.chip-writer-pending {
  padding: 0;
  overflow: hidden;
  margin-top: 1rem;
}
.chip-writer-pending > summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  user-select: none;
}
.chip-writer-pending > summary::-webkit-details-marker { display: none; }
.chip-writer-pending > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
  transition: transform .15s ease;
  margin-right: .5rem;
  display: inline-block;
}
.chip-writer-pending[open] > summary::before { transform: rotate(45deg); }
.chip-writer-pending > .chip-writer { border: 0; border-top: 1px solid var(--border); border-radius: 0; }

@media (max-width: 640px) {
  .chip-writer-row {
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
  }
  .chip-writer-row-icon { grid-row: 1 / span 2; }
  .chip-writer-row-state { grid-column: 2; }
  .chip-writer-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* =====================================================================
   17c. Chip + vehicle transfers
   ===================================================================== */

/* Strict warning card — bright orange/amber so the user can't miss it. */
.xfer-warning {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: linear-gradient(135deg, var(--warn-bg, #fff3dc), #fffaf0);
  border: 1px solid var(--warn-bd, #f1d186);
  border-left: 4px solid var(--warn, #c8770b);
}
.xfer-warning-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6);
  color: var(--warn, #c8770b);
  flex-shrink: 0;
}
.xfer-warning-list {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.6;
}
.xfer-warning-list li { margin-bottom: .35rem; }

/* Summary card — what's being handed over. */
.xfer-summary { padding: 1rem 1.2rem; }
.xfer-summary-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: center;
}
.xfer-summary-asset {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: .9rem;
  align-items: center;
}
.xfer-summary-img {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.xfer-summary-img--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
}
.xfer-summary-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.xfer-summary-stats {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-top: .3rem;
  color: var(--muted);
}
.xfer-summary-chip {
  text-align: right;
  border-left: 1px solid var(--border);
  padding-left: 1.2rem;
}
.xfer-summary-chip-code {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 6px;
  background: var(--surface-2);
  font-weight: 600;
  font-size: .9rem;
}

/* VIN code display (asset detail page + transfer summary). */
.detail-vin {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: .82em;
  letter-spacing: .04em;
  word-break: break-all;
}
.xfer-summary-vin code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .04em;
  background: var(--surface-2);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Magic-word badge inside the confirm label. */
.xfer-magic-word {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 5px;
  background: var(--warn-bg, #fff3dc);
  border: 1px solid var(--warn-bd, #f1d186);
  color: var(--warn, #c8770b);
  font-weight: 700;
  letter-spacing: .04em;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: .85em;
}
#confirm_word {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}

/* Initiate / accept form. */
.xfer-form { display: block; }
.xfer-form .form-row { margin-bottom: 1rem; }
.xfer-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
  font: inherit;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.xfer-confirm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  background: var(--warn-bg, #fff3dc);
  border: 1px solid var(--warn-bd, #f1d186);
  border-radius: 10px;
  margin: 1rem 0;
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.5;
}
.xfer-confirm input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--warn, #c8770b);
}
.xfer-form-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: .5rem;
}

/* Pending banner inside the initiate page. */
.xfer-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--warn-bg, #fff3dc);
  border: 1px solid var(--warn-bd, #f1d186);
}
.xfer-pending-head { display: flex; flex-direction: column; gap: .15rem; }

/* Incoming + outgoing pending cards on /settings/chips.php. */
.xfer-incoming, .xfer-outgoing {
  border-left: 4px solid var(--brand-500, #2a5dff);
}
.xfer-outgoing { border-left-color: var(--muted); }
.xfer-incoming-list, .xfer-outgoing-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.xfer-incoming-row, .xfer-outgoing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  flex-wrap: wrap;
}
.xfer-incoming-text, .xfer-outgoing-text {
  display: flex; flex-direction: column;
  min-width: 0;
}

/* Claim flow (anonymous) on /nfc/transfer_claim.php. */
.xfer-claim-anon { padding: 1.4rem 1.5rem; }
.xfer-claim-anon-head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.1rem;
}
.xfer-claim-anon-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-500, #2a5dff), var(--brand-700, #153fb8));
  color: #fff;
  flex-shrink: 0;
}
.xfer-claim-summary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 1rem 0 1.2rem;
  display: grid;
  gap: .55rem;
}
.xfer-claim-summary-line {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.xfer-claim-cta {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem;
}

/* Claim flow (logged in) — head card. */
.xfer-claim-head {
  display: flex; align-items: center; gap: 1rem;
}
.xfer-claim-head-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-500, #2a5dff), var(--brand-700, #153fb8));
  color: #fff;
  flex-shrink: 0;
}
.xfer-note {
  border-left: 4px solid var(--brand-500, #2a5dff);
  background: var(--brand-50, #eef3ff);
}

/* Terminal-state cards. */
.xfer-state {
  padding: 2rem 1.2rem;
}
.xfer-state-icon {
  width: 64px; height: 64px;
  margin: 0 auto .5rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
}
.xfer-state--err .xfer-state-icon {
  background: var(--err-bg, #ffe8e8);
  color: var(--err, #b71f1f);
}

/* Admin stats strip. */
.xfer-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  padding: 0;
  overflow: hidden;
}
.xfer-stat {
  background: var(--surface);
  padding: .8rem 1rem;
  text-align: center;
}
.xfer-stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.xfer-stat-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: .2rem;
}

@media (max-width: 720px) {
  .xfer-summary-grid { grid-template-columns: 1fr; }
  .xfer-summary-chip {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: .75rem;
    text-align: left;
  }
  .xfer-summary-asset { grid-template-columns: 64px 1fr; }
  .xfer-summary-img   { width: 64px; height: 64px; }
  .xfer-warning { grid-template-columns: 1fr; }
  .xfer-warning-icon { width: 44px; height: 44px; }
  .xfer-stats { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   Report Stolen feature
   ---------------------------------------------------------------------
   Banner that lights up the asset view when an asset is flagged stolen,
   the form on /assets/report_stolen.php, and the public recovery
   screen rendered by /nfc/tap.php for the finder.
   ===================================================================== */

/* Inline red banner shown on /assets/view.php and the report page. */
.stolen-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #fca5a5;
  border-left: 6px solid #dc2626;
  background: #fef2f2;
  color: #7f1d1d;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, .08);
}
.stolen-banner .stolen-banner-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff;
  flex-shrink: 0;
}
.stolen-banner .stolen-banner-text {
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.4;
}
.stolen-banner .stolen-banner-text strong { font-size: .98em; }
.stolen-banner .stolen-banner-text span   { font-size: .87em; opacity: .9; }
.stolen-banner .btn-danger { white-space: nowrap; }
.stolen-banner--full { padding: 16px 20px; }

:root[data-theme="dark"] .stolen-banner {
  background: #2a0d0d;
  border-color: #7f1d1d;
  border-left-color: #ef4444;
  color: #fecaca;
  box-shadow: 0 4px 14px rgba(220, 38, 38, .15);
}
:root[data-theme="dark"] .stolen-banner .stolen-banner-icon { background: #ef4444; }

/* Subtle hover state for the "Report stolen" CTA in the asset header. */
.btn.stolen-cta-btn:hover {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, .45);
}
:root[data-theme="dark"] .btn.stolen-cta-btn:hover {
  color: #fecaca;
  border-color: rgba(239, 68, 68, .55);
}

/* Stolen badge — same shape as our other badges, locked to red. */
.stolen-badge {
  letter-spacing: .12em;
  font-size: .72rem;
  padding: .22rem .55rem;
}

/* /assets/report_stolen.php — owner-facing form + management. */
.stolen-card { padding: 1.4rem 1.4rem 1.6rem; }
.stolen-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.stolen-warning {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 6px solid #f97316;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 1.4rem;
  color: #7c2d12;
  font-size: .92rem;
  line-height: 1.55;
}
.stolen-warning strong { display: block; margin-bottom: 6px; font-size: .98em; }
.stolen-warning ul { margin: 0; padding-left: 1.1rem; }
.stolen-warning li { margin: 4px 0; }
:root[data-theme="dark"] .stolen-warning {
  background: #2b1607;
  border-color: #c2410c;
  color: #fed7aa;
}

.stolen-form .form-grid.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
  margin-bottom: 1rem;
}
@media (max-width: 720px) {
  .stolen-form .form-grid.two-col { grid-template-columns: 1fr; }
}

.stolen-confirm {
  margin: 1.2rem 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stolen-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.5;
  cursor: pointer;
}
.stolen-check input { margin-top: 3px; flex-shrink: 0; }

.stolen-magic-row {
  display: flex;
  gap: .8rem;
  align-items: center;
  margin-top: .25rem;
}
.stolen-magic-row label { margin: 0; flex-shrink: 0; }
.stolen-magic-word {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

.stolen-summary { margin-bottom: 1rem; }
.stolen-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .8rem 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.stolen-summary-grid > div { display: flex; flex-direction: column; }
.stolen-summary-grid > div strong {
  font-size: .98rem;
  margin-top: 2px;
  word-break: break-word;
}
.stolen-notes {
  white-space: pre-wrap;
  background: var(--surface-2);
  padding: .8rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.stolen-actions {
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: .6rem;
}
.stolen-recover {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
:root[data-theme="dark"] .stolen-recover {
  background: #2a0d0d;
  border-color: #7f1d1d;
}

/* Audit / activity log on the report page. */
.stolen-audit { margin-top: 1.6rem; }
.stolen-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
  padding-left: 1rem;
}
.stolen-audit-item {
  display: flex;
  gap: .9rem;
  padding: .7rem 0;
  position: relative;
}
.stolen-audit-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-500);
  flex-shrink: 0;
  margin-top: 6px;
  margin-left: -1.45rem;
  box-shadow: 0 0 0 3px var(--surface);
}
.stolen-audit-item.tone-red    .stolen-audit-dot { background: #dc2626; }
.stolen-audit-item.tone-amber  .stolen-audit-dot { background: #f59e0b; }
.stolen-audit-item.tone-green  .stolen-audit-dot { background: #10b981; }
.stolen-audit-item.tone-blue   .stolen-audit-dot { background: #1E50E0; }
.stolen-audit-item.tone-slate  .stolen-audit-dot { background: #64748b; }
.stolen-audit-body { flex: 1; min-width: 0; }
.stolen-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Public recovery screen rendered by /nfc/tap.php to anyone who taps a
   chip on a stolen asset. Designed to be calm-but-urgent: the finder
   should immediately see who to call, the owner should see a path home. */
.stolen-public {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stolen-public-banner {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 1.4rem 1.4rem;
  background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 60%);
  border: 1px solid #fca5a5;
  border-left: 6px solid #dc2626;
  border-radius: 16px;
  color: #7f1d1d;
  box-shadow: 0 12px 32px rgba(220, 38, 38, .12);
}
.stolen-public-banner-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff;
  animation: stolenPulse 2s ease-in-out infinite;
}
@keyframes stolenPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
  50%      { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}
.stolen-public-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #b91c1c;
  background: rgba(255, 255, 255, .55);
  padding: .15rem .5rem;
  border-radius: 999px;
}
.stolen-public-title {
  margin: 0 0 6px;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #7f1d1d;
}
.stolen-public-sub {
  margin: 0;
  font-size: .96rem;
  line-height: 1.55;
  color: #991b1b;
}

.stolen-public-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.stolen-public-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.stolen-public-card h2 {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.stolen-public-card dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.stolen-public-card dl > div { display: flex; flex-direction: column; gap: 2px; }
.stolen-public-card dl dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.stolen-public-card dl dd {
  margin: 0;
  font-size: .96rem;
  font-weight: 600;
  word-break: break-word;
}
.stolen-public-card dl dd a { color: var(--brand-500); text-decoration: none; }
.stolen-public-card dl dd a:hover { text-decoration: underline; }
.stolen-public-card dl dd code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.stolen-public-notes p {
  margin: 0;
  white-space: pre-wrap;
  font-size: .94rem;
  line-height: 1.55;
}

.stolen-public-foot {
  text-align: center;
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.stolen-public-foot .btn-row,
.stolen-public-foot .btn { display: inline-flex; }

@media (max-width: 600px) {
  .stolen-public-banner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .stolen-public-banner-icon { width: 48px; height: 48px; }
  .stolen-banner { grid-template-columns: 1fr; }
  .stolen-banner .btn-danger { width: 100%; justify-content: center; }
}

/* Admin /admin/stolen.php — gentle row tint for currently-stolen rows. */
.is-stolen-row {
  background: rgba(254, 226, 226, .35);
}
:root[data-theme="dark"] .is-stolen-row {
  background: rgba(127, 29, 29, .25);
}

/* =====================================================================
   18. Print
   ===================================================================== */
@media print {
  .sidebar, .topbar, .footer, .sidebar-backdrop, .sidebar-toggle,
  .theme-toggle, .btn, .page-actions,
  .onboard-overlay, .ios-install-banner, .saving-overlay, .lightbox,
  .mileage-modal, .mileage-chip,
  .sv-toolbar, .sv-stats, .sv-segmented, .sv-icon-btn,
  .chip-row-actions, .chip-card-head .btn,
  .chip-writer, .chip-writer-pending,
  .xfer-form, .xfer-form-actions, .xfer-incoming, .xfer-outgoing,
  .xfer-pending-actions,
  .stolen-form, .stolen-actions, .stolen-confirm, .stolen-warning { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
  body { background: #fff; color: #000; }
  .sv-shell [data-view-pane="timeline"] { display: block !important; }
  .sv-shell [data-view-pane="grid"],
  .sv-shell [data-view-pane="list"],
  .sv-shell [data-view-pane="stats"] { display: none !important; }
  .chip-row { break-inside: avoid; }
}