/* ============================================================
   Fratco App v6.01 design system
   Loads last on every page. Re-skins the app (style.css, v4, v4-color, v5)
   through tokens and a small set of component overrides, then styles the
   public pages (sign in, Facts, Help, What's new) with their own s- classes.

   Rules this file keeps everywhere:
   - one accent: Fratco red (var(--acc), so the Account accent setting still works)
   - one radius scale: controls 12px, cards 18px, large panels 22px, chips are pills
   - text never under 14px, tap targets at least 48px, focus ring always visible
   - motion only on transform and opacity, and none when reduced motion is on
   ============================================================ */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Fratco Mono'; src: url('../fonts/mono.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* ---------- tokens ---------- */
:root:root:root:root:not([data-theme="dark"]) {
  --bg: #F4F4F1; --bg-2: #EAE9E5; --surface: #FFFFFF; --surface-2: #F9F9F7; --surface-3: #EFEEEA;
  --ink: #0E1A33; --ink-soft: #3E485C; --ink-faint: #596274;
  --line: #E2E1DC; --line-2: #C9C7C0;
  --nav-bg: #0E1A33; --nav-2: #15244A; --nav-ink: #F3F6FC; --nav-soft: #B4C0D8; --nav-line: rgba(255,255,255,.10);
  --red: var(--acc); --red-2: var(--acc-2); --red-dark: var(--acc-d);
  --red-ink: var(--acc-d);
  --r-soft: color-mix(in srgb, var(--acc) 8%, var(--surface));
  --red-soft: var(--r-soft);
  --good: #0B6E3E; --good-bg: #DFF2E7; --warn: #7F4A00; --warn-bg: #FFF0CF; --bad: #A61C29; --bad-bg: #FCE5E7;
  --pe: #1E5FA8; --pp: #A85E08;
  --shadow-sm: 0 1px 2px rgba(14,26,51,.06);
  --shadow: 0 1px 2px rgba(14,26,51,.05), 0 10px 28px -14px rgba(14,26,51,.18);
  --shadow-lg: 0 30px 70px -28px rgba(14,26,51,.45), 0 4px 14px rgba(14,26,51,.08);
  color-scheme: light;
}
:root:root:root:root[data-theme="dark"] {
  --bg: #0A1122; --bg-2: #0D1528; --surface: #111A2E; --surface-2: #152038; --surface-3: #1B2843;
  --ink: #EEF2F8; --ink-soft: #C2CADA; --ink-faint: #9DA8BF;
  --line: #22304E; --line-2: #34456B;
  --nav-bg: #070D1C; --nav-2: #0F1830; --nav-ink: #F3F6FC; --nav-soft: #B4C0D8; --nav-line: rgba(255,255,255,.09);
  --red: color-mix(in srgb, var(--acc) 58%, #fff); --red-2: color-mix(in srgb, var(--acc-2) 60%, #fff); --red-dark: var(--acc);
  --red-ink: color-mix(in srgb, var(--acc) 50%, #fff);
  --r-soft: color-mix(in srgb, var(--acc) 22%, var(--surface));
  --red-soft: var(--r-soft);
  --good: #5AD394; --good-bg: #0F2E1E; --warn: #FFC861; --warn-bg: #33250A; --bad: #FF8A94; --bad-bg: #3A1219;
  --pe: #84BBFF; --pp: #FFBB63;
  --shadow-sm: none; --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}
:root:root:root:root {
  --font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 18px; --radius-sm: 12px; --radius-lg: 22px; --r-ctl: 12px; --r-pill: 999px;
  --focus: 0 0 0 4px color-mix(in srgb, var(--acc) 28%, transparent);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --m-home: var(--acc); --m-app: var(--acc); --m-engineering: var(--acc); --m-production: var(--acc); --m-admin: var(--acc); --m-account: var(--acc);
  --side-w: 288px;
}

/* ---------- base ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html:root body { font-family: var(--font); font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink); background: var(--bg); background-image: none; }
html body h1, html body h2, html body h3, html body h4, html body .display { font-family: var(--font); font-weight: 800; letter-spacing: -0.022em; }
html:root body button, html:root body input, html:root body select, html:root body textarea { font-family: var(--font); }
html:root body :focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 10px; box-shadow: none; }
html:root[data-theme="dark"] body :focus-visible { outline-color: var(--red); }
html:root body input:focus-visible, html:root body select:focus-visible, html:root body textarea:focus-visible { outline: none; }
html:root body ::selection { background: color-mix(in srgb, var(--acc) 26%, transparent); color: inherit; }
button, a, [role="button"], summary { touch-action: manipulation; }
html:root body .btn, html:root body button { -webkit-user-select: none; user-select: none; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--nav-bg); color: #fff !important; padding: 12px 18px; border-radius: var(--r-ctl); font-weight: 800; text-decoration: none !important; }
.skip-link:focus { top: 12px; }

/* ---------- buttons ---------- */
html:root body .btn, html:root body button.btn, html:root body a.btn {
  min-height: 54px; padding: 0 24px; border-radius: var(--r-ctl); font-family: var(--font); font-weight: 750; font-size: 17px; letter-spacing: -0.005em; gap: 10px; line-height: 1.15;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; text-decoration: none;
}
html:root body .btn:active:not(:disabled) { transform: scale(.98); }
html:root body .btn-primary, html:root body .btn.btn-primary, html:root body .b3-primary, html:root body.v5 .v5-new {
  background: var(--acc); background-image: none; color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(14,26,51,.18), 0 8px 18px -10px color-mix(in srgb, var(--acc) 70%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  html:root body .btn-primary:hover:not(:disabled), html:root body .b3-primary:hover:not(:disabled), html:root body.v5 .v5-new:hover { background: var(--acc-d); transform: none; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(14,26,51,.2), 0 10px 22px -10px color-mix(in srgb, var(--acc) 75%, transparent); }
}
html:root body .btn-primary:active:not(:disabled) { transform: scale(.98); }
html:root body .btn-primary:disabled { background: var(--line-2); color: var(--ink-soft); box-shadow: none; }
html:root body .btn-outline, html:root body .b3-secondary { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) {
  html:root body .btn-outline:hover:not(:disabled), html:root body .b3-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }
}
html:root[data-theme="dark"] body .btn-outline { color: var(--ink); }
html:root body .btn-light { background: #fff; color: var(--nav-bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
html:root body .btn-sm { min-height: 48px; padding: 0 18px; font-size: 16px; }
html:root body .btn-xl { min-height: 60px; font-size: 18px; border-radius: var(--r-ctl); }
html:root body .btn-ghost-dark { background: transparent; border: 1.5px solid var(--line-2); color: var(--ink); }
html:root body .b3 { border-radius: var(--r-ctl); font-family: var(--font); font-weight: 750; min-height: 48px; }
html:root body .text-btn { border-radius: var(--r-ctl); border-width: 1.5px; font-size: 16px; }
html:root body .link-btn { color: var(--red-ink); font-family: var(--font); font-weight: 750; font-size: 16px; min-height: 48px; }
html:root body .v5-ripple { display: none; }

/* ---------- forms ---------- */
html:root body input:not([type]), html:root body input[type="text"], html:root body input[type="number"], html:root body input[type="email"], html:root body input[type="password"],
html:root body input[type="date"], html:root body input[type="search"], html:root body input[type="tel"], html:root body textarea, html:root body select {
  font-family: var(--font); font-size: 17px; font-weight: 600; color: var(--ink); min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-ctl); background-color: var(--surface); box-shadow: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
html:root body select { padding-right: 44px; }
html:root body input::placeholder, html:root body textarea::placeholder { color: var(--ink-faint); opacity: 1; font-weight: 500; }
html:root body input:focus, html:root body textarea:focus, html:root body select:focus { border-color: var(--acc); box-shadow: var(--focus); outline: none; }
html:root[data-theme="dark"] body input:focus, html:root[data-theme="dark"] body textarea:focus, html:root[data-theme="dark"] body select:focus { border-color: var(--red); }
html:root body input[readonly], html:root body input:disabled, html:root body select:disabled { background: var(--surface-3); color: var(--ink-soft); border-color: var(--line); }
html:root body .fg label, html:root body .qf-row label, html:root body label.f-label, html:root body .field label { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: 0; text-transform: none; }
@media (pointer: coarse) { html:root body input, html:root body select, html:root body textarea { font-size: max(16px, 1em); } }

/* ---------- cards, notes, pills ---------- */
html:root body .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
html:root body .section-head h2 { font-size: 24px; letter-spacing: -0.02em; }
html:root body .section-head p, html:root body .note { color: var(--ink-soft); }
html:root body .count-pill { background: var(--acc); color: #fff; }
html:root body .badge { border-radius: var(--r-pill); font-size: 14px; }
html:root body .view-note, html:root body .owner-note { border-radius: var(--r-ctl); }
html:root body .page-foot, html:root body .h-foot { font-size: 14px; color: var(--ink-faint); }

/* segmented switches: the chosen side looks lifted, not outlined in red */
html:root body .seg, html:root body .seg.light { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 4px; }
html:root body .seg button { min-height: 46px; border-radius: 9px; font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--ink-soft); }
html:root body .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(14,26,51,.14), 0 0 0 1px var(--line); }
html:root[data-theme="dark"] body .seg button.on { background: var(--surface-3); color: #fff; box-shadow: 0 0 0 1.5px var(--red); }

/* toasts */
html:root body .toast { font-family: var(--font); font-size: 16px; font-weight: 700; border-radius: 14px; padding: 14px 18px; background: var(--nav-bg); color: #fff; box-shadow: var(--shadow-lg); }
html:root body .toast.ok { background: var(--good); color: #fff; }
html[data-theme="dark"]:root body .toast.ok { background: #0F5B35; }
html:root body .toast.err { background: var(--bad); color: #fff; }
html[data-theme="dark"]:root body .toast.err { background: #8E1A25; }

/* ---------- app shell: sidebar ---------- */
@media (min-width: 900px) {
  html:root body.v5 .v5-side { background: var(--nav-bg); background-image: none; border-right: 1px solid rgba(255,255,255,.06); padding: 20px 14px 14px; }
}
html:root body.v5 .v5-logo { border-radius: 10px; box-shadow: none; padding: 6px 10px; }
html:root body.v5 .v5-app { font-size: 22px; font-weight: 800; }
html:root body.v5 .v5-new { min-height: 56px; border-radius: var(--r-ctl); font-size: 18px; font-weight: 800; }
html:root body.v5 .v5-find { min-height: 50px; border-radius: var(--r-ctl); border: 1px solid rgba(255,255,255,.14); font-family: var(--font); }
html:root body.v5 .v5-find kbd { font-family: var(--font); font-size: 14px; border-radius: 6px; }
html:root body.v5 .v5-group { font-size: 14px; letter-spacing: .08em; color: rgba(180,192,216,.8); margin: 16px 10px 6px; }
html:root body.v5 .v5-link { min-height: 52px; border-radius: var(--r-ctl); font-family: var(--font); font-weight: 700; font-size: 17px; color: var(--nav-soft); gap: 12px; padding: 0 12px 0 8px; }
html:root body.v5 .v5-link.on { background: rgba(255,255,255,.10); box-shadow: none; color: #fff; }
html:root body.v5 .v5-link.on::before { left: -14px; width: 4px; top: 12px; bottom: 12px; border-radius: 0 4px 4px 0; background: var(--acc); box-shadow: none; }
html:root body.v5 .v5-chip { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); color: #DDE4F2; }
html:root body.v5 .v5-link.on .v5-chip { background: var(--acc); color: #fff; }
html:root body.v5 .v5-link.v5-help .v5-chip, html:root body.v5 .v5-link.v5-xtra .v5-chip { background: rgba(255,255,255,.06); color: #DDE4F2; }
@media (hover: hover) and (pointer: fine) { html:root body.v5 .v5-link:hover { background: rgba(255,255,255,.07); color: #fff; } }
html:root body.v5 .v5-size, html:root body.v5 .v5-out { border-radius: var(--r-ctl); font-family: var(--font); border-style: solid; border-width: 1px; border-color: rgba(255,255,255,.16); }
html:root body.v5 .v5-size b { color: #fff; }
html:root body.v5 .v5-avatar { background: var(--acc); box-shadow: none; }
html:root body.v5 .v5-sublink { border-radius: 10px; font-family: var(--font); font-size: 16px; }

/* phones: top bar and bottom tabs */
html:root body .topbar { box-shadow: none; border-bottom: 3px solid var(--acc); }
@media (max-width: 899px) {
  html:root body.v5 .v5-tabs { background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--line); box-shadow: none; }
  html:root body.v5 .v5-tab { font-family: var(--font); font-size: 14px; font-weight: 700; border-radius: var(--r-ctl); }
  html:root body.v5 .v5-tab.on { color: var(--red-ink); background: var(--r-soft); }
  html:root[data-theme="dark"] body.v5 .v5-tab.on { color: #fff; }
  html:root body.v5 .v5-tab.on::before { top: -7px; height: 3px; background: var(--acc); }
}
@media (prefers-reduced-transparency: reduce) { html:root body.v5 .v5-tabs { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* page header */
html:root body.v5 .v5-head-chip { width: 52px; height: 52px; border-radius: 14px; background: var(--r-soft); color: var(--red-ink); box-shadow: none; }
html:root[data-theme="dark"] body.v5 .v5-head-chip { color: #fff; background: var(--acc); }
html:root body.v5 .v5-head h1 { font-size: 34px; letter-spacing: -0.03em; }
html:root body.v5 .v5-crumb { font-size: 17px; color: var(--ink-soft); }
html:root body.v5 .v5-head-help { border-radius: var(--r-pill); border: 1.5px solid var(--line-2); font-family: var(--font); font-weight: 700; min-height: 48px; }
html:root body.v5 .v5-head-links { display: flex; gap: 8px; margin-left: auto; align-self: flex-start; }
html:root body.v5 .v5-head-links .v5-head-help { margin-left: 0; }
@media (max-width: 640px) { html:root body.v5 .v5-head h1 { font-size: 28px; } html:root body.v5 .v5-head-chip { width: 46px; height: 46px; } }

/* sheets and modals */
html:root body.v5 .v5-sheet { background: rgba(7,13,28,.5); }
html:root body.v5 .v5-sheet-box { border-radius: 22px 22px 0 0; animation: v6Up 280ms var(--ease-out); }
html:root body.v5 .v5-sheet-list a, html:root body.v5 .v5-sheet-list > button, html:root body.v5 .v5-size-row { border-radius: var(--r-ctl); font-family: var(--font); font-weight: 700; min-height: 58px; font-size: 17px; }
html:root body.v5 .v5-sheet-list .v5-chip { background: var(--r-soft); color: var(--red-ink); }
html:root[data-theme="dark"] body.v5 .v5-sheet-list .v5-chip { color: #fff; }
html:root body.v5 .v5-modal { background: rgba(7,13,28,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:root body.v5 .v5-modal-box { border-radius: var(--radius-lg); border: 1px solid var(--line); animation: v6Pop 220ms var(--ease-out); }
html:root body.v5 .v5-modal-eyebrow { color: var(--red-ink); letter-spacing: .08em; }
html:root body.v5 .v5-modal h2 { font-size: 28px; }
html:root body.v5 .v5-help-steps li b, html:root body .howto-steps li b { background: var(--acc); }
html:root body.v5 .v5-help-call, html:root body.v5 .v5-help-tip { border-radius: var(--r-ctl); }
html:root body.v5 .v5-help-more { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 18px; }
html:root body.v5 .v5-help-more a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 700; text-decoration: none; }
html:root body.v5 .v5-help-keys { font-size: 15px; color: var(--ink-soft); margin: -8px 0 18px; }
html:root body.v5 .v5-help-keys kbd, .s-kbd { font-family: var(--font); font-size: 14px; font-weight: 700; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; background: var(--surface-2); color: var(--ink); }
html:root body.v5 .v5-cmd-box { border-radius: var(--radius-lg); border: 1px solid var(--line); }
html:root body.v5 .v5-cmd-item { border-radius: 10px; font-family: var(--font); font-weight: 700; }
html:root body.v5 .v5-cmd-item.on { background: var(--r-soft); color: var(--red-ink); }
html:root[data-theme="dark"] body.v5 .v5-cmd-item.on { color: #fff; }
@keyframes v6Up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v6Pop { from { transform: scale(.97) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* first-run welcome note (added by ui.js once per device) */
html:root body .v6-welcome { position: fixed; z-index: 280; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 22px 18px; animation: v6Up 320ms var(--ease-out); }
html:root body .v6-welcome h2 { font-size: 22px; margin: 0 0 6px; }
html:root body .v6-welcome p { color: var(--ink-soft); font-size: 16px; margin: 0 0 14px; }
html:root body .v6-welcome ul { margin: 0 0 16px; padding: 0 0 0 20px; font-size: 16px; line-height: 1.5; }
html:root body .v6-welcome .v6-wel-row { display: flex; gap: 10px; flex-wrap: wrap; }
html:root body .v6-welcome .btn { min-height: 48px; }
@media (max-width: 899px) { html:root body .v6-welcome { left: 12px; right: 12px; width: auto; bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom)); } }

/* ---------- new quote ---------- */
html:root body .step { border-radius: var(--r-ctl); border-width: 1.5px; font-family: var(--font); font-weight: 750; }
html:root body .step.on { border-color: var(--acc); background: var(--r-soft); }
html:root body .step.on b, html:root[data-theme="dark"] body .step.on b { background: var(--acc); border-color: var(--acc); }
html:root body .step-num { background: var(--acc); background-image: none; box-shadow: none; width: 46px; height: 46px; font-size: 21px; }
html:root body .step-num.done-ico { background: var(--surface-3); color: var(--ink-soft); }
html:root body .step-head h2 { font-size: 25px; }
html:root body .howto { border: 1.5px solid color-mix(in srgb, var(--acc) 45%, var(--line)); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
html:root body .seg-tabs button { border-radius: var(--r-ctl); font-family: var(--font); }
html:root body .seg-tabs button.on, html:root[data-theme="dark"] body .seg-tabs button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
html:root body .line-card { border-radius: var(--radius); }
html:root body .len-chip { border-radius: var(--r-pill); font-family: var(--font); }
html:root body .len-chip.on, html:root[data-theme="dark"] body .len-chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
html:root body .order-list.grid .order-item, html:root body .order-item { border-radius: 14px; }
html:root body .qx { border-radius: var(--r-ctl); }
html:root body .qx-fill { color: var(--red-ink); font-family: var(--font); }
html:root body .dw-price, html:root body .admin-sell, html:root body .big, html:root body .mb-total, html:root body .kpi-val, html:root body .pb-grid span:last-child { font-variant-numeric: tabular-nums; }
html:root body .lv-chip { font-family: var(--font); border-radius: var(--r-ctl); min-height: 48px; min-width: 48px; }
html:root body .lv-chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }

/* the quote total panel: one flat navy surface */
html:root body .total-card { background: var(--nav-bg); background-image: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.06); }
html:root body .total-card::before { opacity: .35; }
html:root body .total-card > .tc-controls { border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
html:root body .total-card select, html:root body .total-card .freight-field input { border-radius: var(--r-ctl); }
html:root body .total-card .seg { border-radius: var(--r-ctl); }
html:root body .total-card .seg button.on { color: var(--acc-d); }
html:root body .cmp-btn { border-radius: var(--r-ctl); font-family: var(--font); border-width: 1.5px; min-height: 52px; }
html:root body .total-card .stats-row .stat-block.right .big { font-size: clamp(40px, 5vw, 54px); overflow-wrap: anywhere; }
html:root body .total-card .stats-row .stat-block:not(.right) { border-radius: var(--r-pill); }
html:root body #priceBreakdownNote, html:root body .more-opts { border-radius: var(--radius); border-width: 1px; }
html:root body .pb-grid span:last-child { white-space: nowrap; }
@media (max-width: 1179px) {
  html:root body .mobile-total-bar { border-radius: var(--radius); background: var(--nav-bg); border: 1px solid rgba(255,255,255,.1); }
}

/* my quotes, pricing, nesting, account: lighter frames */
html:root body .fu-row, html:root body .top-job, html:root body .quote-card, html:root body .breakdown-card, html:root body .kpi, html:root body .subcard { border-radius: 14px; }
html:root body .qfilter button, html:root body .b3-pill { border-radius: var(--r-pill); font-family: var(--font); min-height: 46px; }
html:root body .qfilter button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
html:root body .mq-followcard { border-left: 4px solid var(--acc); }
html:root body .theme-pick, html:root body .accent-pick { border-radius: var(--r-ctl); font-family: var(--font); }

/* ---------- home ---------- */
html:root body .h-head {
  border-radius: var(--radius-lg); padding: 36px 38px; margin-bottom: 28px; box-shadow: var(--shadow-lg);
  background: linear-gradient(90deg, rgba(14,26,51,1) 0%, rgba(14,26,51,.96) 45%, rgba(14,26,51,.55) 100%), url('../img/photo-field.jpg') right center / cover no-repeat;
}
html:root body .h-head-art { display: none; }
html:root body .h-head h1 { font-size: clamp(32px, 4.4vw, 46px); }
html:root body .h-date { color: #C9D3E6; font-size: 16px; }
html:root body .h-sub { color: #E1E7F3; font-size: 19px; }
html:root body .h-cta .btn { min-height: 58px; font-size: 18px; padding: 0 24px; }
html:root body .h-title { font-size: 23px; letter-spacing: -0.02em; }
html:root body .h-stat, html:root body .h-stat.warn, html:root body .h-stat.good, html:root body .h-stat.live { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; }
html:root body .h-stat b { font-size: 48px; color: var(--ink); }
html:root body .h-stat::before { display: none; }
html:root body .h-stat.warn::before { display: block; background: var(--acc); width: 4px; }
@media (pointer: coarse) { .v6-keys-pc { display: none; } }
html:root body .h-stat.warn b { color: var(--red-ink); }
html:root[data-theme="dark"] body .h-stat b { color: var(--ink); } html:root[data-theme="dark"] body .h-stat.warn b { color: var(--red); }
html:root body .h-stat span { font-size: 16px; }
@media (hover: hover) and (pointer: fine) { html:root body .h-stat:hover, html:root body .h-short:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); } }
html:root body .h-short { border: 1px solid var(--line); border-radius: var(--radius); min-height: 108px; box-shadow: var(--shadow-sm); transition: transform 180ms var(--ease-out), box-shadow 180ms ease, border-color 180ms ease; }
html:root body .h-short .hs-ic { width: 60px; height: 60px; border-radius: 14px; background: var(--r-soft); color: var(--red-ink); }
html:root[data-theme="dark"] body .h-short .hs-ic { color: #fff; }
html:root body .h-short .hs-ic svg { width: 30px; height: 30px; }
html:root body .h-short { grid-template-columns: 60px minmax(0, 1fr); }
html:root body .h-short .hs-t { font-size: 21px; }
html:root body .h-short .hs-sub { font-size: 16px; }
html:root body .h-hero, html:root body .hg-img { border-radius: var(--radius-lg); }
html:root body .h-post { border: 1px solid var(--line); border-radius: var(--radius); }
html:root body .h-none { border-radius: var(--radius); border-width: 1.5px; }
html:root body .hm-card { border-radius: var(--radius-lg); }

/* home v6: task launcher, quick price, recent quotes */
.v6-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
html:root body .v6-task { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 180ms var(--ease-out), box-shadow 180ms ease, border-color 180ms ease; font-weight: 500; }
html:root body .v6-task:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { html:root body .v6-task:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); text-decoration: none; } }
html:root body .v6-task .t-ic { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--r-soft); color: var(--red-ink); margin-bottom: 6px; }
html:root[data-theme="dark"] body .v6-task .t-ic { color: #fff; }
html:root body .v6-task.main { background: var(--acc); border-color: var(--acc); color: #fff; }
html:root body .v6-task.main .t-ic { background: rgba(255,255,255,.16); color: #fff; }
html:root body .v6-task.main .t-sub, html:root body .v6-task.main .t-time { color: rgba(255,255,255,.88); }
html:root body .v6-task .t-t { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
html:root body .v6-task .t-sub { font-size: 16px; color: var(--ink-soft); line-height: 1.4; }
html:root body .v6-task .t-time { font-size: 14px; font-weight: 700; color: var(--ink-faint); margin-top: auto; padding-top: 6px; }
.v6-home-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .v6-home-grid { grid-template-columns: 1fr; } }
html:root body .v6-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
html:root body .v6-panel h2 { font-size: 21px; margin: 0 0 4px; }
html:root body .v6-panel .p-sub { color: var(--ink-soft); font-size: 16px; margin: 0 0 16px; }
.v6-qp-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.v6-qp-form label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
html:root body .v6-qp-form select { width: 100%; min-height: 52px; }
@media (max-width: 520px) { .v6-qp-form { grid-template-columns: 1fr 1fr; } .v6-qp-form > div:first-child { grid-column: 1 / -1; } }
.v6-qp-out { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v6-qp-out > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px 14px; min-width: 0; }
.v6-qp-out b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v6-qp-out span { display: block; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 520px) { .v6-qp-out { grid-template-columns: 1fr; } }
.v6-qp-note { font-size: 14px; color: var(--ink-faint); margin: 12px 0 0; }
.v6-qp-go { margin-top: 14px; }
.v6-recent { display: flex; flex-direction: column; gap: 8px; }
html:root body .v6-recent a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { html:root body .v6-recent a:hover { border-color: var(--line-2); background: var(--surface); text-decoration: none; } }
.v6-recent .r-name { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-recent .r-meta { grid-column: 1; font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-recent .r-amt { grid-row: 1 / 3; grid-column: 2; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.v6-recent .r-st { display: inline-block; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-soft); margin-left: 6px; }
.v6-recent .r-st.won { background: var(--good-bg); color: var(--good); }
.v6-recent .r-st.lost { background: var(--bad-bg); color: var(--bad); }
.v6-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; }

/* ---------- admin, engineering, production ---------- */
html:root body .tabs .tab-btn { font-family: var(--font); }
html:root body table th { font-family: var(--font); }

/* ============================================================
   PUBLIC PAGES (sign in, register, reset, Facts, Help, What's new)
   ============================================================ */
html:root body.s-page { background: var(--bg); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
html:root body.s-page a { font-weight: inherit; }
.s-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .s-wrap { padding: 0 32px; } }

/* header */
html:root body .s-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
@media (prefers-reduced-transparency: reduce) { html:root body .s-head { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.s-head .s-wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
html:root body .s-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; min-height: 48px; }
.s-logo img { height: 32px; width: auto; display: block; border-radius: 6px; }
html:root[data-theme="dark"] .s-logo img { background: #fff; padding: 3px 6px; height: 34px; }
.s-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
html:root body .s-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--r-ctl); color: var(--ink-soft); font-weight: 700; font-size: 16px; text-decoration: none; }
html:root body .s-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-3); }
@media (hover: hover) and (pointer: fine) { html:root body .s-nav a:hover { color: var(--ink); background: var(--surface-3); text-decoration: none; } }
html:root body .s-nav a.s-cta { background: var(--acc); color: #fff; margin-left: 6px; padding: 0 18px; }
@media (hover: hover) and (pointer: fine) { html:root body .s-nav a.s-cta:hover { background: var(--acc-d); color: #fff; } }
html:root body .s-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) { html:root body .s-icon-btn:hover { border-color: var(--line-2); } }
.s-icon-btn svg { width: 22px; height: 22px; }
.s-theme .i-sun { display: none; }
html:root[data-theme="dark"] .s-theme .i-sun { display: block; }
html:root[data-theme="dark"] .s-theme .i-moon { display: none; }
.s-menu-btn, html:root body .s-menu-btn { display: none; }
@media (max-width: 767px) {
  .s-menu-btn, html:root body .s-menu-btn { display: inline-flex; margin-left: auto; }
  .s-nav { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
  .s-head.open .s-nav { display: flex; animation: v6Pop 200ms var(--ease-out); }
  html:root body .s-nav a { min-height: 54px; font-size: 18px; }
  html:root body .s-nav a.s-cta { margin: 6px 0 0; justify-content: center; }
  .s-head .s-wrap { position: relative; }
}

/* text */
.s-eyebrow { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 12px; }
html:root body .s-h1 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 16px; text-wrap: balance; }
html:root body .s-h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: balance; }
html:root body .s-h3 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; }
.s-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.s-body { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 65ch; }
.s-small { font-size: 15px; color: var(--ink-faint); line-height: 1.55; }
.s-section { padding: 72px 0; }
@media (max-width: 767px) { .s-section { padding: 52px 0; } }
.s-section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* buttons for public pages */
html:root body .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: var(--r-ctl); font-family: var(--font); font-weight: 750; font-size: 17px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
html:root body .s-btn:active { transform: scale(.98); }
html:root body .s-btn.primary { background: var(--acc); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--acc) 70%, transparent); }
html:root body .s-btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
html:root body .s-btn.on-dark { background: #fff; color: var(--nav-bg); }
@media (hover: hover) and (pointer: fine) {
  html:root body .s-btn.primary:hover { background: var(--acc-d); text-decoration: none; }
  html:root body .s-btn.secondary:hover { border-color: var(--ink-faint); text-decoration: none; }
  html:root body .s-btn.on-dark:hover { background: #E9EEF7; text-decoration: none; }
}
.s-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.s-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* footer */
html:root body .s-foot { margin-top: auto; background: var(--nav-bg); color: #C9D3E6; padding: 48px 0 32px; }
.s-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 767px) { .s-foot-grid { grid-template-columns: 1fr; gap: 24px; } }
.s-foot .s-logo { color: #fff; }
.s-foot .s-logo img { background: #fff; padding: 3px 6px; height: 34px; }
.s-foot h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 10px; }
html:root body .s-foot a { color: #E8EDF7; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { html:root body .s-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } }
.s-foot ul { list-style: none; margin: 0; padding: 0; }
.s-foot p { font-size: 15px; line-height: 1.6; color: #C9D3E6; }
.s-foot-base { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: #AEB9D0; }

/* ---------- sign in / register / reset ---------- */
html:root body.s-auth { display: block; min-height: 100vh; min-height: 100svh; }
.au { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.au-hero { position: relative; overflow: hidden; color: #fff; background: var(--nav-bg); display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; isolation: isolate; }
.au-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.au-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,17,34,.55) 0%, rgba(10,17,34,.35) 35%, rgba(10,17,34,.92) 78%, rgba(10,17,34,.97) 100%); }
html:root body .au-hero .s-logo { color: #fff; }
.au-hero .s-logo img { background: #fff; padding: 4px 8px; height: 40px; border-radius: 8px; }
html:root body .au-hero h1 { color: #fff; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 14px; max-width: 16ch; text-wrap: balance; }
.au-hero .au-lead { font-size: 19px; line-height: 1.5; color: #E4EAF5; max-width: 46ch; margin-bottom: 26px; }
.au-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 520px; }
.au-reasons li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 17px; line-height: 1.45; color: #E4EAF5; }
.au-reasons li strong { display: block; color: #fff; font-size: 18px; }
.au-reasons .ri { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.au-reasons .ri svg { width: 22px; height: 22px; }
.au-hero-foot { font-size: 14px; color: #B9C4DA; margin-top: 28px; }
.au-side { display: flex; flex-direction: column; background: var(--bg); }
.au-side-top { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 20px 0; }
html:root body .au-side-top a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--ink-soft); font-weight: 700; text-decoration: none; border-radius: var(--r-ctl); }
@media (hover: hover) and (pointer: fine) { html:root body .au-side-top a:hover { background: var(--surface-3); color: var(--ink); } }
.au-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 20px 40px; }
html:root body .au-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 34px 28px; box-shadow: var(--shadow); }
html:root body .au-card .auth-brand { display: block; margin: 0 0 24px; text-align: left; }
html:root body .au-card .auth-brand h2 { font-size: 30px; letter-spacing: -0.03em; margin: 0 0 6px; }
html:root body .au-card .auth-brand .sub { font-size: 18px; color: var(--ink-soft); font-weight: 550; }
html:root body .au-card .field { margin-bottom: 18px; }
html:root body .au-card .field label { font-size: 17px; font-weight: 750; margin-bottom: 8px; display: block; }
html:root body .au-card .field .hint { display: block; font-size: 15px; color: var(--ink-faint); margin-top: 6px; }
html:root body .au-card input { width: 100%; min-height: 58px; font-size: 19px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface); }
html:root body .au-card .pw-wrap { position: relative; }
html:root body .au-card .pw-wrap input { padding-right: 92px; }
html:root body .au-card .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 46px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--surface-3); color: var(--ink); font: 750 16px var(--font); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { html:root body .au-card .pw-toggle:hover { background: var(--r-soft); } }
html:root body .au-card .forgot-row { text-align: right; margin: -6px 0 16px; }
html:root body .au-card .forgot-row.center { text-align: center; margin: 14px 0 0; }
html:root body .au-card .link-btn { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; background: none; border: 0; cursor: pointer; padding: 0 4px; min-height: 48px; display: inline-flex; align-items: center; }
html:root body .au-card .btn-primary { width: 100%; min-height: 60px; font-size: 19px; }
html:root body .au-card .auth-msg { margin-top: 14px; font-size: 16px; font-weight: 650; min-height: 0; }
html:root body .au-card .auth-msg.err { color: var(--bad); background: var(--bad-bg); border-radius: var(--r-ctl); padding: 12px 14px; }
html:root body .au-card .auth-msg.ok { color: var(--good); background: var(--good-bg); border-radius: var(--r-ctl); padding: 12px 14px; }
html:root body .au-card .auth-msg:empty { padding: 0; background: none; margin: 0; }
html:root body .au-card .auth-step-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
html:root body .au-card .auth-step-sub { font-size: 17px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 18px; }
html:root body .au-card .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
html:root body .au-card .reset-wait { display: flex; justify-content: center; padding: 30px 0; }
html:root body .au-card .reset-wait .spinner { border-color: var(--line); border-top-color: var(--acc); width: 34px; height: 34px; }
html:root body .au-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
html:root body .au-foot a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; font-weight: 750; display: inline-flex; align-items: center; min-height: 44px; }
.au-help { max-width: 460px; width: 100%; margin: 16px auto 0; font-size: 15px; color: var(--ink-faint); text-align: center; }
html:root body .au-help a { color: var(--ink-soft); font-weight: 700; }
@media (max-width: 960px) {
  .au { grid-template-columns: 1fr; }
  .au-hero { padding: 24px 20px 28px; min-height: 0; }
  .au-hero .au-lead { font-size: 17px; margin-bottom: 18px; }
  html:root body .au-hero h1 { font-size: clamp(30px, 7vw, 40px); margin-top: 22px; }
  .au-reasons li { font-size: 16px; }
  .au-hero-foot { display: none; }
  .au-side { order: -1; }
  .au-side-top { padding: 10px 12px 0; }
  .au-main { padding: 8px 14px 28px; }
  html:root body .au-card { padding: 26px 20px 20px; border-radius: var(--radius); }
}

/* ---------- Facts ---------- */
.f-hero { position: relative; overflow: hidden; background: var(--nav-bg); color: #fff; isolation: isolate; }
.f-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.f-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,17,34,.96) 0%, rgba(10,17,34,.86) 45%, rgba(10,17,34,.35) 100%); }
.f-hero .s-wrap { padding-top: 84px; padding-bottom: 84px; }
.f-hero .s-eyebrow { color: #FFB3B9; }
html:root body .f-hero .s-h1 { color: #fff; max-width: 15ch; }
.f-hero .s-lead { color: #E1E7F3; max-width: 52ch; margin-bottom: 28px; }
@media (max-width: 767px) { .f-hero .s-wrap { padding-top: 52px; padding-bottom: 84px; } .f-hero::after { background: linear-gradient(180deg, rgba(10,17,34,.82), rgba(10,17,34,.95)); } }
.f-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; margin-top: -44px; position: relative; z-index: 2; box-shadow: var(--shadow); }
.f-stats > div { padding: 24px 22px; border-right: 1px solid var(--line); min-width: 0; }
.f-stats > div:last-child { border-right: 0; }
.f-stats b { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.f-stats span { display: block; font-size: 16px; color: var(--ink-soft); line-height: 1.4; margin-top: 6px; }
@media (max-width: 900px) { .f-stats { grid-template-columns: 1fr 1fr; } .f-stats > div:nth-child(2) { border-right: 0; } .f-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 420px) { .f-stats > div { padding: 18px 16px; } }
.f-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 24px -2px 8px; scrollbar-width: none; }
.f-chips::-webkit-scrollbar { display: none; }
html:root body .f-chip { flex: 0 0 auto; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: 700 16px var(--font); cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
html:root body .f-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.f-chip .n { font-weight: 600; opacity: .7; margin-left: 4px; }
.f-count { font-size: 15px; color: var(--ink-faint); margin: 0 0 16px; }
.f-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
@media (max-width: 400px) { .f-grid { grid-template-columns: 1fr; } }
html:root body .f-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.f-card[hidden] { display: none; }
.f-card .f-img { aspect-ratio: 1 / 1; background: var(--surface-3); display: block; }
.f-card .f-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-card .f-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.f-card .f-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f-tag { font-size: 14px; font-weight: 700; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-soft); }
.f-tag.cat { background: var(--r-soft); color: var(--red-ink); }
html:root[data-theme="dark"] .f-tag.cat { color: #fff; }
html:root body .f-card h3 { font-size: 19px; line-height: 1.3; margin: 0; }
.f-card p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
html:root body .f-dl { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
@media (hover: hover) and (pointer: fine) { html:root body .f-dl:hover { border-color: var(--ink-faint); background: var(--surface-2); text-decoration: none; } }
.f-dl svg { width: 20px; height: 20px; }
.f-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 860px) { .f-compare { grid-template-columns: 1fr; } }
.f-cmp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.f-cmp h3 { font-size: 21px; margin: 0 0 4px; }
.f-cmp .s-small { margin-bottom: 14px; }
.f-cmp dl { margin: 0; display: grid; gap: 0; }
.f-cmp .row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.f-cmp .row.hd { border-top: 0; padding-top: 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.f-cmp dt { font-weight: 750; font-size: 16px; }
.f-cmp dd { margin: 0; font-size: 16px; color: var(--ink-soft); line-height: 1.45; }
.f-cmp dd.win { color: var(--ink); font-weight: 700; }
@media (max-width: 480px) { .f-cmp .row { grid-template-columns: 1fr 1fr; } .f-cmp dt { grid-column: 1 / -1; } .f-cmp .row.hd span:first-child { display: none; } }
.f-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.f-split img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
@media (max-width: 860px) { .f-split { grid-template-columns: 1fr; gap: 24px; } }
.f-cta { background: var(--nav-bg); color: #fff; border-radius: var(--radius-lg); padding: 40px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
html:root body .f-cta h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin: 0 0 6px; }
.f-cta p { color: #D3DBEA; font-size: 17px; }
@media (max-width: 600px) { .f-cta { padding: 28px 22px; } .f-cta .s-btn { width: 100%; } }
.f-src { margin-top: 28px; }

/* ---------- Help ---------- */
.h6-hero { padding: 56px 0 24px; }
.h6-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: st; }
.h6-steps li { counter-increment: st; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.h6-steps li::before { content: counter(st); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 14px; }
.h6-steps h3 { font-size: 20px; margin: 0 0 6px; }
.h6-steps p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.h6-faq { margin-top: 24px; display: grid; gap: 10px; max-width: 860px; }
html:root body .h6-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
html:root body .h6-faq summary { list-style: none; cursor: pointer; min-height: 64px; padding: 16px 56px 16px 20px; font-size: 18px; font-weight: 750; position: relative; display: flex; align-items: center; border-radius: var(--radius); }
.h6-faq summary::-webkit-details-marker { display: none; }
.h6-faq summary::after { content: ''; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border: solid var(--ink-soft); border-width: 0 2.5px 2.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease-out); }
.h6-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.h6-faq details > div { padding: 0 20px 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.h6-faq details > div p + p { margin-top: 10px; }
.h6-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.h6-contact .c-body { padding: 32px; }
.h6-contact img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
@media (max-width: 760px) { .h6-contact { grid-template-columns: 1fr; } .h6-contact img { min-height: 200px; max-height: 260px; } .h6-contact .c-body { padding: 24px 20px; } }
html:root body .h6-call { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
html:root body .h6-call a { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 750; font-size: 18px; overflow-wrap: anywhere; }
html:root body .h6-call a.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.h6-call svg { width: 22px; height: 22px; flex: 0 0 auto; }
.h6-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 18px; }
.h6-keys div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 16px; }

/* ---------- What's new ---------- */
.c6 { max-width: 860px; }
.c6-rel { position: relative; padding: 0 0 40px 32px; border-left: 2px solid var(--line); margin-left: 8px; }
.c6-rel::before { content: ''; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-2); }
.c6-rel.now::before { background: var(--acc); border-color: var(--acc); }
.c6-rel:last-child { border-left-color: transparent; padding-bottom: 0; }
.c6-ver { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
html:root body .c6-ver h2 { font-size: 28px; margin: 0; letter-spacing: -0.025em; }
.c6-ver .when { font-size: 15px; color: var(--ink-faint); font-weight: 700; }
.c6-ver .now-pill { font-size: 14px; font-weight: 800; padding: 2px 10px; border-radius: var(--r-pill); background: var(--acc); color: #fff; }
.c6-rel > p { font-size: 17px; color: var(--ink-soft); margin-bottom: 12px; max-width: 65ch; }
.c6-group { margin-top: 14px; }
html:root body .c6-group h3 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.c6-group ul { margin: 0; padding: 0 0 0 22px; display: grid; gap: 8px; }
.c6-group li { font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.c6-group li strong { color: var(--ink); }
@media (max-width: 600px) { .c6-rel { padding-left: 22px; } }

/* ---------- motion preferences ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]) .js .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
  html:not([data-motion="reduced"]) .js .reveal { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .f-card { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body *, html:root body *::before, html:root body *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- v6.01 readability floors ---------- */
/* v5.02 shrank the whole app to 78% on computers. v6 keeps it closer to true size so text and buttons stay big. */
@media (min-width: 1000px) {
  html:root body.v5 { zoom: .9; }
  html:root[data-textsize="large"] body.v5 { zoom: 1; }
  html:root[data-textsize="xlarge"] body.v5 { zoom: 1.1; }
  html:root body .btn, html:root body .b3, html:root body.v5 .v5-link, html:root body.v5 .v5-find, html:root body.v5 .v5-size, html:root body.v5 .v5-out, html:root body.v5 .v5-head-help { min-height: 54px; }
  html:root body .seg button, html:root body .tabs .tab-btn, html:root body .lv-chip, html:root body .qfilter button, html:root body.v5 .v5-sublink { min-height: 52px; }
  html:root body .lv-chip { min-width: 52px; }
}
html:root body .hp-cat, html:root body .lc-mat, html:root body .lost-sum, html:root body .lost-sum strong, html:root body .lr-label, html:root body .lr-num,
html:root body .lc-lbl, html:root body .lc-chip, html:root body .ec-owner, html:root body .ec-prio, html:root body .pr-name, html:root body .pb-dates, html:root body .adm-faint { font-size: 14px; }
html:root body .mobile-total-bar .btn { white-space: nowrap; padding: 0 18px; }
html:root body .len-badge, html:root body .truck-more { font-size: 14px; }
/* the quote total panel keeps light boxes on navy in both themes (v5 locks their ink dark) */
html:root body .total-card select, html:root body .total-card .freight-field input, html:root[data-theme] body .total-card select, html:root[data-theme] body .total-card .freight-field input { background-color: #fff; color: #161A22; -webkit-text-fill-color: #161A22; border-color: transparent; }
html:root body .total-card .freight-field input[readonly], html:root[data-theme] body .total-card .freight-field input[readonly] { background-color: #E9ECF2; color: #3A4050; -webkit-text-fill-color: #3A4050; }
html:root body .total-card .seg button.on, html:root[data-theme] body .total-card .seg button.on { background: #fff; color: var(--acc-d); box-shadow: none; }
html:root body .qx-meta b { color: var(--ink-faint); }
html:root body .hl-kind { color: var(--ink-soft); }