/* ============================================================
   Fratco App v5.00 design system  ("Field Guide")
   One stylesheet that sits on top of the earlier layers and re-skins every page.
   Made for people who are not computer people: big type, big buttons, plain words,
   high contrast, one clear thing to do on each screen. Light by default; dark and
   accent colors still work. Every color is a token.
   ============================================================ */

:root:root:root {
  --bg: #F6F3ED; --bg-2: #ECE7DD; --surface: #FFFFFF; --surface-2: #FBF9F5; --surface-3: #F2EEE5;
  --ink: #161A22; --ink-soft: #444B5B; --ink-faint: #666D7D;
  --line: #E6E0D5; --line-2: #CFC8B9;
  --nav-bg: #0E1A33; --nav-2: #16264A; --nav-ink: #F3F6FC; --nav-soft: #AEBAD3; --nav-line: rgba(255,255,255,.10);
  --m-home: var(--acc); --m-app: #0D7C4A; --m-engineering: #1D5FC4; --m-production: #C26400; --m-admin: #6B3FD1; --m-account: #0A7E94;
  --good: #0E7A44; --good-bg: #DDF3E6; --warn: #8A5000; --warn-bg: #FFEFCB; --bad: #B01F2C; --bad-bg: #FDE6E8;
  --pe: #1E60B4; --pp: #B4660A;
  --radius: 20px; --radius-sm: 14px; --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(22,26,34,.06);
  --shadow: 0 1px 2px rgba(22,26,34,.05), 0 12px 32px -16px rgba(22,26,34,.18);
  --shadow-lg: 0 28px 70px -24px rgba(14,26,51,.45), 0 6px 18px rgba(14,26,51,.10);
  --focus: 0 0 0 4px color-mix(in srgb, var(--acc) 26%, transparent);
  --side-w: 296px; --tabs-h: 76px; --head-h: 60px;
  --r-soft: color-mix(in srgb, var(--red) 9%, var(--surface));
  color-scheme: light;
}
:root:root:root[data-theme="dark"] {
  --bg: #0B1120; --bg-2: #0F172A; --surface: #131C31; --surface-2: #18223A; --surface-3: #1F2B47;
  --ink: #F2F5FB; --ink-soft: #C5CEE0; --ink-faint: #9BA7C2;
  --line: #24314F; --line-2: #34456B;
  --nav-bg: #070C1A; --nav-2: #101A33;
  --m-app: #3DD68C; --m-engineering: #6EA8FF; --m-production: #FFB547; --m-admin: #B197FF; --m-account: #2BD0E8;
  --good: #52D98F; --good-bg: #10301F; --warn: #FFC55C; --warn-bg: #332508; --bad: #FF7B86; --bad-bg: #3A1218;
  --pe: #7DB6FF; --pp: #FFB85C;
  --shadow-sm: none; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 28px 70px -20px rgba(0,0,0,.75);
  --r-soft: color-mix(in srgb, var(--red) 18%, var(--surface));
  color-scheme: dark;
}
/* the earlier layers switch to dark with the phone's setting; from v5 the person chooses */
@media (prefers-color-scheme: dark) {
  :root:root:root:not([data-theme="dark"]) {
    --bg: #F6F3ED; --bg-2: #ECE7DD; --surface: #FFFFFF; --surface-2: #FBF9F5; --surface-3: #F2EEE5;
    --ink: #161A22; --ink-soft: #444B5B; --ink-faint: #666D7D; --line: #E6E0D5; --line-2: #CFC8B9;
    --nav-bg: #0E1A33; --nav-2: #16264A;
    --m-app: #0D7C4A; --m-engineering: #1D5FC4; --m-production: #C26400; --m-admin: #6B3FD1; --m-account: #0A7E94;
    --good: #0E7A44; --good-bg: #DDF3E6; --warn: #8A5000; --warn-bg: #FFEFCB; --bad: #B01F2C; --bad-bg: #FDE6E8;
    --pe: #1E60B4; --pp: #B4660A;
    --red: var(--acc); --red-2: var(--acc-2); --red-dark: var(--acc-d);
    --shadow-sm: 0 1px 2px rgba(22,26,34,.06);
    --shadow: 0 1px 2px rgba(22,26,34,.05), 0 12px 32px -16px rgba(22,26,34,.18);
    --shadow-lg: 0 28px 70px -24px rgba(14,26,51,.45), 0 6px 18px rgba(14,26,51,.10);
    color-scheme: light;
  }
}

html body {
  background: var(--bg); background-image: none;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.55; font-weight: 500;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html body h1, html body h2, html body h3, html body .display { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); }
html body p { margin: 0; }
html body a { color: var(--red); font-weight: 700; }
html body a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body ::selection { background: color-mix(in srgb, var(--red) 28%, transparent); color: inherit; }
html body :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; box-shadow: none; border-radius: 10px; }
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible { outline: none; }
html body .num, html body [class*="-amt"], html body .big, html body .kpi-val, html body .dw-price, html body .size-lbl { font-variant-numeric: tabular-nums; }

