/* LotRevive v3 design system — tokens, shared components, the app shell and the marketing chrome.
   Flat, architectural, monochrome: hairline borders, small radii, light Inter headings, JetBrains Mono uppercase labels.
   No glass, blur, glows or gradients. Page-specific styles live in /css/<page>.css and build on these tokens.

   Component index (class → use)
   ─ Type ........ .label (.eyebrow) mono uppercase label · .section-label label + 12px icon · .page-title / .page-sub ·
                   .lede · .muted · .num (tabular figures) · .sr-only
   ─ Buttons ..... .btn (outline) · .btn-primary (off-white, dark ink) · .btn-ghost · .btn-sm · .btn-lg · .btn-block ·
                   .btn-mono (mono uppercase text) · .btn-arrow (trailing → icon nudges on hover) · .icon-btn · .go-btn
   ─ Surfaces .... .card · .card-pad · .card-head · .card-title · .card-sub · .card-link ("View all →") · .hairline
   ─ Data ........ .kpi (.kpi-head .kpi-label .kpi-arrow .kpi-value .kpi-unit) · .table (.table-wrap) · .empty-state
                   (.empty-icon .empty-title .empty-text .empty-action) · .checklist > .check-row (.check-dot .check-text
                   .check-go) · .badge (-success -warn -danger -muted -strong) · .pill · .level · .delta · .skel
   ─ Controls .... inputs/select/textarea · .field · .form-row · .check (checkbox row) · .select-btn · .menu
                   (.menu-label .menu-sep .menu-empty .menu-right .menu-up .menu-block) · .kbd · .search-results
   ─ Overlays .... .modal-backdrop.open > .modal (.modal-wide .modal-head .modal-sub .modal-actions) · .toast.show
   ─ Shell ....... .app .sidebar .side-* .plan-card .workspace .topbar .search .help-btn .content .access-banner
   ─ Marketing ... .mk-header .mk-bar .mk-brand .mk-nav .mk-link .mk-cta .mk-burger .mk-menu .mk-footer .mk-wrap
   Legacy names from the previous system (.glass-panel, .glass-strong, .icon-tile, .notice, .thumb, .unit-cell, .panel,
   .page-head, .link-more, .btn-light, .btn-gold, .level-*) stay working, restyled flat, until the pages are rebuilt. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono (OFL, /fonts/JetBrainsMono-OFL.txt), latin 400 + 500, for small uppercase labels. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Surfaces — sampled from app.png / landing.png, darkest to lightest */
  --page: #0a0c0d;          /* app canvas */
  --page-mk: #05080a;       /* marketing canvas */
  --sidebar: #090b0b;
  --topbar: #0b0e0f;
  --card: #0b0f10;
  --card-hover: #0e1213;
  --raised: #111514;        /* active nav item, selected rows */
  --raised-2: #181c1d;      /* kbd chips, square arrow buttons */
  --field: #0b0f10;
  --overlay: #0f1314;       /* menus, popovers, toasts */

  /* Hairlines */
  --line-faint: #131718;    /* row separators, the sidebar logo rule */
  --line: #1c1f20;          /* shell borders, selects */
  --line-strong: #25292a;   /* cards, search, inputs */
  --line-hover: #353a3c;

  /* Ink */
  --text: #f4f5f3;          /* headings, numbers, active nav */
  --text-2: #d0d3d2;        /* nav items, units, links */
  --text-3: #b2b6b5;        /* secondary copy, labels */
  --text-4: #8d9190;        /* sidebar label, table headers */
  --text-5: #6d7170;        /* empty-state icons, disabled */

  /* The screenshots' only colour: a faint sage */
  --accent: #b6c2b2;        /* active nav rule, checked states */
  --accent-dim: #6b756f;    /* plan card rule */
  --primary: #e2e9dc;       /* app primary button */
  --primary-hover: #eef3ea;
  --primary-ink: #0a0d0b;
  --primary-mk: #e8e8e5;    /* marketing primary button */
  --primary-mk-hover: #f4f4f1;

  /* Status (desaturated; badges and pills only) */
  --ok-rgb: 156 202 169;    --ok: rgb(var(--ok-rgb));
  --warn-rgb: 217 183 121;  --warn: rgb(var(--warn-rgb));
  --danger-rgb: 227 142 134; --danger: rgb(var(--danger-rgb));

  /* Type scale (px) */
  --fs-label: 10px;  --ls-label: .08em;
  --fs-xs: 11px;  --fs-sm: 12px;  --fs-base: 12.5px;  --fs-md: 13px;  --fs-lg: 14px;
  --fs-title: 20px;  --fs-h2: 26px;  --fs-h1: 32px;  --fs-display: 60px;

  /* Shape */
  --r-1: 2px;   /* buttons */
  --r-2: 4px;   /* cards, selects, inputs, menus */
  --r-3: 6px;   /* modals */

  /* Motion: one vocabulary (CSS, /js/motion.js, page scripts). Calm: no bounce, no overshoot. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-press: cubic-bezier(.3, .7, .4, 1);
  --dur-1: 120ms;   /* press, colour */
  --dur-2: 180ms;   /* hover, menus */
  --dur-3: 360ms;   /* component entrances */
  --dur-4: 700ms;   /* scroll reveals */
  --stagger: 60ms;

  /* Shell geometry (app.png at 1536 × 1024) */
  --sidebar-w: 213px;
  --topbar-h: 51px;
  --content-x: 33px;
  /* Marketing container (landing.png × 1.5635 at 1440): logo at 73.5px, CTA ends 58px from the right */
  --mk-max: 1440px;
  --mk-pad-l: clamp(16px, 5.1vw, 74px);
  --mk-pad-r: clamp(16px, 4.03vw, 58px);

  /* Legacy aliases (pre-v3 page sheets) — mapped onto the v3 palette */
  --bg: var(--page); --bg-deep: var(--sidebar); --text-strong: var(--text);
  --panel: var(--card); --panel-top: var(--card); --panel-bottom: var(--card); --card-top: var(--card); --card-bottom: var(--card);
  --input: var(--field); --row-hover: rgb(255 255 255 / .02);
  --line-2: var(--line-strong); --line-3: var(--line-hover); --divider: var(--line-faint); --rim: var(--line-strong);
  --highlight: 0 0 #0000; --blur: none;
  --green-rgb: var(--ok-rgb); --green: var(--ok); --green-deep: #17271d;
  --gold-rgb: 226 233 220; --gold: var(--primary); --gold-2: #c9d0c3; --gold-ink: var(--primary-ink);
  --amber-rgb: var(--warn-rgb); --amber: var(--warn); --red-rgb: var(--danger-rgb); --red: var(--danger);
  --high-bg: #24161a; --high-ink: #f0b6b0; --medium-bg: #252016; --medium-ink: #e9d2a6; --low-bg: #142019; --low-ink: #b3d9bf;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow: 0 10px 28px rgb(0 0 0 / .45); --shadow-lg: 0 18px 44px rgb(0 0 0 / .55);
  --r-xs: 2px; --r-sm: 4px; --r-md: 4px; --r-lg: 4px; --r-xl: 6px; --r-2xl: 6px;
  --ease: var(--ease-out); --sidebar-gap: 0px;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--text-2); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0; }
