@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&family=Syne:wght@600;700;800&display=swap");

/* Dark-first tokens matched to the cinematic landing page (styles.css §1). */
:root {
  color-scheme: dark;
  --primary: #C6FF3D;
  --primary-hover: #A8DB1F;
  --primary-strong: #A8DB1F;
  --on-primary: #0D0F14;
  --primary-ink: #C6FF3D;
  --primary-soft: #1E2A0A;
  --success: #3DCF8E;
  --success-soft: #143528;
  --warning: #F0B429;
  --warning-soft: #3A2E10;
  --danger: #F07167;
  --danger-soft: #3A1715;
  --info: #4DE8E0;
  --info-soft: #0F2E30;
  --bg: #0D0F14;
  --surface: #171A20;
  --surface-raised: #1E222A;
  --surface-muted: #14171C;
  --border: #262B33;
  --border-strong: #3A4049;
  --text: #E9EDE8;
  --muted: #8B9690;
  --sidebar: #0A0C10;
  --sidebar-text: #E9EDE8;
  --sidebar-muted: #8B9690;
  --sidebar-active: rgba(198, 255, 61, .14);
  --focus: rgba(198, 255, 61, .35);
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --font-display: "Syne", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --transition-fast: 160ms ease;
  --transition-base: 260ms ease;
}

/* Optional light theme — still brand-aligned, secondary to the cinematic dark shell. */
[data-theme="light"] {
  color-scheme: light;
  --primary: #C6FF3D;
  --primary-hover: #A8DB1F;
  --primary-strong: #8FBF14;
  --on-primary: #0D0F14;
  --primary-ink: #4C6B00;
  --primary-soft: #EEF8D2;
  --success: #2E7D32;
  --success-soft: #E7F5E2;
  --warning: #9A6700;
  --warning-soft: #FBF0D0;
  --danger: #B42318;
  --danger-soft: #FCEBE9;
  --info: #2C6E7F;
  --info-soft: #E6F4F7;
  --bg: #F4F5F0;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-muted: #EBEEE4;
  --border: #DCE0D4;
  --border-strong: #B8C0A8;
  --text: #14180E;
  --muted: #5C6753;
  --sidebar: #0A0C10;
  --sidebar-text: #E9EDE8;
  --sidebar-muted: #8B9690;
  --sidebar-active: rgba(198, 255, 61, .16);
  --focus: rgba(168, 219, 31, .45);
  --shadow: 0 12px 30px rgba(20, 24, 14, .08);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-radius: var(--radius-md);
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--primary-ink);
  outline-offset: 3px;
}

