/* ============================================================
   Fratco App v4.00 design system
   Loads after style.css and re-skins every page. Flat, quiet surfaces, one accent,
   tabular numbers, 8px grid. Self-hosted fonts (no Google Fonts dependency).
   ============================================================ */

/* Both legacy family names point at the self-hosted Inter, so every old rule picks it up. */
@font-face { font-family: 'Inter'; src: url('../fonts/jakarta.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/jakarta.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fratco Mono'; src: url('../fonts/mono.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root:root {
  --bg: #F5F5F6; --bg-2: #EEEEF0; --surface: #FFFFFF; --surface-2: #F8F8F9; --surface-3: #F1F1F3;
  --ink: #111114; --ink-soft: #5C5C66; --ink-faint: #9696A0;
  --line: #E5E5E8; --line-2: #D5D5DA;
  --red-soft: color-mix(in srgb, var(--red) 8%, var(--surface));
  --good: #1F7A45; --good-bg: #E6F4EC; --warn: #8A5A00; --warn-bg: #FBF1DC;
  --pe: #2B6CB0; --pp: #B7791F;
  --radius: 10px; --radius-sm: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16,16,20,.04);
  --shadow: 0 1px 2px rgba(16,16,20,.04);
  --shadow-lg: 0 12px 32px rgba(16,16,20,.12), 0 2px 6px rgba(16,16,20,.06);
  --ease: cubic-bezier(.2,.7,.2,1); --spring: cubic-bezier(.2,.7,.2,1);
  --side-w: 244px; --head-h: 56px; --tabs-h: 64px;
  --num: 'Fratco Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --focus: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}
:root:root[data-theme="dark"] {
  --bg: #0D0D0F; --bg-2: #141417; --surface: #151518; --surface-2: #1B1B1F; --surface-3: #222227;
  --ink: #EDEDF0; --ink-soft: #A2A2AC; --ink-faint: #6E6E78;
  --line: #26262C; --line-2: #34343C;
  --red-soft: color-mix(in srgb, var(--red) 14%, var(--surface));
  --good: #5CC98A; --good-bg: #13261B; --warn: #E3B04B; --warn-bg: #2A2210;
  --shadow-sm: none; --shadow: none; --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    --bg: #0D0D0F; --bg-2: #141417; --surface: #151518; --surface-2: #1B1B1F; --surface-3: #222227;
    --ink: #EDEDF0; --ink-soft: #A2A2AC; --ink-faint: #6E6E78;
    --line: #26262C; --line-2: #34343C;
    --red-soft: color-mix(in srgb, var(--red) 14%, var(--surface));
    --good: #5CC98A; --good-bg: #13261B; --warn: #E3B04B; --warn-bg: #2A2210;
    --shadow-sm: none; --shadow: none; --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  }
}

/* ---------- base ---------- */
html body { background: var(--bg); background-image: none; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.005em; }
html h1, html h2, html h3, html .display { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; }
html :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
html ::selection { background: color-mix(in srgb, var(--red) 25%, transparent); color: inherit; }
html a:hover { text-decoration: none; }
/* the old entrance animations made every tab switch wobble; content now just appears */
html .panel.active, html .panel.active .card, html .panel.active .reveal, html .kpi, html .card, html .auth-card, html .toast { animation: none; }
html .bump { animation: none; }
.big, .kpi-val, .h-stat b, .num, .mb-total, [class*="-amt"], [class*="-total"], .dw-price, .size-lbl, .qx input { font-variant-numeric: tabular-nums; }

/* ---------- boot ---------- */
html .boot { background: var(--bg); }
html .boot img { width: 120px; box-shadow: none; border-radius: 6px; }
html .boot-bar { width: 120px; height: 2px; background: var(--line); }

/* ================= APP SHELL ================= */
html .topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none; height: var(--head-h); backdrop-filter: none; }
html .topbar::after { display: none; }
html .topbar .brand { font-family: 'Inter'; font-weight: 600; }
html .topbar .fmark { height: 24px; border-radius: 4px; }
html .topbar .brand .ver { background: var(--surface-3); color: var(--ink-soft); font-weight: 600; }
html .topbar nav a { color: var(--ink-soft); font-weight: 500; font-size: 13.5px; padding: 7px 12px; border-radius: 8px; }
html .topbar nav a:hover { background: var(--surface-3); color: var(--ink); }
html .topbar nav a.active { background: var(--surface-3); color: var(--ink); }
html .topbar .who { color: var(--ink-soft); }
html .topbar .who .pill { background: var(--surface-3); color: var(--ink-soft); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; }
html .topbar .logout-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); font-weight: 500; }
html .topbar .logout-btn:hover { background: var(--surface-3); }
html .hamburger-btn { color: var(--ink); }
html .hamburger-btn:hover { background: var(--surface-3); }