img, svg { max-width: 100%; }
::selection { background: rgb(226 233 220 / .22); color: #fff; }
:focus-visible { outline: 1.5px solid rgb(226 233 220 / .75); outline-offset: 2px; }
.icon { width: 16px; height: 16px; flex: none; stroke-width: 1.75; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-4); }
.file { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tone-success { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-danger { color: var(--danger); }

/* ── Type ─────────────────────────────────────────────── */
/* Mono label: page eyebrows ("OVERVIEW"), table headers, menu headings. */
.label, .eyebrow { font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-label); line-height: 1.4; text-transform: uppercase; color: var(--text-3); }
.label-strong { color: var(--text); }
/* Section label above card titles: icon + mono text ("REVENUE RADAR"). */
.section-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; color: var(--text-3); }
.section-label .icon { width: 12px; height: 12px; stroke-width: 1.75; color: var(--text-2); }
.page-title { font-size: var(--fs-h1); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.page-sub, .lede { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.display { font-size: var(--fs-display); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; color: var(--text); }

/* ── Buttons ──────────────────────────────────────────── */
.btn { --h: 34px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-1); background: transparent; color: var(--text); font-size: 12.5px; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-press); }
.btn .icon { width: 14px; height: 14px; }
.btn:hover { border-color: var(--line-hover); background: rgb(255 255 255 / .035); }
.btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.btn-primary, .btn-light, .btn-gold { border-color: transparent; background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover, .btn-light:hover, .btn-gold:hover { border-color: transparent; background: var(--primary-hover); }
.btn-ghost { border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { border-color: transparent; background: rgb(255 255 255 / .045); color: var(--text); }
.btn-sm { --h: 28px; gap: 8px; padding: 0 12px; font-size: 12px; }
.btn-lg { --h: 42px; gap: 12px; padding: 0 24px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-mono { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
/* Trailing arrow: put .btn-arrow on the button; the last icon eases 2px right on hover. */
.btn-arrow > .icon:last-child { transition: translate var(--dur-2) var(--ease-out); }
.btn-arrow:hover > .icon:last-child { translate: 2px 0; }
.icon-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--text-2); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-press); }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: rgb(255 255 255 / .05); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .icon { width: 18px; height: 18px; }
/* Square arrow button (checklist rows, list items). */
.go-btn { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--raised-2); color: var(--text); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.go-btn .icon { width: 14px; height: 14px; }
.go-btn:hover { border-color: var(--line-hover); background: #1f2425; }
.kebab { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--text-3); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.kebab:hover, .kebab[aria-expanded="true"] { background: rgb(255 255 255 / .05); color: var(--text); }
.kebab .icon { width: 16px; height: 16px; }
.link-more, .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); }
.link-more .icon, .card-link .icon { width: 12px; height: 12px; transition: translate var(--dur-2) var(--ease-out); }
.link-more:hover, .card-link:hover { color: var(--text); }
.link-more:hover .icon, .card-link:hover .icon { translate: 2px 0; }

