/* Hallmark · shape: Showroom, one idea a screen, a full-bleed car, then the price rail, the four steps, the VIN band, the dealer cabinet and the contacts · genre: editorial · theme: custom · redesign: full · job: buy · idea: "the price at auction set beside the turnkey price, on every car" · vibe: "showroom calm, big cars, one clear price"
 * paper: oklch(98% 0.003 255) · accent: oklch(18% 0.008 255), ink as the control, no hue · display: Onest · body: Onest · hero: Poster, a full-bleed car under a low-left head with one sentence and two actions · nav: edge-aligned bar, transparent over the hero photo, solid paper elsewhere, a Menu sheet under 60rem · footer: mast on the dark field, the wordmark over one row of links, the studio credit · imagery: photographs carried over from the old page (Unsplash, slots for the client's own), product capture of the dealer cabinet · signature: the lot price beside the turnkey price, computed by the live calculator
 * axes: light/grotesk-heavy/neutral · posture: restrained, black and white with a dark field for the photo, the VIN band and the footer; the blue focus ring is the only hue · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, a showroom rail fits any dealer; every card pairs the lot price with the turnkey price from the tariffs the manager edits in the back office */
/* Hallmark · dropped onclick="toast('Завантаження доступне в повній версії')", onclick="toast('Заявку надіслано менеджеру (демо)')", onclick="toast(\'Реквізити надіслано в Telegram (демо)\')", 1FTFW1E58MFA12345 · gate 70 names a confirmation with no request behind it; the download, the request and the payment details now run from app.js or open Telegram */
/* Hallmark · dropped a, bid, car, city, container, dealer, eta, lot, name, notify, origin, paid, phone, price, ship, stage, vin, year · the modal and edit-form fields moved with their forms into app.js unchanged */
/* Hallmark · dropped #c-auction, #c-loc, #c-country, #c-fuel, #c-cc, #c-kwh, #c-rate, #lgUser in #loginForm, #lgUser in #loginForm on index.html, #lgUser · the same ids stay; each field gained a name attribute for autofill, which changed its record key */
/* Hallmark · waive 23 · the accent token is the ink itself, so the measure counts the dark hero photo field as accent · black and white is the chosen look for this car demo, with no gold and no hue */
/* Hallmark · dismissed 42 · the nav is stamped: edge-aligned, transparent over the hero photo, a Menu sheet on phones */
/* Hallmark · dismissed 77 · the home sections sit inside the router wrapper of the home page, six of them between the hero and the footer */
/* Hallmark · answered F4 · one primary recipe on the public pages; btn-ops belongs to the manager back office, btn-light only to the dark VIN band, tabs show a pressed state */
/* Hallmark · answered F7 · the pill radius stays on the round avatar and the slim progress bars of the dealer cabinet */
/* Hallmark · dismissed 76 ·the Unsplash photographs are carried over from the client's existing demo page, each in a data-slot for the client's own pictures */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- base ---------- */
body { font-size: var(--text-md); line-height: 1.55; }
h1, h2, h3 { font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.05; }
h1 { font-size: var(--text-display); max-width: 14ch; }
h2 { font-size: var(--text-section); max-width: 18ch; }
h3 { font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 44ch; }
.num { font-variant-numeric: tabular-nums; }
.js .page { display: none; }
.js .page.on { display: block; }
html:not(.js) .page:not(#p-home) { display: none; }
.sec { padding-block: var(--section-gap); }
.sec-head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.split-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gap-columns); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg);
  border: 1.5px solid transparent; border-radius: var(--radius-ctl); font-weight: 700; font-size: var(--text-md); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; background: none; color: inherit;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-hover); }