/* sidebar (desktop) */
.v4-side { display: none; }
.v4-tabs { display: none; }
@media (min-width: 900px) {
  body.v4 .topbar { display: none; }
  body.v4 .app-shell, body.v4 > .boot ~ .app-shell { padding-left: var(--side-w); }
  body.v4 .preview-banner { margin-left: 0; }
  body.v4 main .tabs { display: none; }        /* sections live in the sidebar */
  .v4-side {
    display: flex; flex-direction: column; gap: 4px; position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 35;
    background: var(--surface); border-right: 1px solid var(--line); padding: 14px 12px 12px;
  }
}
.v4-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--ink); font-weight: 650; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; }
.v4-brand img { height: 24px; width: auto; border-radius: 4px; }
.v4-brand:hover { text-decoration: none; }
.v4-find { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px 0 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-faint); font: 500 13px 'Inter'; cursor: pointer; text-align: left; }
.v4-find:hover { border-color: var(--line-2); color: var(--ink-soft); }
.v4-find span { flex: 1; }
.v4-find kbd, .v4-cmd kbd { font: 500 11px 'Inter'; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.v4-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
.v4-link { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink-soft); font-weight: 500; font-size: 13.5px; text-decoration: none; }
.v4-link svg { color: var(--ink-faint); flex: 0 0 auto; }
.v4-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.v4-link.on { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.v4-link.on svg { color: var(--red); }
.v4-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 19px; padding-left: 12px; border-left: 1px solid var(--line); }
.v4-sublink { text-align: left; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-soft); font: 500 13px 'Inter'; cursor: pointer; position: relative; }
.v4-sublink:hover { background: var(--surface-3); color: var(--ink); }
.v4-sublink.on { color: var(--ink); font-weight: 600; }
.v4-sublink.on::before { content: ''; position: absolute; left: -13px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--red); }
.v4-user { display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; border-top: 1px solid var(--line); margin-top: 8px; }
.v4-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 650; flex: 0 0 auto; }
.v4-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.v4-who strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-who span { font-size: 11.5px; color: var(--ink-faint); }
.v4-icon-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v4-icon-btn:hover { background: var(--surface-3); color: var(--ink); }

/* page header */
.v4-head { display: none; }
@media (min-width: 900px) {
  .v4-head { display: block; padding: 4px 0 18px; }
  .v4-crumb { font-size: 12.5px; color: var(--ink-faint); font-weight: 500; margin-bottom: 2px; }
  .v4-head h1 { font-size: 24px; font-weight: 650; letter-spacing: -0.025em; }
}

/* main area */
html main.container { max-width: 1320px; padding: 28px 32px 64px; }
html main.container.wide { max-width: 1400px; }
@media (max-width: 899px) { html main.container { padding: 18px 16px 90px; } }

/* inner tabs on tablet and phone: quiet underline strip */
html .tabs { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 4px; margin-bottom: 18px; }
html .tabs button { background: none; border: 0; border-radius: 0; color: var(--ink-soft); font: 500 13.5px 'Inter'; padding: 10px 10px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; box-shadow: none; white-space: nowrap; }
html .tabs button:hover { color: var(--ink); }
html .tabs button.active { color: var(--ink); border-bottom-color: var(--red); background: none; box-shadow: none; }
html .tabs .seg-ind { display: none; }

/* phone: bottom tabs */
@media (max-width: 640px) {
  body.v4 .v4-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .v4-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--ink-faint); font: 500 11px 'Inter'; text-decoration: none; border-radius: 10px; cursor: pointer; }
  .v4-tab.on { color: var(--red); }
  .v4-tab:hover { text-decoration: none; }
  body.v4 .topbar nav, body.v4 .topbar .who .pill, body.v4 .topbar .logout-btn { display: none; }
  body.v4 .toast-wrap { bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); }
  body.v4 .mobile-total-bar { bottom: calc(var(--tabs-h) + 8px + env(safe-area-inset-bottom)); }
  body.v4.has-bar main.container { padding-bottom: 170px; }
}