/* Visually hidden but still announced. Needed for live regions that report
   loading state to screen readers while the skeleton carries it visually. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  overflow-y: auto;
  background: var(--sidebar);
  color: var(--sidebar-text);
  border-right: 1px solid var(--border);
  transition: transform var(--transition-base);
}

.sidebar__brand {
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  color: #fff;
  font: 700 .96rem/1.2 var(--font-display);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.brand-mark {
  width: 11px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--primary);
}

.sidebar__label {
  padding: 22px 20px 8px;
  color: var(--sidebar-muted);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sidebar__nav { padding: 0 10px; }
.sidebar__nav a {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  margin: 2px 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--sidebar-muted);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.sidebar__nav a:hover { color: var(--sidebar-text); background: rgba(255,255,255,.05); }
.sidebar__nav a[aria-current="page"] {
  color: var(--sidebar-text);
  background: var(--sidebar-active);
}
.sidebar__nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px -10px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.nav-icon { width: 20px; text-align: center; font-size: 1rem; }
.nav-lock { margin-left: auto; color: var(--sidebar-muted); font-size: .68rem; }

.quota {
  margin: auto 14px 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
}
.quota__row { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; }
.quota__row strong { color: #fff; }
.progress {
  overflow: hidden;
  height: 7px;
  margin: 10px 0 8px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}
.progress > span { display: block; height: 100%; width: var(--progress, 64%); background: var(--primary); border-radius: inherit; }
.quota small { display: block; color: var(--sidebar-muted); font-size: .69rem; }

.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  gap: 16px;
  padding: 10px clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.quick-vin {
  position: relative;
  width: min(420px, 42vw);
}
.quick-vin input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: .79rem;
  text-transform: uppercase;
}
.topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-button {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.user-menu { position: relative; }
.user-button {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.avatar {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: .74rem;
  font-weight: 700;
}
.user-copy { text-align: left; line-height: 1.2; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { font-size: .78rem; }
.user-copy small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.user-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.user-popover[hidden] { display: none; }
.user-popover a {
  display: block;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast, 160ms ease), color var(--transition-fast, 160ms ease);
}
.user-popover a:hover,
.user-popover a:focus-visible {
  background: var(--surface-muted);
  outline: none;
}

/* Custom selects — same panel language as .user-popover */
.select-control {
  position: relative;
  width: 100%;
}
.select-control__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.select-control__trigger {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast, 160ms ease), background-color var(--transition-fast, 160ms ease);
}
.select-control__trigger:hover { border-color: var(--border-strong); }
.select-control__trigger[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}
.select-control.is-invalid .select-control__trigger { border-color: var(--danger); }
.select-control__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-control__value.is-placeholder { color: var(--muted); }
.select-control__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  line-height: 0;
  pointer-events: none;
  transition: transform var(--transition-fast, 160ms ease);
}
.select-control__chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}
.select-control__trigger[aria-expanded="true"] .select-control__chevron {
  transform: rotate(180deg);
}
.select-control__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.select-control__menu[hidden] { display: none; }
.select-control__option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast, 160ms ease), color var(--transition-fast, 160ms ease);
}
.select-control__option:hover,
.select-control__option:focus-visible {
  background: var(--surface-muted);
  outline: none;
}
.select-control__option[aria-selected="true"] {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
}
.select-control__option:disabled,
.select-control__option[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
.filter-bar .select-control__trigger { min-height: 40px; height: 40px; font-size: .76rem; padding: 0 10px; }
.filter-bar .select-control__option { font-size: .78rem; }

.content { width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(22px, 3vw, 38px); }
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.eyebrow { color: var(--muted); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.02em; }
h1 { margin-top: 6px; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 700; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.page-summary { max-width: 66ch; margin-top: 8px; color: var(--muted); font-size: .9rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.btn {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:not(:disabled):not(.is-loading):active { transform: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn--secondary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
.btn--secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--muted);
  color: var(--text);
}
.btn--danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}
.btn--danger:hover:not(:disabled) {
  filter: none;
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
}
.btn--danger-soft {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: transparent;
  color: var(--danger);
  font-weight: 500;
  box-shadow: none;
}
.btn--danger-soft:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger);
}
.btn--ghost {
  border-color: transparent;
  color: var(--muted);
  font-weight: 500;
  padding-inline: 12px;
}
.btn--ghost:hover:not(:disabled) {
  color: var(--primary-ink);
  background: transparent;
}
.btn--small {
  min-height: 30px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Loading state — driven by setButtonLoading() in dashboard.js.
   The button is genuinely `disabled` so a form can't be submitted twice, but a
   button that is *working* is not a button that is *unavailable*: it keeps full
   contrast rather than dropping to the 45% disabled look. These rules follow
   :disabled above so they win on equal specificity. */
.btn.is-loading,
.btn.is-loading:disabled {
  opacity: 1;
  cursor: progress;
}
.btn__spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .85;
  animation: btn-spin 600ms linear infinite;
}
.btn--small .btn__spinner { width: 12px; height: 12px; border-width: 1.5px; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* No data-loading-label, so the text isn't changing — don't let the spinner
   resize the button (a 100px button jumping to 125px mid-click is exactly the
   moment you don't want the target moving). Keep the label in flow so it holds
   its exact width, hide it, and float the spinner over the centre.
   inset+margin:auto centres it without a transform, which the spin animation
   already owns. */
.btn.is-loading-quiet .btn__label { visibility: hidden; }
.btn.is-loading-quiet .btn__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}

@media (prefers-reduced-motion: reduce) {
  /* The global reduced-motion rule collapses animation-duration to 0.01ms,
     which would freeze the spinner mid-rotation and read as broken. Drop the
     animation entirely and show a static ring; the swapped label
     ("Signing in…") is what actually carries the meaning. */
  .btn__spinner {
    animation: none;
    border-color: currentColor;
    border-style: dotted;
    opacity: .6;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  /* Status codes and counts sit in badges ("200", "404", "10 days left") — keep
     digits from jittering column width as rows re-render. */
  font-variant-numeric: tabular-nums;
}
/* Status dot for the semantic variants.
   design-language §4.1 asks that status never rest on colour alone. The label
   already says it; the dot adds a second, shape-based cue that survives
   greyscale and the common colour-vision deficiencies. It's a ::before rather
   than markup so all ~100 existing badges pick it up with no HTML churn.
   Neutral and primary badges deliberately have none: "Starter", "Business" and
   "Closed" are categories, not live status. */
.badge--success::before,
.badge--warning::before,
.badge--danger::before,
.badge--info::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.badge--success {
  border-color: color-mix(in srgb, var(--success) 22%, transparent);
  background: var(--success-soft);
  color: var(--success);
}
.badge--warning {
  border-color: color-mix(in srgb, var(--warning) 22%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}
.badge--danger {
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}
.badge--info {
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
  background: var(--info-soft);
  color: var(--info);
}
.badge--primary {
  border-color: color-mix(in srgb, var(--primary-strong) 28%, transparent);
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.alert--info { border-left-color: var(--info); background: var(--info-soft); }
.alert--success { border-left-color: var(--success); background: var(--success-soft); }
.alert--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.alert--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.alert strong { display: block; font-size: .85rem; }
.alert p { margin-top: 2px; color: var(--muted); font-size: .79rem; }
.alert__close { border: 0; background: transparent; color: var(--muted); cursor: pointer; }

.section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.section-head p { margin-top: 4px; color: var(--muted); font-size: .82rem; }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.metric { padding: 18px 20px; border-right: 1px solid var(--border); }
.metric:last-child { border-right: 0; }
.metric__label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.metric__value {
  display: block;
  margin: 10px 0 4px;
  font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--font-display);
  letter-spacing: -0.02em;
}
.metric__meta { color: var(--muted); font-size: .72rem; }
.metric__meta.positive { color: var(--success); }

.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 24px; }
.panel {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.panel--interactive { box-shadow: var(--shadow); }
.panel__title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.panel__note { margin-top: 5px; color: var(--muted); font-size: .78rem; }

.chart { min-height: 240px; }
.chart__plot {
  display: flex;
  height: 175px;
  align-items: flex-end;
  gap: clamp(7px, 2vw, 18px);
  padding: 18px 6px 0;
  border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(to bottom, transparent 0 43px, var(--border) 44px);
}
.chart__bar {
  position: relative;
  flex: 1;
  min-width: 9px;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: var(--primary-strong);
}
.chart__bar:hover::after {
  content: attr(data-value);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--text);
  color: var(--surface);
  font-size: .68rem;
}
.chart__labels { display: flex; justify-content: space-between; padding-top: 8px; color: var(--muted); font-size: .67rem; }

.detail-list { display: grid; gap: 0; }
.detail-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); font-size: .8rem; }
.detail-list dd { text-align: right; font-size: .82rem; font-weight: 600; }