/* ---------- buttons: big, plain, one obvious main button ---------- */
html body .btn, html body button.btn {
  min-height: 56px; padding: 0 26px; border-radius: 16px; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.005em;
  gap: 10px; line-height: 1.1; box-shadow: none; text-decoration: none;
}
html body .btn::after { display: none; }
html body .btn-primary, html body .btn.btn-primary {
  background: linear-gradient(180deg, var(--red-2) -30%, var(--red) 40%, var(--red-dark) 140%); color: #fff; border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 22px -8px color-mix(in srgb, var(--red) 65%, transparent);
}
html body .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 30px -10px color-mix(in srgb, var(--red) 75%, transparent); text-decoration: none; }
html body .btn-primary:active:not(:disabled) { transform: translateY(0) scale(.985); }
html body .btn-primary:disabled { background: var(--line-2); color: var(--ink-faint); box-shadow: none; }
html body .btn-outline { background: var(--surface); color: var(--red); border: 2.5px solid var(--red); box-shadow: none; }
html body .btn-outline:hover:not(:disabled) { background: var(--r-soft); text-decoration: none; }
html body .btn-sm { min-height: 46px; padding: 0 18px; font-size: 15px; border-radius: 13px; }
html body .btn-xl { min-height: 64px; font-size: 19px; border-radius: 18px; }
html body .btn-block { width: 100%; }
html body .btn.celebrate, html body .btn-primary.celebrate { background: linear-gradient(180deg, #2fb877, var(--good)); box-shadow: 0 10px 24px -8px rgba(14,122,68,.6); }
html body .text-btn { width: 100%; min-height: 52px; padding: 12px 16px; border: 2px dashed var(--line-2); border-radius: 16px; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 16px; cursor: pointer; margin: 8px 0 0; }
html body .text-btn:hover { border-color: var(--red); color: var(--red); background: var(--r-soft); }
html body .text-btn.inline { width: auto; min-height: 44px; margin: 0; padding: 8px 16px; border-style: solid; border-width: 1.5px; font-size: 15px; }
html body .text-btn.danger-link { border: 0; background: none; min-height: 48px; color: var(--ink-faint); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; margin-top: 4px; }
html body .text-btn.danger-link:hover { color: var(--bad); background: none; }
html body .text-btn.armed { border-color: var(--bad); background: var(--bad); color: #fff; text-decoration: none; }

/* ---------- forms ---------- */
html body input:not([type]), html body input[type="text"], html body input[type="number"], html body input[type="email"], html body input[type="password"],
html body input[type="date"], html body input[type="search"], html body input[type="tel"], html body textarea, html body select {
  font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink);
  min-height: 56px; padding: 12px 16px; border: 2px solid var(--line-2); border-radius: 14px; background-color: var(--surface);
  box-shadow: inset 0 1px 2px rgba(22,26,34,.04);
}
html body textarea { min-height: 96px; line-height: 1.45; }
html body select { padding-right: 46px; background-position: right 16px center; background-size: 14px; }
html body input::placeholder, html body textarea::placeholder { color: var(--ink-faint); font-weight: 500; opacity: .85; }
html body input:hover, html body textarea:hover, html body select:hover { border-color: color-mix(in srgb, var(--ink-faint) 70%, var(--line-2)); }
html body input:focus, html body textarea:focus, html body select:focus { border-color: var(--red); box-shadow: var(--focus); }
html body input[readonly], html body input:disabled, html body select:disabled { background: var(--surface-3); color: var(--ink-soft); border-color: var(--line); box-shadow: none; }
html body input[type="checkbox"], html body input[type="radio"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--red); box-shadow: none; }
html body .fg label, html body .qf-row label, html body label.f-label, html body .field label {
  display: block; font-size: 16px; font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 8px;
}
html body .qf-row label .opt { font-weight: 500; color: var(--ink-faint); }
html body .qf-row { margin-bottom: 18px; }
html body .qf-row.two { gap: 14px; }
html body .qf-msg { font-size: 16px; margin-top: 14px; }

/* ---------- cards ---------- */
html body .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 22px; box-shadow: var(--shadow); }
html body .section-head { margin-bottom: 20px; align-items: center; }
html body .section-head h2 { font-size: 26px; font-weight: 800; }
html body .section-head p { font-size: 16px; color: var(--ink-soft); margin-top: 4px; }
html body .note { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
html body .count-pill { min-width: 30px; height: 30px; border-radius: 999px; font-size: 15px; font-weight: 800; background: var(--red); }
html body .view-note { font-size: 15px; border-radius: 14px; padding: 12px 16px; }
html body .empty-state { font-size: 17px; padding: 40px 20px; color: var(--ink-soft); }
html body .empty-state strong { display: block; font-size: 20px; color: var(--ink); margin-bottom: 4px; }
html body .badge { font-size: 13.5px; padding: 5px 12px; font-weight: 800; }

/* ---------- segmented switches ---------- */
html body .seg, html body .seg.light { background: var(--surface-3); border: 2px solid var(--line); border-radius: 16px; padding: 4px; gap: 4px; }
html body .seg button { min-height: 48px; padding: 0 18px; font: 750 16px 'Inter', sans-serif; color: var(--ink-soft); border-radius: 12px; opacity: 1; }
html body .seg button:hover { color: var(--ink); }
html body .seg button.on { background: var(--surface); color: var(--red); box-shadow: 0 1px 3px rgba(22,26,34,.18), 0 0 0 2px var(--red); }

/* ---------- toasts ---------- */
html body .toast { font-size: 17px; font-weight: 700; padding: 16px 22px; border-radius: 16px; max-width: 420px; background: var(--nav-bg); color: #fff; box-shadow: var(--shadow-lg); }
html body .toast.ok { background: var(--good); color: #fff; }
html body .toast.err { background: var(--bad); color: #fff; }
html body .toast .toast-btn { margin-left: 14px; }

html body .preview-banner { font-size: 15px; padding: 10px 16px; }

/* boot */
html body .boot { background: var(--bg); }
html body .boot img { width: 150px; }
html body .boot-bar { width: 150px; height: 5px; border-radius: 5px; background: var(--line); }

/* ================= APP SHELL: sidebar (computers) and tabs (phones) ================= */
.v5-side, .v5-tabs { display: none; }

/* small screens: a slim top bar with the logo, and big tabs along the bottom */
html body .topbar { position: sticky; top: 0; z-index: 30; height: var(--head-h); padding: 0 16px; background: var(--nav-bg); color: #fff; border: 0; box-shadow: 0 2px 0 var(--red); justify-content: flex-start; gap: 12px; }
html body .topbar::after { display: none; }
html body .topbar .brand { color: #fff; margin-right: auto; }
html body .topbar .brand span { color: #fff; font-size: 17px; font-weight: 800; }
html body .topbar .brand .ver { display: none; }
html body .topbar .fmark { height: 30px; border-radius: 6px; }
html body .topbar nav, html body .topbar .who .pill, html body .topbar .logout-btn, html body .topbar .hamburger-btn { display: none !important; }
html body .topbar .who { color: #fff; font-size: 15px; font-weight: 700; }
html body .topbar .who span, html body .topbar .who a { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
html body .topbar { top: 0; }

@media (max-width: 899px) {
  html body.v5 .v5-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 2px solid var(--line);
    box-shadow: 0 -10px 30px -12px rgba(14,26,51,.22);
  }
  html body.v5 .v5-tab {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: var(--ink-soft);
    font: 750 13px 'Inter', sans-serif; text-decoration: none; border-radius: 14px; cursor: pointer; padding: 4px 2px; position: relative; -webkit-tap-highlight-color: transparent;
  }
  html body.v5 .v5-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html body.v5 .v5-tab:hover { text-decoration: none; }
  html body.v5 .v5-tab.on { color: var(--red); background: var(--r-soft); }
  html body.v5 .v5-tab.on::before { content: ''; position: absolute; top: -8px; left: 22%; right: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--red); }
  html body.v5 .toast-wrap { bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); left: 12px; right: 12px; align-items: stretch; }
  html body.v5 .app-shell { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
  html body.v5 main.container { padding: 18px 14px 40px; }
}

@media (min-width: 900px) {
  html body.v5 .topbar { display: none; }
  html body.v5 .app-shell, html body.v5 > .boot ~ .app-shell { padding-left: var(--side-w); }
  html body.v5 main .tabs { display: none; }        /* sections live in the sidebar */
  html body.v5 .v5-side {
    display: flex; flex-direction: column; gap: 6px; position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 35;
    padding: 22px 16px 16px; color: var(--nav-ink); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
    background:
      radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%),
      linear-gradient(180deg, var(--nav-bg), #0A1226 100%);
    border-right: 1px solid rgba(255,255,255,.06);
  }
  html body.v5 main.container { padding: 34px 40px 100px; }
}
html body.v5 .v5-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; color: #fff; text-decoration: none; }
html body.v5 .v5-brand:hover { text-decoration: none; }
html body.v5 .v5-logo { display: inline-flex; background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
html body.v5 .v5-logo img { height: 28px; width: auto; display: block; }
html body.v5 .v5-app { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
html body.v5 .v5-new {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border-radius: 18px; color: #fff; font-size: 19px; font-weight: 800; text-decoration: none;
  background: linear-gradient(180deg, var(--red-2) -40%, var(--red) 45%, var(--red-dark) 150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 14px 30px -10px color-mix(in srgb, var(--red) 80%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
}
html body.v5 .v5-new:hover { transform: translateY(-2px); text-decoration: none; }
html body.v5 .v5-find {
  display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 6px 0 4px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: var(--nav-soft); font: 650 16px 'Inter', sans-serif; cursor: pointer; text-align: left;
}
html body.v5 .v5-find:hover { background: rgba(255,255,255,.11); color: #fff; }
html body.v5 .v5-find span { flex: 1; }
html body.v5 .v5-find kbd { font: 700 12px 'Inter'; color: var(--nav-soft); border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 2px 7px; background: rgba(255,255,255,.06); }
html body.v5 .v5-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; flex: 1; }
html body.v5 .v5-group { margin: 18px 10px 6px; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(174,186,211,.75); }
html body.v5 .v5-link {
  --mc: var(--m-home);
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 14px 0 10px; border-radius: 16px; border: 0; background: none; width: 100%;
  color: var(--nav-soft); font: 750 18px 'Inter', sans-serif; text-decoration: none; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
html body.v5 .v5-link[data-mod="app"] { --mc: var(--m-app); }
html body.v5 .v5-link[data-mod="engineering"] { --mc: var(--m-engineering); }
html body.v5 .v5-link[data-mod="production"] { --mc: var(--m-production); }
html body.v5 .v5-link[data-mod="admin"] { --mc: var(--m-admin); }
html body.v5 .v5-link[data-mod="account"] { --mc: var(--m-account); }
html body.v5 .v5-link.v5-help { --mc: #F6B73C; }
html body.v5 .v5-link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
html body.v5 .v5-link.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); }
html body.v5 .v5-link.on::before { content: ''; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 6px; border-radius: 0 6px 6px 0; background: var(--mc); box-shadow: 0 0 14px var(--mc); }
html body.v5 .v5-chip {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc, var(--acc)) 26%, transparent); color: color-mix(in srgb, var(--mc, var(--acc)) 45%, #fff);
}
html body.v5 .v5-link.on .v5-chip { background: var(--mc); color: #fff; }
html body.v5 .v5-foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--nav-line); display: flex; flex-direction: column; gap: 10px; }
html body.v5 .v5-size {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 1.5px dashed rgba(255,255,255,.28); background: none;
  color: var(--nav-ink); font: 700 16px 'Inter', sans-serif; cursor: pointer; text-align: left;
}
html body.v5 .v5-size:hover { background: rgba(255,255,255,.08); }
html body.v5 .v5-size b { color: #FFD27A; }
html body.v5 .v5-user { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
html body.v5 .v5-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--red-2), var(--red-dark)); box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
html body.v5 .v5-avatar.lg { width: 56px; height: 56px; font-size: 20px; }
html body.v5 .v5-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html body.v5 .v5-who strong { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.v5 .v5-who span { font-size: 14px; color: var(--nav-soft); font-weight: 600; }
html body.v5 .v5-out { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.18); background: none; color: var(--nav-ink); font: 750 16px 'Inter', sans-serif; cursor: pointer; }
html body.v5 .v5-out:hover { background: rgba(255,255,255,.1); }

/* page header */
html body.v5 .v5-head { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; padding: 0; border: 0; background: none; position: static; --mc: var(--m-home); }
html body.v5 .v5-head[data-mod="app"] { --mc: var(--m-app); }
html body.v5 .v5-head[data-mod="engineering"] { --mc: var(--m-engineering); }
html body.v5 .v5-head[data-mod="production"] { --mc: var(--m-production); }
html body.v5 .v5-head[data-mod="admin"] { --mc: var(--m-admin); }
html body.v5 .v5-head[data-mod="account"] { --mc: var(--m-account); }
html body.v5 .v5-head-chip { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--mc) 78%, #fff), var(--mc)); box-shadow: 0 12px 24px -10px var(--mc); }
html body.v5 .v5-head h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
html body.v5 .v5-crumb { font-size: 18px; color: var(--ink-soft); margin-top: 4px; font-weight: 550; }
@media (max-width: 640px) {
  html body.v5 .v5-head { gap: 14px; margin-bottom: 20px; }
  html body.v5 .v5-head-chip { width: 50px; height: 50px; border-radius: 16px; }
  html body.v5 .v5-head h1 { font-size: 30px; }
  html body.v5 .v5-crumb { font-size: 16px; }
  html body .card { padding: 20px 18px; border-radius: 20px; margin-bottom: 16px; }
}

/* phone "More" sheet */
html body.v5 .v5-sheet { position: fixed; inset: 0; z-index: 250; background: rgba(8,14,30,.55); display: none; align-items: flex-end; }
html body.v5 .v5-sheet.open { display: flex; }
html body.v5 .v5-sheet-box { width: 100%; max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: 28px 28px 0 0; padding: 12px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); animation: v5Up .28s cubic-bezier(.2,.8,.2,1); }
@keyframes v5Up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
html body.v5 .v5-sheet-grab { width: 52px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 0 auto 16px; }
html body.v5 .v5-sheet-who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
html body.v5 .v5-sheet-who > div { display: flex; flex-direction: column; flex: 1; }
html body.v5 .v5-sheet-who strong { font-size: 20px; font-weight: 800; }
html body.v5 .v5-sheet-who span { color: var(--ink-soft); font-size: 15px; }
html body.v5 .v5-sheet-x { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
html body.v5 .v5-sheet-list { display: flex; flex-direction: column; gap: 6px; }
html body.v5 .v5-sheet-list a, html body.v5 .v5-sheet-list > button {
  --mc: var(--acc);
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 14px; border-radius: 16px; border: 0; background: var(--surface-2); color: var(--ink); font: 750 18px 'Inter', sans-serif; text-decoration: none; cursor: pointer; text-align: left; width: 100%;
}
html body.v5 .v5-sheet-list a > svg:last-child, html body.v5 .v5-sheet-list > button > svg:last-child { margin-left: auto; color: var(--ink-faint); }
html body.v5 .v5-sheet-list .v5-chip { background: var(--r-soft); color: var(--red); }
html body.v5 .v5-sheet-list .danger { color: var(--bad); background: var(--bad-bg); }
html body.v5 .v5-sheet-list .danger .v5-chip { background: none; color: var(--bad); }
html body.v5 .v5-size-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 14px; border-radius: 16px; border: 2px dashed var(--line-2); background: none; color: var(--ink); font: 750 18px 'Inter', sans-serif; cursor: pointer; text-align: left; }
html body.v5 .v5-size-row b { color: var(--red); }

/* modals: help + search */
html body.v5 .v5-modal { position: fixed; inset: 0; z-index: 300; background: rgba(8,14,30,.6); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
html body.v5 .v5-modal.open { display: flex; }
html body.v5 .v5-modal-box { position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: 28px; padding: 34px 34px 30px; box-shadow: var(--shadow-lg); animation: v5Pop .25s cubic-bezier(.2,.8,.2,1); }
@keyframes v5Pop { from { transform: scale(.96) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
html body.v5 .v5-modal-x { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface-3); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
html body.v5 .v5-modal-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
html body.v5 .v5-modal h2 { font-size: 32px; margin-bottom: 20px; padding-right: 50px; }
html body.v5 .v5-help-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
html body.v5 .v5-help-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.5; }
html body.v5 .v5-help-steps li b { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-size: 17px; font-weight: 800; }
html body.v5 .v5-help-tip { background: var(--good-bg); color: var(--good); border-radius: 14px; padding: 14px 16px; font-size: 16px; font-weight: 650; margin-bottom: 18px; }
html body.v5 .v5-help-call { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 17px; margin-bottom: 22px; }
html body.v5 .v5-help-call span { font-weight: 800; margin-right: 4px; }
html body.v5 .v5-cmd { align-items: flex-start; padding-top: 12vh; }
html body.v5 .v5-cmd-box { width: 100%; max-width: 640px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
html body.v5 .v5-cmd-in { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 2px solid var(--line); color: var(--ink-faint); }
html body.v5 .v5-cmd-in input { flex: 1; border: 0; box-shadow: none; background: none; min-height: 68px; font-size: 20px; padding: 0; }
html body.v5 .v5-cmd-in input:focus { box-shadow: none; }
html body.v5 .v5-cmd-in kbd { font: 700 12px 'Inter'; border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 8px; color: var(--ink-faint); }
html body.v5 .v5-cmd-list { max-height: 50vh; overflow-y: auto; padding: 10px; }
html body.v5 .v5-cmd-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-radius: 14px; background: none; font: 750 18px 'Inter'; color: var(--ink); cursor: pointer; text-align: left; }
html body.v5 .v5-cmd-item em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink-faint); }
html body.v5 .v5-cmd-item.on { background: var(--r-soft); color: var(--red); }
html body.v5 .v5-cmd-none { padding: 24px; text-align: center; color: var(--ink-soft); font-size: 17px; }
html body.v5 .v5-head-help { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 750 16px 'Inter'; cursor: pointer; }
html body.v5 .v5-head-help:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 640px) { html body.v5 .v5-head-help span { display: none; } html body.v5 .v5-head-help { width: 48px; padding: 0; justify-content: center; } html body.v5 .v5-modal-box { padding: 26px 20px 22px; border-radius: 24px; } html body.v5 .v5-modal h2 { font-size: 26px; } }

/* sub-links under the current team page (Admin: Dashboard, Users, ...) */
html body.v5 .v5-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 33px; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.14); }
html body.v5 .v5-sublink { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--nav-soft); font: 700 16.5px 'Inter', sans-serif; text-align: left; cursor: pointer; }
html body.v5 .v5-sublink:hover { background: rgba(255,255,255,.08); color: #fff; }
html body.v5 .v5-sublink.on { background: rgba(255,255,255,.15); color: #fff; }
html body.v5 .v5-sheet-label { margin: 14px 4px 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* the section tabs live in the sidebar (computers) and the bottom bar / More sheet (phones) */
html body.v5 main .tabs { display: none; }

/* ================= NEW QUOTE ================= */
/* steps bar */
html body .steps { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 12px; }
html body .steps li { flex: 1; min-width: 0; }
html body .step { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); color: var(--ink-soft); font-weight: 800; font-size: 18px; text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
html body .step:hover { text-decoration: none; border-color: var(--line-2); color: var(--ink); }
html body .step b { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--ink-soft); font-size: 18px; font-weight: 800; transition: background .2s, color .2s; }
html body .step span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .step.on { border-color: var(--red); color: var(--ink); background: var(--r-soft); }
html body .step.on b { background: var(--red); color: #fff; }
html body .step.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--ink); }
html body .step.done b { background: var(--good); color: #fff; font-size: 0; }
html body .step.done b::before { content: ''; width: 9px; height: 16px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) translate(-1px, -2px); }
@media (max-width: 640px) { html body .steps { gap: 6px; } html body .step { min-height: 56px; padding: 0 8px; gap: 8px; font-size: 14px; justify-content: center; flex-direction: column; text-align: center; padding: 6px 4px; } html body .step b { width: 30px; height: 30px; font-size: 15px; } }

/* layout */
html body .order-layout { display: flex; flex-direction: column; gap: 22px; }
html body .order-main { order: 1; min-width: 0; }
html body .order-side { display: block; order: 2; position: static; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
@media (min-width: 1180px) {
  html body .order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 26px; align-items: start; }
  html body .order-main { grid-column: 1; grid-row: 1; order: 0; }
  html body .order-side { grid-column: 2; grid-row: 1; order: 0; position: sticky; top: 22px; max-height: calc(100vh - 44px); overflow-y: auto; scrollbar-width: thin; padding: 0 4px 30px 0; margin-right: -4px; }
}

/* step cards */
html body .step-card { padding: 30px; scroll-margin-top: 20px; }
html body .step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
html body .step-head > div { flex: 1; min-width: 0; }
html body .step-head h2 { font-size: 28px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
html body .step-head p { font-size: 17px; color: var(--ink-soft); margin-top: 4px; }
html body .step-num { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--red-2), var(--red-dark)); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--red) 70%, transparent); }
html body .step-num.done-ico { background: var(--surface-3); color: var(--ink-soft); box-shadow: none; }
html body .step-num svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { html body .step-card { padding: 22px 18px; } html body .step-head h2 { font-size: 23px; } html body .step-head p { font-size: 15.5px; } html body .step-num { width: 44px; height: 44px; font-size: 20px; } }

/* first-visit welcome */
html body .howto { background: var(--surface); border: 2px solid var(--red); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 22px; box-shadow: var(--shadow); }
html body .howto-title { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
html body .howto-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
html body .howto-steps li { display: flex; gap: 14px; font-size: 18px; line-height: 1.5; align-items: flex-start; }
html body .howto-steps li b { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }

/* product kind tabs: three big buttons */
html body .seg-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: none; border: 0; padding: 0; margin-bottom: 20px; overflow: visible; }
html body .seg-tabs .seg-ind { display: none; }
html body .seg-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 8px; border-radius: 20px; border: 2.5px solid var(--line); background: var(--surface);
  font: 800 18px 'Inter', sans-serif; color: var(--ink-soft); white-space: normal; text-align: center; line-height: 1.15; box-shadow: none; transition: border-color .15s, background .15s, color .15s, transform .12s;
}
html body .seg-tabs button svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body .seg-tabs button:hover { border-color: var(--line-2); color: var(--ink); }
html body .seg-tabs button:active { transform: scale(.98); }
html body .seg-tabs button.on { border-color: var(--red); background: var(--r-soft); color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent); }
@media (max-width: 640px) { html body .seg-tabs { gap: 8px; } html body .seg-tabs button { min-height: 88px; font-size: 15px; border-radius: 16px; } html body .seg-tabs button svg { width: 30px; height: 30px; } }