/* drawer (phone menu) */
html .drawer { background: var(--surface); border-radius: 0; box-shadow: var(--shadow-lg); }
html .drawer-link { font-size: 15px; font-weight: 500; border-radius: 8px; padding: 12px; min-height: 44px; }
html .drawer-link:hover, html .drawer-link.active { background: var(--surface-3); color: var(--ink); }
html .drawer-link.logout { color: var(--ink-soft); }
html .drawer-section-label { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; color: var(--ink-faint); }

/* command palette */
.v4-cmd { position: fixed; inset: 0; z-index: 300; background: rgba(10,10,12,.45); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.v4-cmd.open { display: flex; }
.v4-cmd-box { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.v4-cmd-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--ink-faint); }
html .v4-cmd-in input { flex: 1; border: 0; background: none; height: 50px; font-size: 15px; padding: 0; box-shadow: none; }
html .v4-cmd-in input:focus { box-shadow: none; }
.v4-cmd-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.v4-cmd-item { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: 500 14px 'Inter'; cursor: pointer; text-align: left; }
.v4-cmd-item em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.v4-cmd-item.on { background: var(--surface-3); }
.v4-cmd-none { padding: 18px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }

/* ================= CONTROLS ================= */
/* inputs */
html input:not([type]), html input[type="text"], html input[type="number"], html input[type="email"], html input[type="password"], html input[type="date"], html input[type="search"], html input[type="tel"], html textarea, html select {
  background-color: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; font: 400 14px 'Inter', sans-serif; padding: 8px 11px; min-height: 36px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s;
}
html input:hover, html textarea:hover, html select:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line-2)); }
html input:focus, html textarea:focus, html select:focus { border-color: var(--red); box-shadow: var(--focus); outline: none; }
html input[readonly], html input:disabled { background: var(--surface-2); color: var(--ink-soft); box-shadow: none; }
html input::placeholder, html textarea::placeholder { color: var(--ink-faint); }
html input[type="number"] { -moz-appearance: textfield; }
html input[type="number"]::-webkit-inner-spin-button, html input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html label, html .f-label, html .qf-row label, html .pf-field label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
html input[type="checkbox"], html input[type="radio"] { accent-color: var(--red); }

/* buttons: one shape, three weights */
html .btn, html .b3 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; font: 550 13.5px 'Inter', sans-serif; letter-spacing: -0.005em; box-shadow: none; transform: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
html .btn:active:not(:disabled), html .b3:active:not(:disabled) { transform: translateY(0.5px); }
html .btn-primary, html .b3-primary { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 1px 2px color-mix(in srgb, var(--red) 30%, transparent); }
html .btn-primary:hover:not(:disabled), html .b3-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 88%, black); box-shadow: 0 1px 2px color-mix(in srgb, var(--red) 30%, transparent); transform: none; }
html .btn-primary::after { display: none; }
html .btn-outline, html .b3-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
html .btn-outline:hover:not(:disabled), html .b3-secondary:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: var(--line-2); }
html .btn-danger, html .b3-danger { background: var(--surface); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line-2)); }
html .btn-danger:hover:not(:disabled), html .b3-danger:hover:not(:disabled) { background: var(--red-soft); transform: none; }
html .btn-danger.armed, html .b3-danger.armed { background: var(--red); color: #fff; border-color: var(--red); }
html .b3-tertiary { background: none; color: var(--ink-soft); border-color: transparent; padding: 0 10px; }
html .b3-tertiary:hover:not(:disabled) { color: var(--ink); background: var(--surface-3); text-decoration: none; }
html .btn-sm, html .b3-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
html .b3-icon { width: 32px; min-height: 32px; padding: 0; background: none; color: var(--ink-soft); border-radius: 7px; }
html .b3-icon:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
html .b3-pill { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 13px 'Inter'; background: var(--surface); }
html .b3-pill.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
html .text-btn { border: 1px dashed var(--line-2); border-radius: 8px; color: var(--ink-soft); font-weight: 500; font-size: 13px; }
html .text-btn:hover { border-color: var(--ink-faint); color: var(--ink); background: var(--surface-2); }
html .text-btn.armed { background: var(--red); border-color: var(--red); color: #fff; }
html .link-btn { color: var(--ink-soft); font-weight: 500; }
html .link-btn:hover { color: var(--red); }
@media (max-width: 640px) { html .btn, html .b3 { min-height: 42px; } html .btn-sm, html .b3-sm { min-height: 36px; } }

/* segmented controls */
html .seg { background: var(--surface-3); border-radius: 8px; padding: 2px; gap: 2px; }
html .seg button { color: var(--ink-soft); opacity: 1; font: 500 12.5px 'Inter'; padding: 5px 10px; border-radius: 6px; }
html .seg button:hover { color: var(--ink); }
html .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); }
html .seg.light { background: var(--surface-3); }
html .seg-tabs { background: var(--surface-3); border: 0; border-radius: 9px; padding: 3px; gap: 2px; }
html .seg-tabs button { color: var(--ink-soft); font: 500 13px 'Inter'; border-radius: 7px; padding: 7px 10px; }
html .seg-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); }
html .seg-tabs .seg-ind { display: none; }

