/* Savex workspace theme. All screens share these semantic tokens. */
:root{
 color-scheme:dark;
 --paper:#101114; --nav:#15161a; --surface:#1c1e23; --surface-2:#25272e;
 --ink:#f4f4f6; --ink-soft:#a6a8b2; --ink-faint:#9295a1;
 --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.07);
 --honey:#d7b77a; --honey-strong:#e6c990; --honey-tint:#302a20;
 --berry:#ee91a0; --berry-tint:#39242c; --sage:#94c5a3; --sage-tint:#22332a;
 --steel:#9ebbd4; --steel-tint:#25303d; --on-accent:#17140e;
 --radius-sm:10px; --radius-md:12px; --radius-lg:18px; --radius-xl:20px;
 --shadow:0 8px 24px -16px rgba(0,0,0,.6); --shadow-sm:0 2px 6px rgba(0,0,0,.12);
 --shadow-md:var(--shadow); --ease:cubic-bezier(.25,.85,.35,1);
 --net-supplier:#9ebbd4; --net-material:#d7b77a; --net-watch:#e3af78;
 --net-critical:#ee91a0; --net-product:#94c5a3; --net-inactive:#9295a1;
}
/* Day uses the same layout and components with warmer, high-contrast surfaces. */
:root[data-theme="light"]{
 color-scheme:light;
 --paper:#f4f3ef;--nav:#eeede8;--surface:#ffffff;--surface-2:#f0efeb;
 --ink:#25251f;--ink-soft:#60615a;--ink-faint:#6c6d65;
 --border:rgba(35,35,28,.18);--border-soft:rgba(35,35,28,.10);
 --honey:#d7b77a;--honey-strong:#795a23;--honey-tint:#f3ead8;
 --berry:#a32d48;--berry-tint:#fae9ed;--sage:#326647;--sage-tint:#e5f1e8;
 --steel:#3d617e;--steel-tint:#e5edf4;
 --shadow:0 8px 24px -16px rgba(35,35,28,.2);--shadow-sm:0 2px 6px rgba(35,35,28,.04);
 --net-supplier:#3d617e;--net-material:#886426;--net-watch:#995813;
 --net-critical:#a32d48;--net-product:#326647;--net-inactive:#6c6d65;
}
.appearance-bar{display:flex;justify-content:flex-end;padding:8px 24px;background:var(--nav);border-bottom:1px solid var(--border-soft);position:relative;z-index:101;}
.appearance-switch{display:flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}
.appearance-switch button{border:0;border-radius:8px;padding:6px 14px;min-height:32px;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;}
.appearance-switch button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
:root[data-theme=light] .btn-primary:hover{background:#e4c890;border-color:#e4c890;}
.net-node-ring{stroke:var(--ink-soft)!important;}
@media(max-width:760px){.appearance-bar{padding:6px 16px;}.appearance-switch button{min-height:40px;}}
  *{box-sizing:border-box;}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:0.001ms !important; animation-iteration-count:1 !important;
      transition-duration:0.001ms !important; scroll-behavior:auto !important;
    }
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:inherit;
    font-weight:700;
    letter-spacing:-0.02em;
    text-wrap:balance;
    color:var(--ink);
  }
  .mono{ font-family:inherit; font-variant-numeric:tabular-nums; }
  a{ color:inherit; }
  button{ font-family:inherit; -webkit-tap-highlight-color:transparent; }

  /* ---------- lock screen ---------- */
  #lock-screen{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(560px 420px at 50% 32%, var(--honey-tint), transparent 70%),
      var(--paper);
    padding:24px;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  #lock-screen.unlocking{ opacity:0; transform:scale(1.02); pointer-events:none; }
  .lock-card{
    width:100%; max-width:360px;
    background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
    padding:40px 32px 32px 32px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:4px;
  }
  .lock-mark{
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:var(--radius-lg); margin-bottom:14px;
    background:var(--honey); color:var(--on-accent);
    font-weight:700; font-size:22px;
    box-shadow:var(--shadow-sm);
  }
  .lock-card h1{ font-size:21px; margin:0 0 3px 0; }
  .lock-tag{ margin:0 0 26px 0; color:var(--ink-soft); font-size:13px; }
  #lock-form{ width:100%; display:flex; flex-direction:column; gap:12px; }
  .lock-field{ position:relative; display:flex; align-items:center; }
  .lock-icon{ position:absolute; left:13px; width:16px; height:16px; color:var(--ink-faint); pointer-events:none; }
  #lock-email, #lock-password{
    width:100%; padding:13px 14px 13px 38px; font-size:16px; text-align:left;
    border-radius:var(--radius-md); letter-spacing:0;
  }
  #lock-submit{ width:100%; justify-content:center; padding:13px 14px; font-size:15px; margin-top:4px; }
  .lock-error{ min-height:16px; color:var(--berry); font-size:12.5px; font-weight:600; }
  .lock-hint{ margin:8px 0 0 0; color:var(--ink-faint); font-size:11.5px; }
  @keyframes lockShake{
    10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
    30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
  }
  .lock-card.shake{ animation:lockShake .4s; }

  /* ---------- shell ---------- */
  .app-shell{ display:flex; align-items:stretch; min-height:100vh; }
  .section-rail{
    flex:0 0 auto; width:180px;
    display:flex; flex-direction:column;
    background:var(--nav); border-right:1px solid var(--border-soft);
    padding:0 10px 16px 10px; position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  /* The rail's own corner logo -- pushes the Stockroom/CRM buttons down below it instead of
     them sitting flush against the very top edge, and gives the app one clear place its name
     lives (the top header used to repeat it next to the tabs, which read as redundant/odd
     once this rail existed). */
  .rail-brand{
    display:flex; align-items:center; gap:9px;
    padding:20px 9px 16px 7px; margin-bottom:8px;
    border-bottom:1px solid var(--border-soft);
  }
  .rail-brand-name{ font-weight:700; font-size:15px; letter-spacing:-0.01em; color:var(--ink); }
  .rail-nav{ display:flex; flex-direction:column; gap:2px; }
  .section-rail button{
    display:flex; align-items:center; gap:10px;
    background:none; border:none; cursor:pointer;
    padding:10px 10px 10px 10px; border-radius:var(--radius-sm); text-align:left;
    min-height:44px;
    transition:background .12s var(--ease);
  }
  .section-rail button:hover{ background:var(--surface-2); }
  .section-rail button.active{ background:var(--honey-tint); }
  .rail-icon{ flex:0 0 auto; width:18px; height:18px; color:var(--ink-faint); }
  .section-rail button.active .rail-icon{ color:var(--honey-strong); }
  .rail-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .section-rail-label{
    font-weight:600; font-size:13.5px; color:var(--ink);
  }
  .section-rail button.active .section-rail-label{ color:var(--honey-strong); }
  .section-rail-sub{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.01em; white-space:normal; }
  .app-main{ flex:1 1 auto; min-width:0; }

  header.top{
    position:sticky; top:0; z-index:20;
    background:var(--nav);
    -webkit-backdrop-filter:saturate(1.6) blur(10px);
    backdrop-filter:saturate(1.6) blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .top-inner{
    max-width:1400px; margin:0 auto; padding:16px 28px 0 28px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .section-title{ font-size:20px; margin:0 0 2px 0; flex:0 0 auto; }
  .mark{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:var(--radius-sm);
    background:var(--honey); color:var(--on-accent);
    font-weight:700; font-size:14px;
    box-shadow:var(--shadow-sm);
  }
  /* nav.tabs used to wrap (both the whole row, via .top-inner's flex-wrap, and individual
     button labels, since text had no white-space:nowrap) -- fine at 6 tabs, but a 7th tab
     (round 7's Network) left too little room per button at common window widths and caused
     "Finished Goods"/"Incoming Materials" to break mid-label, which read as the tab row
     falling apart rather than a clean horizontal strip. Now the row itself never wraps and
     never wraps a label -- if it doesn't fit, it scrolls sideways instead, same pattern as a
     mobile app's tab bar. */
  nav.tabs{
    display:flex; gap:2px; margin-left:auto; padding-bottom:0;
    flex:1 1 100%; min-width:0; overflow-x:auto; flex-wrap:wrap;
    scrollbar-width:thin;
  }
  nav.tabs::-webkit-scrollbar{ height:4px; }
  nav.tabs::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
  nav.tabs button{
    background:none; border:none; cursor:pointer;
    padding:10px 12px; font-size:14px; font-weight:600;
    color:var(--ink-soft); border-bottom:2px solid transparent;
    transition:color .15s var(--ease); white-space:nowrap; flex:0 0 auto;
  }
  nav.tabs button:hover{ color:var(--ink); }
  nav.tabs button.active{ color:var(--honey-strong); border-bottom-color:var(--honey); }

  main{ max-width:1400px; margin:0 auto; padding:24px 28px 48px 28px; }
  .view{ display:none; }
  .view.active{ display:block; animation:viewIn .18s var(--ease); }
  @keyframes viewIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

  .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 18px 0; flex-wrap:wrap; }
  .section-head h2{ font-size:22px; margin:0; }
  .section-head p{ margin:3px 0 0 0; color:var(--ink-soft); font-size:14px; }

  .card{
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  }
  .pad{ padding:20px; }
  .stack{ display:flex; flex-direction:column; gap:18px; }

  /* buttons — hierarchy is primary (.btn-primary, solid accent) / secondary (.btn, bordered) /
     tertiary (.btn-ghost, text-only); destructive actions layer .confirm-arm on top of these. */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);
    color:var(--ink); font-size:14px; font-weight:600; padding:9px 15px; cursor:pointer;
    min-height:38px;
    transition:transform .1s var(--ease), border-color .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
  }
  .btn:hover{ border-color:var(--ink-faint); background:var(--surface-2); }
  .btn:active{ transform:scale(.97); }
  .btn-primary{ background:var(--honey); border-color:var(--honey); color:var(--on-accent); box-shadow:var(--shadow-sm); }
  .btn-primary:hover{ background:var(--honey-strong); border-color:var(--honey-strong); }
  .btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-soft); box-shadow:none; }
  .btn-ghost:hover{ color:var(--berry); background:var(--berry-tint); border-color:transparent; }
  .btn-sm{ padding:6px 11px; font-size:12.5px; min-height:30px; }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; }

  /* stat tiles */
  .stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .stat{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-sm); }
  .stat .num{ font-size:26px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
  .stat .label{ color:var(--ink-soft); font-size:12.5px; margin-top:6px; }
  .stat.crit .num{ color:var(--berry); }
  .stat.watch .num{ color:var(--steel); }
  .stat.ok .num{ color:var(--sage); }

  /* pills */
  .pill{
    display:inline-flex; align-items:center; gap:5px; border-radius:99px;
    padding:3px 10px; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  }
  .pill::before{ content:''; width:6px; height:6px; border-radius:50%; }
  .pill.crit{ background:var(--berry-tint); color:var(--berry); }
  .pill.crit::before{ background:var(--berry); }
  .pill.watch{ background:var(--steel-tint); color:var(--steel); }
  .pill.watch::before{ background:var(--steel); }
  .pill.ok{ background:var(--sage-tint); color:var(--sage); }
  .pill.ok::before{ background:var(--sage); }
  .pill.pending{ background:var(--steel-tint); color:var(--steel); }
  .pill.pending::before{ background:var(--steel); }
  .pill.received{ background:var(--sage-tint); color:var(--sage); }
  .pill.received::before{ background:var(--sage); }
  /* "in progress, not yet critical" — mid-pipeline prospect stages, this-week (not overdue) follow-ups */
  .pill.warn{ background:var(--honey-tint); color:var(--honey-strong); }
  .pill.warn::before{ background:var(--honey-strong); }

  /* tables */
  .table-wrap{ overflow-x:auto; border-radius:var(--radius-lg); }
  table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-soft); font-weight:700; padding:11px 14px; background:var(--surface-2);
    white-space:nowrap; position:sticky; top:0;
  }
  thead th:first-child{ border-top-left-radius:var(--radius-lg); }
  thead th:last-child{ border-top-right-radius:var(--radius-lg); }
  tbody td{ padding:10px 14px; border-top:1px solid var(--border-soft); vertical-align:middle; }
  tbody tr{ transition:background .18s var(--ease); }
  tbody tr:hover{ background:var(--surface-2); }
  tbody tr.followup-row{ cursor:pointer; }
  tbody tr.row-highlight{ background:var(--honey-tint); }
  td.num, th.num{ text-align:right; font-family:inherit; font-variant-numeric:tabular-nums; }
  .rowname{ font-weight:600; }
  .rowmeta{ color:var(--ink-faint); font-size:12px; }

  input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], select, textarea{
    font-family:inherit; font-size:14px; color:var(--ink);
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:9px 11px; width:100%;
    transition:border-color .12s var(--ease), box-shadow .12s var(--ease);
  }
  input[type=number]{ font-family:inherit; text-align:right; }
  input:hover, select:hover, textarea:hover{ border-color:var(--ink-faint); }
  input:focus, select:focus, textarea:focus, button:focus-visible{
    outline:none; border-color:var(--honey); box-shadow:0 0 0 3px var(--honey-tint);
  }
  /* .cell-input is the dense inline editable field used inside table cells (Materials, PO
     lines, etc.) — kept at a smaller font than the general 16px input bump above so a fixed
     narrow column (e.g. style="width:80px") doesn't wrap or overflow. */
  input.cell-input, select.cell-input, textarea.cell-input{ border-color:transparent; background:transparent; padding:6px 7px; font-size:13.5px; }
  .cell-input:hover{ border-color:var(--border); }
  .cell-input:focus{ border-color:var(--honey); background:var(--surface); box-shadow:0 0 0 3px var(--honey-tint); }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
  .form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }

  .empty{ color:var(--ink-faint); padding:34px 22px; text-align:center; font-size:13.5px; }
  .divider{ height:1px; background:var(--border-soft); margin:20px 0; border:none; }
  .banner{
    display:flex; align-items:center; gap:10px; background:var(--steel-tint); color:var(--steel);
    border:1px solid transparent; border-radius:var(--radius-md); padding:11px 16px; font-size:13px; font-weight:600; margin-bottom:20px;
  }
  .banner.ok{ background:var(--sage-tint); color:var(--sage); border-color:transparent; }
  .runline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .runline select{ flex:2; min-width:160px; } .runline input{ flex:1; min-width:70px; }
  .runline .icon-btn{ flex:0 0 auto; }
  .lineitem-grid{ display:grid; grid-template-columns:2.4fr 1fr 0.9fr 32px; gap:8px; align-items:center; }
  .lineitem-grid + .lineitem-grid{ margin-top:8px; }
  .muted{ color:var(--ink-soft); }
  .small{ font-size:12px; }
  .kicker{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--honey-strong); }
  .icon-btn{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:7px; border-radius:var(--radius-sm); line-height:0; min-width:32px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; transition:background .12s var(--ease), color .12s var(--ease); }
  .icon-btn:hover{ color:var(--berry); background:var(--berry-tint); }
  .actions-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .product-card{ border-top:1px solid var(--border-soft); padding:18px 22px; }
  .product-card:first-child{ border-top:none; }
  .product-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
  .head-actions{ display:flex; align-items:center; gap:10px; }
  .product-head h3{ font-size:16.5px; margin:0; }
  .product-body{ display:none; margin-top:16px; }
  .product-body.open{ display:block; }
  .chev{ transition:transform .18s var(--ease); color:var(--ink-faint); }
  .chev.open{ transform:rotate(90deg); }
  footer.foot{ max-width:1400px; margin:0 auto; padding:0 28px 40px 28px; color:var(--ink-faint); font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .mini-card{ border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:16px; background:var(--surface-2); position:relative; }
  .mini-card + .mini-card{ margin-top:10px; }
  .mini-card .mini-del{ position:absolute; top:10px; right:10px; }
  .seg{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); padding:2px; gap:2px; }
  .seg button{ background:transparent; border:none; border-radius:6px; padding:7px 13px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease); }
  .seg button + button{ border-left:none; }
  .seg button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
  textarea.cell-input, textarea{ min-height:90px; resize:vertical; }
  .confirm-arm{ background:var(--berry) !important; border-color:var(--berry) !important; color:var(--on-accent) !important; }
  .view-kv{ display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:var(--ink); }
  .bom-view-list{ display:flex; flex-direction:column; gap:6px; }
  .bom-view-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--border-soft); }
  .import-row-grid{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 0; }
  .import-row-grid .import-product{ flex:1 1 200px; min-width:150px; }
  .import-row-grid .import-qty, .import-row-grid .import-cases{ flex:0 0 80px; }
  .import-row-grid .read-hint{ flex:1 1 220px; min-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .read-hint.warn{ color:var(--berry); }
  .import-row-grid .icon-btn{ flex:0 0 auto; }
  .order-card{ border-top:1px solid var(--border-soft); padding:18px 22px; }
  .order-card:first-child{ border-top:none; }
  .queue-card.dragging{ opacity:.45; }
  .queue-grip{ cursor:grab; color:var(--ink-faint); font-size:15px; line-height:1.6; padding:2px 4px; touch-action:none; user-select:none; flex:0 0 auto; }
  .queue-grip:active{ cursor:grabbing; }
  .queue-rank{ display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; margin-top:2px; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink-soft); font-size:11.5px; font-weight:700; font-family:inherit; flex:0 0 auto; }
  .queue-lines{ display:flex; flex-direction:column; gap:1px; margin-top:6px; }
  .queue-line-chip{ font-size:12px; color:var(--ink-soft); }
  .order-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
  .order-head h3{ font-size:16.5px; margin:0; }
  .order-body{ display:none; margin-top:18px; }
  .order-body.open{ display:block; }
  .order-top{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-bottom:18px; }
  .order-wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; }
  .order-wheel-wrap .status-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
  .order-lines{ display:flex; flex-direction:column; gap:2px; }
  .order-line{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft); }
  .order-line:last-child{ border-bottom:none; }
  .order-line input[type="checkbox"]{ width:19px; height:19px; accent-color:var(--sage); flex:0 0 auto; }
  .order-line .oln-name{ flex:1; font-size:13.5px; }
  .order-line .oln-name.done{ text-decoration:line-through; color:var(--ink-faint); }
  .order-line .oln-qty{ font-size:12.5px; color:var(--ink-soft); }
  .wheel-track{ fill:none; stroke:var(--border-soft); }
  .wheel-progress{ fill:none; stroke-linecap:round; transition:stroke-dashoffset .35s var(--ease); }
  .wheel-progress.ok{ stroke:var(--sage); }
  .wheel-progress.watch{ stroke:var(--steel); }
  .wheel-progress.crit{ stroke:var(--berry); }
  .wheel-pct{ font-size:19px; font-weight:800; fill:var(--ink); font-family:inherit; }
  .order-top-fields{ flex:1 1 260px; display:flex; flex-direction:column; gap:10px; min-width:220px; }
  .order-top-fields .field label{ font-size:11.5px; }
  .order-top-fields input{ font-size:15px; }
  .order-meta-row{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
  .order-actions-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:18px; }
  .del-order{ margin-left:auto; }
  .oln-check-label{ display:flex; align-items:center; gap:10px; flex:1; cursor:pointer; }
  .oln-batch{ flex:0 0 100px; font-size:12.5px; padding:6px 8px; }
  .cust-picker-new{ display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; margin-top:2px; }
  .cust-picker-new .field label{ font-size:11.5px; }
  .cost-panel{ display:flex; flex-direction:column; gap:2px; margin-top:18px; padding:14px 16px; background:var(--surface-2); border-radius:var(--radius-md); max-width:280px; }
  .cost-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; }
  .cost-row.cost-margin{ border-top:1px solid var(--border-soft); margin-top:4px; padding-top:10px; font-weight:700; }
  .cost-row.cost-margin.crit .mono{ color:var(--berry); }
  .cost-input-wrap{ display:flex; align-items:center; gap:3px; font-size:13.5px; }
  .cost-input-wrap input{ width:80px; padding:5px 6px; font-size:13.5px; text-align:right; }
  .bom-view-row:last-child{ border-bottom:none; }

  /* ---------- team / users screen (round 21 — per-person accounts, admin only) ---------- */
  #view-users .user-active{ width:18px; height:18px; accent-color:var(--sage); cursor:pointer; }

  /* ---------- lead finder (round 22 — AI prospecting, upstream of the Prospects pipeline) ---------- */
  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip-check{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--border); border-radius:999px; background:var(--surface);
    padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; user-select:none; transition:border-color .12s var(--ease), background .12s var(--ease), color .12s var(--ease);
  }
  .chip-check input{ accent-color:var(--honey); width:14px; height:14px; margin:0; }
  .chip-check.checked{ border-color:var(--honey); background:var(--honey-tint); color:var(--honey-strong); }
  .lead-link{ color:var(--steel); text-decoration:underline; text-underline-offset:2px; }
  .lead-link:hover{ color:var(--honey-strong); }
  .lead-card{ margin-bottom:16px; }
  .lead-card:last-child{ margin-bottom:0; }
  .lead-card h3{ font-size:16.5px; margin:0 0 3px 0; display:flex; align-items:center; gap:8px; }
  .lead-meta{ margin:2px 0 10px 0; }
  .lead-contact-row{ font-size:13.5px; margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap; }
  .lead-whyfit{ font-size:13.5px; color:var(--ink); margin:0 0 10px 0; line-height:1.5; }
  .lead-opportunity{ background:var(--honey-tint); color:var(--honey-strong); border-radius:var(--radius-sm); padding:8px 12px; font-size:13px; font-weight:600; margin-bottom:12px; display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
  .lead-sources{ margin-bottom:12px; }
  .lead-sources summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--steel); }
  .lead-sources-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:12.5px; }
  .lead-sources-list a{ word-break:break-all; }

  /* Supply graph shares the workspace surfaces and semantic colors. */
  .net-wrap{
    --net-bg0:var(--paper); --net-bg1:var(--surface); --net-accent:var(--honey-strong);
    --net-ink:var(--ink); --net-ink-soft:var(--ink-soft);
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius-lg); padding:20px; color:var(--ink);
  }
  .net-hud-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
  .net-eyebrow{ font-family:inherit; letter-spacing:.06em; text-transform:uppercase; font-size:11px; color:var(--net-accent); }
  .net-title h2{ font-family:inherit; color:var(--ink); font-weight:700; letter-spacing:.02em; margin:3px 0 0; font-size:23px; }
  .net-stats{ display:flex; gap:10px; flex-wrap:wrap; }
  .net-stat{ background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:10px; padding:8px 16px; text-align:center; min-width:78px; }
  .net-stat .v{ display:block; font-family:inherit; font-size:19px; font-weight:600; color:var(--net-accent); line-height:1.2; }
  .net-stat .l{ display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--net-ink-soft); margin-top:2px; }
  .net-stat.crit .v{ color:var(--berry); }
  .net-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .net-search{ background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:9px; padding:8px 12px; color:var(--net-ink); font-family:inherit; font-size:12px; min-width:200px; }
  .net-search::placeholder{ color:var(--net-ink-soft); }
  .net-search:focus{ outline:none; border-color:var(--net-accent); }
  .net-filters{ display:flex; gap:8px; flex-wrap:wrap; }
  .net-chip{ display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.03em; padding:6px 11px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.02); cursor:pointer; color:var(--net-ink-soft); user-select:none; transition:border-color .12s,color .12s; }
  .net-chip input{ accent-color:var(--net-accent); }
  .net-chip.on{ color:var(--net-ink); border-color:var(--border); }
  .net-wrap .btn{ background:rgba(255,255,255,0.06); color:var(--net-ink); border:1px solid var(--border); border-radius:8px; padding:7px 13px; font-size:12px; cursor:pointer; }
  .net-wrap .btn:hover{ background:rgba(255,255,255,0.11); }
  .net-reset{ margin-left:auto; }
  .net-stage{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--paper); }
  .net-svg{ display:block; width:100%; height:min(64vh,560px); touch-action:none; }
  .net-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px; color:var(--net-ink-soft); font-size:13px; max-width:420px; margin:0 auto; }
  .net-legend{ position:absolute; left:14px; bottom:12px; display:flex; gap:14px; flex-wrap:wrap; font-size:10.5px; color:var(--net-ink-soft); background:var(--nav); backdrop-filter:blur(4px); padding:8px 12px; border-radius:10px; border:1px solid var(--border); max-width:calc(100% - 28px); }
  .net-legend span{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .net-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; box-shadow:none; }
  .net-panel{ position:absolute; top:14px; right:14px; width:224px; background:var(--surface-2); backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:12px; padding:16px 16px 14px; box-shadow:0 12px 30px -12px rgba(0,0,0,0.65); }
  .net-panel h3{ font-family:inherit; font-size:14px; margin:2px 0 10px; color:var(--ink); }
  .net-panel-kicker{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--net-accent); }
  .net-panel-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:5px 0; border-top:1px solid var(--border); color:var(--net-ink-soft); }
  .net-panel-row b{ color:var(--net-ink); font-family:inherit; font-weight:500; }
  .net-panel .btn{ margin-top:12px; width:100%; }
  .net-panel-close{ position:absolute; top:8px; right:10px; background:none!important; border:none!important; color:var(--net-ink-soft); cursor:pointer; font-size:13px; padding:2px 6px!important; }
  .net-status-ok{ color:var(--sage)!important; }
  .net-status-watch{ color:var(--net-watch)!important; }
  .net-status-crit{ color:var(--berry)!important; }
  .net-link{ stroke-width:1.4; fill:none; stroke-dasharray:3 6; animation:none; }
  .net-link-supply{ stroke:rgba(95,176,255,0.45); }
  .net-link-bom{ stroke:rgba(52,224,176,0.4); }
  .net-link.dim{ opacity:0.08; }
  @keyframes netFlow{ to{ stroke-dashoffset:-18; } }
  .net-node{ cursor:grab; }
  .net-node.dragging{ cursor:grabbing; }
  .net-node.dim{ opacity:0.15; }
  .net-node-ring{ stroke:rgba(255,255,255,0.28); stroke-width:1; opacity:0.55; fill:none; transform-box:fill-box; transform-origin:center; }
  .net-node.selected .net-node-ring{ stroke:var(--ink); opacity:0.95; animation:none; }
  @keyframes netPulseRing{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.3); opacity:.3; } }
  .net-label{ fill:var(--ink-soft); font-family:inherit; font-size:11px; text-anchor:middle; pointer-events:none; opacity:1; transition:opacity .12s; }
  .net-node:hover .net-label, .net-node.selected .net-label{ opacity:1; }

  /* ============================================================================
     RESPONSIVE / MOBILE (round 8) — below 760px the left section rail becomes a
     fixed bottom tab bar, iOS-style: same markup (.section-rail/.rail-nav/button),
     same delegated click handler (#section-rail listens on the container), just a
     different layout. Nothing here changes what a tap does, only where the row of
     4 buttons sits and how it's drawn. ---------------------------------------- */
  @media (max-width: 760px){
    .app-shell{ flex-direction:column; }
    .section-rail{
      position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60;
      width:100%; height:auto; overflow:visible;
      flex-direction:row; align-items:stretch;
      background:color-mix(in srgb, var(--surface) 92%, transparent);
      -webkit-backdrop-filter:saturate(1.6) blur(14px);
      backdrop-filter:saturate(1.6) blur(14px);
      border-right:none; border-top:1px solid var(--border-soft);
      padding:6px 6px calc(6px + env(safe-area-inset-bottom)) 6px;
    }
    .rail-brand{ display:none; }
    .rail-nav{ flex-direction:row; flex:1 1 auto; gap:2px; }
    .section-rail button{
      flex:1 1 0; flex-direction:column; justify-content:center; align-items:center;
      gap:2px; padding:6px 2px; min-height:52px; text-align:center;
    }
    .rail-text{ align-items:center; }
    .section-rail-sub{ display:none; }
    .section-rail-label{ font-size:10.5px; }
    .app-main{ padding-bottom:0; }

    .top-inner{ flex-wrap:wrap; padding:14px 16px 0 16px; gap:10px; }
    .section-title{ width:100%; margin-bottom:2px; }
    nav.tabs{ margin-left:0; width:100%; }

    main{ padding:22px 16px calc(92px + env(safe-area-inset-bottom)) 16px; }
    .pad{ padding:18px; }
    footer.foot{ padding:0 16px calc(24px + env(safe-area-inset-bottom)) 16px; margin-bottom:60px; }

    .stats{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
    .form-grid{ grid-template-columns:1fr 1fr; }
    .lineitem-grid{ grid-template-columns:1fr; }
    .order-top{ flex-direction:column; align-items:stretch; }
    .cost-panel{ max-width:none; }
  }
  @media (max-width: 460px){
    .form-grid{ grid-template-columns:1fr; }
  }

/* Shared interaction and layout contracts. */
body{line-height:1.45;font-variant-numeric:tabular-nums;}
button,input,select,textarea{transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px;}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1;}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;}
input[type=checkbox]{accent-color:var(--honey);}
.btn-ghost:hover{color:var(--ink);background:var(--surface-2);}
.confirm-arm{background:#9b3049!important;border-color:#9b3049!important;color:#fff!important;}
.table-wrap{max-width:100%;overscroll-behavior-x:contain;scrollbar-color:var(--ink-faint) var(--surface);}
table{background:var(--surface);}
input.cell-input,select.cell-input{width:100%;min-height:32px;padding:5px 7px;font-size:13px;background:transparent;border:1px solid transparent;}
input.cell-input:hover,select.cell-input:hover{border-color:var(--border);background:var(--surface-2);}
input.cell-input:focus,select.cell-input:focus{border-color:var(--honey);background:var(--surface-2);}
.rowname,.product-head h3,.order-head h3{overflow-wrap:anywhere;}
.section-head>div,.head-actions,.field,.stat{min-width:0;}
.section-head p{max-width:65ch;font-size:13px;line-height:1.5;}
.product-card,.order-card{padding:16px 20px;}
.product-head,.order-head{min-height:40px;}
.helper-details{font-size:12px;color:var(--ink-soft);margin-top:12px;}
summary{cursor:pointer;}
.helper-details p{max-width:75ch;line-height:1.6;}
.revenue-panel .section-head h2{font-size:18px;}
.revenue-panel .stat{box-shadow:none;background:transparent;border:0;border-left:1px solid var(--border);border-radius:0;padding:8px 16px;}
.revenue-panel .stat:first-child{border-left:0;padding-left:0;}
.revenue-panel .stat.ok .num{color:var(--ink);}
.net-search{flex:1 1 220px;min-width:0;}
.net-label{paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;}
.net-link-supply{stroke:var(--net-supplier);opacity:.4;}
.net-link-bom{stroke:var(--net-product);opacity:.4;}
.net-panel{max-width:calc(100% - 28px);}
.net-legend{position:static;border:0;border-top:1px solid var(--border-soft);max-width:none;border-radius:0;padding:12px;}
.net-chip{min-height:36px;font-size:12px;}
footer.foot>span{flex-wrap:wrap;}
nav.tabs button[aria-current=page]{color:var(--honey-strong);}
nav.tabs:has(button:only-child){display:none;}
@supports(backdrop-filter:blur(12px)){
 header.top{background:color-mix(in srgb,var(--nav) 92%,transparent);backdrop-filter:blur(12px);}
}
@media(min-width:761px){.section-rail{height:100dvh;}.section-rail-sub{font-size:10px;}.rail-brand{padding-top:26px;}footer.foot{margin-left:180px;}}
@media(max-width:1100px) and (min-width:761px){.top-inner,main{padding-left:20px;padding-right:20px;}}
@media(max-width:760px){
 .section-title{font-size:17px;}.top-inner{gap:4px;}
 nav.tabs button{font-size:12px;min-height:44px;padding:9px 10px;}
 main{padding-top:18px;} .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .stat{padding:14px;}.stat .num{font-size:24px;}
 .btn,.icon-btn{min-height:44px;}.icon-btn{min-width:44px;}
 input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],select,textarea{font-size:16px;min-height:44px;}
 .net-wrap{padding:14px;}.net-stat{padding:6px 10px;min-width:64px;}.net-stats{gap:6px;}
 .net-svg{height:52vh;min-height:300px;}.net-chip{min-height:44px;}
 .net-title h2{font-size:20px;}.net-panel{top:8px;right:8px;}
 .section-head{gap:12px;}.head-actions{flex-wrap:wrap;justify-content:flex-end;}
 .revenue-panel .stats{grid-template-columns:1fr;gap:0;}
 .revenue-panel .stat,.revenue-panel .stat:first-child{border-left:0;border-top:1px solid var(--border-soft);padding:12px 0;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;}
 footer.foot{padding-bottom:100px;margin-bottom:0;}
}