/* Smooth-Corr / Pro-Corr chooser */
html body .line-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
html body .line-card { border: 2.5px solid var(--line); border-radius: 20px; padding: 18px 18px 16px; gap: 4px; background: var(--surface); box-shadow: none; animation: none; }
html body .line-card:hover { transform: none; border-color: var(--line-2); box-shadow: var(--shadow-sm); }
html body .line-card .lc-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
html body .line-card .lc-desc { font-size: 15.5px; color: var(--ink-soft); font-weight: 550; }
html body .line-card .lc-lens { font-size: 14px; }
html body .line-card .lc-art { width: 68px; height: 46px; color: var(--ink-faint); margin-bottom: 8px; }
html body .line-card .lc-mat { top: 14px; right: 16px; font-size: 13px; padding: 3px 10px; font-weight: 800; }
html body .line-card.on { border-color: var(--red); background: var(--r-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent); }
html body .line-card.on .lc-art { color: var(--red); }
html body .dw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .dw-card { padding: 18px 20px; }
html body .dw-card::after { font-size: 30px; right: 18px; }
html body .dw-card .lc-mat { right: 46px; }
html body .dw-card-count { right: 20px; bottom: 16px; font-size: 14px; padding: 3px 12px; }
html body .dw-hint { border: 2px dashed var(--line-2); border-radius: 18px; padding: 22px; font-size: 18px; color: var(--ink-soft); }
html body .nest-note { background: var(--surface-2); border-radius: 16px; padding: 14px 18px; margin: 4px 0 12px; }
@media (max-width: 640px) { html body .line-card .lc-name { font-size: 18px; } html body .line-card .lc-desc { font-size: 14px; } html body .line-card .lc-art { width: 52px; height: 36px; } }

/* stick length chips */
html body .dw-head { margin: 8px 0 14px; gap: 14px; }
html body .material-header { font-size: 22px; font-weight: 800; margin: 0; gap: 10px; }
html body .material-header .mh-sub { font-size: 15.5px; font-weight: 600; color: var(--ink-soft); }
html body .material-dot { width: 14px; height: 14px; }
html body .len-chips { gap: 8px; }
html body .len-chip { min-height: 48px; padding: 0 20px; font-size: 17px; font-weight: 800; border: 2.5px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-soft); box-shadow: none; }
html body .len-chip:hover { transform: none; border-color: var(--ink-faint); color: var(--ink); }
html body .len-chip.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--red) 70%, transparent); }
html body .len-badge { min-width: 24px; height: 24px; font-size: 13px; }

/* size tiles: the heart of quoting */
html body .order-list { background: none; border: 0; border-radius: 0; overflow: visible; margin-bottom: 16px; }
html body .order-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
html body .order-list.grid .order-item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "size price" "sub sub" "qty qty" "meta meta" "admin admin"; align-items: center; column-gap: 10px;
  padding: 20px 20px 16px; margin: 0; border: 2.5px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