/* pills and badges */
html .pill { font-weight: 600; }
html .badge { border-radius: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; }
html .badge.owner { background: var(--surface-3); color: var(--ink); }

/* ================= SURFACES ================= */
html .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 16px; }
html .section-head { align-items: center; margin-bottom: 16px; }
html .section-head h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
html .section-head p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
html table.data { font-size: 13.5px; }
html table.data th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 550; color: var(--ink-faint); padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
html table.data th:first-child { border-radius: 6px 0 0 6px; } html table.data th:last-child { border-radius: 0 6px 6px 0; }
html table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
html table.data tbody tr:hover { background: var(--surface-2); }
html .kpi-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
html .kpi { background: var(--surface); border: 0; border-radius: 0; padding: 14px 16px; }
html .kpi-val { font-family: 'Inter'; font-size: 22px; font-weight: 650; letter-spacing: -0.025em; }
html .kpi-lbl { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
html .empty-state { color: var(--ink-faint); font-size: 13.5px; padding: 32px 18px; }
html .toast { background: var(--ink); color: var(--surface); border-radius: 10px; font-weight: 500; font-size: 13.5px; box-shadow: var(--shadow-lg); }
html .toast.ok { background: var(--ink); color: var(--surface); }
html .toast.err { background: var(--red); }
html .preview-banner { background: var(--warn-bg); color: var(--warn); font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
html .preview-banner button { background: var(--warn); color: var(--surface); border-radius: 6px; }
html .howto { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
html .howto-title { font-family: 'Inter'; font-size: 14.5px; font-weight: 650; }
html .howto-steps li { font-size: 13.5px; color: var(--ink-soft); }
html .howto-steps li strong { color: var(--ink); font-weight: 600; }
html .howto-steps b { flex: 0 0 22px; height: 22px; font-size: 12px; background: var(--ink); color: var(--surface); }

/* ================= ORDER SCREEN ================= */
/* summary: a calm panel instead of a red billboard */
html .total-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 0; overflow: visible; }
html .total-card::before, html .total-card::after { display: none; }
html .total-card > * { padding-left: 18px; padding-right: 18px; }
html .total-card > :first-child { padding-top: 16px; }
html .level-row, html .freight-row, html .freight-mode-row, html .load-mode-row { border-bottom: 1px solid var(--line); margin-bottom: 0; padding-top: 12px; padding-bottom: 12px; }
html .level-row label, html .freight-field label, html .lm-lbl { text-transform: none; letter-spacing: 0; opacity: 1; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
html .total-card select, html .freight-field input { background-color: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; font-weight: 600; }
html .total-card select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239696A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); min-width: 88px; }
html .total-card select option { color: initial; }
html .total-card input:focus, html .total-card select:focus { border-color: var(--red); box-shadow: var(--focus); }
html .freight-field input[readonly] { background: var(--surface-2); color: var(--ink-soft); border-color: var(--line); }
html .freight-rate-lbl, html .freight-mode-static { color: var(--ink-soft); opacity: 1; font-size: 12px; }
html .cmp-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); font: 500 12.5px 'Inter'; border-radius: 8px; }
html .cmp-btn:hover { background: var(--surface-3); transform: none; }
html .total-card .seg { background: var(--surface-3); }
html .total-card .seg button { color: var(--ink-soft); }
html .total-card .seg button.on { background: var(--surface); color: var(--ink); }
html .stats-row { padding-top: 16px; padding-bottom: 16px; align-items: flex-end; background: var(--surface-2); border-radius: 0 0 12px 12px; }
html .margin-block.show ~ .stats-row, html .stats-row:not(:last-child) { border-radius: 0; }
html .stat-block .big { font-family: 'Inter'; font-size: 30px; font-weight: 650; letter-spacing: -0.035em; color: var(--ink); }
html .stat-block.right .big { color: var(--ink); }
html .stat-block .lbl, html .margin-stats .lbl { text-transform: none; letter-spacing: 0; opacity: 1; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
html .margin-block { border-top: 1px solid var(--line); margin-top: 0; padding-top: 14px; padding-bottom: 16px; animation: none; }
html .margin-stats .big { font-family: 'Inter'; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
html .margin-floor { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); font-weight: 500; border-radius: 8px; }
html .margin-floor.bad { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
@media (min-width: 1100px) { html .order-side { position: sticky; top: 24px; align-self: flex-start; } }

/* product line cards */
html .line-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; transform: none; }
html .line-card:hover { transform: none; border-color: var(--line-2); box-shadow: none; background: var(--surface-2); }
html .line-card:active { transform: none; }
html .line-card svg { color: var(--ink-faint); transform: none; }
html .line-card .lc-name { font-family: 'Inter'; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
html .line-card .lc-desc { font-size: 12.5px; }
html .line-card .lc-mat { border-radius: 5px; font-weight: 650; }
html .line-card.on { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--ink); }
html .line-card.on svg { color: var(--red); transform: none; }
html .dw-card::after { color: var(--ink-faint); }
html .dw-card.on::after { color: var(--ink); }
html .dw-card-count { background: var(--ink); color: var(--surface); border-radius: 6px; animation: none; font-weight: 650; }
html .dw-hint { border: 1px dashed var(--line-2); border-radius: 10px; color: var(--ink-soft); background: none; }
html .material-header { font-weight: 600; font-size: 14px; }
html .len-chip { border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); color: var(--ink-soft); font: 500 12.5px 'Inter'; transform: none; box-shadow: none; }
html .len-chip:hover { transform: none; color: var(--ink); border-color: var(--ink-faint); }
html .len-chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: none; }
html .len-chip.on .len-badge { background: var(--surface); color: var(--ink); }