.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.tabs a, .tabs button {
  min-width: max-content;
  padding: 10px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.tabs [aria-current="page"], .tabs [aria-selected="true"] { border-bottom-color: var(--primary-strong); color: var(--primary-ink); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.field {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 6px;
}
.field--full { grid-column: 1 / -1; }
.field label, .field__label {
  font-size: .78rem;
  font-weight: 700;
  min-height: 1.2em;
  line-height: 1.2;
}
.field small,
.field__hint {
  color: var(--muted);
  font-size: .71rem;
  line-height: 1.35;
  min-height: 1.35em;
}
.field__error {
  color: var(--danger) !important;
  font-size: .71rem;
  line-height: 1.35;
  min-height: 1.35em;
}
.field__error[hidden] { display: none !important; }
.field__hint[hidden] { display: none !important; }
.password-field {
  position: relative;
  display: grid;
}
.password-field input { padding-right: 44px; }
.password-field input[aria-invalid="true"],
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.password-toggle:hover { color: var(--text); }
.password-toggle svg { width: 18px; height: 18px; display: block; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  background: var(--surface);
}
textarea { min-height: 120px; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover { border-color: var(--border-strong); }

input[type="checkbox"]:not(.switch__input),
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--primary-strong);
  cursor: pointer;
}

.check {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  font-size: .82rem;
  line-height: 1.45;
  cursor: pointer;
}
.check span { color: var(--text); }
.check:hover { border-color: var(--border-strong); }
.check:has(input:focus-visible) {
  outline: 2px solid var(--primary-ink);
  outline-offset: 2px;
}
.vin-input { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.dropzone {
  display: grid;
  min-height: 230px;
  place-items: center;
  padding: 28px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  text-align: center;
  cursor: pointer;
}
.dropzone.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.dropzone strong { display: block; margin-bottom: 6px; }
.dropzone p { color: var(--muted); font-size: .8rem; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.result { margin-top: 22px; }
.result[hidden], [hidden] { display: none !important; }
.result__vin { margin: 8px 0 18px; font-family: var(--font-mono); font-size: 1rem; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.result-grid > div { padding: 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.result-grid > div:nth-child(3n) { border-right: 0; }
.result-grid dt { color: var(--muted); font-size: .71rem; }
.result-grid dd { margin-top: 3px; font-size: .84rem; font-weight: 600; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .78rem; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 13px;
  background: var(--surface-muted);
  color: var(--muted);
  text-align: left;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
td { padding: 12px 13px; border-top: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: var(--surface-muted); }
.mono { font-family: var(--font-mono); letter-spacing: .025em; }

/* ---------------------------------------------------------------- SKELETON
   Placeholder shown while real data is in flight. See showTableSkeleton() in
   dashboard.js; column shapes come from data-skeleton on each <th>.

   Two rules keep it honest:
   1. It must occupy the same space the real content will — a skeleton that
      changes the layout when data lands is worse than no skeleton, because it
      moves the thing the user is already reaching for.
   2. It is aria-hidden and paired with a live region. A screen reader should
      hear "Loading search history", not seven empty cells per row.        */
.skeleton {
  display: block;
  height: 10px;
  border-radius: 999px;
  background-color: var(--surface-muted);
  background-image: linear-gradient(90deg, transparent, var(--border), transparent);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeleton-shimmer 1.4s linear infinite;
}
/* Matches .badge (22px) and .btn--small (30px) so row height is unchanged. */
.skeleton--pill { width: 64px; height: 20px; }
.skeleton--action { width: 52px; height: 30px; border-radius: 8px; }
.skeleton-group { display: inline-flex; gap: 8px; }
/* Stagger the sweep down the rows so it reads as one surface loading rather
   than every cell pulsing in lockstep. */
.table-skeleton tr:nth-child(2) .skeleton { animation-delay: 80ms; }
.table-skeleton tr:nth-child(3) .skeleton { animation-delay: 160ms; }
.table-skeleton tr:nth-child(4) .skeleton { animation-delay: 240ms; }
.table-skeleton tr:nth-child(n+5) .skeleton { animation-delay: 320ms; }
.table-skeleton tr:hover { background: none; }

@keyframes skeleton-shimmer {
  from { background-position: -100% 0; }
  to { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* The global rule would collapse the sweep to 0.01ms and strobe. A flat
     block still says "content is coming" without the flashing. */
  .skeleton { animation: none; background-image: none; }
}
.table-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-actions .btn--small {
  min-width: max-content;
}
.filter-bar {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(120px, .7fr)) auto;
  gap: 9px;
  align-items: end;
  margin-bottom: 12px;
}
.filter-bar .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.filter-bar .field label,
.filter-bar .field .field__label,
.filter-bar .field > span.field__label {
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 500;
}
.filter-bar input,
.filter-bar select,
.filter-bar .select-control__trigger {
  min-height: 40px;
  height: 40px;
  font-size: .76rem;
}
.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.filter-actions .btn,
.filter-bar > .field > .btn {
  min-height: 40px;
  height: 40px;
  padding-inline: 16px;
}
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: var(--muted); font-size: .76rem; }

.key-secret {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 13px;
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  overflow-wrap: anywhere;
}

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.plan.is-current { border: 2px solid var(--primary-strong); }
.plan__price { margin: 12px 0; font: 700 1.7rem var(--font-display); }
.plan__price small { color: var(--muted); font: 400 .75rem var(--font-body); }
.plan ul { display: grid; gap: 7px; margin-bottom: 18px; color: var(--muted); font-size: .75rem; }
.plan .btn { margin-top: auto; }

.ticket-thread { display: grid; gap: 14px; }
.message { max-width: 78%; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.message--user { margin-left: auto; background: var(--primary-soft); }
.message__meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: .68rem; }
.message p { font-size: .82rem; }

.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
.settings-nav { display: grid; align-content: start; gap: 3px; }
.settings-nav a {
  padding: 9px 10px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.settings-nav a[aria-current="page"] { border-left-color: var(--primary-strong); background: var(--primary-soft); color: var(--primary-ink); }
.switch-row { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.switch-row p { margin-top: 3px; color: var(--muted); font-size: .74rem; }
.toggle-cell,
.toggle-col {
  width: 104px;
  text-align: center;
  vertical-align: middle !important;
}
.toggle-cell .switch { margin-inline: auto; }
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}
.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.switch__track {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;
  background: #C5CDB6;
  border: 1px solid #9AA68A;
  box-shadow: inset 0 1px 2px rgba(16, 20, 10, .08);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 20, 10, .22);
  transition: transform 150ms ease;
}
.switch__input:checked + .switch__track {
  background: #C6FF3D;
  border-color: #8FBF14;
}
.switch__input:checked + .switch__track::after { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--primary-ink);
  outline-offset: 2px;
}
.switch__input:disabled + .switch__track { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .switch__track {
  background: #3C4536;
  border-color: #5A6650;
}

.danger-zone {
  margin-top: 24px;
  padding: 18px 18px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--danger-soft);
}
.danger-zone + .danger-zone { margin-top: 14px; }
.danger-zone h2,
.danger-zone h3 { color: var(--danger); font-size: 1.05rem; }
.danger-zone p { margin: 6px 0 14px; color: var(--muted); font-size: .79rem; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 12, 6, .62);
  backdrop-filter: blur(2px);
  animation: modal-backdrop-in 160ms ease;
}
.modal {
  position: relative;
  width: min(520px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  /* design-language §9: fade + slight scale, never a bounce. */
  animation: modal-in 220ms cubic-bezier(.16, 1, .3, 1);
}
/* The dialog takes focus as a last resort when it holds no focusable control,
   so the trap always has somewhere to land. JS sets tabindex="-1". */
.modal:focus { outline: none; }
@keyframes modal-backdrop-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.98); } }
.modal--danger {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}
.modal__header h2,
.modal > h2 {
  margin: 0;
  font-size: 1.2rem;
}
.modal > h2 { padding: 18px 20px 0; }
.modal--danger .modal__header h2,
.modal--danger > h2 { color: var(--danger); }
.modal__close {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { color: var(--text); background: var(--surface-muted); }
.modal__body {
  padding: 12px 20px 4px;
}
.modal__body > p,
.modal > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
.modal > p,
.modal > .field,
.modal > .form-grid,
.modal > .panel,
.modal > .detail-list,
.modal > .key-secret,
.modal > .mono,
.modal > form,
.modal > dl {
  margin-left: 20px;
  margin-right: 20px;
}
.modal > form { margin-bottom: 0; }
.modal > form:has(> .modal__actions:only-child) {
  margin-left: 0;
  margin-right: 0;
}
.modal__actions,
.modal > .form-actions,
.modal form > .form-actions,
.modal form > .modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 0;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.modal > .form-actions,
.modal form > .form-actions {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

.empty-state { padding: 46px 18px; text-align: center; }
.empty-state p { max-width: 50ch; margin: 8px auto 17px; color: var(--muted); font-size: .82rem; }
.locked {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 32px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.locked p { max-width: 52ch; margin: 9px auto 18px; color: var(--muted); }
.toaster {
  position: fixed;
  z-index: 300;
  right: 16px;
  bottom: 16px;
  display: flex;
  width: min(380px, calc(100vw - 32px));
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(16, 20, 10, .04),
    0 12px 28px rgba(16, 20, 10, .12);
  animation: toast-in 220ms cubic-bezier(.16, 1, .3, 1);
}
[data-theme="dark"] .toast {
  background: var(--surface-raised);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .2),
    0 16px 36px rgba(0, 0, 0, .45);
}
.toast.is-leaving {
  animation: toast-out 180ms ease forwards;
}
.toast__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 12px 16px;
}
.toast__track {
  height: 3px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}
.toast__progress {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation: toast-progress var(--toast-duration, 3600ms) linear forwards;
}
.toast--success .toast__progress { background: var(--success); }
.toast--error .toast__progress { background: var(--danger); }
.toast--warning .toast__progress { background: var(--warning); }
.toast--info .toast__progress { background: var(--info); }
/* Pause on hover AND on keyboard focus — a keyboard user tabbing to the
   dismiss button needs the same reprieve a pointer user gets. The JS dismiss
   timer pauses alongside this; see toast() in dashboard.js. */
.toast:hover .toast__progress,
.toast:focus-within .toast__progress { animation-play-state: paused; }
.toast__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.toast--success .toast__icon { background: var(--success-soft); color: var(--success); }
.toast--error .toast__icon { background: var(--danger-soft); color: var(--danger); }
.toast--warning .toast__icon { background: var(--warning-soft); color: var(--warning); }
.toast--info .toast__icon { background: var(--info-soft); color: var(--info); }
.toast__content { min-width: 0; padding-top: 1px; }
.toast__title {
  margin: 0;
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
}
.toast__description {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}
.toast__close {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin: -2px -2px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.toast__close:hover { background: var(--surface-muted); color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-leaving,
  .toast__progress { animation: none; }
  .toast__progress { transform: scaleX(0); }
}
.sidebar-scrim { display: none; }

@media (max-width: 1180px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    border: 0;
    background: rgba(5, 11, 20, .58);
  }
  .sidebar-scrim[hidden] { display: none; }
  .app-main { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .topbar { gap: 8px; padding-inline: 14px; }
  .quick-vin { display: none; }
  .user-copy { display: none; }
  .content { padding: 20px 16px 34px; }
  .page-head { flex-direction: column; margin-bottom: 22px; }
  .page-actions, .page-actions .btn { width: 100%; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--border); }
  .metric:nth-child(3) { border-bottom: 1px solid var(--border); }
  .metric:last-child { border-bottom: 0; }
  .form-grid, .result-grid, .plans, .settings-layout { grid-template-columns: 1fr; }
  .result-grid > div, .result-grid > div:nth-child(3n) { border-right: 0; }
  .filter-bar { grid-template-columns: 1fr; }
  .settings-nav { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); }
  .settings-nav a { min-width: max-content; border-left: 0; border-bottom: 2px solid transparent; }
  .settings-nav a[aria-current="page"] { border-bottom-color: var(--primary-strong); }
  .message { max-width: 94%; }
  .modal__actions, .form-actions { flex-direction: column-reverse; }
  .modal__actions .btn, .form-actions .btn { width: 100%; }
  .alert { grid-template-columns: auto 1fr; }
  .alert__close { grid-column: 2; justify-self: start; }
}

@media (max-width: 420px) {
  .content { padding-inline: 12px; }
  .panel { padding: 15px; }
  .pagination { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}