html body .order-list.grid .order-item:hover { background: var(--surface); border-color: var(--line-2); }
html body .order-list.grid .order-item:focus-within { border-color: var(--red); box-shadow: var(--focus); }
html body .order-list.grid .order-item.has-qty { border-color: var(--red); background: var(--r-soft); box-shadow: none; }
html body .order-list.grid .order-item.has-qty:focus-within { box-shadow: var(--focus); }
html body .order-list.grid .size-lbl { grid-area: size; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
html body .order-list.grid .has-qty .size-lbl { color: var(--red); }
html body .order-list.grid .dw-price { grid-area: price; padding: 0; margin: 0; text-align: right; font-size: 16px; font-weight: 750; color: var(--ink-soft); font-family: 'Inter', sans-serif; letter-spacing: -0.01em; }
html body .order-list.grid .dw-sub { grid-area: sub; margin: 6px 0 14px; font-size: 15.5px; font-weight: 550; color: var(--ink-soft); }
html body .order-list.grid .order-row, html body .order-list.grid .order-row > div:first-child { display: contents; }
html body .order-list.grid .qx { grid-area: qty; width: 100%; height: 64px; }
html body .order-list.grid .qx-meta { grid-area: meta; padding: 12px 0 0; margin: 0; min-height: 40px; }
html body .order-list.grid .admin-margin-row { grid-area: admin; padding: 14px 0 0; margin-top: 12px; border-top: 2px dashed var(--line); justify-content: flex-start; }

/* quantity box: - [ 40 ] + */
html body .qx { display: inline-flex; align-items: stretch; height: 64px; border: 2.5px solid var(--line-2); border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: none; }
html body .qx:focus-within { border-color: var(--red); box-shadow: var(--focus); }
html body .has-qty .qx { border-color: var(--red); }
html body .qx-b { width: 72px; border: 0; background: var(--surface-3); color: var(--ink); font: 700 34px 'Inter', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-tap-highlight-color: transparent; padding-bottom: 3px; }
html body .qx-b:first-child { border-right: 2px solid var(--line); }
html body .qx-b:last-child { border-left: 2px solid var(--line); }
html body .qx-b:hover { background: var(--r-soft); color: var(--red); }
html body .qx-b:active { background: color-mix(in srgb, var(--red) 22%, var(--surface)); transform: scale(.97); }
html body .qx input, html body .order-row .qx input, html body .order-list.grid .order-row .qx input { flex: 1; width: auto; min-width: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; text-align: center; padding: 0 4px; font: 800 28px 'Inter', sans-serif; letter-spacing: -0.02em; color: var(--ink); }
html body .qx input::placeholder { color: var(--line-2); font-weight: 700; }
html body .qx input:focus { box-shadow: none; }
html body .qx input[type=number] { -moz-appearance: textfield; }
html body .qx input::-webkit-outer-spin-button, html body .qx input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body .qx-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 650; color: var(--ink-soft); flex-wrap: wrap; }
html body .qx-meta:empty { display: none; }
html body .qx-meta > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; overflow: visible; }
html body .qx-meta b { color: var(--line-2); }
html body .qx-meta .full { color: var(--good); font-weight: 800; }
html body .qx-bar { width: 56px; height: 8px; border-radius: 8px; background: var(--surface-3); flex: 0 0 auto; }
html body .qx-bar i { background: var(--m-app); border-radius: 8px; }
html body .qx-fill { min-height: 40px; padding: 0 14px; border: 2px solid color-mix(in srgb, var(--red) 40%, var(--line)); border-radius: 999px; background: var(--surface); color: var(--red); font: 800 15px 'Inter', sans-serif; cursor: pointer; white-space: nowrap; margin-left: auto; }
html body .qx-fill:hover { background: var(--r-soft); border-color: var(--red); }
html body .qx-fill.quiet { border-color: var(--line-2); color: var(--ink-soft); font-weight: 750; background: var(--surface); }
html body .qx-fill.quiet:hover { color: var(--red); border-color: var(--red); }
html body .order-item:not(:hover):not(:focus-within) .qx-fill.quiet { opacity: 1; }
@media (max-width: 640px) {
  html body .order-list.grid { grid-template-columns: 1fr; gap: 12px; }
  html body .order-list.grid .order-item { padding: 16px 16px 14px; }
  html body .order-list.grid .size-lbl { font-size: 32px; }
  html body .qx-b { width: 76px; }
}