/* quantity rows */
html .order-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
html .order-item { border-bottom: 1px solid var(--line); background: var(--surface); }
html .order-item:last-child { border-bottom: 0; }
html .order-item:hover { background: var(--surface-2); }
html .order-item.has-qty { background: var(--surface); box-shadow: inset 2px 0 0 var(--red); }
html .order-row { padding: 10px 12px 10px 16px; }
html .order-row .size-lbl { font-family: 'Inter'; font-weight: 650; font-size: 15px; letter-spacing: -0.02em; }
html .dw-sub { font-size: 12px; color: var(--ink-faint); }
html .dw-price { font-size: 12px; color: var(--ink-soft); padding: 0 16px 10px; text-align: left; margin-top: -6px; font-family: var(--num); letter-spacing: -0.02em; }
.qx { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); overflow: hidden; flex: 0 0 auto; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; }
.qx:focus-within { border-color: var(--red); box-shadow: var(--focus); }
html .qx input, html .order-row .qx input { width: 72px; min-height: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; text-align: center; padding: 0 4px; font: 500 15px var(--num); letter-spacing: -0.02em; background: transparent; }
html .qx input:focus { box-shadow: none; }
.qx-b { width: 34px; border: 0; background: var(--surface-2); color: var(--ink-soft); font: 400 18px 'Inter'; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; }
.qx-b:hover { background: var(--surface-3); color: var(--ink); }
.qx-b:active { background: var(--line); }
.qx-b:first-child { border-right: 1px solid var(--line); } .qx-b:last-child { border-left: 1px solid var(--line); }
.qx-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 10px 16px; margin-top: -4px; font-size: 12px; color: var(--ink-soft); min-height: 0; }
.qx-meta:empty { display: none; }
.qx-meta > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.qx-meta b { color: var(--line-2); font-weight: 400; }
.qx-cap { color: var(--ink-faint); }
.qx-bar { display: inline-block; width: 56px; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.qx-bar i { display: block; height: 100%; background: var(--red); border-radius: 4px; }
.qx-fill { border: 0; background: none; color: var(--red); font: 550 12px 'Inter'; padding: 3px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.qx-fill:hover { background: var(--red-soft); }
@media (max-width: 640px) { .qx { height: 42px; } .qx-b { width: 40px; } html .qx input, html .order-row .qx input { width: 64px; } }

/* admin margin rows stay compact */
html .admin-margin-row { padding: 0 16px 10px; gap: 10px; }
html .admin-margin-row input { min-height: 30px; padding: 4px 8px; font-family: var(--num); font-size: 13px; }
html .admin-min-margin { background: var(--surface-3); color: var(--ink-soft); border-radius: 5px; font-weight: 550; }

/* line items (pipe, coils, fittings) */
html .stepper { border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow-sm); }
html .stepper button { background: var(--surface-2); color: var(--ink-soft); }
html .stepper button:hover { background: var(--surface-3); color: var(--ink); }
html .stepper input { font-family: var(--num); border: 0; box-shadow: none; }
html .stepper input:focus { box-shadow: none; }

/* phone summary bar */
html .mobile-total-bar { background: var(--ink); color: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); backdrop-filter: none; }
html .mobile-total-bar .mb-total { font-family: 'Inter'; font-weight: 650; letter-spacing: -0.02em; }