.hero .btn-primary { background: var(--color-field-ink); color: var(--color-field); }
.hero .btn-primary:hover { background: var(--color-paper-3); }
.btn-outline { border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-paper); }
.btn-outline-light { border-color: var(--color-field-ink); color: var(--color-field-ink); }
.btn-outline-light:hover { background: var(--color-field-ink); color: var(--color-field); }
.btn-light { background: var(--color-field-ink); color: var(--color-field); }
.btn-light:hover { background: var(--color-paper-3); }
.btn-ops { background: var(--color-ops); color: var(--color-ops-ink); }
.btn-ops:hover { background: var(--color-ink-2); }
.btn-sm { min-height: 40px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn-wide { width: 100%; }
.text-link { font-weight: 700; color: var(--color-ink); text-underline-offset: 0.2em; }
.text-link:hover { color: var(--color-muted); }
.link-btn { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; color: var(--color-ink); text-underline-offset: 0.2em; }
.link-btn:hover { color: var(--color-muted); }

.field { display: grid; gap: var(--space-xs); }
.field label, .field .lbl { font-size: var(--text-sm); color: var(--color-muted); }
.input {
  width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-ctl);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
select.input { appearance: none; padding-right: var(--space-xl); background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.input-dark { background: var(--color-field-2); color: var(--color-field-ink); border-color: var(--color-field-muted); }
.input-dark::placeholder { color: var(--color-field-muted); }
.input::placeholder { color: var(--color-muted); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); background: var(--color-paper); color: var(--color-ink); border-bottom: 1px solid var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
body[data-page="home"] .nav:not(.solid) { background: transparent; color: var(--color-field-ink); border-color: transparent; }
.nav-in { display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: var(--space-2xs); margin-inline: auto; }
.nav-links a, .nav-phone { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-ctl); text-decoration: none; font-size: var(--text-md); white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.nav-links a:hover, .nav-phone:hover { background: var(--color-overlay); color: var(--color-field-ink); }
.nav.solid .nav-links a:hover, .nav.solid .nav-phone:hover, body:not([data-page="home"]) .nav-links a:hover, body:not([data-page="home"]) .nav-phone:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav-links a.on { font-weight: 700; }
.nav-phone { font-weight: 700; }
.nav-menu { display: none; margin-left: auto; min-height: 40px; padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-ctl); background: var(--color-overlay); color: inherit; font-weight: 700; cursor: pointer; }
.nav.solid .nav-menu, body:not([data-page="home"]) .nav-menu { background: var(--color-paper-2); }
.nav-menu:active { transform: translateY(1px); }
.sheet { position: fixed; inset: var(--nav-h) 0 0; z-index: var(--z-modal); background: var(--color-paper); padding: var(--space-xl) var(--gutter); display: grid; align-content: start; gap: var(--space-xl); }
.sheet nav { display: grid; }
.sheet nav a { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); font-size: var(--text-xl); font-weight: 700; text-decoration: none; }
.sheet-phone { font-size: var(--text-xl); font-weight: 700; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; color: var(--color-field-ink); background: var(--color-field); }
.hero-photo { position: absolute; inset: 0; z-index: -1; background: var(--color-field); color: var(--color-field-ink); }
.hero-photo > img { object-position: 50% 42%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--color-scrim) 0%, var(--color-scrim-0) 62%); }
.hero-copy { position: relative; z-index: 3; padding-block: var(--space-3xl) var(--space-2xl); }
.hero h1 { font-size: clamp(3rem, 6vw + 0.5rem, 6.5rem); line-height: 0.98; max-width: 13ch; }
.hero .lead { margin-block: var(--space-lg) var(--space-xl); color: var(--color-field-ink); }