/* ── Surfaces ─────────────────────────────────────────── */
.card, .glass-panel { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--card); }
.card-pad, .panel { padding: 16px 20px 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-title { margin-top: 9px; color: var(--text); font-size: var(--fs-title); font-weight: 400; line-height: 1.25; letter-spacing: -.005em; }
.card-sub { margin-top: 5px; color: var(--text-3); font-size: var(--fs-base); line-height: 1.45; }
.hairline { height: 1px; border: 0; margin: 0; background: var(--line-faint); }
.glass-strong { border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--overlay); box-shadow: var(--shadow-lg); }
.icon-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--raised); color: var(--text-2); }
.icon-tile .icon { width: 18px; height: 18px; }

/* ── KPI card ─────────────────────────────────────────── */
.kpi { display: flex; flex-direction: column; min-height: 108px; padding: 15px 12px 14px 16px; }
.kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kpi-label { color: var(--text-3); font-size: var(--fs-base); line-height: 1.35; }
.kpi-arrow { color: var(--text-2); }
.kpi-arrow .icon, .kpi-arrow.icon { width: 14px; height: 14px; }
.kpi-value { margin-top: 7px; color: var(--text); font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-unit { margin-top: 7px; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.2; }
a.kpi, button.kpi { text-align: left; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
a.kpi:hover, button.kpi:hover { border-color: var(--line-hover); background: var(--card-hover); }

/* ── Empty state ──────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 22px 16px; text-align: center; }
.empty-icon { width: 32px; height: 32px; margin-bottom: 15px; color: var(--text-5); stroke-width: 1.25; }
.empty-title { color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.35; }
.empty-text { max-width: 290px; margin-top: 5px; color: var(--text-3); font-size: var(--fs-base); line-height: 1.45; }
.empty-action { margin-top: 15px; }
/* Data unavailable (API failure): same layout, quieter icon, Retry as the action. */
.empty-state.is-error .empty-icon { color: var(--text-4); }
.empty { padding: 30px 16px; color: var(--text-3); font-size: var(--fs-base); text-align: center; }

/* ── Checklist ────────────────────────────────────────── */
.checklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-faint); }
.check-row { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; min-height: 51px; padding: 8px 0 8px 2px; border-bottom: 1px solid var(--line-faint); }
.check-dot { display: grid; place-items: center; width: 15px; height: 15px; border: 1.25px solid var(--text-3); border-radius: 50%; color: var(--primary-ink); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.check-dot .icon { width: 10px; height: 10px; stroke-width: 3; opacity: 0; }
.check-row.is-done .check-dot { border-color: var(--accent); background: var(--accent); }
.check-row.is-done .check-dot .icon { opacity: 1; }
.check-text { min-width: 0; padding: 0 12px 0 28px; }
.check-text strong { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 400; line-height: 1.35; }
.check-text small { display: block; margin-top: 3px; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.35; }
.check-row.is-done .check-text strong { color: var(--text-3); }

/* ── Tables ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-4); font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--ls-label); text-align: left; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line-faint); color: var(--text-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.table tbody tr:hover { background: var(--row-hover); }
.table .num { text-align: left; }
.flash { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 35% { background: rgb(226 233 220 / .08); } 100% { background: transparent; } }
.unit-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.unit-cell strong { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 400; white-space: nowrap; }
.unit-cell small { display: block; margin-top: 2px; color: var(--text-4); font-size: var(--fs-xs); white-space: nowrap; }
.thumb { display: block; flex: none; width: 48px; height: 34px; border-radius: var(--r-1); object-fit: cover; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.thumb-fallback { display: grid; place-items: center; color: var(--text-4); }
.thumb-fallback .icon { width: 18px; height: 18px; }

/* ── Badges, pills, status ────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-1); background: transparent; color: var(--text-2); font-size: 11.5px; font-weight: 400; line-height: 1; white-space: nowrap; }
.badge-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-success { border-color: rgb(var(--ok-rgb) / .3); color: var(--ok); }
.badge-warn { border-color: rgb(var(--warn-rgb) / .32); color: var(--warn); }
.badge-danger { border-color: rgb(var(--danger-rgb) / .32); color: var(--danger); }
.badge-strong { border-color: var(--line-hover); color: var(--text); }
.badge-muted { color: var(--text-4); }
.badge-gold { border-color: transparent; background: var(--primary); color: var(--primary-ink); }
/* Mono pill: compact uppercase state ("PAID", "DEMO"). */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--text-3); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.level { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-1); font-size: 11.5px; font-weight: 400; }
.level-high { border-color: rgb(var(--danger-rgb) / .3); background: var(--high-bg); color: var(--high-ink); }
.level-medium { border-color: rgb(var(--warn-rgb) / .3); background: var(--medium-bg); color: var(--medium-ink); }
.level-low { border-color: rgb(var(--ok-rgb) / .28); background: var(--low-bg); color: var(--low-ink); }
.level-muted { color: var(--text-3); }
.delta { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: var(--fs-sm); }
.delta .icon { width: 13px; height: 13px; }
.delta.down { color: var(--danger); }
/* Loading placeholder; static under reduced motion. */
.skel { display: block; height: 12px; border-radius: var(--r-1); background: linear-gradient(90deg, rgb(255 255 255 / .035) 30%, rgb(255 255 255 / .07) 50%, rgb(255 255 255 / .035) 70%) 0 0 / 300% 100%; animation: skel 1.6s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Forms ────────────────────────────────────────────── */
textarea, select, input:is([type="email"], [type="text"], [type="password"], [type="search"], [type="number"], [type="tel"], [type="url"], [type="date"], [type="time"], :not([type])) { width: 100%; height: 34px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-2); outline: none; background: var(--field); color: var(--text); font-size: var(--fs-md); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
textarea { height: auto; min-height: 180px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
select { padding-right: 32px; appearance: none; -webkit-appearance: none; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d0d3d2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
textarea:hover, select:hover, input:hover { border-color: var(--line-hover); }
textarea:focus, select:focus, input:focus { border-color: var(--line-hover); box-shadow: 0 0 0 3px rgb(226 233 220 / .07); }
::placeholder { color: var(--text-4); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.field { display: grid; gap: 7px; }
.field > label, .form-row label { color: var(--text-3); font-size: var(--fs-sm); }
.field-hint { color: var(--text-4); font-size: var(--fs-sm); line-height: 1.45; }
.select-value.is-placeholder { color: var(--text-3); }
.field-error { color: var(--danger); font-size: var(--fs-sm); line-height: 1.45; }
.field-error:empty { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: rgb(var(--danger-rgb) / .55); }
/* The generic form dialog (LR.dialog in /app.js): the v3 replacement for prompt() and confirm(). */
.lr-dialog { width: min(480px, 100%); }
.lr-dialog-fields { display: grid; gap: 16px; }
.form-row { margin: 14px 0; }
.form-row label { display: block; margin-bottom: 7px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: var(--text-2); font-size: var(--fs-base); line-height: 1.5; cursor: pointer; }
.check input { flex: none; display: grid; place-content: center; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid var(--line-hover); border-radius: 3px; background: var(--field); cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.check input::after { content: ""; width: 8px; height: 4px; border-bottom: 1.6px solid var(--primary-ink); border-left: 1.6px solid var(--primary-ink); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-2) var(--ease-out); }
.check input:checked { border-color: var(--primary); background: var(--primary); }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.notice { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-2); background: rgb(255 255 255 / .015); color: var(--text-3); font-size: var(--fs-base); line-height: 1.5; }
.notice::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.notice-warn { border-color: rgb(var(--warn-rgb) / .28); color: var(--text-2); }
.notice-warn::before { background: var(--warn); }
.notice[hidden] { display: none; }

/* ── Select button + menus ────────────────────────────── */
.select-btn { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 11px 0 13px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: transparent; color: var(--text); font-size: var(--fs-base); white-space: nowrap; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.select-btn .icon { width: 15px; height: 15px; color: var(--text-2); }
.select-btn .chevron { width: 14px; height: 14px; margin-left: auto; transition: rotate var(--dur-2) var(--ease-out); }
.select-btn:hover, .select-btn[aria-expanded="true"] { border-color: var(--line-hover); background: rgb(255 255 255 / .02); }
.select-btn[aria-expanded="true"] .chevron { rotate: 180deg; }
.select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-anchor { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px; padding: 5px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--overlay); box-shadow: var(--shadow-lg); transform-origin: top right; animation: menu-in var(--dur-2) var(--ease-out); }
.menu-block { left: 0; right: auto; min-width: 100%; transform-origin: top left; }
.menu-right { right: 0; }
.menu-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.menu-wide { width: 340px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--text-2); font-size: var(--fs-base); line-height: 1.3; text-align: left; white-space: nowrap; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible, .menu .active { outline: none; background: rgb(255 255 255 / .055); color: var(--text); }
.menu .icon { width: 15px; height: 15px; color: var(--text-4); }
.menu a:hover .icon, .menu button:hover .icon { color: var(--text-2); }
.menu .checked { color: var(--text); }
.menu .menu-check { margin-left: auto; color: var(--accent); }
.menu-label { padding: 8px 10px 5px; color: var(--text-4); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.menu-sep { height: 1px; margin: 5px -5px; background: var(--line); }
.menu-empty { padding: 14px 10px; color: var(--text-3); font-size: var(--fs-base); text-align: center; white-space: normal; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } }
.kbd { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; border: 1px solid #1f2324; border-radius: 3px; background: var(--raised-2); color: var(--text-3); font-family: var(--mono); font-size: var(--fs-label); line-height: 1; white-space: nowrap; }
.kbd .icon { width: 10px; height: 10px; stroke-width: 2; }

/* Search results (global search listbox). */
.search-results { left: 0; right: 0; top: calc(100% + 6px); max-height: min(440px, 70vh); overflow-y: auto; transform-origin: top center; }
.search-group + .search-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.search-item { align-items: center !important; min-height: 44px !important; }
.search-item strong { display: block; overflow: hidden; color: var(--text); font-size: var(--fs-base); font-weight: 400; text-overflow: ellipsis; }
.search-item small { display: block; overflow: hidden; margin-top: 1px; color: var(--text-4); font-size: var(--fs-xs); text-overflow: ellipsis; }
.search-item > span:last-child { min-width: 0; }
.search-item .icon { width: 15px; height: 15px; }
.search-item mark { background: none; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-dim); text-underline-offset: 2px; }
/* Legacy notification/search row parts. */
.notify-item { align-items: flex-start !important; }
.notify-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-2); }

/* ── Modal + toast ────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; background: rgb(3 4 5 / .72); }
.modal-backdrop.open { display: flex; animation: fade-in var(--dur-2) var(--ease-out); }
.modal { width: min(600px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 20px 24px 24px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--card); box-shadow: 0 24px 64px rgb(0 0 0 / .6); animation: modal-in var(--dur-3) var(--ease-out); }
.modal:focus { outline: none; }
.modal-wide { width: min(780px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.modal-head .icon-btn { margin: -4px -8px 0 0; }
.modal h3 { margin-top: 6px; font-size: var(--fs-title); }
.modal-sub { max-width: 600px; margin-top: 6px; color: var(--text-3); font-size: var(--fs-base); line-height: 1.5; }
.modal-kicker { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.modal-to { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--field); font-size: var(--fs-base); }
.modal-to span { color: var(--text-4); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.modal-to strong { overflow: hidden; color: var(--text); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }
/* CSV column guide (help menu). */
.csv-guide { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.csv-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.csv-guide h4 { color: var(--text); font-size: var(--fs-lg); font-weight: 400; }
.csv-guide-note { margin: 6px 0 10px; color: var(--text-3); font-size: var(--fs-base); }
.csv-guide .table td:first-child { width: 132px; color: var(--text); white-space: nowrap; }
.csv-guide .table td { padding: 9px 12px; font-size: var(--fs-sm); }
.csv-guide .table th:first-child, .csv-guide .table td:first-child { padding-left: 0; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--overlay); box-shadow: var(--shadow-lg); color: var(--text); font-size: var(--fs-base); line-height: 1.45; opacity: 0; pointer-events: none; translate: 0 8px; transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.toast::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.toast.show { opacity: 1; translate: none; }

/* ── App shell (app.png) ──────────────────────────────── */
.app-body { overflow-x: hidden; }
/* Skip link: first in the tab order, visible only while focused. */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 9px 14px; border-radius: var(--r-2); background: var(--text); color: var(--page); font-size: var(--fs-base); text-decoration: none; transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out); }
.skip-link:focus { transform: none; outline: 2px solid var(--text); outline-offset: 2px; }
/* app.png sets Inter at its display optical size (opsz 32) at every size, so small text is narrower than the default text
   cut. Applied to the whole app shell (sidebar, topbar, every view) so every tab reads alike; JetBrains Mono has no opsz. */