/* ================= HOME ================= */
html .h-head h1 { font-family: 'Inter'; font-size: 26px; font-weight: 650; letter-spacing: -0.03em; }
html .h-head p { font-size: 14px; color: var(--ink-faint); }
html .h-hero { border-radius: 12px; box-shadow: none; aspect-ratio: 32 / 9; min-height: 180px; border: 1px solid var(--line); }
html .h-sec { margin-top: 32px; }
html .h-title { font-family: 'Inter'; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
html .h-title::before { display: none; }
html .h-shortcuts { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
html .h-short { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 14px; border-radius: 10px; box-shadow: none; transform: none; }
html .h-short:hover { transform: none; box-shadow: none; border-color: var(--line-2); background: var(--surface-2); }
html .hs-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-3); color: var(--ink); flex: 0 0 auto; }
html .hs-ic svg { width: 18px; height: 18px; }
html .h-short > span:not(.hs-ic), html .h-short .hs-txt { display: flex; flex-direction: column; min-width: 0; }
html .hs-t { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
html .hs-sub { font-size: 12.5px; color: var(--ink-faint); }
html .h-day { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
html .h-stat { flex-direction: column; align-items: flex-start; gap: 2px; border: 0; border-radius: 0; background: var(--surface); padding: 16px 18px; box-shadow: none; transform: none; }
html .h-stat:hover { transform: none; box-shadow: none; background: var(--surface-2); }
html .h-stat b { font-family: 'Inter'; font-size: 26px; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); }
html .h-stat span { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
html .h-stat.warn b { color: var(--warn); } html .h-stat.live b { color: var(--good); }
html .h-strip { border-radius: 12px; }
html .h-none { border: 1px dashed var(--line-2); border-radius: 10px; color: var(--ink-faint); background: none; }

/* ================= AUTH PAGES ================= */
html .auth-shell { background: var(--bg); }
html .auth-shell::before, html .auth-shell::after { display: none; }
html .auth-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 32px 28px 26px; }
html .auth-brand .fmark { width: 132px; box-shadow: none; border-radius: 6px; }
html .auth-brand .name { font-family: 'Inter'; font-weight: 650; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
html .auth-brand .sub { color: var(--ink-faint); }
html .field label { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }
html .auth-shell .auth-card input, html .auth-shell .auth-card select { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; font-size: 15px; padding: 10px 12px; }
html .auth-shell .auth-card input::placeholder { color: var(--ink-faint); }
html .auth-shell .auth-card input:focus { border-color: var(--red); box-shadow: var(--focus); }
html .auth-shell a, html .auth-card a { color: var(--ink-soft); }
html .auth-shell a:hover, html .auth-card a:hover { color: var(--red); }
html .auth-card .btn-primary { min-height: 42px; width: 100%; }
html .auth-card .btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
html .auth-msg { border-radius: 8px; }

/* ================= MOTION ================= */
@media (prefers-reduced-motion: reduce) { .v4-cmd, .qx, .v4-link { transition: none; } }

/* ---------- size tiles: one tidy card per size ---------- */
/*  12"                     $8.3905/ft
    20 ft stick · 110/truck
    [ −        40        + ]
    40 pcs · 800 ft · 36%     Fill truck +70   */
html .order-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 0; background: var(--line); }
html .order-list.grid .order-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "size price" "sub sub" "qty qty" "meta meta" "admin admin"; align-items: baseline; column-gap: 8px; padding: 12px 14px 10px; border: 0; margin: 0 1px 1px 0; box-shadow: none; }
html .order-list.grid .order-item:hover { background: var(--surface); }
html .order-list.grid .order-item.has-qty { box-shadow: inset 0 2px 0 var(--red); }
html .order-list.grid .order-row, html .order-list.grid .order-row > div:first-child { display: contents; }
html .order-list.grid .size-lbl { grid-area: size; font-size: 16px; }
html .order-list.grid .dw-sub { grid-area: sub; margin: 1px 0 10px; }
html .order-list.grid .qx { grid-area: qty; width: 100%; height: 40px; }
html .order-list.grid .qx input, html .order-list.grid .order-row .qx input { flex: 1; width: auto; min-width: 0; font-size: 16px; }
html .order-list.grid .dw-price { grid-area: price; padding: 0; margin: 0; text-align: right; font-size: 12px; }
html .order-list.grid .qx-meta { grid-area: meta; padding: 8px 0 0; margin: 0; min-height: 30px; }
html .order-list.grid .admin-margin-row { grid-area: admin; padding: 8px 0 0; flex-wrap: wrap; }
.qx-fill.quiet { color: var(--ink-faint); font-weight: 500; margin-left: auto; }
.qx-fill.quiet:hover { color: var(--red); }
.order-item:not(:hover):not(:focus-within) .qx-fill.quiet { opacity: 0; }
@media (hover: none) { .order-item .qx-fill.quiet { opacity: 1 !important; } }