/* ---------- price rail ---------- */
.rail {
  list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 400px); gap: var(--gap-columns);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-lg);
  scrollbar-width: thin;
}
.rail:focus-visible { outline-offset: -2px; }
.car { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: var(--space-lg); min-width: 0; }
.car-ph { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.car-body { display: grid; gap: var(--space-xs); align-content: start; }
.car-meta { color: var(--color-muted); font-size: var(--text-sm); }
.car-price { margin: var(--space-sm) 0 var(--space-2xs); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.car-price dt { font-size: var(--text-sm); color: var(--color-muted); }
.car-price dd { margin: 0; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.car-price dd.big { font-size: var(--text-2xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- steps ---------- */
.sec-steps { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.steps-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-lg); row-gap: var(--space-2xs); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.steps li:last-child { border-bottom: 1px solid var(--color-rule); }
.steps li::before { content: counter(st); grid-row: span 2; font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps p { color: var(--color-ink-2); }

/* ---------- VIN band ---------- */
.band-dark { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--section-gap-s); }
.find { display: grid; gap: var(--space-xl); }
.find h2 { max-width: none; }
.find-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); max-width: 820px; }
.find-form .input, .find-form .btn { height: 52px; min-height: 0; padding-block: 0; font-size: var(--text-lg); }
.find-form .input { text-transform: uppercase; }
.find-hint { color: var(--color-field-muted); font-size: var(--text-lead); }

/* ---------- dealers ---------- */
.dealers { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.dealers-copy { display: grid; gap: var(--space-lg); }
.dealers-shot { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.dealers-shot > img { object-position: 0 0; }

/* ---------- contact ---------- */
.sec-contact { border-top: 1px solid var(--color-rule); }
.contact { display: grid; gap: var(--space-2xl); }
.contact h2 { max-width: 16ch; }
.phones { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.phones div { border-top: 1px solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-xs); }
.phones dt { color: var(--color-muted); font-size: var(--text-sm); }
.phones dd { margin: 0; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phones dd a { text-decoration: none; }
.phones dd a:hover { text-decoration: underline; }
.phones dd.addr { font-size: var(--text-xl); }
.fill { display: inline-block; padding: 0 var(--space-xs); color: var(--color-muted); outline: 1.5px dashed var(--color-muted); outline-offset: 2px; border-radius: var(--radius-ctl); font-weight: 400; }

/* ---------- footer ---------- */
.foot { background: var(--color-field); color: var(--color-field-muted); padding-block: var(--space-3xl) var(--space-xl); }
.foot-in { display: grid; gap: var(--space-lg); }
.foot-mark { font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--color-field-ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot-links a { color: var(--color-field-ink); text-decoration: none; white-space: nowrap; }
.foot-links a:hover { text-decoration: underline; }
.foot-note, .foot-credits, .foot-studio { font-size: var(--text-sm); }
.foot-studio a { color: var(--color-field-ink); font-weight: 700; }

/* ---------- calculator (configurator) ---------- */
.config { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 100svh; padding-top: var(--nav-h); }
.config-visual { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); background: var(--color-field); color: var(--color-field-ink); }
.config-visual > img { object-position: 50% 55%; }
.config-visual::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--color-scrim) 0%, var(--color-scrim-0) 55%); }
.config-total { position: absolute; z-index: 3; left: var(--space-2xl); right: var(--space-2xl); bottom: var(--space-2xl); display: grid; gap: var(--space-xs); }
.config-total p:first-child { font-size: var(--text-lead); }
.total { font-size: var(--text-total); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.total-sub { color: var(--color-field-muted); }
.config-panel { padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); display: grid; gap: var(--space-xl); align-content: start; }
.config-h { font-size: var(--text-section); max-width: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-2); border-radius: var(--radius-ctl); }
.seg button { min-height: 44px; border: 0; border-radius: var(--radius-ctl); background: transparent; color: var(--color-ink-2); font-weight: 700; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg button:hover { color: var(--color-ink); }
.seg button[aria-pressed="true"] { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); }
.seg button:active { transform: translateY(1px); }
.price-in { font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; border-bottom: 1px solid var(--color-muted); }
.price-in input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--color-ink); font: inherit; letter-spacing: inherit; padding: var(--space-2xs) 0; font-variant-numeric: tabular-nums; }
.price-in input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
input[type="range"] { width: 100%; accent-color: var(--color-accent); min-height: 32px; cursor: pointer; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.breakdown { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.breakdown summary { cursor: pointer; font-weight: 700; font-size: var(--text-lg); min-height: 44px; display: flex; align-items: center; }
.stack { display: flex; gap: var(--space-3xs); height: 8px; border-radius: var(--radius-pill); overflow: hidden; margin-block: var(--space-md) var(--space-sm); }
.stack i { display: block; height: 100%; }
.c-buy { background: var(--color-accent); } .c-log { background: var(--color-muted); } .c-cus { background: var(--color-info); } .c-srv { background: var(--color-ok); }
.legend { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rows .row { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.rows .row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .grp { border-bottom: 0; padding-top: var(--space-md); font-weight: 700; }
.note { font-size: var(--text-sm); color: var(--color-muted); }
.config-bar { display: none; }

/* ---------- app screens: tracking, cabinet, admin ---------- */
.sec-app { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--section-gap-s); }
.app-h { font-size: var(--text-section); max-width: none; margin-bottom: var(--space-xl); }
#p-track .find-form .input { background: var(--color-paper); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.chip { min-height: 40px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--color-ink); }
.chip:active { transform: translateY(1px); }
.tr-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.panel { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xl); }
.carhead { display: grid; gap: var(--space-xs); }
.carhead .sub { color: var(--color-muted); font-size: var(--text-sm); }
.map { margin-top: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-ctl); padding: var(--space-sm); }
.map svg { width: 100%; height: auto; }
.rt-base { fill: none; stroke: var(--color-rule); stroke-width: 1.5; stroke-dasharray: 3 5; }
.rt-done { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; }
.rt-pt { fill: var(--color-paper); stroke: var(--color-muted); stroke-width: 1.2; }
.rt-label { fill: var(--color-muted); font-family: var(--font-body); font-size: 9px; }
.rt-pos { fill: var(--color-accent); }
.rt-halo { fill: var(--color-accent); opacity: 0.22; }
.progress { height: 6px; background: var(--color-paper-3); border-radius: var(--radius-pill); overflow: hidden; margin-block: var(--space-md) var(--space-xs); }
.progress i { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.prog-cap { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.kv { margin: var(--space-lg) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.kv dt { font-size: var(--text-sm); color: var(--color-muted); }
.kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--space-lg) var(--space-xl); }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 1px; background: var(--color-rule); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline li.done::before { background: var(--color-accent); }
.tdot { position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-rule); background: var(--color-paper); display: grid; place-items: center; }
.timeline li.done .tdot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.timeline li.cur .tdot { border-color: var(--color-accent); border-width: 3px; }
.timeline h4 { margin: 0; font-size: var(--text-md); }
.timeline li:not(.done):not(.cur) h4 { color: var(--color-muted); font-weight: 400; }
.timeline p { color: var(--color-muted); font-size: var(--text-sm); }
.empty { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--color-muted); }
.empty b { color: var(--color-ink); }