.app { font-variation-settings: "opsz" 32; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; display: flex; flex-direction: column; width: var(--sidebar-w); border-right: 1px solid var(--line); background: var(--sidebar); }
.side-head { display: flex; flex: none; align-items: center; justify-content: space-between; height: 59px; padding: 2px 16px 0 32px; border-bottom: 1px solid var(--line-faint); }
.side-brand { display: flex; align-items: center; border-radius: var(--r-1); }
.side-brand .logo { display: block; width: auto; height: 19.4px; }
.side-close { display: none; margin-right: -6px; }
.side-dealer { flex: none; padding: 18px 16px 0 18px; }
.side-label { display: block; margin-bottom: 1px; padding-left: 4px; color: var(--text-4); letter-spacing: .07em; }
.dealer-btn { width: 100%; height: 33px; padding: 0 10px 0 9px; border-color: var(--line); font-size: var(--fs-sm); }
.dealer-btn .chevron { color: var(--text-2); }
.side-nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-height: 0; padding: 22px 16px 12px 18px; overflow-y: auto; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.side-link { position: relative; display: flex; flex: none; align-items: center; gap: 13px; height: 36px; padding: 0 11px; border-radius: 0 var(--r-2) var(--r-2) 0; color: var(--text-2); font-size: var(--fs-base); white-space: nowrap; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.side-link .icon { width: 18px; height: 18px; stroke-width: 1.6; }
.side-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--accent); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.side-link:hover { background: rgb(255 255 255 / .025); color: var(--text); }
.side-link.active { background: var(--raised); color: var(--text); }
.side-link.active::before { opacity: 1; }
.side-link.is-locked { color: var(--text-5); }
.plan-card { position: relative; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin: 0 16px 18px 18px; padding: 0 7px 1px 17px; border: 1px solid var(--line); border-radius: var(--r-2); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.plan-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 1.5px; background: var(--accent-dim); transition: background-color var(--dur-2) var(--ease-out); }
.plan-card:hover, .plan-card.active { border-color: var(--line-strong); background: rgb(255 255 255 / .02); }
.plan-card:hover::before, .plan-card.active::before { background: var(--accent); }
.plan-text { min-width: 0; }
.plan-text strong { display: block; color: var(--text); font-size: var(--fs-md); font-weight: 400; line-height: 1.3; }
.plan-text small { display: block; margin-top: 2px; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap; }
.plan-card > .icon { width: 14px; height: 14px; color: var(--text-2); transition: translate var(--dur-2) var(--ease-out); }
.plan-card:hover > .icon { translate: 2px 0; }
.nav-scrim { position: fixed; inset: 0; z-index: 35; background: rgb(2 3 4 / .6); animation: fade-in var(--dur-2) var(--ease-out); }
.workspace { min-width: 0; margin-left: var(--sidebar-w); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; height: var(--topbar-h); padding: 6px 26px 0 var(--content-x); border-bottom: 1px solid var(--line); background: var(--topbar); }
.nav-toggle, .topbar-brand { display: none; }
.topbar-brand .brand-mark { display: block; width: auto; height: 22px; }
.search { position: relative; display: flex; align-items: center; width: min(317px, 100%); height: 34px; margin-left: auto; padding: 0 7px 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-2); cursor: text; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.search:hover { border-color: #2e3334; }
.search:focus-within { border-color: var(--line-hover); background: rgb(255 255 255 / .015); }
/* A clear focus cue, not only a border shade (1.27:1 alone). */
.search:has(input:focus-visible) { border-color: rgb(226 233 220 / .45); box-shadow: 0 0 0 3px rgb(226 233 220 / .09); }
.search-icon { width: 16px; height: 16px; margin-right: 11px; color: var(--text-2); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; color: var(--text); font-size: var(--fs-sm); }
.search input::placeholder { color: var(--text-2); }
.search input:disabled { cursor: not-allowed; }
.search-kbd { margin-left: 8px; }
.topbar-sep { flex: none; width: 1px; height: 25px; margin-left: 18px; background: var(--line-strong); }
.help-btn { margin-left: 11px; }
.help-btn .icon { width: 20px; height: 20px; stroke-width: 1.5; }
.content { min-width: 0; padding: 13px var(--content-x) 48px; }
.access-banner { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; padding: 11px 14px; border: 1px solid rgb(var(--warn-rgb) / .3); border-radius: var(--r-2); color: var(--text-2); font-size: var(--fs-base); }
.access-banner-ico { display: grid; color: var(--warn); }
.access-banner-ico .icon { width: 16px; height: 16px; }
.access-banner-text { flex: 1; min-width: 0; }
.access-banner-text strong { color: var(--text); font-weight: 500; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 24px; }
.page-head h1 { font-size: var(--fs-h1); line-height: 1.15; }
.page-head p { margin-top: 6px; color: var(--text-2); font-size: 13.5px; }

/* ── Shell: narrow screens (off-canvas sidebar) ───────── */
@media (max-width: 1100px) {
  .search { width: min(317px, 100%); }
}
@media (max-width: 960px) {
  :root { --content-x: 20px; }
  .sidebar { width: min(280px, 86vw); visibility: hidden; transform: translateX(-100%); transition: transform .26s var(--ease-out), visibility 0s linear .26s; }
  .nav-open .sidebar { visibility: visible; transform: none; transition: transform .26s var(--ease-out); box-shadow: 24px 0 64px rgb(0 0 0 / .5); }
  .nav-open { overflow: hidden; }
  .side-close { display: grid; }
  .workspace { margin-left: 0; }
  .topbar { gap: 8px; height: 56px; padding: 0 12px 0 10px; }
  .nav-toggle, .topbar-brand { display: grid; place-items: center; }
  .topbar-brand { flex: none; height: 32px; padding: 0 4px; border-radius: var(--r-2); }
  .search { flex: 1 1 auto; width: auto; max-width: 420px; }
  .topbar-sep { margin-left: 4px; }
  .help-btn { margin-left: 0; }
  .content { padding: 14px var(--content-x) 40px; }
}
@media (max-width: 560px) {
  :root { --content-x: 16px; }
  .search-kbd, .topbar-sep { display: none; }
  .search { max-width: none; }
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .page-head h1 { font-size: 26px; }
  .modal { padding: 18px 16px 20px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }
  .csv-guide-head { flex-wrap: wrap; }
  .csv-guide .table td:first-child { width: auto; white-space: normal; }
  .toast { right: 16px; bottom: 16px; left: 16px; max-width: none; }
}
@media (max-width: 960px) and (hover: none) {
  .search-kbd { display: none; }
}

/* ── Marketing chrome (landing.png header + v3 footer) ── */
.mk-wrap { width: 100%; max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-pad-r) 0 var(--mk-pad-l); }
.mk-header { position: relative; z-index: 50; border-bottom: 1px solid #2e3335; background: var(--page-mk); }
.mk-bar { display: flex; align-items: center; height: 79px; padding-top: 6px; }
.mk-brand { display: flex; align-items: center; border-radius: var(--r-1); }
.mk-brand .logo { display: block; width: auto; height: 20.3px; }
.mk-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.mk-link { position: relative; padding: 9px 0 7px; color: var(--text-3); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); }
.mk-link::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: currentColor; opacity: 0; scale: 0 1; transform-origin: left; transition: scale var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.mk-link:hover, .mk-link[aria-current="page"] { color: var(--text); }
.mk-link:hover::after, .mk-link[aria-current="page"]::after { opacity: .5; scale: 1 1; }
.mk-cta { --h: 42px; gap: 12px; margin-left: 38px; padding: 1px 27px 0; border: 0; background: var(--primary-mk); color: var(--primary-ink); }
.mk-cta:hover { background: var(--primary-mk-hover); }
.mk-cta .icon { width: 13px; height: 13px; stroke-width: 2; }
.mk-burger { display: none; margin-left: 12px; margin-right: -6px; color: var(--text); }
.mk-burger .mk-i-close, .mk-burger[aria-expanded="true"] .mk-i-open { display: none; }
.mk-burger[aria-expanded="true"] .mk-i-close { display: block; }
.mk-menu { border-top: 1px solid var(--line); background: var(--page-mk); animation: menu-in var(--dur-2) var(--ease-out); }
.mk-menu nav { display: grid; padding: 6px 0 0; }
.mk-menu .mk-link { display: block; padding: 16px 0; border-bottom: 1px solid var(--line-faint); font-size: 12px; }
.mk-menu .mk-link::after { display: none; }
.mk-menu .btn { margin: 18px 0 22px; }
.mk-footer { border-top: 1px solid var(--line); background: var(--page-mk); }
.mk-foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px 48px; padding: 52px 0 44px; }
.mk-foot-brand { display: grid; justify-items: start; gap: 16px; }
.mk-foot-brand .logo { display: block; width: auto; height: 20.3px; }
.mk-foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; padding-top: 4px; }
.mk-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0 30px; border-top: 1px solid var(--line-faint); color: var(--text-4); font-size: var(--fs-sm); }
.mk-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-legal a { color: var(--text-3); transition: color var(--dur-2) var(--ease-out); }
.mk-legal a:hover { color: var(--text); }
.mk-legal span { color: var(--text-5); }
@media (max-width: 1060px) {
  .mk-nav { gap: 22px; }
  .mk-cta { margin-left: 24px; }
}
@media (max-width: 980px) {
  .mk-nav { gap: 18px; }
  .mk-nav .mk-link { letter-spacing: .05em; }
  .mk-cta { margin-left: 20px; padding: 1px 20px 0; }
}
@media (max-width: 900px) {
  .mk-bar { height: 64px; padding-top: 0; }
  .mk-nav { display: none; }
  .mk-cta { margin-left: auto; }
  .mk-burger { display: inline-grid; }
}
@media (max-width: 560px) {
  .mk-bar .mk-cta { display: none; }
  .mk-burger { margin-left: auto; }
  .mk-brand .logo, .mk-foot-brand .logo { height: 18.7px; }
  .mk-foot-top { padding: 40px 0 32px; }
}

/* ── Interaction + accessibility ──────────────────────── */
@media (hover: hover) {
  .btn-primary:where(:hover:not(:disabled)) { transform: translateY(-1px); }
}
/* Reduced motion: every state lands at once (delays too, so nothing waits hidden behind a stagger). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .skel { animation: none; background: rgb(255 255 255 / .05); }
}
@media print {
  .sidebar, .topbar, .nav-scrim, .toast, .mk-burger, .mk-menu { display: none !important; }
  .workspace { margin-left: 0; }
  body, html { background: #fff; color: #000; }
}