/* ---------- summary: the total leads, settings follow ---------- */
html .total-card { display: flex; flex-direction: column; }
html .total-card > * { order: 2; }
html .total-card > .stats-row { order: 0; background: var(--surface); border-radius: 12px 12px 0 0; padding-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
html .total-card > .margin-block { order: 1; padding-top: 12px; padding-bottom: 14px; border-top: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
html .total-card > .level-row { padding-top: 12px; }
html .total-card > :last-child:not(.stats-row) { border-bottom: 0; }
html .stat-block .big, html .margin-stats .big { padding: 0; background: none; }
html .stat-block .big { font-size: 32px; }
html .stat-block:not(.right) .big { font-size: 22px; color: var(--ink-soft); }
html .stats-row { align-items: flex-end; }
html .stats-row .stat-block:not(.right) { order: 2; text-align: right; }
html .stats-row .stat-block.right { order: 1; text-align: left; }
.qx-meta > span { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.qx-bar { width: 40px; flex: 0 0 auto; }
html .order-list.grid { background: var(--surface); }
html .order-list.grid .order-item { margin: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
html .order-list.grid .order-item.has-qty { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line), inset 0 2px 0 var(--red); }
html .h-short { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; }
html .h-short .hs-ic { grid-row: 1 / 3; }
html .h-short .hs-t, html .h-short .hs-sub { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .h-short .hs-t { align-self: end; } html .h-short .hs-sub { align-self: start; }

/* ---------- dashboards ---------- */
html .seg.light { background: var(--surface-3); border: 0; }
html .seg.light button.on { color: var(--ink); background: var(--surface); }
html .chart-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
html .hl-card { background: var(--surface) !important; border: 1px solid var(--line); border-radius: 10px; }
html .hl-card::after { display: none; }
html .hl-kind { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 550; }
html .hl-val { font-family: 'Inter'; font-weight: 650; font-size: 22px; letter-spacing: -0.025em; }
html .tj-rank { font-family: 'Inter'; font-weight: 600; font-size: 12.5px; width: 24px; height: 24px; }
html .top-job:first-child .tj-rank { background: var(--ink); color: var(--surface); }
html .tj-bar { height: 3px; background: var(--surface-3); }
html .tj-bar span { animation: none; }
html .fu-tag { border-radius: 6px; font-weight: 600; }
/* solid fills always use the true brand red; the lighter dark-mode red is for text only */
html .btn-primary, html .b3-primary, html .btn-danger.armed, html .b3-danger.armed, html .text-btn.armed, html .toast.err { background: var(--acc); border-color: var(--acc); color: #fff; }
html .btn-primary:hover:not(:disabled), html .b3-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--acc) 86%, black); }
html .qx-bar i, html .tj-bar span { background: var(--acc); }
html [class*="seg"] button.on { color: var(--ink); }
html table th { text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) {
  html .order-list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .order-list.grid .order-item { padding: 10px 10px 8px; grid-template-areas: "size size" "price price" "sub sub" "qty qty" "meta meta" "admin admin"; }
  html .order-list.grid .dw-price { text-align: left; margin-top: 1px; }
  html .order-list.grid .dw-sub { margin-bottom: 8px; }
  .qx-b { width: 36px; }
  html .dw-card .lc-desc { font-size: 12px; }
  body.v4 .topbar { height: 52px; }
}
html .h-hero { width: 100%; max-width: 100%; }
@media (max-width: 640px) {
  html .h-hero { aspect-ratio: auto; height: 180px; min-height: 0; }
  html .h-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html .h-short { padding: 12px; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
  html .h-short .hs-sub { display: none; }
  html .h-short .hs-t { grid-row: 1 / 3; align-self: center; font-size: 13.5px; white-space: normal; }
  html .hs-ic { width: 32px; height: 32px; }
  html .h-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .h-head h1 { font-size: 22px; }
}
@media (max-width: 640px) { html .h-short > span.hs-sub { display: none; } }
html .auth-foot { color: var(--ink-soft); }
html .auth-foot a, html .auth-card a { color: var(--ink); font-weight: 600; text-decoration: none; }
html .auth-foot a:hover, html .auth-card a:hover { color: var(--red); }
html .auth-msg.err { color: var(--red); } html .auth-msg.ok { color: var(--good); }
html .auth-step-title { font-family: 'Inter'; font-weight: 650; font-size: 17px; }
html .auth-step-sub { color: var(--ink-soft); }
html .spinner { border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }

/* ---------- account ---------- */
html .acct-hero { background: var(--surface); }
html .acct-hero::before, html .acct-hero::after { display: none; }
html .acct-avatar { background: var(--surface-3); color: var(--ink); box-shadow: none; font-family: 'Inter'; font-weight: 600; width: 60px; height: 60px; font-size: 20px; }
html .acct-name { font-family: 'Inter'; font-weight: 650; font-size: 20px; letter-spacing: -0.025em; }
html .acct-lv-lbl { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
html .theme-pick { border: 1px solid var(--line); border-radius: 10px; transform: none; font-weight: 550; }
html .theme-pick:hover { transform: none; }
html .theme-pick.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); }
html .accent-pick { border: 1px solid var(--line); font-weight: 550; }
html .accent-pick:hover { transform: none; }
html .accent-pick.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
html .acc-tools input, html .quotes-tools input, html .aq-tools input, html .eng-tools input[type="search"], html .pb-tools input { padding-left: 36px; }
/* Home: your numbers first, a shorter banner */
html .h-hero { aspect-ratio: auto; height: clamp(160px, 22vw, 240px); min-height: 0; }
html #hDayWrap { margin-top: 20px; }
html .v4-cmd .v4-cmd-in input#v4CmdQ, html .v4-cmd .v4-cmd-in input#v4CmdQ:focus, html .v4-cmd .v4-cmd-in input#v4CmdQ:hover { border: 0; box-shadow: none; background: none; min-height: 0; height: 50px; padding: 0; font-size: 15px; }