header.top:has(nav.tabs:not([hidden]) button:only-child){display:none;}
.table-wrap:has(tbody td.empty){position:relative;}
td.empty{text-align:left;}
.table-wrap:focus-visible{outline:2px solid var(--honey);outline-offset:3px;}
@media(max-width:760px){.table-wrap::before{content:'Swipe for more columns';display:block;padding:8px 12px;font-size:11px;color:var(--ink-soft);background:var(--surface);position:sticky;left:0;width:100%;}.section-rail{background:var(--nav);}}
.security-dialog{background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:20px;padding:24px;width:min(460px,calc(100% - 32px));max-height:85dvh;overflow:auto;box-shadow:var(--shadow);}
.security-dialog::backdrop{background:rgba(0,0,0,.65);}
.security-close{float:right;}.security-dialog .field{margin:14px 0;}.security-dialog h2{margin:0 0 16px;}
#security-error{color:var(--berry);}#recovery-codes,#security-secret{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;}#security-qr{display:block;border-radius:12px;margin:16px auto;}
.optional-costing{padding:16px;border:1px solid var(--line);border-radius:12px;margin:12px 0}.optional-costing summary{cursor:pointer;font-weight:600}.optional-costing .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.optional-costing input{width:100%;box-sizing:border-box}.costing-error{color:var(--red)}@media(max-width:600px){.optional-costing .grid-2{grid-template-columns:1fr}}