/* admin fields inside a tile */
html body .admin-margin-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
html body .admin-min-margin { font-size: 14px; font-weight: 800; color: var(--red); }
html body .admin-margin-field label { font-size: 14px; font-weight: 700; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
html body .admin-margin-field input { width: 88px; min-height: 46px; font-size: 17px; text-align: right; padding: 8px 10px; }
html body .admin-nit { font-size: 15px; font-weight: 750; gap: 8px; }
html body .admin-sell { font-size: 15px; font-weight: 700; color: var(--ink); }
html body .admin-dlv { font-size: 14px; color: var(--ink-soft); }
html body input.below-min, html body .admin-margin-field input.below-min { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }

/* pipe & coils builder */
html body .form-grid { gap: 16px; margin-bottom: 16px; }
html body .color-chips { display: flex; gap: 10px; flex-wrap: wrap; }
html body .preview-box { background: var(--surface-2); border: 2px solid var(--line); border-radius: 20px; padding: 18px 20px; margin-bottom: 16px; gap: 6px 14px; }
html body .pv-math { font-size: 16px; color: var(--ink-soft); }
html body .pv-total { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
html body .pv-meta, html body .pv-admin, html body .pv-none { font-size: 15px; }
html body .pb-actions { gap: 14px; align-items: stretch; }
html body .stepper { border: 2.5px solid var(--line-2); border-radius: 18px; height: 64px; background: var(--surface); }
html body .stepper button { width: 64px; font-size: 30px; font-weight: 700; background: var(--surface-3); color: var(--ink); }
html body .stepper button:hover:not(:disabled) { background: var(--r-soft); color: var(--red); }
html body .stepper input { width: 84px; min-height: 0; font-size: 26px; font-weight: 800; padding: 0; }
html body .pb-admin { border-radius: 18px; padding: 14px 16px; gap: 14px; background: var(--r-soft); }
html body .pb-admin-fields label { font-size: 15px; text-transform: none; letter-spacing: 0; }
html body .pb-admin-fields input { min-height: 48px; width: 110px; }
html body .pb-admin-tag { font-size: 12px; padding: 3px 10px; }

/* fittings browser */
html body .acc-tools { gap: 12px; margin-bottom: 16px; }
html body .acc-tools input { padding-left: 48px; background-position: 16px center; background-size: 20px; }
html body .acc-results, html body #accPriceList { border: 2px solid var(--line); border-radius: 20px; background: var(--surface); }
html body .acc-row { padding: 14px 18px; gap: 14px; grid-template-columns: minmax(0, 1fr) auto 84px auto; }
html body .acc-label { font-size: 18px; font-weight: 750; line-height: 1.3; }
html body .acc-cat { font-size: 14.5px; color: var(--ink-soft); }
html body .acc-price { font-size: 17px; font-weight: 800; }
html body .acc-qty { width: 84px; min-height: 52px; font-size: 20px; padding: 6px !important; }
html body .acc-add { min-width: 96px; }
html body .acc-cat-head { font-size: 15px; font-weight: 800; padding: 10px 18px; background: var(--surface-3); }
@media (max-width: 640px) { html body .acc-row { grid-template-columns: minmax(0, 1fr) auto; } }

/* on this quote */
html body .items-list { gap: 12px; }
html body .item-row { grid-template-columns: minmax(0, 1fr) auto 130px 52px; gap: 14px; padding: 16px 14px 16px 20px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface); }
html body .item-row.below { border-color: var(--bad); background: var(--bad-bg); }
html body .item-title { font-size: 18px; font-weight: 800; line-height: 1.3; }
html body .item-sub { font-size: 15.5px; color: var(--ink-soft); font-weight: 550; }
html body .item-admin { font-size: 14.5px; }
html body .item-admin input { min-height: 44px; width: 84px; font-size: 16px; }
html body .item-amt { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
html body .item-x { width: 48px; height: 48px; border-radius: 14px; font-size: 26px; color: var(--ink-faint); background: var(--surface-3); }
html body .item-x:hover { background: var(--bad-bg); color: var(--bad); transform: none; }
html body .stepper.sm { height: 52px; border-radius: 14px; }
html body .stepper.sm button { width: 46px; font-size: 24px; }
html body .stepper.sm input { width: 62px; font-size: 20px; }
html body .items-empty { border: 2.5px dashed var(--line-2); border-radius: 20px; padding: 34px 20px; font-size: 18px; color: var(--ink-soft); }
html body .empty-art { width: 140px; height: 74px; color: var(--line-2); }
@media (max-width: 720px) { html body .item-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main x" "step amt"; padding: 14px; } }

/* trucks */
html body .savings-card, html body .fill-card { border-radius: 18px; padding: 16px 20px; font-size: 17px; font-weight: 650; line-height: 1.5; margin-bottom: 14px; }
html body .savings-card strong { font-weight: 800; }
html body .fill-bar { height: 12px; border-radius: 8px; margin: 12px 0 10px; }
html body .fill-sub { font-size: 14.5px; }
html body .truck { width: 170px; }
html body .truck svg { width: 170px; height: 70px; }
html body .truck-lbl { font-size: 15px; }
html body .breakdown-card { background: var(--surface-2); border: 2px solid var(--line); border-radius: 18px; padding: 16px 20px; margin-bottom: 10px; font-size: 16px; }
html body .bsize { font-size: 19px; font-weight: 800; }
html body .btrucks { font-size: 16px; font-weight: 800; }
html body .breakdown-detail { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }

/* ================= summary card ================= */
html body .total-card {
  position: relative; overflow: hidden; color: #fff; border-radius: 28px; padding: 26px 26px 24px; margin-bottom: 18px; isolation: isolate;
  background: radial-gradient(420px 220px at 105% -10%, color-mix(in srgb, var(--red) 55%, transparent), transparent 65%), linear-gradient(165deg, #182C55 0%, #0E1A33 75%);
  box-shadow: var(--shadow-lg);
}
html body .total-card::before { display: block; content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='white' stroke-opacity='.08' stroke-width='1.5'%3E%3Ccircle cx='18' cy='18' r='14'/%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Ccircle cx='54' cy='54' r='14'/%3E%3Ccircle cx='54' cy='54' r='9'/%3E%3C/g%3E%3C/svg%3E"); }
html body .total-card::after { display: none; }
html body .tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
html body .tc-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-soft); }
html body .tc-level { font-size: 14px; font-weight: 800; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
html body .tc-level:empty { display: none; }
/* the summary card is one dark panel: the earlier layers split it into stacked strips, so undo that first */
html body .total-card > * { padding-left: 0; padding-right: 0; order: 0; background: none; border: 0; border-radius: 0; }
html body .total-card > :first-child { padding-top: 0; }
html body .total-card > .tc-head { order: 0; }
html body .total-card > .stats-row { order: 1; position: static; overflow: visible; background: none; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 4px; padding-bottom: 0; }
html body .total-card > .stats-row::before, html body .total-card > .stats-row::after { display: none; }
html body .total-card > .margin-block { order: 2; }
html body .total-card > .tc-controls { order: 3; padding: 18px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); border-radius: 22px; }
html body .total-card > .level-row { padding-top: 0; }
html body .total-card .stats-row .stat-block.right { order: 1; flex: 0 0 auto; min-width: 0; text-align: left; }
html body .total-card .stats-row .stat-block.right .big { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; padding: 0; background: none; }
html body .total-card .stats-row .stat-block.right .lbl { font-size: 16px; font-weight: 650; text-transform: none; letter-spacing: 0; opacity: 1; color: var(--nav-soft); margin-top: 8px; }
html body .total-card .stats-row .stat-block:not(.right) { order: 2; flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 10px; text-align: left; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 20px 8px 18px; }
html body .total-card .stats-row .stat-block:not(.right) .big { display: inline; min-width: 0; height: auto; padding: 0 !important; border-radius: 0; background: none; color: #fff; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
html body .total-card .stats-row .stat-block:not(.right) .lbl { font-size: 17px; margin: 0; color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: 1; }
html body .total-card .margin-block { margin-top: 20px; padding-top: 18px; border-top: 1.5px solid rgba(255,255,255,.16); }
html body .total-card .margin-stats .big { font-size: 26px; font-weight: 800; color: #fff; }
html body .total-card .margin-stats .lbl { font-size: 13px; text-transform: none; letter-spacing: 0; opacity: 1; color: var(--nav-soft); font-weight: 650; }
html body .total-card .margin-floor { font-size: 14.5px; font-weight: 600; background: rgba(255,255,255,.09); border-radius: 14px; padding: 12px 14px; color: #fff; }
html body .total-card .margin-floor.bad { background: #fff; color: var(--bad); }
html body .total-card .giveup-table th { font-size: 12px; }
html body .total-card .giveup-table td { border-top-color: rgba(176,31,44,.25); }
html body .tc-controls { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
html body .total-card .level-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; border: 0; flex-wrap: wrap; }
html body .total-card .level-row label, html body .total-card .freight-field label, html body .total-card .lm-lbl { font-size: 16px; font-weight: 750; letter-spacing: 0; text-transform: none; opacity: 1; color: #fff; }
html body .level-pick { display: flex; align-items: center; gap: 10px; }
html body .total-card select, html body .total-card .freight-field input { min-height: 54px; background-color: #fff; color: var(--ink); border: 2px solid transparent; border-radius: 14px; font-size: 19px; font-weight: 800; box-shadow: none; }
html body .total-card select { min-width: 84px; padding: 8px 40px 8px 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23161A22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html body .total-card input:focus, html body .total-card select:focus { border-color: #FFD27A; box-shadow: 0 0 0 4px rgba(255,210,122,.3); }
html body .total-card .freight-field input[readonly] { background: rgba(255,255,255,.75); color: var(--ink-soft); }
html body .cmp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 16px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font: 800 16px 'Inter', sans-serif; cursor: pointer; }
html body .cmp-btn:hover { background: rgba(255,255,255,.18); }
html body .total-card .freight-row { gap: 12px; margin: 0; padding: 0; border: 0; }
html body .total-card .freight-field { flex: 1; min-width: 0; }
html body .total-card .freight-field label { margin-bottom: 8px; }
html body .freight-help { font-size: 15px; line-height: 1.45; color: var(--nav-soft); margin-top: -6px; }
html body .total-card .freight-mode-row { margin: 0; padding: 0; border: 0; gap: 10px; }
html body .total-card .seg { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); }
html body .total-card .seg button { color: #fff; opacity: .85; min-height: 46px; padding: 0 14px; font-size: 16px; }
html body .total-card .seg button.on { background: #fff; color: var(--red); opacity: 1; box-shadow: none; }
html body .freight-mode-static { font-size: 15px; color: var(--nav-soft); font-weight: 650; }
html body .freight-rate-lbl { font-size: 14px; color: var(--nav-soft); }
body:not(.lvl-admin) .freight-field:first-child { display: none; }
body:not(.lvl-admin) .freight-rate-lbl { display: none; }
body.lvl-admin .freight-help { display: none; }
@media (max-width: 640px) { html body .total-card { padding: 22px 18px; border-radius: 24px; } html body .total-card .stats-row .stat-block.right .big { font-size: 46px; } html body .total-card .stats-row .stat-block:not(.right) .big { font-size: 28px; } }

/* price breakdown */
html body #priceBreakdownNote { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow); }
html body .pb-head { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
html body .pb-grid { font-size: 17px; gap: 9px 14px; }
html body .pb-grid em { font-size: 14px; }
html body .pb-strong { font-weight: 800 !important; padding-top: 9px; }
html body .pb-total { font-size: 21px; padding-top: 10px; color: var(--ink) !important; }
html body .pb-warn { font-size: 15px; border-radius: 14px; padding: 12px 14px; }

/* the save card */
html body .quote-block { padding: 26px; }
html body .quote-block .step-head { margin-bottom: 18px; }
html body .qf-actions { display: flex; flex-direction: column; gap: 12px; }
html body .qf-actions .btn { width: 100%; flex: none; }
html body .qf-msg .qmsg-pdf { margin-top: 12px; width: 100%; }
html body .more-opts { margin-top: 18px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface-2); overflow: hidden; }
html body .more-opts summary { list-style: none; cursor: pointer; min-height: 60px; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; font-size: 17px; font-weight: 800; position: relative; }
html body .more-opts summary::-webkit-details-marker { display: none; }
html body .more-opts summary span { font-size: 14.5px; font-weight: 550; color: var(--ink-soft); }
html body .more-opts summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px; border: solid var(--ink-soft); border-width: 0 3px 3px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
html body .more-opts[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
html body .more-opts[open] { padding-bottom: 6px; }
html body .more-opts > *:not(summary) { margin-left: 18px; margin-right: 18px; }
html body .more-opts[open] summary { margin-bottom: 10px; }
html body .more-opts .seg { background: var(--surface-3); }
html body .more-opts .seg button { color: var(--ink-soft); }
html body .more-opts .seg button.on { background: var(--surface); color: var(--red); }
html body .more-opts .load-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 18px 14px; padding: 0; border: 0; }
html body .more-opts .lm-lbl { font-size: 16px; font-weight: 750; text-transform: none; letter-spacing: 0; color: var(--ink); opacity: 1; }
html body .page-foot { font-size: 14px; color: var(--ink-faint); padding: 14px 0 10px; }

/* phone: floating total bar */
@media (max-width: 1179px) {
  html body .mobile-total-bar {
    left: 12px; right: 12px; bottom: calc(var(--tabs-h) + 10px + env(safe-area-inset-bottom)); z-index: 55; border-radius: 22px; padding: 12px 12px 12px 20px; gap: 14px;
    background: rgba(14,26,51,.96); border: 1.5px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg);
  }
  html body .mobile-total-bar .mb-total { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
  html body .mobile-total-bar .mb-sub { font-size: 14px; opacity: .8; font-weight: 600; }
  html body .mobile-total-bar .btn { min-height: 52px; }
  html body.has-bar main.container { padding-bottom: 60px; }
}
@media (min-width: 900px) and (max-width: 1179px) { html body .mobile-total-bar { left: calc(var(--side-w) + 24px); bottom: 20px; } }
@media (max-width: 899px) { html body.v5.has-bar .app-shell { padding-bottom: calc(var(--tabs-h) + 96px + env(safe-area-inset-bottom)); } }

/* copy summary */
html body .btn-ghost-dark { width: 100%; margin-top: 12px; min-height: 52px; background: var(--surface-3); color: var(--ink); border: 2px solid var(--line-2); font-size: 16.5px; }
html body .btn-ghost-dark:hover { background: var(--r-soft); border-color: var(--red); color: var(--red); }

/* admin margin panel inside the dark summary card (the earlier layers gave it a light strip) */
html body .total-card > .margin-block, html body .total-card > .margin-block.show { order: 2; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.14); border-radius: 20px; padding: 16px 18px; margin: 18px 0 0; color: #fff; }
html body .total-card > .margin-block .margin-stats { gap: 12px; }
html body .total-card > .margin-block .margin-floor { background: rgba(0,0,0,.22); color: #fff; }
html body .total-card > .margin-block .margin-floor.bad { background: #fff; color: var(--bad); }
html body .total-card > .margin-block .giveup-table th, html body .total-card > .margin-block .giveup-table td { color: inherit; }

/* ================= MY QUOTES ================= */
html body .panel { animation: none; }
html body .mq-followcard { border-left: 8px solid var(--m-production); }
html body .fu-row, html body .top-job {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 76px; padding: 14px 18px; margin-bottom: 10px; text-align: left; cursor: pointer;
  border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font-family: 'Inter', sans-serif; transition: border-color .15s, background .15s;
}
html body .fu-row:hover, html body .top-job:hover { border-color: var(--red); background: var(--r-soft); }
html body .fu-main, html body .tj-main { min-width: 0; flex: 1; }
html body .tj-cust { font-size: 19px; font-weight: 800; line-height: 1.3; }
html body .aq-sub { font-size: 15px; color: var(--ink-soft); font-weight: 550; }
html body .fu-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
html body .tj-amt { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; text-align: right; }
html body .fu-tag { display: inline-block; font-size: 14px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
html body .fu-expired { background: var(--bad-bg); color: var(--bad); }
html body .fu-soon { background: var(--warn-bg); color: var(--warn); }
html body .fu-age { background: var(--surface-3); color: var(--ink-soft); }
html body .tj-rank { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nav-bg); color: #fff; font-size: 17px; font-weight: 800; }
html body .tj-bar { height: 8px; border-radius: 8px; background: var(--surface-3); margin-top: 8px; overflow: hidden; }
html body .tj-bar span { display: block; height: 100%; border-radius: 8px; background: var(--red); }

html body .quotes-tools { margin-bottom: 14px; }
html body .quotes-tools input { padding-left: 52px; background-position: 18px center; background-size: 20px; }
html body .qfilter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
html body .qfilter button { min-height: 52px; padding: 0 20px; border-radius: 999px; border: 2.5px solid var(--line-2); background: var(--surface); color: var(--ink-soft); font: 800 17px 'Inter', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
html body .qfilter button em { font-style: normal; font-size: 14px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; }
html body .qfilter button:hover { border-color: var(--ink-faint); color: var(--ink); }
html body .qfilter button.on { background: var(--red); border-color: var(--red); color: #fff; }
html body .qfilter button.on em { background: rgba(255,255,255,.25); color: #fff; }

html body #quoteList { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; }
html body .quote-card { position: relative; margin: 0; padding: 20px 22px 18px; border: 2px solid var(--line); border-left: 10px solid var(--warn); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 16px; line-height: 1.45; animation: none; transform: none; }
html body .quote-card:hover { transform: none; box-shadow: var(--shadow); }
html body .quote-card.status-won { border-left-color: var(--good); }
html body .quote-card.status-lost { border-left-color: var(--ink-faint); }
html body .quote-card.below { border-color: var(--bad); border-left-color: var(--bad); }
html body .qc-top { margin-bottom: 6px; }
html body .qc-num { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); }
html body .qc-top select { min-height: 48px; width: auto; font-size: 17px; font-weight: 800; padding: 6px 42px 6px 16px; border-radius: 999px; border-width: 2.5px; }
html body .qc-top select:hover { border-color: var(--red); }
html body .quote-card.status-won .qc-top select { background-color: var(--good-bg); border-color: var(--good); color: var(--good); }
html body .quote-card.status-lost .qc-top select { background-color: var(--surface-3); color: var(--ink-soft); }
html body .quote-card.status-open .qc-top select { background-color: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); color: var(--warn); }
html body .qc-cust { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
html body .qc-meta { font-size: 15.5px; color: var(--ink-soft); margin-top: 2px; }
html body .qc-money { margin-top: 12px; align-items: baseline; font-size: 15.5px; color: var(--ink-soft); }
html body .qc-money strong { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
html body .qc-give { font-size: 15px; color: var(--bad); }
html body .qc-lost { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 14px; background: var(--surface-3); border-radius: 14px; font-size: 15px; }
html body .qc-lost button { border: 0; background: none; color: var(--red); font: 800 15px 'Inter'; cursor: pointer; text-decoration: underline; }
html body .qc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
html body .qc-actions button { flex: 1 1 auto; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 800 16px 'Inter', sans-serif; cursor: pointer; }
html body .qc-actions button:hover { border-color: var(--red); color: var(--red); background: var(--r-soft); }
html body .qc-actions button[data-act="load"], html body .qc-actions button[data-act="pdf"] { background: var(--nav-bg); border-color: var(--nav-bg); color: #fff; }
html body .qc-actions button[data-act="load"]:hover, html body .qc-actions button[data-act="pdf"]:hover { background: var(--red); border-color: var(--red); color: #fff; }
html body .qc-actions button[data-act="del"] { flex: 0 0 auto; color: var(--ink-soft); }
html body .qc-actions button.armed { border-color: var(--bad); color: #fff; background: var(--bad); }
@media (max-width: 640px) { html body #quoteList { grid-template-columns: 1fr; } html body .qc-cust { font-size: 20px; } html body .qc-money strong { font-size: 26px; } }

/* numbers (collapsed by default) */
html body details.numbers { padding: 0; overflow: hidden; }
html body details.numbers > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 84px; padding: 18px 28px; }
html body details.numbers > summary::-webkit-details-marker { display: none; }
html body details.numbers > summary::after { content: ''; flex: 0 0 auto; width: 13px; height: 13px; border: solid var(--ink-soft); border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
html body details.numbers[open] > summary::after { transform: rotate(-135deg); }
html body details.numbers > summary:hover { background: var(--surface-2); }
html body .nm-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-right: auto; }
html body .nm-sub { font-size: 16px; color: var(--ink-soft); font-weight: 550; }
html body details.numbers[open] > summary { border-bottom: 2px solid var(--line); }
html body details.numbers > *:not(summary) { margin-left: 28px; margin-right: 28px; }
html body details.numbers > .mq-hero { margin-top: 24px; }
html body details.numbers > .xl-btn { margin: 4px 28px 28px; }
html body .subcard { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 20px; padding: 22px; }
html body .db-grid { gap: 18px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
html body .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
html body .kpi { background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 18px 20px; border-top: 6px solid var(--m-app); }
html body .kpi:nth-child(2) { border-top-color: var(--good); } html body .kpi:nth-child(3) { border-top-color: var(--red); } html body .kpi:nth-child(4) { border-top-color: var(--m-admin); }
html body .kpi:nth-child(5) { border-top-color: var(--m-production); } html body .kpi:nth-child(6) { border-top-color: var(--m-engineering); }
html body .kpi-val { font-size: 30px; overflow-wrap: anywhere; font-weight: 800; letter-spacing: -0.03em; }
html body .kpi-lbl { font-size: 16px; font-weight: 750; text-transform: none; letter-spacing: 0; color: var(--ink); margin-top: 4px; }
html body .kpi-sub { font-size: 14.5px; color: var(--ink-soft); }
html body .chart-wrap { background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 18px 18px 12px; margin-bottom: 18px; }
html body .trend-chart { height: 200px; }
html body .trend-chart .tc-lbl, html body .trend-chart .tc-max { font-size: 12px; }
html body .tc-legend { font-size: 14.5px; }
html body .highlight-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
html body .hl-card { border-radius: 20px; padding: 18px 20px; border: 2px solid var(--line); text-align: left; font-family: 'Inter', sans-serif; }
html body button.hl-card { cursor: pointer; }
html body .hl-kind { font-size: 14px; letter-spacing: .06em; }
html body .hl-val { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
html body .hl-sub { font-size: 15px; }

/* ================= PRICE LISTS ================= */
html body .price-level-picker { gap: 16px; margin-bottom: 14px; }
html body .price-level-picker label { font-size: 22px; font-weight: 800; }
html body .price-level-picker select { min-width: 140px; font-size: 22px; font-weight: 800; }
html body #panel-pricing .material-header, html body #panel-nesting .material-header { font-size: 24px; margin: 28px 0 14px 2px; }
html body #panel-pricing .card > .note { font-size: 17px; }
html body .price-grid-row { padding: 16px 22px; border-bottom: 2px solid var(--line); background: var(--surface); }
html body .price-grid-row .size-lbl { font-size: 24px; font-weight: 800; }
html body .price-field label { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink-soft); }
html body .price-field .val { font-size: 20px; font-weight: 800; }
html body #panel-pricing .order-list, html body #panel-nesting .order-list { background: var(--surface); border: 2px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); }
html body .adm-table { font-size: 17px; }
html body .adm-table th { font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: none; padding: 14px 16px; background: var(--surface-3); color: var(--ink-soft); }
html body .adm-table td { padding: 15px 16px; border-bottom: 1.5px solid var(--line); font-size: 18px; font-weight: 650; }
html body .adm-table tbody tr:hover { background: var(--r-soft); }
html body .adm-size { font-size: 22px; font-weight: 800; }
html body .adm-faint { font-size: 14px; font-weight: 550; }
html body .adm-in { min-height: 48px; width: 110px; font-size: 17px; }
html body .ref-block { border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
html body .ref-block summary { min-height: 72px; padding: 16px 24px; }
html body .ref-block summary strong { font-size: 22px; font-weight: 800; }
html body .ref-block summary em { font-size: 16px; color: var(--ink-soft); }
html body .ref-block .chev { font-size: 28px; }
html body .ref-row { padding: 16px 24px; border-top: 2px solid var(--line); gap: 16px; grid-template-columns: 64px minmax(0, 1fr) auto; }
html body .ref-size { font-size: 24px; font-weight: 800; }
html body .sku-chip { font-size: 15px; padding: 5px 13px; border-width: 1.5px; font-weight: 650; }
html body .ref-price strong { font-size: 22px; font-weight: 800; }
html body .ref-price span { font-size: 14px; }
html body .acc-ref-row { padding: 14px 20px; font-size: 17px; font-weight: 650; border-bottom: 1.5px solid var(--line); }
html body .acc-ref-row strong { font-size: 18px; font-weight: 800; }
html body #accPriceList { max-height: 720px; }
html body .owner-note { font-size: 16px; padding: 14px 18px; background: var(--warn-bg); color: var(--warn); border-radius: 16px; margin-bottom: 18px; font-weight: 650; }
html body #ratesList { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 40px; }
html body .rate-row { padding: 14px 4px; }
html body .rate-row .rlabel { font-size: 17px; font-weight: 700; }
html body .rate-row input, html body .rate-row .val { width: 120px; font-size: 18px; }

/* ================= TRUCK LOADS ================= */
html body .cap-row { padding: 16px 22px; border-bottom: 2px solid var(--line); }
html body .cap-row .size-lbl { font-size: 24px; font-weight: 800; }
html body .cap-sub { font-size: 15px; color: var(--ink-soft); }
html body .cap-mat { font-size: 16px; font-weight: 700; }
html body .cap-row .val { font-size: 22px; font-weight: 800; }
html body .cap-row input, html body .cap-in { min-height: 48px; font-size: 18px; width: 110px; }
html body .cap-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
html body .combo-card { border: 2px solid var(--line); border-radius: 20px; padding: 20px 22px; }
html body .combo-sentence { font-size: 18px; line-height: 1.8; }
html body details.host-block { border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
html body details.host-block summary { min-height: 68px; padding: 16px 24px; font-size: 22px; font-weight: 800; }
html body .guest-row { padding: 12px 0; font-size: 18px; }
html body .guest-lbl { font-size: 18px; font-weight: 650; }
html body .guest-row .val, html body .guest-row input { width: 96px; font-size: 18px; }

/* ================= ACCOUNT ================= */
html body .acct-hero { border-radius: 26px; padding: 28px; background: linear-gradient(135deg, var(--surface), var(--r-soft)); gap: 22px; }
html body .acct-avatar { width: 88px; height: 88px; font-size: 32px; font-weight: 800; }
html body .acct-name { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
html body .acct-title { font-size: 18px; color: var(--ink-soft); }
html body .acct-meta { font-size: 16px; }
html body .acct-lv-lbl { font-size: 13px; }
html body .lv-chip { font-size: 15px; padding: 5px 13px; border-width: 1.5px; font-weight: 800; }
html body .acct-grid { gap: 22px; }
html body .glance-row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
html body .glance-lbl { font-size: 15px; font-weight: 800; color: var(--ink-soft); }
html body .glance-row > div:not(.glance-lbl) { display: flex; flex-direction: column; }
html body .glance-row strong { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
html body .glance-row span { font-size: 15px; color: var(--ink-soft); }
html body .theme-picks { gap: 12px; }
html body .theme-pick { border-width: 2.5px; border-radius: 18px; padding: 10px; font: 800 16px 'Inter'; gap: 8px; }
html body .theme-pick.on { color: var(--red); }
html body .tp-prev { height: 54px; }
html body .accent-picks { gap: 10px; }
html body .accent-pick { min-height: 50px; border-width: 2.5px; font: 800 16px 'Inter'; padding: 6px 16px 6px 9px; }
html body .accent-pick span { width: 26px; height: 26px; }
html body .pref-row { padding: 16px 0; border-top: 2px solid var(--line); }
html body .pref-row > span { font-size: 18px; font-weight: 750; }
html body .pref-row select { min-width: 240px; }
html body .pref-saved { font-size: 15px; }
html body #acctLogout { margin-top: 10px; }
@media (max-width: 900px) { html body .acct-grid { grid-template-columns: 1fr; } }

/* the earlier layers gave the KPI strip a boxed look and fixed column counts; cards now stand on their own */
html body .kpi-grid, html body #dbKpis, html body #myKpis, html body #lgKpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important; gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
html body #dbHighlights, html body #myHighlights, html body .highlight-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; gap: 14px; }
html body .kpi { border-radius: 20px; }

/* smallest text on the page: nothing under 13px */
html body .tc-labels span, html body .tc-max { font-size: 13px; font-weight: 650; color: var(--ink-soft); }
html body .cap-mat > span:first-child { font-size: 13px; }
html body .cap-item { font-size: 15px; }
html body .pb-dlv, html body .pb-dlv.hint { font-size: 14px; }
html body .price-grid-row .size-lbl span { font-size: 14px !important; }
html body .adm-table .num > span, html body .adm-table .num div { font-size: 14px; }
html body .kpi-sub, html body .hl-kind, html body .kpi-sub span { font-size: 14.5px; }
html body .giveup-table { font-size: 14px; }
html body .sku-chip { white-space: normal; }
html body .ref-skus { min-width: 0; }
html body .db-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* ================= HOME ================= */
html body .h-head {
  position: relative; overflow: hidden; display: flex; align-items: stretch; justify-content: space-between; gap: 20px; margin: 0 0 30px; padding: 38px 40px; border: 0; border-radius: 32px; color: #fff;
  background: radial-gradient(520px 300px at 92% 0%, color-mix(in srgb, var(--red) 60%, transparent), transparent 65%), linear-gradient(150deg, #1A2F5C 0%, #0E1A33 80%);
  box-shadow: var(--shadow-lg); isolation: isolate;
}
html body .h-head::before, html body .h-head::after { display: none; }
html body .h-head-text { position: relative; z-index: 2; min-width: 0; max-width: 680px; }
html body .h-date { font-size: 16px; font-weight: 750; letter-spacing: .04em; color: var(--nav-soft); margin-bottom: 8px; }
html body .h-head h1 { font-size: 50px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: #fff; margin: 0; }
html body .h-head h1::after { display: none; }
html body .h-sub { font-size: 21px; line-height: 1.45; color: #DCE4F5; margin: 12px 0 0; font-weight: 550; }
html body .h-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
html body .h-cta .btn { min-height: 64px; padding: 0 30px; font-size: 20px; }
html body .btn-light { background: #fff; color: var(--nav-bg); border: 0; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
html body .btn-light:hover { background: #F0F4FC; text-decoration: none; transform: translateY(-2px); }
html body .h-head-art { position: absolute; right: -24px; bottom: -34px; width: 420px; height: auto; color: #fff; opacity: .10; z-index: 1; pointer-events: none; }
html body .h-head .h-edit-btn { position: relative; z-index: 2; align-self: flex-start; background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.3); }
html body .h-editbar { background: var(--warn-bg); color: var(--warn); border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; font-size: 17px; font-weight: 700; }
@media (max-width: 640px) {
  html body .h-head { padding: 26px 22px 24px; border-radius: 26px; margin-bottom: 22px; }
  html body .h-head h1 { font-size: 34px; }
  html body .h-sub { font-size: 18px; }
  html body .h-cta .btn { width: 100%; min-height: 60px; font-size: 19px; }
  html body .h-head-art { width: 300px; right: -60px; bottom: -40px; }
}

html body .h-sec { margin-bottom: 34px; }
html body .h-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--ink); text-transform: none; }
html body .h-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
html body .h-title-row .h-title { margin: 0; }

/* your day: big numbers */
html body .h-day { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
html body .h-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 24px; background: var(--surface); border: 2px solid var(--line); border-top: 8px solid var(--line-2); border-left-width: 2px; border-radius: 24px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
html body .h-stat:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
html body .h-stat b { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
html body .h-stat span { font-size: 18px; font-weight: 650; color: var(--ink-soft); }
html body .h-stat.warn { border-top-color: var(--m-production); } html body .h-stat.warn b { color: var(--m-production); }
html body .h-stat.good { border-top-color: var(--good); } html body .h-stat.good b { color: var(--good); }
html body .h-stat.live { border-top-color: var(--m-app); } html body .h-stat.live b { color: var(--m-app); }
html body .h-stat:not(.warn):not(.good):not(.live) { border-top-color: var(--m-engineering); }

/* shortcuts: big tiles */
html body .h-shortcuts { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
html body .h-short {
  --mc: var(--acc); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 2px; align-items: center; align-content: center;
  padding: 22px 52px 22px 22px; min-height: 124px; background: var(--surface); border: 2px solid var(--line); border-radius: 26px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .2s, border-color .2s; cursor: pointer; font-family: 'Inter', sans-serif; text-align: left;
}
html body .h-short[href^="app.html"] { --mc: var(--m-app); }
html body .h-short[href^="app.html#account"] { --mc: var(--m-account); }
html body .h-short[href="app.html#order"] { --mc: var(--acc); }
html body .h-short[href^="engineering"] { --mc: var(--m-engineering); }
html body .h-short[href^="production"] { --mc: var(--m-production); }
html body .h-short[href^="admin"] { --mc: var(--m-admin); }
html body .h-short:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mc); background: var(--surface); text-decoration: none; }
html body .h-short .hs-ic { grid-row: 1 / 3; width: 76px; height: 76px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mc) 14%, var(--surface)); color: var(--mc); margin: 0; }
html body .h-short .hs-ic svg { width: 38px; height: 38px; }
html body .h-short .hs-t { grid-column: 2; align-self: end; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; white-space: normal; overflow: visible; text-align: left; }
html body .h-short .hs-sub, html body .h-short > span.hs-sub { grid-column: 2; align-self: start; display: block; font-size: 17px; color: var(--ink-soft); font-weight: 550; line-height: 1.35; white-space: normal; overflow: visible; text-align: left; }
html body .h-short::after { content: ''; position: absolute; right: 24px; top: 50%; width: 13px; height: 13px; margin-top: -8px; border: solid var(--ink-faint); border-width: 3.5px 3.5px 0 0; transform: rotate(45deg); transition: transform .15s, border-color .15s; }
html body .h-short:hover::after { transform: rotate(45deg) translate(3px, -3px); border-color: var(--mc); }
@media (max-width: 640px) { html body .h-shortcuts { grid-template-columns: 1fr; gap: 12px; } html body .h-short { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; min-height: 104px; padding: 18px 46px 18px 18px; } html body .h-short .hs-ic { width: 64px; height: 64px; } html body .h-short .hs-ic svg { width: 32px; height: 32px; } html body .h-short .hs-t { grid-row: auto; font-size: 22px; } html body .h-stat b { font-size: 48px; } }

/* photo banner */
html body .h-hero { border-radius: 28px; aspect-ratio: 21 / 7; min-height: 230px; margin-bottom: 34px; box-shadow: var(--shadow); }
html body .hh-slide figcaption { padding: 70px 34px 30px; }
html body .hh-slide figcaption strong { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(24px, 3.2vw, 38px); letter-spacing: -0.02em; }
html body .hh-slide figcaption span { font-size: clamp(15px, 1.6vw, 18px); }
html body .hh-nav { width: 56px; height: 56px; opacity: 1; }
html body .hh-dots button { width: 12px; height: 12px; } html body .hh-dots button.on { width: 34px; }

/* news + plants */
html body .h-post { border: 2px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
html body .h-post.pinned { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
html body .hp-body { padding: 24px 26px; }
html body .h-post h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 10px; }
html body .hp-meta { font-size: 15px; font-weight: 650; color: var(--ink-soft); }
html body .hp-text { font-size: 18px; line-height: 1.65; color: var(--ink); }
html body .hp-cat { font-size: 13px; font-weight: 800; }
html body .h-none { padding: 30px 20px; border: 2px dashed var(--line-2); border-radius: 22px; text-align: center; font-size: 18px; color: var(--ink-soft); background: transparent; }
html body .h-gallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
html body .h-photo figcaption { font-size: 17px; font-weight: 750; padding-top: 10px; }
html body .h-photo figcaption span { font-size: 15px; }
html body .hg-img { border-radius: 22px; }
html body .h-foot { text-align: center; font-size: 14px; color: var(--ink-faint); padding: 8px 0 30px; }

/* owner editing buttons (b3) */
html body .b3 { min-height: 52px; padding: 0 22px; border-radius: 15px; font: 800 17px 'Inter', sans-serif; border-width: 2.5px; }
html body .b3-primary { background: linear-gradient(180deg, var(--red-2) -30%, var(--red) 45%, var(--red-dark) 140%); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--red) 65%, transparent); }
html body .b3-secondary { color: var(--red); border-color: var(--red); background: var(--surface); }
html body .b3-secondary:hover:not(:disabled) { background: var(--red); color: #fff; }
html body .b3-sm { min-height: 46px; font-size: 15.5px; }
html body .b3-tertiary { font-size: 16px; }
html body .b3-icon { width: 48px; min-height: 48px; }
html body .b3-danger { background: var(--nav-bg); }
html body .hm-card { border-radius: 26px; padding: 28px; }
html body .hm-f { font-size: 16px; font-weight: 750; }
html body .hm-f input, html body .hm-f textarea { margin-top: 8px; }
html body .b3-pill { min-height: 46px; padding: 0 18px; font-size: 16px; font-weight: 750; border-radius: 999px; }
html body .h-stat, html body .h-stat.warn, html body .h-stat.good, html body .h-stat.live { border-left: 2px solid var(--line); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); }

/* ================= ADMIN / ENGINEERING / PRODUCTION: same look, same big type ================= */
html body table.data { font-size: 17px; }
html body table.data th { font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: none; padding: 14px 14px; color: var(--ink-soft); background: var(--surface-3); border-bottom: 2px solid var(--line); }
html body table.data th:first-child { border-radius: 14px 0 0 0; } html body table.data th:last-child { border-radius: 0 14px 0 0; }
html body table.data td { padding: 16px 14px; border-bottom: 1.5px solid var(--line); font-weight: 600; vertical-align: middle; }
html body table.data tbody tr:hover { background: var(--r-soft); }
html body .table-scroll table.data { min-width: 720px; }
html body .row-actions button, html body table.data .row-actions button, html body .aq-table button, html body .lg-table button {
  min-height: 46px; padding: 0 16px; border-radius: 13px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 800 15px 'Inter', sans-serif; cursor: pointer; margin: 2px 4px 2px 0;
}
html body .row-actions button:hover, html body .aq-table button:hover { border-color: var(--red); color: var(--red); background: var(--r-soft); }
html body .row-actions button.armed { background: var(--bad); border-color: var(--bad); color: #fff; }
html body .row-actions button[data-act="delete"], html body .row-actions button[data-act="suspend"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line-2)); }
html body .role-checks label { font-size: 17px; font-weight: 700; gap: 12px; align-items: center; min-height: 44px; }
html body .role-checks em { font-size: 14.5px; }
html body .role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 20px; }
html body .level-checks { display: flex; flex-wrap: wrap; gap: 10px; }
html body .level-checks label { min-height: 52px; min-width: 64px; padding: 0 16px; border: 2.5px solid var(--line-2); border-radius: 14px; display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; cursor: pointer; background: var(--surface); }
html body .level-checks label:has(input:checked) { border-color: var(--red); background: var(--r-soft); color: var(--red); }
html body .f-hint { font-style: normal; font-weight: 500; font-size: 14.5px; color: var(--ink-soft); }
html body .admin-title { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
html body .admin-sub { font-size: 17px; margin-bottom: 20px; color: var(--ink-soft); }
html body .aq-tools { gap: 12px; margin-bottom: 18px; }
html body .aq-tools input { padding-left: 50px; background-position: 17px center; background-size: 20px; }
html body .aq-stats { gap: 22px; }
html body .aq-big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
html body .aq-lbl { font-size: 15.5px; color: var(--ink-soft); }
html body .aq-warn { font-size: 16px; padding: 12px 16px; border-radius: 14px; background: var(--bad-bg); color: var(--bad); }
html body .aq-group { border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
html body .aq-group summary { padding: 16px 20px; min-height: 72px; background: var(--surface-2); }
html body .aq-rep { font-size: 20px; font-weight: 800; }
html body .aq-avatar { width: 44px; height: 44px; font-size: 16px; }
html body .aq-gstats { font-size: 15.5px; }
html body .aq-table td { font-size: 16.5px; }
html body .aq-num { font-weight: 800; }
html body .head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
html body .act-day { font-size: 17px; font-weight: 800; padding: 18px 0 8px; color: var(--ink); }
html body .act-row { grid-template-columns: 84px 18px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1.5px solid var(--line); }
html body .act-time { font-size: 15px; }
html body .act-main { font-size: 17px; line-height: 1.5; }
html body .act-sub { font-size: 15px; }
html body .lg-table { font-size: 16.5px; }
html body .cl-entry { border: 2px solid var(--line); border-radius: 20px; padding: 20px 22px; margin-bottom: 14px; background: var(--surface); }
html body .cl-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
html body .cl-date { font-size: 15px; color: var(--ink-soft); font-weight: 650; }
html body .cl-entry ul { font-size: 17px; line-height: 1.6; padding-left: 22px; }
html body .inv-edit-box { padding: 18px; border-radius: 18px; }

/* ---------- engineering board ---------- */
html body .eng-head .section-head { margin-bottom: 14px; }
html body .eng-tools { gap: 12px; }
html body .eng-tools input[type="search"] { padding-left: 50px; background-position: 17px center; background-size: 20px; }
html body .eng-arch { font-size: 16px; font-weight: 700; gap: 10px; min-height: 48px; }
html body .eng-board { gap: 18px; padding: 4px 4px 20px; min-height: 480px; }
html body .eng-col { flex: 0 0 340px; border: 2px solid var(--line); border-radius: 24px; background: var(--surface-3); }
html body .eng-col-head { padding: 16px 16px 8px 18px; gap: 10px; }
html body .eng-col-title { font-size: 20px !important; font-weight: 800 !important; font-family: 'Inter', sans-serif !important; min-height: 48px; }
html body .eng-count { font-size: 15px; padding: 3px 12px; font-weight: 800; }
html body .eng-col-tools { opacity: 1; }
html body .eng-col-tools button { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
html body .eng-cards { padding: 6px 14px 8px; gap: 12px; }
html body .eng-empty { font-size: 16px; padding: 24px 12px; border-width: 2px; border-radius: 16px; }
html body .eng-add { margin: 2px 14px 14px; padding: 12px 14px; font: 800 17px 'Inter', sans-serif; border-radius: 14px; min-height: 52px; width: calc(100% - 28px); }
html body .eng-col-new { flex: 0 0 260px; font: 800 17px 'Inter', sans-serif; border-radius: 24px; }
html body .eng-card { border: 2px solid var(--line); border-left: 8px solid var(--line-2); border-radius: 18px; padding: 16px 16px 14px; box-shadow: var(--shadow-sm); }
html body .eng-card.prio-urgent { border-left-color: var(--bad); } html body .eng-card.prio-high { border-left-color: var(--m-production); }
html body .eng-card.prio-normal { border-left-color: var(--m-engineering); } html body .eng-card.prio-low { border-left-color: var(--line-2); }
html body .ec-prio { font-size: 12.5px; padding: 3px 10px; }
html body .ec-due { font-size: 14px; font-weight: 750; }
html body .ec-title { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
html body .ec-update { font-size: 15.5px; line-height: 1.45; }
html body .ec-bar { height: 8px; border-radius: 8px; }
html body .ec-meta { font-size: 14.5px; font-weight: 700; margin-top: 10px; }
html body .ec-owner { width: 34px; height: 34px; font-size: 13px; }
html body .eng-panel { padding: 26px 30px 28px; font-size: 17px; }
html body .eng-panel h2, html body .eng-panel h3 { font-size: 24px; font-weight: 800; }
html body .eng-contacts { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
html body .eng-co-head h3 { font-size: 21px; font-weight: 800; }
html body .eng-co-av { width: 46px; height: 46px; border-radius: 14px; font-size: 16px; }
html body .eng-person { padding: 14px 0; font-size: 16.5px; }
@media (max-width: 640px) { html body .eng-col { flex-basis: 84vw; } html body .eng-contacts { grid-template-columns: 1fr; } }

/* ---------- production map ---------- */
html body .pr-head .section-head { margin-bottom: 14px; }
html body .pr-tools { gap: 12px 16px; }
html body .pr-my { font-size: 16.5px; }
html body .pr-my select { min-width: 190px; font-size: 17px; }
html body .pr-legend { font-size: 15.5px; gap: 8px 20px; margin-top: 16px; }
html body .pr-legend i { width: 18px; height: 18px; }
html body .pr-viewonly { font-size: 13px; padding: 5px 14px; }
html body .pr-tl-card { border-radius: 24px; border: 2px solid var(--line); }
html body .pr-tl { --pr-name-w: 260px; }
html body .pr-row { min-height: 78px; }
html body .pr-name strong { font-size: 18px; font-weight: 800; }
html body .pr-name > div, html body .pr-mold-edit { padding: 12px 16px; }
html body .pr-loc { font-size: 15px; }
html body .pr-corner { font-size: 13px; }
html body .pr-month { font-size: 14px; padding: 8px 10px; }
html body .pr-day { font-size: 13px; padding: 5px 0; } html body .pr-day b { font-size: 15px; } html body .pr-day span { font-size: 11.5px; }
html body .pr-bar { top: 12px; bottom: 12px; border-radius: 12px; font-size: 15px; font-weight: 800; padding: 0 14px; }
html body .pr-empty { font-size: 18px; padding: 40px 20px; }
html body .pr-hint { font-size: 15.5px; }
html body .pr-modal { font-size: 17px; }
@media (max-width: 640px) { html body .pr-tl { --pr-name-w: 150px; } html body .pr-name strong { font-size: 16px; } }

/* production controls that the earlier layers sized small */
html body .pr-add .btn { font-size: 17px; }
html body .pr-tools .seg button, html body .pr-range-wrap .seg button, html body .pr-range-wrap .btn { font-size: 16px; }
html body .pr-legend em { font-size: 13.5px; }
html body .pb-dates { font-size: 13.5px; }
html body .pr-day span { font-size: 12px; }
html body .pr-lane-head, html body .pr-headrow { font-size: 14px; }
@media (max-width: 640px) { html body .aq-tools .seg, html body .pr-tools .seg { display: flex; width: 100%; } html body .aq-tools .seg button, html body .pr-tools .seg button { flex: 1 1 0; padding: 0 8px; } }
@media (max-width: 720px) {
  html body .eng-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html body .eng-tools input[type="search"] { grid-column: 1 / -1; }
  html body .eng-tools > * { min-width: 0; }
  html body .eng-tools .btn { padding: 0 10px; font-size: 15px; white-space: nowrap; }
  html body .eng-tools .eng-arch { grid-column: 1 / -1; }
  html body .eng-head .section-head { align-items: flex-start; }
  html body .pr-tools { display: flex; flex-wrap: wrap; }
  html body .pr-tools > *, html body .pr-range-wrap { max-width: 100%; }
  html body .pr-range-wrap { margin-left: 0; flex-wrap: wrap; }
}

/* ================= SIGN IN / REGISTER / RESET ================= */
html body .auth-shell {
  min-height: 100vh; padding: 28px 18px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background:
    radial-gradient(700px 420px at 12% 8%, color-mix(in srgb, var(--acc) 42%, transparent), transparent 65%),
    radial-gradient(640px 420px at 100% 100%, rgba(46,106,196,.35), transparent 65%),
    linear-gradient(160deg, #16295A 0%, #0B1630 70%);
}
html body .auth-shell::before, html body .auth-shell::after { animation: none; filter: none; border-radius: 0; opacity: .1; width: 100%; height: 100%; inset: 0; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='40' cy='40' r='34'/%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Ccircle cx='120' cy='120' r='34'/%3E%3Ccircle cx='120' cy='120' r='24'/%3E%3Ccircle cx='120' cy='120' r='14'/%3E%3C/g%3E%3C/svg%3E"); }
html body .auth-shell::after { display: none; }
html body .auth-card {
  position: relative; z-index: 2; width: 100%; max-width: 500px; padding: 44px 40px 34px; color: var(--ink); background: var(--surface); border: 0; border-radius: 32px;
  backdrop-filter: none; box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); animation: none;
}
html body .auth-card::before { content: ''; position: absolute; left: 40px; right: 40px; top: 0; height: 6px; border-radius: 0 0 8px 8px; background: var(--red); }
html body .auth-brand { gap: 12px; margin-bottom: 30px; }
html body .auth-brand .fmark { width: 210px; box-shadow: none; border-radius: 10px; }
html body .auth-brand .name { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
html body .auth-brand .sub { font-size: 19px; color: var(--ink-soft); font-weight: 550; }
html body .field { margin-bottom: 20px; }
html body .field label { color: var(--ink); font-size: 17px; font-weight: 750; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
html body .auth-shell .auth-card input, html body .auth-shell .auth-card select {
  min-height: 62px; padding: 14px 18px; font-size: 20px; font-weight: 600; color: var(--ink); background: var(--surface); border: 2.5px solid var(--line-2); border-radius: 16px; box-shadow: inset 0 1px 2px rgba(22,26,34,.04);
}
html body .auth-shell .auth-card input::placeholder { color: var(--ink-faint); opacity: .8; }
html body .auth-shell .auth-card input:hover { border-color: var(--ink-faint); background: var(--surface); }
html body .auth-shell .auth-card input:focus, html body .auth-shell .auth-card select:focus { outline: none; border-color: var(--red); background: var(--surface); box-shadow: var(--focus); }
html body .pw-wrap { position: relative; }
html body .pw-wrap input { padding-right: 96px; }
html body .pw-toggle { position: absolute; right: 8px; top: 8px; height: 46px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-3); color: var(--ink); font: 800 16px 'Inter', sans-serif; cursor: pointer; }
html body .pw-toggle:hover { background: var(--r-soft); color: var(--red); }
html body .forgot-row { text-align: right; margin: -6px 0 18px; }
html body .forgot-row.center { text-align: center; margin: 14px 0 0; }
html body .link-btn { border: 0; background: none; color: var(--red); font: 800 17px 'Inter', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: 0 4px; }
html body .auth-card .btn-primary { min-height: 66px; font-size: 21px; border-radius: 18px; }
html body .auth-msg { min-height: 24px; font-size: 17px; margin-top: 14px; font-weight: 650; }
html body .auth-msg.err { color: var(--bad); background: var(--bad-bg); border-radius: 14px; padding: 12px 14px; }
html body .auth-msg.ok { color: var(--good); background: var(--good-bg); border-radius: 14px; padding: 12px 14px; }
html body .auth-msg:empty { padding: 0; background: none; }
html body .auth-step-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
html body .auth-step-sub { font-size: 17px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 20px; }
html body .auth-foot { color: var(--ink-soft); font-size: 17px; margin-top: 24px; padding-top: 22px; border-top: 2px solid var(--line); }
html body .auth-foot a { color: var(--red); text-decoration: underline; text-underline-offset: 4px; font-weight: 800; }
html body .auth-card .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@media (max-width: 640px) { html body .auth-card { padding: 40px 22px 26px; border-radius: 26px; } html body .auth-card::before { left: 22px; right: 22px; } html body .auth-brand .fmark { width: 170px; } }