.pill { display: inline-flex; align-items: center; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; background: var(--color-paper-2); color: var(--color-ink-2); }
.pill.ok { background: var(--color-ok-soft); color: var(--color-ok); }
.pill.warn { background: var(--color-warn-soft); color: var(--color-warn); }
.pill.info { background: var(--color-info-soft); color: var(--color-info); }

.login { max-width: 460px; margin-inline: auto; }
.login .app-h { text-align: center; }
.card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xl); }
.login-card { display: grid; gap: var(--space-md); }
.hint { font-size: var(--text-sm); color: var(--color-muted); text-align: center; }

.cab-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.who { display: flex; align-items: center; gap: var(--space-md); }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.who-name { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.who-sub { color: var(--color-muted); font-size: var(--text-sm); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.kpi { padding: var(--space-md) var(--space-lg) var(--space-md) 0; display: grid; gap: var(--space-2xs); }
.kpi + .kpi { padding-left: var(--space-lg); border-left: 1px solid var(--color-rule); }
.kpi span, .kpi small { font-size: var(--text-sm); color: var(--color-muted); }
.kpi b { font-size: var(--text-2xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: var(--space-xs); overflow-x: auto; margin-block: var(--space-xl) var(--space-md); padding-bottom: var(--space-2xs); }
.tabs button { min-height: 40px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tabs button:hover { border-color: var(--color-ink); }
.tabs button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 760px; }
th { text-align: left; font-weight: 400; color: var(--color-muted); padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-ink); white-space: nowrap; }
td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
tbody tr { cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
tbody tr:hover { background: var(--color-paper-2); }
tbody tr:focus-visible { outline-offset: -2px; }
.sub { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.mini { height: 3px; width: 100px; background: var(--color-paper-3); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-xs); }
.mini i { display: block; height: 100%; background: var(--color-accent); }
.debt { color: var(--color-warn); font-weight: 700; }
.paid { color: var(--color-ok); font-weight: 700; }
.cards-m { display: none; }
.mcar { display: grid; gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); cursor: pointer; }
.mcar .top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-sm); }
.mcar .top > div { min-width: 0; }
.mcar .bot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }

/* admin back office: steel instead of gold */
.ops { display: grid; grid-template-columns: 232px minmax(0, 1fr); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; min-height: 640px; }
.ops-side { background: var(--color-field); color: var(--color-field-ink); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-lg); }
.ops-brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 700; }
.ops-nav { display: grid; gap: var(--space-3xs); }
.ops-nav button { display: flex; align-items: center; gap: var(--space-sm); min-height: 40px; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius-ctl); background: transparent; color: var(--color-field-muted); font-weight: 700; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.ops-nav button:hover { color: var(--color-field-ink); background: var(--color-field-2); }
.ops-nav button[aria-pressed="true"] { color: var(--color-field-ink); background: var(--color-field-2); box-shadow: inset 3px 0 0 var(--color-ops-ink); }
.ops-nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.ops-nav .cnt { margin-left: auto; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ops-ink); color: var(--color-field); font-size: var(--text-xs); }
.ops-actions { margin-top: auto; display: grid; gap: var(--space-xs); }
.ops-main { padding: var(--space-xl); min-width: 0; background: var(--color-paper); }
.ops-top { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.ops-top h2 { font-size: var(--text-2xl); max-width: none; }
.ops-top p { color: var(--color-muted); font-size: var(--text-sm); }
.ops-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-rule); border-radius: var(--radius-ctl); margin-bottom: var(--space-lg); }
.ops-kpis div { padding: var(--space-md); display: grid; gap: var(--space-3xs); }
.ops-kpis div + div { border-left: 1px solid var(--color-rule); }
.ops-kpis span, .ops-kpis small { font-size: var(--text-sm); color: var(--color-muted); }
.ops-kpis b { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
#p-admin tbody tr:hover { background: var(--color-ops-soft); }
#p-admin .mini i { background: var(--color-ops); }
.adm-bar { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.adm-bar .input { max-width: 340px; min-height: 40px; }
.adm-note { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); max-width: 75ch; }
.req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.req h4 { margin: 0; font-size: var(--text-md); }
.req p { color: var(--color-muted); font-size: var(--text-sm); }
.tariffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); }
.tariffs .card { padding: var(--space-lg); }
.tariffs h4 { margin: 0 0 var(--space-sm); font-size: var(--text-md); }
.trow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-block: var(--space-2xs); font-size: var(--text-sm); }
.trow .input { width: 110px; min-height: 40px; text-align: right; }
.tg { max-width: 440px; margin-inline: auto; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.tg-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--color-field); color: var(--color-field-ink); }
.tg-head small { display: block; color: var(--color-field-muted); font-size: var(--text-xs); }
.tg-body { padding: var(--space-md); display: grid; gap: var(--space-sm); max-height: 520px; overflow-y: auto; }
.bubble { background: var(--color-paper); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--space-2xs); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); white-space: pre-line; max-width: 92%; }
.bubble small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-grid .wide { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-ops); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* drawer, modal, toast */
.drawer-bg { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-long) var(--ease-out); }
.drawer-bg.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal); width: min(540px, 100%); background: var(--color-paper); border-left: 1px solid var(--color-rule); overflow-y: auto; padding: var(--space-xl) var(--space-lg); transform: translateX(100%); transition: transform var(--dur-long) var(--ease-out); }
.drawer.on { transform: none; }
.drawer-x { position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xl); cursor: pointer; }
.drawer-x:hover { border-color: var(--color-ink); }
.drawer-x:active { transform: translateY(1px); }
.drawer .carhead { padding-right: var(--space-2xl); }
.drawer h5 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-md); }
.doc { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.doc .fi { display: grid; place-items: center; width: 36px; height: 44px; border-radius: var(--radius-ctl); background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; }
.doc div { flex: 1; min-width: 0; }
.doc b { display: block; }
.doc small { color: var(--color-muted); font-size: var(--text-sm); }
.ops-drawer .btn-primary { background: var(--color-ops); color: var(--color-ops-ink); }
.ops-drawer .btn-primary:hover { background: var(--color-ink-2); }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-md); background: var(--color-overlay); }
.modal .card { width: min(560px, 100%); display: grid; gap: var(--space-md); }
.modal h3 { font-size: var(--text-xl); }
.toast { position: fixed; left: 50%; bottom: var(--space-xl); z-index: var(--z-toast); max-width: calc(100% - var(--space-xl)); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-weight: 700; font-size: var(--text-sm); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- under 60rem ---------- */
@media (max-width: 60rem) {
  :root { --nav-h: 60px; }
  .nav-links, .nav-phone { display: none; }
  .nav-menu { display: inline-flex; align-items: center; }
  .split-head, .steps-grid, .dealers, .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .split-head { gap: var(--space-md); }
  .dealers { gap: var(--space-xl); }
  .steps li { grid-template-columns: 56px minmax(0, 1fr); }
  .steps li::before { font-size: var(--text-2xl); }
  .phones { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  /* a portrait crop cuts the headlights, so the photo becomes a wide band with the copy beneath */
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 48vw); }
  .hero-photo { bottom: auto; height: calc(var(--nav-h) + 72vw); }
  .hero-photo > img { object-position: 50% 48%; }
  .hero-photo::after { background: linear-gradient(to top, var(--color-field) 0%, var(--color-scrim-0) 55%); }
  .hero-copy { padding-block: 0 var(--space-2xl); }
  .config { grid-template-columns: minmax(0, 1fr); }
  .config-visual { position: relative; top: 0; height: 46svh; }
  .config-total { left: var(--gutter); right: var(--gutter); bottom: var(--space-lg); }
  .config-panel { padding: var(--space-xl) var(--gutter) calc(var(--space-3xl) + var(--space-xl)); }
  .config-bar { display: flex; position: fixed; inset: auto 0 0; z-index: var(--z-sticky); justify-content: space-between; align-items: center; padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); background: var(--color-field); color: var(--color-field-ink); }
  .config-bar b { font-size: var(--text-xl); }
  .kpis, .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n+3), .ops-kpis div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .ops-kpis div:nth-child(3) { border-left: 0; }
  .ops { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ops-side { min-width: 0; }
  .ops-nav { display: flex; overflow-x: auto; }
  .ops-nav button { white-space: nowrap; }
  .ops-nav button[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--color-ops-ink); }
  .ops-actions { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .ops-main { padding: var(--space-lg) var(--space-md); }
}
@media (max-width: 47.5rem) {
  .tbl-wrap { display: none; }
  .cards-m { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mcar .pill { white-space: normal; }
}
@media (max-width: 40rem) {
  .find-form, .fgrid, .form-grid, .kv { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-auto-columns: 82%; }
  .req { grid-template-columns: minmax(0, 1fr); }
}