:root{
    --ink:#171c19; --ink-soft:#555e58; --ink-3:#8a928c; --line:#dfe3dc; --paper:#f6f7f4;
    --card:#ffffff; --raised:#eef1ec; --accent:#1d6e4f; --accent-soft:#e3f0e9; --on-accent:#ffffff;
    --warn:#a8421c; --warn-soft:#f6e9e2; --shadow:0 1px 3px rgba(0,0,0,.06);
    --pending:#8a5a00; --pending-soft:#fdf1d9; --good:#1d7a4d; --good-soft:#e3f2e9;
    --bad:#b3391f; --bad-soft:#f8e5df; --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; color-scheme:light;
  }
  @media (prefers-color-scheme:dark){:root{
    --ink:#eef1ef; --ink-soft:#aab2ad; --ink-3:#7b837f; --line:#2a302d; --paper:#0d100f;
    --card:#151918; --raised:#1c211f; --accent:#52c294; --accent-soft:#16291f; --on-accent:#08100c;
    --warn:#f0765f; --warn-soft:#3a1a14; --shadow:0 1px 3px rgba(0,0,0,.5);
    --pending:#e0a53a; --pending-soft:#33280f; --good:#4cc38a; --good-soft:#12301f;
    --bad:#f0765f; --bad-soft:#3a1a14; color-scheme:dark;
  }
  input,select,textarea{color-scheme:dark}
  img.invoice-photo,.keep-light{filter:none}}
  *{box-sizing:border-box;margin:0;padding:0}
  /* Shared base for every bottom-sheet modal overlay — was copy-pasted
     verbatim (position:fixed;inset:0;display:flex;align-items:flex-end)
     across 19 different id selectors, and that copy-paste-and-forget
     shape is exactly what caused two real bugs (osPeriodStmtModal,
     2026-08-08; ecaDetailModal/ecaWhModal/ecaSettleModal, 2026-08-07) —
     a modal missing this rule renders as a plain in-flow block instead
     of a bottom sheet, with its action buttons unreachable. Add
     class="modal-overlay" to any NEW modal's root div; only
     background/z-index still need a per-id override below, for
     stacking order when one modal opens another. */
  .modal-overlay{position:fixed;inset:0;display:flex;align-items:flex-end}
  html,body{overscroll-behavior-y:contain}   /* stop accidental pull-to-refresh reloads */
  body{font-family:var(--font);
    background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
  .hidden{display:none!important}

  /* ---------- login ---------- */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  .login-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:32px 28px;box-shadow:var(--shadow)}
  .brand{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
    font-weight:600;margin-bottom:6px}
  .login-card h1{font-size:22px;font-weight:600;margin-bottom:4px}
  .login-card p.sub{color:var(--ink-soft);font-size:14px;margin-bottom:24px}
  label{display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin:14px 0 6px}
  input{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;
    font-size:16px;background:var(--card);color:var(--ink)}
  input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  button.primary{width:100%;height:46px;margin-top:22px;background:var(--accent);color:var(--on-accent);
    border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer}
  button.primary:active{transform:scale(.99)}
  button.primary:disabled{opacity:.6;cursor:default}
  .err{color:var(--warn);font-size:13px;margin-top:14px;min-height:18px}

  /* ---------- app shell ---------- */
  header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .bar{max-width:760px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px}
  .bar .name{font-weight:600;font-size:16px}
  .bar .who{margin-left:auto;font-size:13px;color:var(--ink-soft)}
  .bar button.out{background:none;border:1px solid var(--line);border-radius:8px;
    padding:6px 12px;font-size:13px;color:var(--ink-soft);cursor:pointer}
  nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);
    border-top:1px solid var(--line);display:flex;max-width:760px;margin:0 auto;
    padding:0;box-shadow:0 -1px 8px rgba(0,0,0,.05)}
  nav.tabs button{flex:1;padding:8px 2px 10px;background:none;border:none;border-top:2px solid transparent;
    font-size:11px;font-weight:500;color:var(--ink-soft);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
  nav.tabs button .tic{font-size:17px;line-height:1}
  nav.tabs button.active{color:var(--accent)}
  /* More overflow sheet */
  .more-sheet{position:fixed;inset:0;z-index:40}
  .more-sheet.hidden{display:none}
  .more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
  .more-panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:16px 16px 0 0;max-width:760px;margin:0 auto;padding:8px 12px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,.15);max-height:70vh;overflow:auto}
  .more-title{font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center;padding:8px 0 6px}
  .more-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .more-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;position:relative}
  .more-item .more-ic{font-size:20px}
  .more-item-badge:not(:empty){position:absolute;top:6px;right:10px;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:8px;background:#c0392b;color:#fff;font-size:10px;font-weight:700;text-align:center}
  main{max-width:760px;margin:0 auto;padding:18px 18px 88px}

  /* ---------- stock ---------- */
  .search{position:relative;margin-bottom:14px}
  .search input{height:50px;padding-left:42px;font-size:16px}
  .search svg{position:absolute;left:14px;top:15px;width:20px;height:20px;stroke:var(--ink-soft)}
  .count{font-size:13px;color:var(--ink-soft);margin-bottom:10px}
  .item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    margin-bottom:8px;display:flex;align-items:center;gap:12px}
  .item .info{min-width:0;flex:1}
  .item .nm{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .item .meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .item .qty{text-align:right;flex-shrink:0}
  .item .qty .n{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
  .item .qty .u{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
  .qty .n.low{color:var(--warn)}
  .qty .n.zero{color:#b22}
  .rate{font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap}
  .empty{text-align:center;color:var(--ink-soft);padding:48px 20px;font-size:15px}

  /* ---------- dashboard ---------- */
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
  .kpi .l{font-size:12px;color:var(--ink-soft);margin-bottom:4px}
  .kpi .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
  h2.sec{font-size:14px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;
    letter-spacing:.05em;margin:22px 0 10px}
  .rank{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .rank .row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .rank .row:last-child{border-bottom:none}
  .rank .pos{width:22px;height:22px;flex-shrink:0;background:var(--accent-soft);color:var(--accent);
    border-radius:6px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
  .rank .rn{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rank .rv{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
  .loading{text-align:center;color:var(--ink-soft);padding:40px;font-size:14px}
  .foot{text-align:center;color:var(--ink-soft);font-size:12px;padding:20px}

  /* ---------- customers / ledger ---------- */
  .cust{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer}
  .cust:active{background:var(--paper)}
  .cust .info{min-width:0;flex:1}
  .cust .nm{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cust .meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .cust .bal{text-align:right;flex-shrink:0}
  .cust .bal .n{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
  .cust .bal .n.owes{color:var(--warn)}
  .cust .bal .n.credit{color:var(--accent)}
  .cust .bal .u{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
  .cust .chev{color:var(--line);flex-shrink:0;font-size:20px}

  button.back{background:none;border:none;color:var(--accent);font-size:14px;font-weight:500;
    cursor:pointer;padding:4px 0;margin-bottom:12px}
  .led-head{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
  .led-name{font-size:18px;font-weight:600}
  .led-meta{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .led-bal{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
    display:flex;align-items:baseline;justify-content:space-between}
  .led-bal-l{font-size:13px;color:var(--ink-soft)}
  .led-bal-v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
  .led-bal-v.owes{color:var(--warn)} .led-bal-v.credit{color:var(--accent)}

  .led-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line)}
  .led-row .ld{flex:1;min-width:0}
  .led-row .lk{font-size:14px;font-weight:500}
  .led-row .ldate{font-size:12px;color:var(--ink-soft);margin-top:1px}
  .led-row .lamt{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
  .led-row .lamt.dr{color:var(--warn)} .led-row .lamt.cr{color:var(--accent)}
  .led-row .lrun{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
    text-align:right;white-space:nowrap;min-width:78px}
  .led-open{display:flex;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--line);
    font-size:13px;color:var(--ink-soft);font-style:italic}
  .led-row.tappable{cursor:pointer}
  .led-row.tappable:active{background:var(--paper)}
  .led-row .lk .seehint{color:var(--accent);font-size:11px;margin-left:6px}
  .disp-tag{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
    border-radius:4px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;
    line-height:1;vertical-align:middle}
  .ldispatch,.os-inv-dispatch{font-size:11px;color:var(--accent);margin-top:1px}

  .cs-subtabs{display:flex;gap:8px;margin-bottom:12px}
  .cs-sub{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--paper);
    font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer}
  .cs-sub.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

  /* Reports' grouped menu (replaces a horizontal-scroll cs-sub strip once
     the report count grew past ~13 — reuses .more-sheet/.more-backdrop/
     .more-panel/.more-title's bottom-sheet mechanics as-is, just with its
     own grouped list instead of that grid of icon cards). */
  .rpt-menu-btn{width:100%;text-align:left;padding:10px 14px;border-radius:8px;border:1px solid var(--line);
    background:var(--paper);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
    display:flex;align-items:center;gap:6px}
  .rpt-menu-caret{margin-left:auto;color:var(--ink-soft)}
  .rpt-menu-group{margin-bottom:14px}
  .rpt-menu-group.hidden{display:none}
  .rpt-menu-group-h{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;
    letter-spacing:.04em;padding:4px 4px 6px}
  .rpt-menu-item{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;
    border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:500;
    color:var(--ink);cursor:pointer;margin-bottom:6px}
  .rpt-menu-item.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .rpt-menu-item.hidden{display:none}
  .rpt-hub-group{margin:6px 0 18px}
  .rpt-hub-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 2px 8px}
  .rpt-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .rpt-hub-card{text-align:left;padding:14px 12px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:inherit;font:inherit;font-weight:600;font-size:14px;cursor:pointer;min-height:56px}
  .rpt-hub-card:active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .cs-firm-badge{display:inline-block;padding:1px 7px;border-radius:10px;background:var(--paper);
    border:1px solid var(--line);font-size:10px;color:var(--ink-soft);margin-right:4px}
  .cs-tinv{padding:12px 4px;border-bottom:1px solid var(--line)}
  .cs-tinv-head{font-size:13px;font-weight:600;margin-bottom:6px}
  .cs-tline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;font-size:13px}
  .cs-tline-name{flex:1;min-width:0}
  .cs-tline-qty{white-space:nowrap;color:var(--ink-soft);font-size:12px}
  .cs-unmapped{color:var(--warn)}
  .cs-map-btn,.cs-reverse-map-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--accent);background:none;
    color:var(--accent);font-size:12px;cursor:pointer;white-space:nowrap}
  .cs-map-results{max-height:280px;overflow-y:auto;margin-top:8px}
  .cs-map-result{padding:9px 6px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
  .cs-map-result:active{background:var(--paper)}
  .cs-map-result .meta{color:var(--ink-soft);font-size:12px;margin-left:6px}
  .cs-mapped-badge{display:inline-block;padding:1px 7px;border-radius:10px;background:var(--accent);
    color:var(--on-accent);font-size:10px;font-weight:600;margin-left:6px;vertical-align:middle}
  .cs-chip-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .cs-chip-scroll::-webkit-scrollbar{height:5px}
  .cs-chip-scroll::-webkit-scrollbar-track{background:transparent}
  .cs-chip-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .cs-chip-scroll .cs-chip{flex-shrink:0;padding:6px 13px;border:1px solid var(--line);background:var(--card);
    border-radius:18px;font-size:13px;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
  .cs-chip-scroll .cs-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  #csLoginModal{background:rgba(20,22,20,.45);z-index:60}
  #csLoginModal .cart-sheet{max-height:60vh;overflow-y:auto}
  #csMapModal{background:rgba(20,22,20,.45);z-index:60}
  #csMapModal .cart-sheet{max-height:80vh;overflow-y:auto}
  .cs-export-btn,.cs-reverse-export-btn{margin-top:8px;width:100%;padding:10px;border-radius:8px;border:none;
    background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:600;cursor:pointer}
  .cs-export-btn:disabled,.cs-reverse-export-btn:disabled{opacity:.6}
  .cs-export-hint{margin-top:8px;font-size:12px;color:var(--ink-soft)}

  .rpt-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
  .rpt-table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
  .rpt-table th,.rpt-table td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line)}
  .rpt-table th:first-child,.rpt-table td:first-child{text-align:left}
  .rpt-table th{background:var(--paper);color:var(--ink-soft);font-weight:600;position:sticky;top:0}
  .rpt-table tr.tappable{cursor:pointer}
  .rpt-table tr.tappable:active{background:var(--paper)}
  .rpt-table .rpt-nm{white-space:normal;min-width:160px}
  .rpt-table tr:last-child td{border-bottom:none}
  .rpt-table tr.rpt-total td{font-weight:700;background:var(--paper)}
  /* first column stays visible when scrolling right — real request,
     tables here can run 6-10 columns wide on a phone */
  .rpt-table th:first-child,.rpt-table td:first-child{position:sticky;left:0;background:var(--card);z-index:1}
  .rpt-table th:first-child{z-index:2;background:var(--paper)}
  .rpt-shortage-cell{color:var(--warn);font-weight:700}
  .rpt-gap-cell{background:var(--warn-soft);color:var(--warn);font-weight:700}
  .rpt-table tr.rpt-discvar-flag td{background:var(--warn-soft)}
  .rpt-table tr.rpt-discvar-flag td:first-child{background:var(--warn-soft)}
  .rpt-comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
  .rpt-comp-card{border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;background:var(--card)}

  /* ---- Reconciliation (Tata Statement, 2026-08-25) ---- */
  .rec-upload-row{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
  .rec-upload-btn{cursor:pointer}
  .rec-filename{color:var(--ink-soft);font-size:13px}
  .rec-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
  .rec-chip-matched{background:var(--good-soft);color:#1e8242}
  .rec-chip-variance{background:var(--warn-soft);color:var(--warn)}
  .rec-chip-not_found{background:var(--bad-soft);color:#a8241c}
  .rec-chip-not_checked{background:var(--line);color:var(--ink-soft)}
  .rec-history-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
  .rec-history-row:active{background:var(--paper)}
  .rec-summary-line{margin:10px 0;color:var(--ink-soft);font-size:13px}
  .rpt-comp-card:active{background:var(--paper)}
  .rpt-comp-card .n{font-size:22px;font-weight:700}
  .rpt-comp-card .n.warn{color:var(--warn)}
  .rpt-comp-card .lbl{font-size:12px;color:var(--ink-soft);margin-top:2px}

  /* ---- Letters module (2026-08-25) ---- */
  .cart-sheet-wide{max-width:960px}
  /* Save/action buttons pinned to the bottom of the scrollable sheet —
     the earlier fix (overflow-y:auto on the sheet) made the button
     technically reachable by scrolling, but Ankit still couldn't find
     it because the overflow was tiny (~11px) and nothing signaled
     there was anything to scroll to. Sticky removes the need to
     notice a scrollbar at all — the button is always on screen. */
  .lt-modal-footer{position:sticky;bottom:-18px;margin:14px -18px -18px;padding:12px 18px;
    background:var(--paper);border-top:1px solid var(--line)}
  /* Every OTHER .cart-sheet modal in this app has its own per-id
     overflow-y:auto override (the shared base .cart-sheet rule
     deliberately omits it) — missed here originally, which meant tall
     forms (Add Firm especially) rendered past the sheet's own
     max-height with overflow:visible, leaving the Save button ~150px
     below the visible box with no scroll affordance to reach it.
     Confirmed live 2026-08-25 via computed-style inspection. */
  #ltFirmModal .cart-sheet,#ltCategoryEditModal .cart-sheet,#ltIssueModal .cart-sheet,
  #ltLetterModal .cart-sheet,#ltDetailModal .cart-sheet{max-height:85vh;overflow-y:auto}
  /* The real reason the Save button was still unreachable after the
     sticky-footer fix above: .modal-overlay itself has no z-index, so
     it defaults below nav.tabs's explicit z-index:30 — the app's own
     fixed bottom tab bar was rendering ON TOP of these 5 Letters
     modals (including their sticky footer), not just scrolled past
     it. Every other modal in this app already has its own per-id
     z-index override for this same reason; these 5 never got one when
     the module was built. Confirmed live via real-browser screenshot
     2026-08-26 — the bottom nav bar visibly covered the modal. */
  #ltFirmModal,#ltCategoryEditModal,#ltIssueModal,#ltLetterModal,#ltDetailModal{z-index:50}
  .lt-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
  .lt-row:active{background:var(--paper)}
  .lt-row .lt-row-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .lt-status-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
  .lt-status-draft{background:var(--line);color:var(--ink-soft)}
  .lt-status-approved{background:#e6ecfd;color:#2f4fb0}
  .lt-status-sent{background:var(--good-soft);color:#1e8242}
  .lt-status-response_pending{background:var(--warn-soft);color:var(--warn)}
  .lt-status-in_progress{background:var(--warn-soft);color:var(--warn)}
  .lt-status-resolved{background:var(--good-soft);color:#1e8242}
  .lt-status-cancelled{background:var(--bad-soft);color:#a8241c}
  .lt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
  .lt-form-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-soft)}
  .lt-form-grid label.lt-full{grid-column:1/-1}
  .lt-form-grid label.lt-check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
  .lt-form-grid label.lt-check input[type=checkbox]{width:18px;height:18px;flex:none}
  .lt-form-grid input,.lt-form-grid select,.lt-form-grid textarea{font-family:inherit;font-size:14px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
  .lt-ai-panel{border:1px dashed var(--line);border-radius:10px;padding:12px;margin:12px 0;background:var(--paper)}
  .lt-ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .lt-editor{width:100%;min-height:220px;font-family:inherit;font-size:14px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
  .lt-version-row{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
  .lt-version-row:last-child{border-bottom:none}
  .lt-activity-row{padding:6px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
  .lt-activity-row:last-child{border-bottom:none}
  .rpt-ps-drill-row td{background:var(--paper);padding:8px 6px}
  .rpt-ps-drill-table{font-size:11.5px}
  .rpt-ps-drill-table th,.rpt-ps-drill-table td{padding:6px 8px}
  .rpt-drill-wrap{display:block}
  .rpt-drill-tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
  .rpt-drill-tabs .cs-chip{font-size:11.5px;padding:4px 10px}
  .rpt-table tr.rpt-total td:first-child{background:var(--paper)}
  .rpt-target-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;
    border-bottom:1px solid var(--line)}
  .rpt-target-brand{font-size:13px;flex:1}
  .rpt-target-input{width:110px;padding:7px 9px;border-radius:8px;border:1px solid var(--line);font-size:13px;text-align:right}
  #rptTargetModal{background:rgba(20,22,20,.45);z-index:60}
  #rptTargetModal .cart-sheet{max-height:80vh;overflow-y:auto}
  #rptTargetModal #rptTargetMonth{width:100%;padding:9px;border-radius:8px;border:1px solid var(--line);margin-bottom:8px}
  #supplierMapModal{background:rgba(20,22,20,.45);z-index:60}
  #supplierMapModal .cart-sheet{max-height:80vh;overflow-y:auto}
  .rpt-sup-brand-input{width:130px;padding:6px 8px;border-radius:6px;border:1px solid var(--line);font-size:12px}
  .rpt-inv-row{cursor:pointer}
  .rpt-inv-row:active{background:var(--paper)}
  .rpt-override-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .rpt-override-input{width:150px}
  #rptClosedDate,#rptTithiDate{padding:9px;border-radius:8px;border:1px solid var(--line)}
  .rpt-off-flag{display:inline-block;padding:1px 7px;border-radius:10px;background:var(--warn);
    color:#fff;font-size:10px;font-weight:700;margin-left:6px;vertical-align:middle}
  .rpt-off-cust-row{padding:9px 6px;border-bottom:1px solid var(--line)}
  .rpt-off-cust-row .meta{color:var(--ink-soft);font-size:12px}
  .rpt-tithi-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
  .rpt-tithi-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:14px;
    background:var(--paper);border:1px solid var(--line);font-size:12px}
  .rpt-tithi-chip button{border:none;background:none;color:var(--warn);cursor:pointer;font-size:13px;line-height:1;padding:0}
  .rpt-tithi-add{display:flex;gap:6px;margin-top:4px}
  .rpt-tithi-add input{flex:1;padding:7px 9px;border-radius:8px;border:1px solid var(--line);font-size:12.5px}
  .rpt-tithi-add button{padding:7px 12px;border-radius:8px;border:none;background:var(--accent);color:var(--on-accent);font-size:12.5px}
  .cust-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
  .cust-tag-chip{display:inline-block;padding:2px 9px;border-radius:12px;background:var(--warn-soft);
    color:var(--warn);font-size:11px;font-weight:600;border:1px solid var(--warn)}
  .cust-tag-edit-btn{padding:2px 10px;border-radius:12px;border:1px solid var(--line);background:none;
    color:var(--ink-soft);font-size:11px;cursor:pointer}
  .rpt-tithi-chip.addable{cursor:pointer;background:var(--paper)}
  .rpt-tithi-chip.addable:active{background:var(--line)}
  #custTagModal{background:rgba(20,22,20,.45);z-index:60}
  #custTagModal .cart-sheet{max-height:80vh;overflow-y:auto}

  .rpt-kanban-toolbar{margin:8px 0}
  #rptItemWeightBox{margin-bottom:12px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
  #rptItemWeightSearch{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);margin-bottom:6px}
  .rpt-iw-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line)}
  .rpt-iw-row .nm{font-size:12.5px;flex:1;min-width:0}
  .rpt-iw-row input{width:60px;padding:6px 7px;border-radius:6px;border:1px solid var(--line);font-size:12px;text-align:right}
  .rpt-iw-row select{width:62px;padding:6px 4px;border-radius:6px;border:1px solid var(--line);font-size:12px}
  .rpt-dow-boxes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .rpt-dow-box{display:flex;align-items:center;gap:3px;font-size:11.5px;padding:3px 7px;border:1px solid var(--line);border-radius:8px}
  #rptVacationAddBox{margin:8px 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
  #rptVacationAddBox input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);margin-bottom:6px}
  .rpt-kanban-board{display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .rpt-kanban-col{flex:1 1 0;min-width:230px;background:var(--paper);border-radius:12px;padding:6px}
  .rpt-kanban-col-head{font-size:13px;font-weight:700;padding:4px 4px 6px;display:flex;justify-content:space-between}
  .rpt-kanban-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 9px;margin-bottom:6px}
  .rpt-kanban-card.overdue{border-color:var(--warn);border-width:2px}
  .rpt-kanban-card .nm{font-size:13px;font-weight:600;cursor:pointer}
  .rpt-kanban-card .meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
  .rpt-kanban-card .qty2{font-size:11.5px;margin-top:4px}
  .rpt-kanban-pills{display:flex;gap:5px;margin-top:8px}
  .rpt-kanban-pill{flex:1;padding:5px 4px;border-radius:7px;border:1px solid var(--line);background:none;
    font-size:10.5px;color:var(--ink-soft);cursor:pointer;text-align:center}
  .rpt-kanban-pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  @media (max-width:640px){ .rpt-kanban-col{min-width:82vw} }
  .rpt-stock-pct{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700;vertical-align:middle}
  .rpt-stock-pct.good{background:#e2f1e6;color:#1e7d3a}
  .rpt-stock-pct.mid{background:#fbeedb;color:#a8681c}
  .rpt-stock-pct.bad{background:var(--warn-soft);color:var(--warn)}
  .cs-exported{margin-top:8px;font-size:12px;color:var(--accent);font-weight:500}
  #csMapNewBox{margin-top:8px}
  .cs-new-product{display:inline-block;padding:1px 6px;border-radius:4px;background:var(--warn);
    color:#fff;font-size:10px;font-weight:700;vertical-align:middle;margin-right:4px}
  .cs-map-modes{display:flex;gap:6px;margin:8px 0}
  .cs-map-mode{flex:1;padding:7px 4px;border-radius:7px;border:1px solid var(--line);background:var(--paper);
    font-size:12px;color:var(--ink-soft);cursor:pointer}
  .cs-map-mode.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .cs-row-map-btn{padding:3px 9px;border-radius:6px;border:1px solid var(--accent);background:none;
    color:var(--accent);font-size:11px;cursor:pointer;white-space:nowrap;margin-left:8px}
  .cs-map-add{padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:10px}
  .cs-map-add select{width:100%;margin:6px 0;padding:9px;border-radius:8px;border:1px solid var(--line);
    background:var(--card);font-size:14px}
  .cs-map-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:10px 4px;border-bottom:1px solid var(--line)}
  .cs-map-row-txt{flex:1;min-width:0;font-size:13px}
  .cs-map-row-actions{display:flex;gap:6px;flex-shrink:0}
  .cs-map-change-btn,.cs-map-unmap-btn{padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap}
  .cs-map-change-btn{border:1px solid var(--line);background:none;color:var(--ink-soft)}
  .cs-map-unmap-btn{border:1px solid var(--warn);background:none;color:var(--warn)}
  .rpt-optimize-btn{padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;
    white-space:nowrap;border:1px solid var(--accent);background:none;color:var(--accent);margin:4px 0}
  #csMapBrandFilter,#csMapAddBrandFilter{width:100%;margin:6px 0;padding:9px;border-radius:8px;
    border:1px solid var(--line);background:var(--card);font-size:14px}
  .cs-map-current{margin:8px 0;padding:8px 10px;border-radius:8px;background:var(--paper);font-size:13px}
  .cs-map-current-none{color:var(--ink-soft);font-style:italic}
  .mrow-sub2{margin-left:22px;padding:8px 14px;background:var(--paper)}
  .mrow-sub2 .nm{font-size:13px;font-weight:400;color:var(--ink-soft)}

  /* ---------- invoice detail ---------- */
  .inv-actions{display:flex;gap:8px;margin-bottom:14px;align-items:center}
  .inv-actions button.print{margin-left:auto;background:var(--accent);color:var(--on-accent);border:none;
    border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
  .invoice{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
  .inv-firm{font-size:20px;font-weight:700;color:var(--accent)}
  .inv-firm-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .inv-divide{border:none;border-top:1px solid var(--line);margin:16px 0}
  .inv-to-l{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
  .inv-to-n{font-size:16px;font-weight:600;margin-top:2px}
  .inv-to-m{font-size:13px;color:var(--ink-soft)}
  .inv-meta{display:flex;justify-content:space-between;margin-top:12px;font-size:13px}
  .inv-meta .k{color:var(--ink-soft)}
  table.inv-items{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
  table.inv-items th{text-align:left;color:var(--ink-soft);font-weight:500;font-size:11px;
    text-transform:uppercase;letter-spacing:.04em;padding:8px 6px;border-bottom:1px solid var(--line)}
  table.inv-items th.num,table.inv-items td.num{text-align:right;font-variant-numeric:tabular-nums}
  table.inv-items td{padding:9px 6px;border-bottom:1px solid var(--paper)}
  table.inv-items tr:last-child td{border-bottom:none}
  .inv-total{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;
    border-top:2px solid var(--ink);font-size:17px;font-weight:700}
  .inv-note{font-size:11px;color:var(--ink-soft);margin-top:16px;text-align:center}
  @media print{
    body{background:var(--card)} header,nav.tabs,.inv-actions,.foot{display:none!important}
    main{max-width:none;padding:0} .invoice{border:none;border-radius:0;padding:0}
  }

  /* ---------- order taking ---------- */
  .ord-for{font-size:14px;color:var(--ink-soft);margin-bottom:12px}
  .ord-for b{color:var(--ink)}
  .ord-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    margin-bottom:8px;display:flex;align-items:center;gap:12px}
  .ord-item .info{flex:1;min-width:0}
  .ord-item .nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ord-item .meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .ord-item.out{opacity:.5}
  .stepper{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .stepper button{width:32px;height:32px;border:1px solid var(--line);background:var(--card);border-radius:8px;
    font-size:18px;font-weight:600;color:var(--accent);cursor:pointer;line-height:1}
  .stepper button:active{background:var(--accent-soft)}
  .stepper .q{min-width:28px;text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
  .ord-add{background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;padding:8px 14px;
    font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0}

  /* expanded order item editor */
  .ord-item-x{background:var(--card);border:1px solid var(--accent);border-radius:12px;
    padding:12px 14px;margin-bottom:8px}
  .oix-top{display:flex;align-items:flex-start;gap:10px}
  .oix-top .nm{font-size:14px;font-weight:600;flex:1}
  .oix-meta{font-size:12px;color:var(--ink-soft);margin:2px 0 10px}
  .oix-grid{display:flex;gap:10px}
  .oix-grid4{gap:7px}
  .oix-grid4 input{padding:0 6px;font-size:15px}
  .oix-grid label{flex:1;font-size:11px;color:var(--ink-soft);display:flex;flex-direction:column;gap:3px}
  .oix-grid input{height:42px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
    font-size:16px;text-align:center;font-variant-numeric:tabular-nums}
  .oix-grid input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .oix-landing{margin-top:8px;font-size:13px;color:var(--ink-soft)}
  .oix-landing b{color:var(--accent);font-size:15px}
  .oix-eff{color:var(--ink-soft);font-size:12px}
  .oix-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
    padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}
  .oix-foot b{font-size:16px;color:var(--ink)}
  .oix-disc-hint{font-size:11.5px;color:var(--accent);background:var(--accent-soft);
    border-radius:7px;padding:5px 9px;margin-top:8px}
  .oix-disc-hint.over{color:var(--warn);background:var(--warn-soft);font-weight:600}
  .oix-unit{display:flex;gap:6px;margin-bottom:8px}
  .oix-unit button{flex:1;padding:7px;border:1px solid var(--line);background:var(--card);border-radius:8px;
    font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .oix-unit button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .oix-unit button:disabled{opacity:.4;cursor:not-allowed}
  .ord-company{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;
    font-size:14px;background:var(--card);margin-bottom:12px;color:var(--ink)}
  .ord-sticky{position:sticky;top:52px;z-index:15;background:var(--paper);
    padding-top:8px;margin-bottom:4px}
  .cart-remark{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;
    font-size:15px;margin-bottom:12px;background:var(--card)}
  .cart-remark:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .mg-note-remark{font-size:12.5px;color:var(--ink);background:var(--accent-soft);
    border-radius:8px;padding:6px 10px;margin-top:6px}
  .mg-rfa{font-size:12.5px;color:var(--warn);background:var(--warn-soft);font-weight:600;
    border-radius:8px;padding:7px 10px;margin-top:6px}

  #toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:var(--paper);padding:14px 22px;border-radius:12px;font-size:14px;font-weight:600;
    z-index:60;max-width:90%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.25);
    opacity:0;pointer-events:none;transition:opacity .25s, transform .25s}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---------- performance dashboard ---------- */
  .perf-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
  .perf-title{font-size:22px;font-weight:600}
  .perf-note{font-size:12px;color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:6px;font-weight:600}
  .perf-sec{font-size:13px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;
    letter-spacing:.04em;margin:24px 0 10px}
  .perf-sec span{font-weight:400;text-transform:none;letter-spacing:0}
  .perf-cmp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  @media(max-width:560px){.perf-cmp{grid-template-columns:1fr}}
  .cmpc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
  .cmpc-l{font-size:12px;color:var(--ink-soft);margin-bottom:6px}
  .cmpc-v{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
  .cmpc-d{font-size:12px;margin-top:4px;font-weight:500}
  .cmpc-d.up{color:var(--accent)} .cmpc-d.down{color:var(--warn)} .cmpc-d.flat{color:var(--ink-soft)}
  .perf-range{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
  .os-sort-label{font-size:12px;color:var(--ink-soft);margin-right:2px}
  .pr{padding:7px 14px;border:1px solid var(--line);background:var(--card);border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .pr.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .lb-row{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:12px 14px;margin-bottom:8px}
  .lb-pos{width:26px;height:26px;flex-shrink:0;background:var(--accent-soft);color:var(--accent);
    border-radius:7px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
  .lb-body{flex:1;min-width:0}
  .lb-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .lb-name{font-size:14px;font-weight:600}
  .lb-val{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
  .lb-bar{height:6px;background:var(--paper);border-radius:3px;margin:6px 0 4px;overflow:hidden}
  .lb-fill{height:100%;background:var(--accent);border-radius:3px}
  .lb-sub{font-size:12px;color:var(--ink-soft)}
  .bars{display:flex;align-items:flex-end;gap:5px;height:165px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:14px 10px 6px}
  .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:4px}
  .bar-fill{width:100%;max-width:22px;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}
  .bar-lbl{font-size:10px;color:var(--ink-soft)}
  .bar-cap{display:flex;flex-direction:column;align-items:center;line-height:1.1;min-height:11px}
  .bar-cap .bar-n{font-size:10px;font-weight:700;color:var(--ink)}
  .bar-cap .bar-v{font-size:8.5px;color:var(--ink-soft)}
  .tm-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
  .tm-name{font-size:15px;font-weight:600;margin-bottom:8px}
  .tm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .tm-cell{text-align:center}
  .tm-v{font-size:18px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
  .tm-l{font-size:10.5px;color:var(--ink-soft);line-height:1.25;margin-top:2px}
  .tm-sub{font-size:9px;color:var(--line)}
  @media(max-width:520px){ .tm-grid{grid-template-columns:repeat(3,1fr)} }
  /* incentive tracker */
  .inc-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
  .inc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .inc-name{font-size:15px;font-weight:600}
  .inc-earn{font-size:17px;font-weight:700;color:var(--accent)}
  .inc-of{font-size:12px;color:var(--ink-soft);font-weight:500}
  .inc-warn{font-size:12px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:7px 9px;margin-bottom:8px}
  .inc-params{display:flex;flex-direction:column;gap:2px}
  .inc-prow{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 8px;border-radius:6px}
  .inc-prow.inc-hit{background:var(--accent-soft)}
  .inc-prow.inc-miss{background:var(--card)}
  .inc-prow.inc-none{opacity:.55}
  .inc-pl{flex:1;font-weight:500}
  .inc-w{font-size:10px;color:var(--ink-soft);margin-left:6px}
  .inc-pa{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
  .inc-pt{color:var(--line)}
  .inc-pe{width:54px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .inc-hit .inc-pe{color:var(--accent)}
  /* incentive editor */
  .incf-card{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
  .incf-name{font-size:15px;font-weight:600;margin-bottom:8px}
  .incf-total{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .incf-total label{font-size:13px;flex:1}
  .incf-total input{width:90px}
  .incf-head{display:flex;font-size:11px;color:var(--ink-soft);font-weight:600;margin-bottom:4px}
  .incf-head span:first-child{flex:1}
  .incf-head span:not(:first-child){width:84px;text-align:center}
  .incf-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .incf-row label{flex:1;font-size:13px}
  .incf-row input{width:80px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px}
  .incf-total input{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px}
  .incf-save{width:100%;margin-top:8px;height:40px;border:none;border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:600;cursor:pointer}
  .perf-sub-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:11px}
  .perf-dates{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
  .perf-dates input[type=date]{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:13px}
  .perf-dates button{height:38px;padding:0 16px;background:var(--ink);color:var(--paper);border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
  .ph{padding:6px 13px;border:1px solid var(--line);background:var(--card);border-radius:18px;font-size:13px;color:var(--ink-soft);cursor:pointer}
  .ph.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .perf-hint{font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center}
  .lb-row{cursor:pointer}
  .drill-total{font-size:14px;font-weight:600;padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
  .drill-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .dr-party{font-size:14px;font-weight:500}
  .dr-meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .dr-amt{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}

  /* ---------- beat ---------- */
  .beat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .beat-day{font-size:18px;font-weight:600}
  .beat-daysel{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:14px;background:var(--card)}
  .beat-legend{display:flex;gap:14px;font-size:12px;color:var(--ink-soft);margin-bottom:14px}
  .beat-legend i.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
  .dot.green{background:var(--accent)} .dot.red{background:var(--warn)} .dot.grey{background:#c4c4bd}
  .beat-o{background:var(--card);border:1px solid var(--line);border-left:4px solid #c4c4bd;
    border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
  .beat-o.green{border-left-color:var(--accent)} .beat-o.red{border-left-color:var(--warn)}
  .beat-o .info{flex:1;min-width:0}
  .beat-o .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .beat-o .meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .beat-o .bo-act{display:flex;gap:6px;flex-shrink:0}
  .beat-o button{padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid}
  .bo-order{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .bo-noord{background:var(--card);color:var(--ink-soft);border-color:var(--line)}

  /* ---------- new customer ---------- */
  .new-cust-row{display:flex;gap:8px;margin-bottom:12px}
  .ord-filters{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  .ord-scope-row{display:flex;gap:8px}
  .ord-scope-row .ord-company{flex:1}
  .ord-beat-tog{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}
  .ord-beat-tog input{width:16px;height:16px}
  .ord-brand-block{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
  .ord-brand-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
  .ord-brand-head>span{font-size:13px;font-weight:600;flex:1}
  .ord-anyall,.ord-bnbtoggle{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-shrink:0}
  .bnb{border:none;background:var(--card);padding:0 11px;height:34px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .bnb.active{background:var(--accent);color:var(--on-accent)}
  .ord-brand-chips{display:flex;flex-wrap:wrap;gap:6px}
  .brand-chip{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink)}
  .brand-chip.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .ord-brand-hint{font-size:12px;color:var(--ink-soft);padding:2px 0}
  .ord-filter-note{font-size:12px;color:var(--ink-soft);min-height:14px;margin-top:6px}
  /* refill popup */
  #refillModal{background:rgba(20,22,20,.5);z-index:80}
  .rf-sheet{background:var(--paper);width:100%;max-width:760px;margin:0 auto;border-radius:18px 18px 0 0;max-height:85vh;display:flex;flex-direction:column;padding:18px}
  .rf-head{font-size:16px;font-weight:700;margin-bottom:4px}
  .rf-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;line-height:1.4}
  .rf-brands{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .rf-bchip{border:1px solid var(--line);background:var(--card);border-radius:15px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--ink)}
  .rf-bchip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .rf-list{overflow-y:auto;flex:1;margin-bottom:12px}
  .rf-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--paper)}
  .rf-info{flex:1;min-width:0}
  .rf-nm{font-size:14px;display:block}
  .rf-br{font-size:11px;color:var(--ink-soft)}
  .rf-entry{display:flex;align-items:center;gap:6px;flex-shrink:0}
  .rf-qty{width:56px;height:38px;border:1px solid var(--line);border-radius:8px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
  .rf-unit{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .rf-u{border:none;background:var(--card);padding:0 10px;height:38px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .rf-u.active{background:var(--accent);color:var(--on-accent)}
  .rf-empty{color:var(--ink-soft);font-size:13px;padding:10px}
  .rf-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .rf-foot span{font-size:12.5px;color:var(--ink-soft)}
  .rf-done{height:46px;padding:0 28px;border:none;background:var(--accent);color:var(--on-accent);border-radius:11px;font-size:15px;font-weight:700;cursor:pointer}
  .new-cust-btn{flex:1;padding:10px;border:1px dashed var(--accent);background:var(--accent-soft);
    color:var(--accent);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer}
  .nc-l{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:10px}
  .nc-l input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;
    font-size:16px;margin-top:4px}
  .nc-save{width:100%;height:48px;background:var(--accent);color:var(--on-accent);border:none;border-radius:11px;
    font-size:16px;font-weight:700;cursor:pointer;margin-top:6px}

  /* ---------- order sections (reorder/focus) ---------- */
  .ord-section-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--accent);margin:14px 0 8px;display:flex;align-items:center;gap:6px}
  .ord-section-h.focus{color:#b8860b}
  .ord-section-h.other{color:var(--ink-soft)}
  .focus-star{cursor:pointer;font-size:18px;flex-shrink:0;color:#ddd;background:none;border:none}
  .focus-star.on{color:#f0a500}
  .cust-toggle{margin-left:10px;background:var(--accent-soft);color:var(--accent);border:none;
    border-radius:14px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer}
  .cust-toggle.on{background:var(--ink);color:var(--paper)}

  /* editable cart summary lines */
  .cart-line-edit{padding:12px 0;border-bottom:1px solid var(--line)}
  .cle-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
  .cle-nm{flex:1;font-size:14px;font-weight:500;line-height:1.3}
  .cle-rm{background:none;border:none;color:var(--warn);font-size:16px;cursor:pointer;padding:0 4px;flex-shrink:0}
  .cle-controls{display:flex;align-items:center;gap:8px}
  .cle-unit{display:flex;gap:3px}
  .cle-unit button{padding:5px 9px;border:1px solid var(--line);background:var(--card);border-radius:6px;
    font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .cle-unit button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .cle-unit button:disabled{opacity:.4;cursor:not-allowed}
  .cle-qty{width:56px;height:38px;border:1px solid var(--line);border-radius:8px;text-align:center;
    font-size:15px;font-variant-numeric:tabular-nums}
  .cle-qty:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .cle-x{color:var(--ink-soft);font-size:13px}
  .cle-rate{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .cle-amt{margin-left:auto;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
  .cle-sub{font-size:11.5px;color:var(--ink-soft);margin-top:5px}
  .cle-remark{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
    font-size:13px;margin-top:6px;background:var(--card)}
  .cle-remark:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

  #cartBar{position:fixed;left:0;right:0;bottom:62px;background:var(--accent);color:var(--on-accent);z-index:40;
    display:flex;align-items:center;gap:14px;padding:14px 20px;max-width:760px;margin:0 auto;
    border-radius:14px 14px 0 0;box-shadow:0 -2px 16px rgba(0,0,0,.18)}
  .cart-info{flex:1;font-size:15px} .cart-info b{font-size:17px}
  #cartView{background:var(--card);color:var(--accent);border:none;border-radius:9px;padding:10px 20px;
    font-size:15px;font-weight:700;cursor:pointer}

  #cartModal{background:rgba(20,22,20,.45);z-index:50}
  #drillModal{background:rgba(20,22,20,.45);z-index:50}
  #drillModal .cart-sheet{max-height:75vh;overflow-y:auto}
  #incModal .cart-sheet{max-height:85vh;overflow-y:auto}
  #incForm{padding-bottom:28px}
  #osModal{background:rgba(20,22,20,.45);z-index:50}
  /* Found 2026-08-19 while doing an unrelated accessibility pass: pcbModal
     had NO overlay rule at all (not even the old copy-pasted shape) — a
     third live instance of the exact same bug .modal-overlay exists to
     prevent (osPeriodStmtModal 2026-08-08, ecaDetailModal/ecaWhModal/
     ecaSettleModal 2026-08-07). Same tier as osModal — opened from the
     same Pending Cash Bills / OS Tracker area. */
  #pcbModal{background:rgba(20,22,20,.45);z-index:50}
  #osModal .cart-sheet{max-height:80vh;overflow-y:auto}
  #osInvModal{background:rgba(20,22,20,.55);z-index:70}
  #osInvModal .cart-sheet{max-height:88vh;overflow-y:auto}
  /* Full Statement — opened from within osModal, needed the same overlay
     treatment as osInvModal (also opened from osModal) but never got it:
     without position:fixed it just rendered as a plain in-flow block,
     bleeding into whatever tab was active if left open across a tab
     switch (found 2026-08-08: showed up under the Expiry Claims tab). */
  #osPeriodStmtModal{background:rgba(20,22,20,.55);z-index:70}
  #osPeriodStmtModal .cart-sheet{max-height:88vh;overflow-y:auto}
  #svSessionModal{background:rgba(20,22,20,.45);z-index:50}
  #svSessionModal .cart-sheet{max-height:88vh;overflow-y:auto}
  #dmsAddChoiceModal,#dmsHistoryModal,#dmsInvoiceModal{background:rgba(20,22,20,.45);z-index:50}
  #dmsHistoryModal .cart-sheet{max-height:80vh;overflow-y:auto}
  #dmsInvoiceModal .cart-sheet{max-height:88vh;overflow-y:auto}
  /* Expiry Claims modals had no override — content could grow past the
     bottom of the viewport with no way to scroll to the action buttons,
     which then rendered right where the bottom nav sits ("merging" with
     it). Same fix as every other content-heavy modal above. */
  /* These three were missing the base fixed-overlay rule every other modal
     in this codebase gets (csMapModal, cartModal, etc.) — without it they
     rendered as plain inline blocks at the end of the page instead of a
     bottom-sheet overlay, and their action buttons (Approve claim/Mark
     Received/Mark Settled) could end up scrolled out of view with no
     obvious scrollbar, only reachable by zooming the whole page out
     (reported 2026-08-07). Sticky footer below fixes the same root cause
     a second way: the action buttons stay visible without any scrolling. */
  #ecaDetailModal,#ecaWhModal,#ecaSettleModal{background:rgba(20,22,20,.45);z-index:60}
  #ecaDetailModal .cart-sheet,#ecaWhModal .cart-sheet,#ecaSettleModal .cart-sheet{max-height:85vh;overflow-y:auto}
  .eca-foot-actions{position:sticky;bottom:0;background:var(--paper);padding:10px 0 2px;margin-top:8px}
  .sv-inv-row{display:flex;align-items:flex-start;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}
  .sv-inv-row input[type="checkbox"]{margin-top:3px;width:auto}
  .sv-inv-info{display:flex;flex-direction:column;gap:2px}
  .sv-inv-no{font-weight:600;font-size:13.5px}
  .sv-inv-meta{font-size:12px;color:var(--ink-soft)}
  .sv-lines{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}
  .sv-line-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .sv-line-row:last-child{border-bottom:none}
  .sv-line-nm{display:flex;flex-direction:column;gap:2px;font-size:13.5px;flex:1;min-width:0}
  .sv-line-sub{font-size:11.5px;color:var(--ink-soft)}
  .sv-line-inputs{display:flex;gap:6px;flex-shrink:0}
  .sv-box-in,.sv-loose-in{width:64px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:13px}
  .sv-line-vals{display:flex;gap:10px;font-size:12.5px;flex-shrink:0;white-space:nowrap;color:var(--ink-soft)}
  .sv-gap{font-weight:600;color:var(--ink)}
  .ol{padding:6px 13px;border:1px solid var(--line);background:var(--card);border-radius:18px;font-size:13px;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
  .ol.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .os-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer}
  .os-info{flex:1;min-width:0}
  .os-nm{font-size:14px;font-weight:600}
  .os-meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .os-old{color:var(--warn);font-weight:600}
  .os-asg{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600}
  .os-paid{background:var(--pending-soft);color:#b8860b;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600}
  .os-partial{background:#ffe9d6;color:#c05621;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600}
  .os-disputed{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600}
  .os-pay-block{width:100%;margin-top:6px}
  .os-pay-hint{font-size:11.5px;color:var(--ink-soft);margin:2px 0 8px;line-height:1.4}
  .tab-badge{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;margin-left:3px;border-radius:8px;background:#c0392b;color:#fff;font-size:10px;font-weight:700;text-align:center;vertical-align:top}
  .tab-badge.hidden{display:none}
  .cr-est-note{font-size:10.5px;color:var(--ink-soft);margin-top:6px;line-height:1.35;font-style:italic}
  /* my tasks */
  #taskSmSel{margin-bottom:14px}
  #taskList{margin-top:6px;padding-bottom:32px}
  .mg-datefilters{display:flex;gap:6px;margin:8px 0 4px;flex-wrap:wrap}
  .mg-df{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .mg-df.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .tk-card{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
  .tk-card[onclick]{cursor:pointer}
  .tk-over{border-color:#e8b4b4;background:var(--bad-soft)}
  .tk-fu{background:#f6faf6}
  .tk-main{flex:1;min-width:0}
  .tk-title{font-size:14.5px;font-weight:600;line-height:1.3}
  .tk-tag{font-size:10px;background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:1px 6px;font-weight:600;vertical-align:middle}
  .tk-meta{font-size:12px;color:var(--ink-soft);margin-top:3px}
  .tk-who{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1px 6px;margin-left:4px}
  .tk-notes{font-size:12px;color:var(--ink-soft);margin-top:4px}
  .tk-done{flex-shrink:0;height:36px;padding:0 16px;border:none;border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;cursor:pointer}
  .tk-confirm{flex-shrink:0;height:36px;padding:0 14px;border:none;border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;cursor:pointer}
  .tk-reopen{flex-shrink:0;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink-soft);font-weight:600;font-size:13px;cursor:pointer;margin-left:6px}
  .tk-pending{background:var(--pending-soft);border-color:#f0d9a8}
  .tk-await{font-size:12px;color:var(--pending);margin-top:5px;font-weight:600}
  .tk-confirmed{font-size:12px;color:var(--accent);margin-top:5px;font-weight:600}
  .tk-tag-a{background:#eef2ff;color:#4959c9}
  .tk-chev{color:var(--line);font-size:22px;flex-shrink:0}
  .tk-modal-actions{display:flex;gap:8px;margin-top:14px}
  .tk-modal-actions .nc-save{flex:1}
  .tk-del{height:44px;padding:0 16px;border:1px solid #e8b4b4;background:var(--card);color:#c0392b;border-radius:10px;font-weight:600;cursor:pointer}
  #taskForm textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;resize:vertical}
  .os-rmk{font-size:12px;color:var(--ink);background:var(--accent-soft);border-radius:7px;padding:5px 9px;margin-top:6px}
  .os-amt{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;color:var(--warn)}
  .os-d-amt{font-size:28px;font-weight:700;color:var(--warn)}
  .os-inv-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-soft);margin:16px 0 8px}
  .os-inv-list{max-height:240px;overflow-y:auto;margin-bottom:12px;
    border:1px solid var(--line);border-radius:10px}
  .os-inv{display:flex;justify-content:space-between;align-items:center;
    padding:9px 12px;border-bottom:1px solid var(--line)}
  .os-inv:last-child{border-bottom:none}
  .os-inv.old{background:var(--warn-soft);border-left:3px solid #c0392b}
  .os-inv-l{display:flex;flex-direction:column;gap:2px}
  .os-inv-no{font-size:13px;font-weight:600}
  .os-inv-dt{font-size:11px;color:var(--ink-soft)}
  .os-inv-amt{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
  .os-inv.old .os-inv-amt{color:var(--warn)}
  .os-inv-amts{display:flex;align-items:center;gap:14px;text-align:right}
  .os-inv-amt,.os-inv-pend{display:flex;flex-direction:column;line-height:1.15}
  .os-inv-lbl{font-size:9px;font-weight:500;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
  .os-inv-pend{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
  .os-inv-pend.part{color:var(--warn)}
  .os-inv-empty{padding:12px;text-align:center;color:var(--ink-soft);font-size:13px}
  .os-inv-note{padding:8px 12px;font-size:11px;color:var(--ink-soft);line-height:1.4;background:var(--paper)}
  .os-inv.tappable{cursor:pointer}
  .os-inv-chev{color:var(--ink-soft);margin-left:4px}
  .inv-sheet{max-width:760px}
  .inv-actions{margin-top:14px}
  .inv-share{width:100%;height:48px;background:#25D366;color:#fff;border:none;border-radius:11px;
    font-size:16px;font-weight:700;cursor:pointer}
  .inv-share:disabled{opacity:.6}
  .inv-doc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;color:#1a1d1a}
  .vdoc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;color:#1a1d1a}
  .vdoc-head{font-size:17px;font-weight:700;text-align:center;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:12px}
  .vdoc-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
  .vdoc-row span{color:var(--ink-soft)}
  .vdoc-amt{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:12px;background:var(--accent-soft);border-radius:8px;font-size:15px}
  .vdoc-amt b{font-size:20px;color:var(--accent)}
  .vdoc-note{font-size:11.5px;color:var(--ink-soft);margin-top:10px;text-align:center}
  /* gap analysis */
  .gap-btn{width:100%;margin-bottom:10px;padding:11px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
  #gapPanel{margin-bottom:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
  .gap-head{font-size:14px;font-weight:700;margin-bottom:10px}
  .gap-sub{font-size:11px;color:var(--ink-soft);font-weight:500}
  .gap-sec-l{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 5px}
  .gap-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;margin-bottom:5px}
  .gap-row.lapsed{background:var(--bad-soft)}
  .gap-row.declining{background:var(--pending-soft)}
  .gap-b{font-size:14px;font-weight:600;flex:1;min-width:0}
  .gap-nums{display:flex;align-items:center;gap:6px;font-size:12px;flex-shrink:0}
  .gap-was{color:var(--ink-soft)}
  .gap-arrow{color:var(--line)}
  .gap-now{font-weight:600}
  .gap-drop{background:var(--card);border-radius:8px;padding:2px 7px;font-weight:700;font-size:11px;color:#c0392b}
  .declining .gap-drop{color:#c05621}
  .gap-note{font-size:11px;color:var(--ink-soft);margin-top:10px;line-height:1.4}
  .gap-empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:8px}
  /* analytics */
  .an-controls{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
  .an-periods{display:flex;gap:10px;margin-bottom:10px}
  .an-pcol{flex:1;display:flex;flex-direction:column;gap:5px}
  .an-lbl{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
  .an-pcol input[type=date],.an-scope select{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:13px;margin-bottom:4px}
  .an-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .an-q{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:6px 11px;font-size:11.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .an-q:active{background:var(--accent-soft)}
  .an-scope{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
  .an-custfilters{display:flex;gap:8px}
  .an-custfilters select{flex:1}
  .an-custrow{display:flex;gap:6px;align-items:stretch}
  .an-custrow select{flex:1}
  .an-nav{width:44px;flex-shrink:0;border:1px solid var(--line);background:var(--card);border-radius:8px;font-size:20px;font-weight:700;color:var(--accent);cursor:pointer}
  .an-nav:active{background:var(--accent-soft)}
  .an-run{width:100%;height:44px;border:none;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px;cursor:pointer}
  .an-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
  .an-sec{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .an-sec:last-child{border-bottom:none}
  .an-rhead{margin-bottom:10px}
  .an-rtitle{font-size:15px;font-weight:700}
  .an-rsub{font-size:11px;color:var(--ink-soft);margin-top:2px}
  .an-totals{display:flex;gap:8px;margin-bottom:10px}
  .an-tot{flex:1;background:var(--paper);border-radius:9px;padding:9px;text-align:center}
  .an-tot span{font-size:10.5px;color:var(--ink-soft);display:block}
  .an-tot b{font-size:15px;font-variant-numeric:tabular-nums}
  .an-tot-d.up b{color:var(--accent)} .an-tot-d.down b{color:#c0392b}
  .an-lowdata{font-size:11.5px;color:#c05621;background:var(--pending-soft);border-radius:8px;padding:8px 10px;margin-bottom:10px;line-height:1.4}
  .an-tbl{display:flex;flex-direction:column}
  .an-tr{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:6px;padding:7px 4px;border-bottom:1px solid var(--paper);font-size:12.5px;align-items:center;font-variant-numeric:tabular-nums}
  .an-th{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase}
  .an-th span:not(:first-child),.an-tr span:not(.an-k){text-align:right}
  .an-k{font-weight:600}
  .an-up{color:var(--accent)} .an-down{color:#c0392b}
  .an-tr small{font-size:9.5px;font-weight:600}
  .an-empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:12px}
  .serial-copy{cursor:pointer;color:var(--accent)}
  .serial-copy-ic{font-size:11px;opacity:.7}
  .an-ask-log{display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:52vh;overflow-y:auto;padding:4px 2px 10px}
  .an-ask-msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45}
  .an-ask-user{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:3px}
  .an-ask-bot{align-self:flex-start;background:var(--paper);color:var(--ink);border-bottom-left-radius:3px}
  .an-ask-loading{opacity:.6;font-style:italic}
  .an-ask-tools{margin-top:6px;font-size:10px;color:var(--ink-soft)}
  .an-ask-sql{margin-top:6px;font-size:10.5px;color:var(--ink-soft)}
  .an-ask-sql summary{cursor:pointer;font-weight:600}
  .an-ask-sql pre{margin:6px 0 0;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;white-space:pre-wrap;word-break:break-word;font-size:10.5px;color:var(--ink)}
  .an-ask-copy-btn{margin-top:6px;padding:4px 10px;font-size:11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
  .an-ask-copy-btn:active{background:var(--card)}
  .an-ask-table-wrap{margin-top:8px;max-width:100%}
  .an-ask-table-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink-soft);margin-bottom:4px}
  .an-ask-table-h .an-ask-copy-btn{margin-top:0}
  .an-ask-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
  .an-ask-table{border-collapse:collapse;font-size:11.5px;white-space:nowrap}
  .an-ask-table th,.an-ask-table td{padding:5px 9px;border-bottom:1px solid var(--line);text-align:left}
  .an-ask-table th{background:var(--card);font-weight:600;position:sticky;top:0}
  .an-ask-table tr:last-child td{border-bottom:none}
  .an-ask-row{display:flex;gap:8px;margin-top:6px}
  .an-ask-input{flex:1;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:14px}
  .an-ask-row .an-run{width:auto;padding:0 20px}
  .an-ask-convo-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
  .an-ask-convo-select{flex:1;min-width:140px;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:12.5px;background:var(--card);color:var(--ink)}
  .an-ask-mini-btn{padding:6px 12px;font-size:11.5px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap}
  .an-ask-mini-btn:active{background:var(--card)}
  .an-ask-notes-panel{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--card)}
  .an-ask-notes-sub{font-size:11px;color:var(--ink-soft);margin-bottom:8px}
  .an-ask-notes-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;max-height:160px;overflow-y:auto}
  .an-ask-note-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
  .an-ask-note-row.an-ask-note-inactive{opacity:.5}
  .an-ask-note-row .an-ask-note-text{flex:1;word-break:break-word}
  .an-ask-note-row .an-ask-note-actions{display:flex;gap:6px;flex-shrink:0}
  .an-ask-note-row button{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:11px}
  .an-ask-note-row button.an-ask-note-del{color:#b00}
  .an-ask-notes-add{display:flex;gap:8px}
  .an-ask-notes-add input{flex:1;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:12.5px}
  .inv-head{text-align:center;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:10px}
  .inv-firm{font-size:18px;font-weight:700;color:var(--accent)}
  .inv-sub{font-size:12px;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase}
  .inv-party{margin-bottom:10px;font-size:13px}
  .inv-party .inv-meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .inv-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
  .inv-tbl th{background:var(--paper);text-align:left;padding:6px 5px;border-bottom:1px solid var(--line);font-weight:600}
  .inv-tbl td{padding:5px;border-bottom:1px solid var(--line);vertical-align:top}
  .inv-tbl .ir{text-align:right;white-space:nowrap}
  .inv-tbl .il-nm{font-weight:500}
  .inv-tot{margin-top:10px;margin-left:auto;max-width:260px}
  .inv-tot-r{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
  .inv-tot-r.grand{font-size:16px;font-weight:700;border-top:2px solid var(--ink);margin-top:4px;padding-top:6px}
  .inv-foot{margin-top:12px;font-size:10.5px;color:var(--ink-soft);text-align:center;border-top:1px solid var(--line);padding-top:8px}

  /* ---------- Kuber-format invoice (matches the Kuber Crystal print) ----------
     The document is fixed at 794px (A4 @96dpi) so the shared image / print
     always looks like the Kuber printout; on phones the wrapper pans sideways. */
  .kinv-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
  .kinv-doc{width:794px;background:var(--card);color:#000;padding:16px 22px;font-family:Arial,Helvetica,sans-serif;font-size:12px}
  .kinv-firm{text-align:center;font-size:21px;font-weight:bold;letter-spacing:.3px}
  .kinv-line{text-align:center;font-size:11.5px;line-height:1.3}
  .kinv-ids{display:flex;justify-content:space-between;font-size:12px;font-weight:bold;margin-top:2px}
  .kinv-title{display:flex;align-items:center;margin:8px 0 6px}
  .kinv-title .memo{flex:1;font-size:12.5px;font-weight:bold}
  .kinv-title .doc{flex:1;text-align:center;font-size:15px;font-weight:bold}
  .kinv-title .copy{flex:1;text-align:right;font-size:12px;font-weight:bold}
  .kinv-meta{display:flex;margin-bottom:6px}
  .kinv-party{flex:1.5;line-height:1.45}
  .kinv-party .ml{display:flex;gap:8px}
  .kinv-party .ms{font-weight:bold;width:30px;flex-shrink:0}
  .kinv-party .pname{font-weight:bold;font-size:13px}
  .kinv-party .ind{margin-left:38px}
  .kinv-vmeta{flex:1;line-height:1.55}
  .kinv-vmeta div{white-space:nowrap}
  .kinv-tbl{width:100%;border-collapse:collapse;border-top:1px solid #000;border-bottom:1px solid #000}
  .kinv-tbl th{border-bottom:1px solid #000;font-size:11.5px;font-weight:bold;padding:3px;text-align:right}
  .kinv-tbl th.l,.kinv-tbl td.l{text-align:left}
  .kinv-tbl th.c,.kinv-tbl td.c{text-align:center}
  .kinv-tbl td{font-size:11.5px;padding:2px 3px;text-align:right;vertical-align:top;font-variant-numeric:tabular-nums}
  .kinv-srno{font-size:9.5px;color:#555;font-weight:normal;text-align:left;margin-top:1px}
  .kinv-tbl tr.tot td{border-top:1px solid #000;font-weight:bold;padding:3px}
  .kinv-bottom{display:flex;margin-top:4px;gap:14px}
  .kinv-gst{border-collapse:collapse;font-size:11.5px;flex:1.4}
  .kinv-gst th,.kinv-gst td{padding:2px 6px;text-align:right;font-variant-numeric:tabular-nums}
  .kinv-gst th:first-child,.kinv-gst td:first-child{text-align:left}
  .kinv-gst thead th{border-bottom:1px solid #000;font-weight:bold}
  .kinv-gst tr.tot td{border-top:1px solid #000;font-weight:bold}
  .kinv-tots{flex:1;font-size:12px}
  .kinv-tots .trow{display:flex;justify-content:space-between;padding:2px 4px}
  .kinv-tots .grand{border-top:1px solid #000;border-bottom:1px solid #000;font-weight:bold;font-size:14px;padding:4px;margin-top:4px}
  .kinv-mism{color:#b00;font-weight:bold;font-size:11px;padding:2px 4px}
  .kinv-words{font-size:12px;font-weight:bold;margin-top:8px}
  .kinv-bank{display:flex;font-size:11.5px;margin-top:8px;line-height:1.5;gap:8px}
  .kinv-bank .lbl{font-weight:bold;white-space:nowrap}
  .kinv-bank table td{padding:0 6px 0 0;vertical-align:top}
  .kinv-foot{display:flex;margin-top:10px;font-size:10.5px;line-height:1.45}
  .kinv-foot .terms{flex:1.6}
  .kinv-foot .terms .th{font-size:11.5px;font-weight:bold}
  .kinv-foot .accept,.kinv-foot .sig{flex:1;text-align:center;font-size:11.5px;display:flex;flex-direction:column;justify-content:space-between}
  .kinv-foot .for{font-weight:bold}
  .kinv-disc{margin-top:10px;font-size:10px;color:#555;text-align:center;border-top:1px solid #ccc;padding-top:6px}
  /* credit / debit note */
  .kinv-cn-title{text-align:center;font-size:15px;font-weight:bold;text-decoration:underline;margin:6px 0}
  .kinv-cn{width:100%;border-collapse:collapse;border:1px solid #000;margin-top:2px}
  .kinv-cn th{border-bottom:1px solid #000;font-size:13px;font-weight:bold;padding:4px 8px;text-align:left}
  .kinv-cn th.amt,.kinv-cn td.amt{text-align:right;width:120px;border-left:1px solid #000}
  .kinv-cn td{font-size:13px;padding:3px 8px;vertical-align:top}
  .kinv-cn tr.sp td{height:26px}
  .kinv-cn tr.tot td{border-top:1px solid #000;font-weight:bold;padding:4px 8px}
  .kinv-cn-foot{display:flex;justify-content:flex-end;margin-top:10px;font-size:12.5px}
  .kinv-cn-sig{text-align:center}
  .kinv-cn-sig .line{margin-top:44px}
  /* ---------- OS statement (customer-shareable screenshot) ---------- */
  .ostm-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
  .ostm-doc{width:480px;max-width:100%;background:var(--card);color:#000;padding:18px 20px;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}
  .ostm-firm{text-align:center;font-size:17px;font-weight:bold}
  .ostm-title{text-align:center;font-size:13px;color:#555;margin:2px 0 10px}
  .ostm-meta{font-size:13px;line-height:1.5;margin-bottom:10px;border-bottom:1px solid #000;padding-bottom:8px}
  .ostm-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
  .ostm-tbl th{border-bottom:1px solid #000;padding:4px 3px;text-align:right;font-weight:bold}
  .ostm-tbl th.l,.ostm-tbl td.l{text-align:left}
  .ostm-tbl th.c,.ostm-tbl td.c{text-align:center}
  .ostm-tbl td{padding:4px 3px;text-align:right;border-bottom:1px solid #eee;font-variant-numeric:tabular-nums}
  .ostm-tbl tr.old{background:#fdeceb}
  .ostm-tbl tr.old td{color:#c0392b;font-weight:bold}
  .ostm-total{text-align:right;margin-top:10px;padding-top:8px;border-top:1px solid #000;font-size:15px}
  .os-stmt-btns{display:flex;gap:8px}
  .os-stmt-btns button{flex:1}
  .os-d-amt span{font-size:13px;font-weight:400;color:var(--ink-soft)}
  .os-d-meta{font-size:13px;color:var(--ink-soft);margin:8px 0 14px;line-height:1.5}
  .os-promise-box{background:var(--pending-soft);border:1px solid #f0c674;border-radius:10px;padding:12px;margin-bottom:14px}
  .os-promise-h{font-size:13px;font-weight:700;color:#8a5a00;margin-bottom:8px}
  .os-ageing{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
  .os-age-b{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center}
  .os-age-b span{display:block;font-size:10.5px;color:var(--ink-soft)}
  .os-age-b b{display:block;font-size:12.5px;margin-top:2px}
  .os-age-b.due{background:var(--warn-soft);border-color:var(--warn)}
  .os-age-b.due b{color:var(--warn)}
  .os-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .os-paid-btn{height:46px;background:var(--card);border:1px solid var(--accent);color:var(--accent);border-radius:11px;font-size:15px;font-weight:600;cursor:pointer}
  .os-confirm-btn{height:46px;background:var(--accent);border:none;color:var(--on-accent);border-radius:11px;font-size:15px;font-weight:700;cursor:pointer}
  .os-cancel-btn{height:46px;background:var(--card);border:1px solid var(--warn);color:var(--warn);border-radius:11px;font-size:15px;font-weight:600;cursor:pointer}
  .os-await{text-align:center;font-size:13px;color:#b8860b;background:var(--pending-soft);border-radius:10px;padding:10px}
  .os-city-btn{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 14px;
    font-size:13px;color:var(--ink);cursor:pointer;margin-bottom:10px;width:100%;text-align:left}
  .os-city-btn span{font-weight:600}
  .os-city-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;
    margin-bottom:12px;max-height:240px;overflow-y:auto}
  .os-city-all{display:block;font-weight:600;font-size:13px;padding:6px 4px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .os-city-item{display:block;font-size:13px;padding:5px 4px;color:var(--ink-soft)}
  .os-city-item input,.os-city-all input{margin-right:8px}
  .cart-sheet{background:var(--paper);width:100%;max-width:760px;margin:0 auto;border-radius:18px 18px 0 0;
    max-height:82vh;display:flex;flex-direction:column;padding:18px}
  .cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:17px}
  .cart-head button{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft)}
  .os-nav-head{gap:6px}
  .os-nav-title{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
  .os-nav-btn{font-size:22px;padding:0 8px;flex-shrink:0}
  .os-nav-btn:disabled{opacity:.3;cursor:default}
  #cartLines{overflow-y:auto;flex:1}
  .cart-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .cart-line .cl-nm{flex:1;font-size:14px;min-width:0}
  .cart-line .cl-nm small{display:block;color:var(--ink-soft);font-size:12px}
  .cart-line .cl-amt{font-weight:600;font-variant-numeric:tabular-nums}
  .cart-line .cl-rm{background:none;border:none;color:var(--warn);cursor:pointer;font-size:13px}
  .cart-foot{padding-top:14px}
  .cart-foot-total{display:flex;justify-content:space-between;font-size:18px;margin-bottom:12px}
  #cartSubmit{width:100%;height:48px;background:var(--accent);color:var(--on-accent);border:none;border-radius:11px;
    font-size:16px;font-weight:700;cursor:pointer}
  #cartSubmit:disabled{opacity:.6}
  /* credit analysis view */
  .ca-hint{font-size:12px;color:var(--ink-soft);text-align:center;padding:6px;
    background:var(--accent-soft);border-radius:8px;margin-bottom:10px}
  .ca-row{display:flex;align-items:center;gap:10px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer}
  .ca-row.ca-red{border-left:4px solid var(--warn)}
  .ca-main{flex:1;min-width:0}
  .ca-nm{font-size:15px;font-weight:600}
  .ca-flag{font-size:11px;font-weight:700;color:var(--warn);background:var(--warn-soft);
    border-radius:8px;padding:1px 7px;margin-left:4px}
  .ca-city{font-size:12.5px;color:var(--ink-soft);margin:1px 0 6px}
  .ca-metrics{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-soft)}
  .ca-metrics b{color:var(--ink);font-variant-numeric:tabular-nums}
  .ca-metrics .ca-over b{color:var(--warn)}
  .ca-chev{color:var(--line);font-size:20px;flex-shrink:0}
  .sm-tabs{margin-top:-4px}
  .sm-tabs .ol{font-size:13px}
  /* credit review popup */
  #creditModal{background:rgba(20,22,20,.5);z-index:80}
  /* Own ID, not a reuse of #creditModal — that ID's overlay styling is only
     meant for one bottom-sheet at a time (see the Catalogue spec's
     "modal sheet styling is bound to element ID" lesson). */
  #vanReceiptModal{background:rgba(20,22,20,.5);z-index:80}
  #vanReceiptDoc{background:var(--card);border-radius:10px;padding:14px;font-size:13px}
  #vanReceiptDoc table{width:100%;border-collapse:collapse;margin:10px 0}
  #vanReceiptDoc th,#vanReceiptDoc td{text-align:left;padding:4px 6px;font-size:12.5px;border-bottom:1px solid var(--line)}
  #vanReceiptDoc .van-rcpt-tot{font-weight:700;font-size:15px;text-align:right;margin-top:8px}
  #vanReceiptDoc .van-rcpt-disc{font-size:11px;color:var(--ink-soft);margin-top:10px}
  /* Own IDs too, same reason as #vanReceiptModal above — one payment split,
     one load-review step, one slip viewer, each with their own overlay. */
  #vanPaymentModal{background:rgba(20,22,20,.5);z-index:80}
  #vanPaymentModal label{display:block;margin:10px 0 4px}
  #vanLoadReviewModal{background:rgba(20,22,20,.5);z-index:80}
  #vanLoadReviewBody .cr-row{display:block;padding:8px 0}
  #vanSlipModal{background:rgba(20,22,20,.5);z-index:80}
  /* #vanPrintSlipTable's border/font styling lives with the existing
     body.van-printing rules further down — same table is now also the
     on-screen preview inside #vanSlipModal, so it just needs a white
     background + padding here for the modal card look. */
  #vanSlipModal #vanPrintSlip{background:var(--card);border-radius:10px;padding:14px;font-size:13px}
  .cr-sheet{background:var(--paper);width:100%;max-width:760px;margin:0 auto;
    border-radius:18px 18px 0 0;max-height:88vh;overflow-y:auto;padding:18px}
  .cr-head{border-radius:10px;padding:12px 14px;margin-bottom:12px}
  .cr-head.green{background:var(--accent-soft)}
  .cr-head.red{background:var(--warn-soft)}
  .cr-badge{font-size:14px;font-weight:700}
  .cr-head.green .cr-badge{color:var(--accent)}
  .cr-head.red .cr-badge{color:var(--warn)}
  .cr-cust{font-size:17px;font-weight:600;margin-bottom:10px}
  .cr-overdue-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    color:var(--warn);margin:6px 0 6px}
  .cr-overdue{display:flex;align-items:center;gap:10px;background:var(--warn-soft);
    border-radius:8px;padding:8px 10px;margin-bottom:6px}
  .cr-od-no{font-weight:600;font-size:13px}
  .cr-od-dt{font-size:12px;color:var(--ink-soft);flex:1}
  .cr-od-amt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--warn)}
  .cr-ctx{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:10px 0}
  .cr-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;
    border-bottom:1px solid var(--paper);font-size:14px}
  .cr-row:last-child{border-bottom:none}
  .cr-row span i{font-style:italic;color:var(--ink-soft);font-size:12px}
  .cr-row.cr-warn b{color:var(--warn)}
  .cr-note{font-size:12.5px;color:var(--warn);background:var(--warn-soft);
    border-radius:8px;padding:9px 11px;margin-bottom:12px;line-height:1.4}
  .cr-actions{display:flex;gap:8px;margin-top:6px}
  .cr-btn{flex:1;height:48px;border-radius:11px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid}
  .cr-review{background:var(--card);color:var(--ink-soft);border-color:var(--line)}
  .cr-proceed{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .cr-admin{background:var(--warn);color:#fff;border-color:var(--warn)}
  .cr-preset{background:var(--card);color:var(--ink);border-color:var(--line);text-align:left;padding:0 14px}
  .ord-done{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);
    border-radius:12px;padding:16px;text-align:center;font-weight:600;margin-bottom:12px}

  /* ---------- manage orders ---------- */
  .mg-filters{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
  .mg-f{padding:7px 14px;border:1px solid var(--line);background:var(--card);border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .mg-f.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .mg-order{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:14px;margin-bottom:10px}
  .mg-top{display:flex;align-items:baseline;gap:8px}
  .mg-cust{font-size:15px;font-weight:600;flex:1;min-width:0}
  .mg-amt{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
  .mg-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .mg-cust-meta{font-size:12.5px;color:var(--ink-soft);margin-top:1px;margin-bottom:4px}
  .mg-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;
    text-transform:uppercase;letter-spacing:.03em}
  .mg-badge.placed{background:var(--pending-soft);color:var(--pending)}
  .mg-badge.confirmed{background:var(--accent-soft);color:var(--accent)}
  .mg-badge.rejected{background:var(--warn-soft);color:var(--warn)}
  .mg-badge.cancelled{background:var(--line);color:#888}
  .mg-lines{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
  .mg-li{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--ink-soft)}
  .mg-li-raised{background:var(--warn-soft);border-radius:6px;padding:3px 6px;margin:2px -6px}
  .mg-li-raised .q{color:var(--warn);font-weight:600}
  .mg-disc-tbl{background:var(--warn-soft);border-radius:8px;padding:10px 12px;margin:8px 0}
  .mg-disc-h{font-size:12px;font-weight:700;color:var(--warn);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
  .mg-disc-tbl table{width:100%;border-collapse:collapse;font-size:13px}
  .mg-disc-tbl th{text-align:left;font-weight:600;color:var(--ink-soft);padding:3px 6px;border-bottom:1px solid var(--line)}
  .mg-disc-tbl td{padding:4px 6px;border-bottom:1px solid rgba(0,0,0,.04)}
  .mg-disc-tbl th:nth-child(2),.mg-disc-tbl th:nth-child(3),
  .mg-disc-tbl td:nth-child(2),.mg-disc-tbl td:nth-child(3){text-align:right;width:64px;font-variant-numeric:tabular-nums}
  .mg-disc-new{color:var(--warn);font-weight:700}
  .mg-li .q{color:var(--ink)}
  .mg-li-remark{color:var(--ink-soft);font-size:11.5px}
  .mg-van-tag{color:var(--accent);font-weight:600;font-size:11px}
  .van-report-tbl .an-tr{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr}
  .mg-info{font-size:12.5px;margin-top:8px;color:var(--ink-soft)}
  .mg-info b{color:var(--ink)}
  .mg-actions{display:flex;gap:8px;margin-top:12px}
  .mg-actions button{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid}
  .mg-confirm{background:var(--accent);color:var(--on-accent);border-color:var(--accent)!important}
  .mg-reject{background:var(--card);color:var(--warn);border-color:var(--warn)!important}
  .mg-expand{background:var(--card);color:var(--ink-soft);border-color:var(--line)!important}
  .mg-form{margin-top:10px;display:flex;gap:8px}
  .mg-form input{height:40px;flex:1}
  .mg-form button{padding:0 16px;border-radius:8px;border:none;background:var(--accent);
    color:var(--on-accent);font-weight:600;cursor:pointer;font-size:13px}
  .mg-form.reject button{background:var(--warn)}

  /* ---------- my orders (salesman) ---------- */
  .mine-filters{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--ink-soft)}
  .mine-filters input[type=date]{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:13px}
  .mine-clear{margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
    padding:7px 12px;font-size:12px;color:var(--ink-soft);cursor:pointer}
  .mg-export{width:100%;padding:12px;margin-bottom:12px;background:var(--accent);color:var(--on-accent);
    border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
  .inv-exp-h{font-size:18px;font-weight:700;margin:10px 0 2px}
  .inv-exp-sub{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
  .inv-exp-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .inv-exp-all{font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer}
  .inv-exp-dl{margin-left:auto;background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;
    padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer}
  .inv-exp-dl:disabled{opacity:.5;cursor:default}
  .inv-exp-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
    border-radius:10px;margin-bottom:8px;cursor:pointer;background:var(--card)}
  .inv-exp-cb{width:18px;height:18px;flex:none}
  .inv-exp-cust{font-size:14px;font-weight:600}
  .inv-exp-meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .inv-kuber{display:flex;gap:6px;margin-top:8px}
  .inv-kuber-in{flex:1;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:14px}
  .inv-kuber-save{padding:0 16px;background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
  .mine-f{padding:7px 14px;border:1px solid var(--line);background:var(--card);border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .mine-f.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  /* Same look as .mine-f, but its own class name — js/my-orders.js runs
     document.querySelectorAll(".mine-f") unscoped at page load and
     overwrites onclick on every matching element site-wide, which
     silently hijacked the Receiving sub-tabs when they shared that
     class. Never reuse .mine-f for a new clickable element. */
  .rcv-tab{padding:7px 14px;border:1px solid var(--line);background:var(--card);border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .rcv-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  /* Verification history filters — same look as .mg-f/.mg-df (Manage
     Orders), own class names for the same page-wide-hijack reason. */
  .rcv-pill{padding:7px 14px;border:1px solid var(--line);background:var(--card);border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .rcv-pill.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .rcv-df{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:6px 14px;
    font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .rcv-df.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  /* goods-receiving GRN workflow */
  .gr-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
  .gr-thumb{position:relative;width:72px;height:96px;border:1px solid var(--line);border-radius:8px;
    overflow:hidden;background:#f2f5f3}
  .gr-thumb img{width:100%;height:100%;object-fit:cover}
  .gr-thumb-pdf{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:10px;text-align:center;padding:4px;color:var(--ink-soft);word-break:break-all;line-height:1.3}
  .gr-thumb .gr-thumb-rm{position:absolute;top:2px;right:2px;background:rgba(20,22,20,.7);color:#fff;
    border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;line-height:1}
  .gr-thumb .gr-thumb-no{position:absolute;bottom:2px;left:4px;font-size:11px;color:#fff;
    background:rgba(20,22,20,.6);border-radius:4px;padding:0 4px}
  .gr-cap-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
  .gr-line{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--card)}
  .gr-line.gr-new{border-color:var(--pending);background:var(--pending-soft)}       /* new product = yellow */
  .gr-line.gr-unwanted{opacity:.55}
  .gr-line.gr-mismatch{border-color:var(--warn)}
  .gr-line-grid{display:grid;grid-template-columns:auto auto;gap:4px 14px;font-size:12.5px;color:var(--ink-soft);margin:4px 0}
  .gr-line-grid b{color:var(--ink);font-variant-numeric:tabular-nums}
  .gr-line input[type=number]{width:74px;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:13px}
  .gr-mark{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .gr-mark button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer}
  .gr-mark button.on-ok{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .gr-mark button.on-bad{background:var(--warn);color:#fff;border-color:var(--warn)}
  .gr-callout{border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:8px}
  .gr-callout.warn{background:var(--warn-soft);color:var(--warn)}
  .gr-callout.new{background:var(--pending-soft);color:var(--pending)}
  .mine-reason{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:8px 10px;
    font-size:12.5px;margin-top:8px}
  .mine-actions{display:flex;gap:8px;margin-top:10px}
  .me-edit,.me-cancel{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid}
  .me-edit{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .me-cancel{background:var(--card);color:var(--warn);border-color:var(--warn)}

  /* Shared "request-style" line/badge primitives — used by Requests and
     Receiving but never actually had CSS backing anywhere in the app
     (rendered unstyled/browser-default). Adding real rules here fixes
     both, not just the new Receiving module. */
  .req-line{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;
    background:var(--card);cursor:pointer}
  .req-line:hover{border-color:var(--accent)}
  .req-line-info{font-size:14px}
  .req-line-info b{color:var(--ink)}
  /* Product search results — warehouse staff read this under time
     pressure, needs to be easy to scan at a glance. */
  #rcvSearchResults .req-line-info{font-size:17px}
  .req-line-rm{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 10px;
    font-size:12px;cursor:pointer;color:var(--warn)}
  .req-meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .req-note{font-size:12.5px;color:var(--pending)}
  .req-box-h{font-size:13px;font-weight:600;color:var(--ink-soft);margin:10px 0 6px}
  .req-badge{display:inline-block;font-size:11px;font-weight:600;border-radius:20px;padding:2px 9px;
    margin-left:6px;vertical-align:middle}
  .req-respond{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:8px 14px;
    font-size:13px;cursor:pointer;color:var(--ink);margin:6px 0}
  .req-respond:hover{border-color:var(--accent)}

  /* Receiving — warehouse-first workflow (V1 rebuild) */
  .rcv-badge{display:inline-block;font-size:11px;font-weight:600;border-radius:20px;padding:2px 9px;
    margin-left:6px;vertical-align:middle;background:var(--line);color:var(--ink-soft)}
  .rcv-badge.s-match, .rcv-badge.s-approved, .rcv-badge.s-resolved, .rcv-badge.s-added_as_line{
    background:var(--accent-soft);color:var(--accent)}
  .rcv-badge.s-qty_mismatch, .rcv-badge.s-needs_review, .rcv-badge.s-recount_requested,
  .rcv-badge.s-submitted, .rcv-badge.s-pending_verification, .rcv-badge.s-sent_back{
    background:var(--pending-soft);color:var(--pending)}
  .rcv-badge.s-product_mismatch, .rcv-badge.s-missing_on_invoice, .rcv-badge.s-missing_in_warehouse,
  .rcv-badge.s-needs_info, .rcv-badge.s-rejected, .rcv-badge.s-open{background:var(--warn-soft);color:var(--warn)}

  .rcv-progress{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);
    padding:10px 0 4px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink-soft);text-align:center}
  .rcv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
  .rcv-split{display:flex;gap:16px;align-items:flex-start}
  .rcv-invoice-col{flex:1;min-width:0;position:sticky;top:12px}
  .rcv-warehouse-col{flex:1;min-width:0}
  .rcv-invoice-img{width:100%;border-radius:8px;border:1px solid var(--line);margin-bottom:8px;display:block}
  .rcv-photos{margin-bottom:8px}
  .rcv-invoice-imgs{display:flex;flex-wrap:wrap;gap:10px}
  .rcv-invoice-img-wrap{flex:0 0 120px;text-decoration:none;color:inherit}
  .rcv-invoice-img-wrap .rcv-invoice-img{width:120px;height:120px;object-fit:cover;margin-bottom:2px}
  .rcv-invoice-img-wrap .meta{text-align:center}
  @media (max-width: 860px){
    .rcv-split{flex-direction:column}
    .rcv-invoice-col{position:static;width:100%}
  }
  /* ---------- Inbound Issues (shortage/breakage/expiry/damage tracking) ---------- */
  .item.ii-overdue{border-left:3px solid var(--warn);background:var(--warn-soft)}
  .ii-form-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
  .ii-form-card .ord-section-h{margin-top:0}
  .ii-field{margin-bottom:12px}
  .ii-field:last-child{margin-bottom:0}
  .ii-field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);
    text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
  .ii-field-row{display:flex;gap:10px}
  .ii-field-row .ii-field{flex:1;min-width:0}
  .ii-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
  .ii-pill.st-observed{background:var(--accent-soft);color:var(--accent)}
  .ii-pill.st-escalated{background:var(--pending-soft);color:var(--pending)}
  .ii-pill.st-resolved{background:var(--line);color:var(--ink-soft)}
  .ii-pill.overdue{background:var(--warn-soft);color:var(--warn)}
  .ii-type-tag{font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--paper);
    border:1px solid var(--line);border-radius:6px;padding:2px 7px}
  .ii-row-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
  .ii-row-badges{display:flex;gap:6px;align-items:center;flex-shrink:0}
  .ii-summary-card{background:var(--accent-soft);border-radius:12px;padding:14px;margin-bottom:14px}
  .ii-summary-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .ii-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .ii-summary-grid .k{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
  .ii-summary-grid .v{font-size:14px;font-weight:600;margin-top:2px;color:var(--ink)}
  .ii-remarks-box{background:var(--paper);border-radius:8px;padding:10px 12px;margin:0 0 14px;
    font-size:13.5px;color:var(--ink-soft);font-style:italic}
  .ii-line-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--line)}
  .ii-line-row:last-child{border-bottom:none}
  .ii-line-row .nm{font-size:13.5px;font-weight:500}
  .ii-line-row .meta{font-size:12px;color:var(--ink-soft);margin-top:1px}
  .ii-line-row .qty{font-size:13.5px;font-weight:600;flex-shrink:0;text-align:right}
  .ii-history-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .ii-history-row:last-child{border-bottom:none}
  .ii-history-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0}
  .ii-history-row .h-t{font-size:13px;font-weight:500}
  .ii-history-row .h-m{font-size:12px;color:var(--ink-soft);margin-top:1px}
  .ii-history-row .h-q{font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-top:3px}
  .ii-action-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
  .ii-empty-state{text-align:center;color:var(--ink-soft);padding:40px 20px;font-size:14px}
  .ii-empty-state .big{font-size:32px;margin-bottom:8px}
  /* One sheet's product list, printed for warehouse to mark up by hand —
     populated by rcvPrintSheet() into #rcvPrintSheet (normally
     display:none via .hidden), never the sheet-selection list (that's
     suppliers/invoices, not products). Gated on body.rcv-printing
     (toggled only by rcvPrintSheet(), which also calls window.print()
     itself) rather than a bare @media print block — a bare "hide
     everything but this" rule would apply no matter which screen is
     visible when the user hits Ctrl+P generically, breaking printing
     everywhere else in the app. */
  body.rcv-printing *{visibility:hidden}
  body.rcv-printing #rcvPrintSheet, body.rcv-printing #rcvPrintSheet *{visibility:visible}
  body.rcv-printing #rcvPrintSheet{display:block!important;position:absolute;left:0;top:0;width:100%}
  #rcvPrintSheetTable{width:100%;border-collapse:collapse;margin-top:10px}
  #rcvPrintSheetTable th,#rcvPrintSheetTable td{border:1px solid #000;padding:6px 8px;
    text-align:left;font-size:12.5px}
  #rcvPrintSheetTable td:last-child{min-width:140px}
  /* Van load slip — same gating idea as body.rcv-printing above, own class
     so the two print flows can never interfere with each other. */
  body.van-printing *{visibility:hidden}
  body.van-printing #vanPrintSlip, body.van-printing #vanPrintSlip *{visibility:visible}
  body.van-printing #vanPrintSlip{display:block!important;position:absolute;left:0;top:0;width:100%}
  #vanPrintSlipTable{width:100%;border-collapse:collapse;margin-top:10px}
  #vanPrintSlipTable th,#vanPrintSlipTable td{border:1px solid #000;padding:6px 8px;
    text-align:left;font-size:12.5px}
  /* POS invoice print — same gating idea as body.rcv-printing/van-printing
     above: prints just the invoice document, not the whole POS screen
     (search box, cart modal, etc.) that's still around it. */
  body.pos-printing *{visibility:hidden}
  body.pos-printing #posPrintDoc, body.pos-printing #posPrintDoc *{visibility:visible}
  body.pos-printing #posPrintDoc{display:block!important;position:absolute;left:0;top:0;width:100%}

  /* Expiry Claims Loading Slip — same gating idea as body.van-printing */
  body.exp-printing *{visibility:hidden}
  body.exp-printing #ecaPrintSlip, body.exp-printing #ecaPrintSlip *{visibility:visible}
  body.exp-printing #ecaPrintSlip{display:block!important;position:absolute;left:0;top:0;width:100%}

  /* Expiry Claims customer portal — post-submit receipt, same gating idea */
  body.ec-printing *{visibility:hidden}
  body.ec-printing #ecReceiptDoc, body.ec-printing #ecReceiptDoc *{visibility:visible}
  body.ec-printing #ecReceiptDoc{display:block!important;position:absolute;left:0;top:0;width:100%}

  /* Samsung NDC letters — same gating idea as body.van-printing, but the
     print target holds ONE .ndc-letter block per dealer with a forced
     page break between each (Ankit: "compile ndc letter for all dealers
     in one pdf" — the browser's own "Save as PDF" produces exactly
     that from this one multi-page document). @page pins A4 explicitly
     (Ankit: "we use A4 size") — no prior @page rule existed anywhere
     in this file, so this is safe to set globally, not just for NDC. */
  @page{size:A4;margin:14mm 16mm}
  body.ndc-printing *{visibility:hidden}
  body.ndc-printing #smNdcPrintDoc, body.ndc-printing #smNdcPrintDoc *{visibility:visible}
  body.ndc-printing #smNdcPrintDoc{display:block!important;position:absolute;left:0;top:0;width:100%}
  .ndc-letter{page-break-after:always;break-after:page;padding:0 8px;font-family:Georgia,'Times New Roman',serif;color:#000;box-sizing:border-box}
  .ndc-letter:last-child{page-break-after:auto;break-after:auto}
  .ndc-letter-date{text-align:right;font-size:13px;margin:0 0 18px}
  .ndc-letter-head{text-align:center;font-size:24px;font-weight:700;border-bottom:1px solid #000;padding-bottom:8px;margin-bottom:20px}
  .ndc-letter-city{font-size:14px;font-weight:400}
  .ndc-letter p{font-size:13px;line-height:1.55;margin:0 0 12px}
  .ndc-letter-sign{margin-top:28px}
  #ecaPrintSlipTable{width:100%;border-collapse:collapse;margin-top:10px}
  #ecaPrintSlipTable th,#ecaPrintSlipTable td{border:1px solid #000;padding:6px 8px;
    text-align:left;font-size:12.5px}

  /* Quick Order: raw-text order entry, review list of parsed/matched lines */
  #qoRawText{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;
    padding:10px;font:inherit;resize:vertical}
  .qo-line{flex-direction:column;align-items:stretch}
  .qo-unresolved{border-left:3px solid var(--warn)}
  .qo-note{border-left:3px solid var(--line);opacity:.75}
  .qo-oos{font-size:11.5px;font-weight:600;color:var(--warn)}

  /* DMS scan editor (Phase 2) — full-screen-ish overlay while cropping/
     adjusting one captured page. Corner handles are absolutely positioned
     over the canvas in CSS/screen pixels; js/dms.js converts those back to
     image-pixel coordinates using the canvas's actual vs displayed size. */
  #dmsScanEditor, #dmsScanPages{position:fixed;inset:0;z-index:50;background:var(--paper);
    display:flex;flex-direction:column;overflow:auto}
  .dms-scan-head{display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card)}
  .dms-scan-canvas-wrap{position:relative;flex:1;display:flex;align-items:center;
    justify-content:center;padding:10px;min-height:0;touch-action:none}
  .dms-scan-canvas-wrap canvas{max-width:100%;max-height:100%;display:block;
    box-shadow:0 2px 10px rgba(0,0,0,.15)}
  .dms-corner{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
    border-radius:50%;background:var(--accent);border:3px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;touch-action:none}
  .dms-scan-controls{padding:10px 14px;border-top:1px solid var(--line);background:var(--card)}
  .dms-scan-row{display:flex;gap:8px;margin-bottom:8px}
  .dms-scan-row button{flex:1;padding:8px;border-radius:8px;border:1px solid var(--line);
    background:var(--paper);font-size:13px;cursor:pointer}
  .dms-scan-controls label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:8px}
  .dms-scan-controls input[type=range]{width:100%}
  .dms-scan-actions{display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:var(--card)}
  .dms-scan-actions button{flex:1}
  .dms-scan-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:8px;padding:10px 14px}
  .dms-scan-thumb{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .dms-scan-thumb img{width:100%;display:block}
  .dms-scan-thumb .rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);
    color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer}
  .qo-search{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;
    padding:6px 8px;margin:6px 0;font:inherit}
  .qo-cands{display:flex;flex-wrap:wrap;gap:6px}
  .qo-cand{padding:5px 10px;border-radius:6px;font-size:12.5px;cursor:pointer;
    border:1px solid var(--line);background:var(--card)}
  .qo-cand:hover{background:var(--accent-soft);border-color:var(--accent)}
  .qo-change{padding:2px 8px;border-radius:6px;font-size:11.5px;cursor:pointer;
    border:1px solid var(--line);background:none;color:var(--ink-soft)}
  .qo-qty-row{display:flex;align-items:center;gap:8px;margin-top:6px}
  .qo-bottom-actions{display:flex;gap:8px;margin-top:8px}
  .qo-bottom-actions .nc-save{flex:1}
  .qo-draft-row{display:flex;justify-content:space-between;align-items:center;
    border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;cursor:pointer}
  .qo-draft-del{padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;
    border:1px solid var(--warn);background:none;color:var(--warn)}

  /* ---- Samsung module ---- */
  .sm-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
  .sm-toolbar select,.sm-toolbar input[type=month]{height:38px;border:1px solid var(--line);
    border-radius:8px;padding:0 10px;font-size:13px;background:var(--card);color:var(--ink)}
  .sm-toolbar select{flex:1;min-width:160px}
  .sm-mini-btn{padding:8px 14px;font-size:12.5px;border:1px solid var(--line);border-radius:8px;
    background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap}
  .sm-mini-btn:active{background:var(--card)}
  .sm-mini-btn:disabled{opacity:.5;cursor:default}
  .sm-mini-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .sm-aging-yellow.active{background:var(--pending-soft);border-color:#e6b800;color:#7a5c00}
  .sm-aging-orange.active{background:#ffe0c2;border-color:#e67e00;color:#8a4600}
  .sm-aging-red.active{background:#ffd6d6;border-color:#cc0000;color:#8a0000}
  #smktSarTickers{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
    font-size:13px;font-family:inherit;color:var(--ink);resize:vertical;box-sizing:border-box}
  .sm-auth-banner{display:flex;flex-direction:column;gap:10px;padding:10px 12px;margin-bottom:12px;
    border-radius:10px;background:var(--pending-soft);border:1px solid #f0d78a}
  .sm-auth-banner.ok{background:#eefaf0;border-color:#b7e6bf;color:var(--accent);font-size:13px;padding:9px 12px}
  .sm-auth-row{display:flex;flex-direction:column;gap:6px}
  .sm-auth-msg{font-size:12.5px;line-height:1.4;color:var(--ink)}
  .sm-auth-msg a{color:var(--accent);font-weight:600}
  .sm-auth-form{display:flex;gap:8px}
  .sm-auth-form input{flex:1;height:36px;border:1px solid var(--line);border-radius:8px;
    padding:0 10px;font-size:13px;background:var(--card);color:var(--ink)}
  .smkt-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
  .smkt-chip-good{background:var(--accent-soft);color:var(--accent)}
  .smkt-chip-warn{background:var(--warn-soft);color:var(--warn)}
  .smkt-chip-bad{background:var(--bad-soft);color:#a8241c}
  .smkt-chip-neutral{background:var(--line);color:var(--ink-soft)}
  .smkt-detail-sec{padding:10px 0;border-bottom:1px solid var(--line)}
  .smkt-detail-sec:last-child{border-bottom:none}
  .smkt-detail-hd{font-weight:600;font-size:13px;margin-bottom:4px}
  .sm-grid{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);
    border-radius:10px;overflow:hidden}
  .sm-model-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 12px;background:var(--card)}
  .sm-model-nm{display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:600}
  .sm-model-ex{font-size:11px;font-weight:400;color:var(--ink-soft)}
  .sm-qty-input{width:80px;height:36px;border:1px solid var(--line);border-radius:8px;
    padding:0 8px;font-size:14px;text-align:right;flex-shrink:0}
  .sm-item-search{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;
    padding:0 10px;font-size:14px;margin-bottom:6px;box-sizing:border-box}
  .sm-hist{margin-top:16px}
  .sm-hist-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-soft);margin-bottom:8px}
  .sm-hist-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
    padding:6px 0;border-bottom:1px solid var(--line)}
  .sm-hist-row:last-child{border-bottom:none}
  .sm-dealer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;font-size:13.5px}
  .sm-dealer-row.sm-dealer-inactive{opacity:.5}
  .sm-dealer-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
  .sm-dealer-nm{font-weight:600}
  .sm-dealer-meta{display:flex;gap:8px;flex-wrap:wrap}
  .sm-dealer-meta select{height:32px;border:1px solid var(--line);border-radius:7px;
    padding:0 8px;font-size:12px;background:var(--card);color:var(--ink);max-width:160px}

  .sm-plan-head,.sm-plan-row{display:grid;grid-template-columns:1fr 90px 90px;gap:10px;align-items:center}
  .sm-plan-head{padding:6px 12px;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;color:var(--ink-soft)}
  .sm-plan-row{padding:9px 12px;background:var(--card);border-top:1px solid var(--line)}
  .sm-plan-row .sm-qty-input{width:100%}

  .sm-cat-head,.sm-cat-row{display:grid;grid-template-columns:1fr 60px 90px 90px;gap:10px;align-items:center}
  .sm-cat-head{padding:6px 12px;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;color:var(--ink-soft)}
  .sm-cat-row{padding:9px 12px;background:var(--card);border-top:1px solid var(--line)}
  .sm-cat-row .sm-qty-input{width:100%}
  .sm-cat-enabled{width:18px;height:18px}

  .sm-model-row-tap{cursor:pointer}
  .sm-model-row-tap:active{background:var(--card)}
  .sm-model-chev{color:var(--ink-soft);font-size:18px}
  .sm-model-items{padding:10px 12px;background:var(--paper);border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:8px}
  .sm-item-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .sm-item-nm{font-size:12.5px;flex:1}
  .sm-item-save-btn{align-self:flex-end}
  .sm-model-dms{font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--paper);
    border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex-shrink:0}
  .sm-item-dms-row{padding-bottom:8px;border-bottom:1px dashed var(--line)}
  .sm-item-dms-row .sm-item-nm{font-weight:600;color:var(--ink-soft)}
  .sm-item-dms-qty{font-size:13px;font-weight:700;width:80px;text-align:right;flex-shrink:0}
  .sm-upload-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;
    color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:8px;
    padding:8px 12px;margin-bottom:10px}
  .sm-upload-dl-btn{font-size:11.5px;font-weight:600;color:var(--accent);background:none;
    border:1px solid currentColor;border-radius:6px;padding:3px 9px;cursor:pointer;flex-shrink:0}
  .sm-upload-block{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;background:var(--card)}
  .sm-upload-block:last-child{margin-bottom:0}
  .sm-upload-h{font-size:13px;font-weight:700;margin-bottom:6px}

  .sm-add-dealer{position:relative;margin-bottom:14px}
  .sm-add-dealer-results{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:20;
    background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
    max-height:260px;overflow-y:auto}
  .sm-add-dealer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line)}
  .sm-add-dealer-row:last-child{border-bottom:none}
  .sm-add-dealer-row:active{background:var(--card)}
  .sm-add-dealer-plus{font-size:11px;font-weight:600;color:var(--accent);flex-shrink:0}
  .sm-add-dealer-results .empty{padding:10px 12px;font-size:12.5px}

  /* Activation Data */
  .sm-act-preview{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:13px;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
  .sm-act-mapped{font-size:12.5px;color:var(--ink-soft)}
  .sm-act-mapped a{color:var(--accent);font-weight:600;margin-left:4px}
  .sm-act-map-search-wrap{position:relative}
  .sm-act-map-search{width:100%;height:36px;border:1px solid var(--line);border-radius:8px;
    padding:0 10px;font-size:13px;box-sizing:border-box}
  .sm-act-map-results{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;
    background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
    max-height:220px;overflow-y:auto}

  /* Tertiary: model stays visible while scrolling right */
  #smTertiaryList .rpt-table th:first-child,
  #smTertiaryList .rpt-table td:first-child{
    position:sticky;left:0;background:var(--card);z-index:1;box-shadow:1px 0 0 var(--line)}
  #smTertiaryList .rpt-table th:first-child{background:var(--card)}


  /* ---------- Customer login portal (/customer) ---------- */
  #customerPortalApp main{max-width:520px;margin:0 auto;padding:16px}
  .cp-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
  .cp-k{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
  .cp-big{font-size:28px;font-weight:700}
  .cp-big.owes,.cp-amt.owes{color:var(--warn)} .cp-big.credit,.cp-amt.credit{color:var(--accent)}
  .cp-sub{font-size:12px;color:var(--ink-soft)}
  .cp-h{font-size:13px;font-weight:700;margin:16px 0 6px}
  .cp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);
    border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px}
  .cp-tap{cursor:pointer}
  .cp-amt{font-weight:700;white-space:nowrap} .cp-amt-col{text-align:right}
  .cp-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;background:var(--accent-soft);color:var(--accent)}
  .cp-msg{font-size:13px;color:var(--warn);margin:10px 0;min-height:1em} .cp-msg.ok{color:var(--accent)}
  .cp-search{width:100%;margin:6px 0 10px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:var(--card);color:inherit}
  .cp-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px}
  .cp-tabs button{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:600;color:inherit}
  .cp-tabs button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .cp-qty{display:flex;align-items:center;gap:8px}
  .cp-qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:18px;color:inherit}
  .cp-qty span{min-width:22px;text-align:center;font-weight:700}
  .cp-cart{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);margin-top:10px}
  .cp-cart button.primary{width:auto;margin:0;padding:0 18px;height:40px}
  #customerPortalApp button.primary{margin-top:10px}
  #cpPrintModal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;overflow:auto;padding:16px}
  #cpPrintModal.hidden{display:none}
  .cp-modal-card{background:var(--card);color:#111;max-width:640px;margin:0 auto;border-radius:12px;padding:16px}
  .cp-inv table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
  .cp-inv th,.cp-inv td{border-bottom:1px solid #ddd;padding:5px 4px;text-align:left} .cp-inv .r{text-align:right}
  .cp-inv-h{margin-bottom:8px;font-size:13px}
  @media print{
    body.cp-printing *{visibility:hidden}
    body.cp-printing #cpPrintArea, body.cp-printing #cpPrintArea *{visibility:visible}
    body.cp-printing #cpPrintArea{position:absolute;left:0;top:0;width:100%}
    body.cp-printing #cpPrintModal{background:none;padding:0}
  }
  /* ---------- Expiry Claims — customer portal (no-login) ---------- */
  #expiryClaimApp main{max-width:520px;margin:0 auto;padding:16px}
  .ec-header{margin-bottom:14px}
  .ec-cust-name{font-size:18px;font-weight:700}
  .ec-cust-sub{font-size:13px;color:var(--ink-soft)}
  .ec-summary:empty{display:none}
  .ec-summary{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;margin-bottom:14px;font-size:13px;display:flex;justify-content:space-between;
    align-items:center;gap:10px}
  .ec-summary-pct{font-size:20px;font-weight:700}
  .ec-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
  .ec-chip.green{background:#e3f3e9;color:#1d6e4f}
  .ec-chip.yellow{background:var(--pending-soft);color:var(--pending)}
  .ec-chip.red{background:var(--warn-soft);color:var(--warn)}
  .ec-age{color:var(--ink-soft);font-weight:600}
  .ec-age.warn{color:var(--warn)}
  #ecProductList{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;
    margin-bottom:14px}
  #ecProductList:empty{display:none}
  .ec-prod-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
  .ec-prod-row:last-child{border-bottom:none}
  .ec-prod-row:active{background:var(--card)}
  .ec-prod-nm{font-size:13px}
  .ec-prod-sub{font-size:11.5px;color:var(--ink-soft)}
  .ec-prod-add{font-size:11px;font-weight:700;color:var(--accent);flex-shrink:0}
  .ec-cart-h{font-size:13px;font-weight:700;margin-bottom:8px}
  .ec-cart-h:has(+ #ecCart:empty){display:none}
  .ec-line{background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;margin-bottom:10px}
  .ec-line-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
  .ec-line-nm{font-size:13px;font-weight:600}
  .ec-line-rm{border:none;background:none;color:var(--warn);font-size:13px;flex-shrink:0}
  .ec-line-row{display:flex;gap:8px;margin-bottom:8px}
  .ec-line-row input{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
  .ec-line-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .ec-line-photos img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
  .ec-cond-btn{flex:1;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 6px;
    font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .ec-cond-btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .ec-brand-check-list{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}
  .ec-brand-check{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink)}
  .ec-photo-add{width:56px;height:56px;border-radius:8px;border:1px dashed var(--line);
    display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-soft);cursor:pointer}
  .ec-done-card{text-align:center;padding:60px 20px}
  .ec-done-tick{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
    font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
  .ec-done-title{font-size:18px;font-weight:700;margin-bottom:8px}
  .ec-done-ref{font-size:16px;font-weight:700;color:var(--accent);margin-bottom:10px}
  .ec-done-sub{font-size:13px;color:var(--ink-soft)}

  /* ---------- LR management (redesign 2026-09-26) ---------- */
  #lrDetailModal{background:rgba(20,22,20,.45);z-index:50}
  #lrDetailModal .cart-sheet{max-height:92vh;overflow-y:auto}
  #lrScanModal{background:rgba(20,22,20,.7);z-index:70}
  #lrScanModal .cart-sheet{max-height:95vh;overflow-y:auto}
  .lr-tab-n{display:inline-block;min-width:18px;margin-left:6px;padding:0 6px;border-radius:9px;
    background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;line-height:18px;text-align:center}
  .cs-sub.active .lr-tab-n{background:rgba(255,255,255,.25);color:#fff}
  #lrView .cs-subtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #lrView .cs-sub{flex:none;white-space:nowrap}
  .lr-age-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
  .lr-age-chip{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);
    font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
  .lr-age-chip b{margin-left:6px}
  .lr-age-chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .lr-age-chip.zero:not(.active){opacity:.45}
  .lr-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow)}
  .lr-card:active{transform:scale(.995)}
  .lr-card-top{display:flex;align-items:center;gap:8px}
  .lr-card-no{font-weight:700;font-size:16px}
  .lr-card-top .lr-pill{margin-left:auto}
  .lr-card-sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .lr-pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
  .lr-pill.fresh{background:var(--accent-soft);color:var(--accent)}
  .lr-pill.mid{background:var(--pending-soft);color:var(--pending)}
  .lr-pill.old{background:var(--warn-soft);color:var(--warn)}
  .lr-pill.done{background:#eef0ec;color:var(--ink-soft)}
  .lr-prog{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;color:var(--ink-soft)}
  .lr-prog-bar{flex:1;height:6px;border-radius:3px;background:#eceee9;overflow:hidden}
  .lr-prog-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
  .lr-remark-n{color:var(--warn);font-weight:600}
  .lr-detail-meta{font-size:13px;color:var(--ink-soft);margin:-6px 0 10px}
  .lr-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .lr-stat{flex:1;min-width:70px;background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:6px 10px;font-size:11.5px;color:var(--ink-soft)}
  .lr-stat b{display:block;font-size:17px;color:var(--ink)}
  .lr-stat.warn b{color:var(--warn)}
  .lr-copy-btn{flex-basis:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);
    color:var(--on-accent);font-size:13px;font-weight:600;cursor:pointer}
  .lr-copy-btn:active{transform:scale(.99)}
  .lr-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px;background:var(--card)}
  .lr-toggle-btn{padding:7px 14px;border:none;background:none;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .lr-toggle-btn.active{background:var(--ink);color:var(--paper)}
  .lr-inv-actions{display:flex;gap:8px;margin-bottom:10px}
  .lr-inv-actions:empty{display:none}
  .lr-inv-actions .lr-copy-btn{flex:1}
  .lr-inv-btn{flex:1;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);
    color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
  .lr-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);
    border-radius:10px;overflow:hidden;font-size:13px}
  .lr-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
    background:#f3f3ef;padding:8px 10px;border-bottom:1px solid var(--line)}
  .lr-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  .lr-table tr:last-child td{border-bottom:none}
  .lr-city-row td{background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12px;padding:6px 10px}
  .lr-row{cursor:pointer}
  .lr-row.open td{background:var(--raised)}
  .lr-inv{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--accent);
    text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
  .lr-status{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
  .lr-status.ok{background:var(--accent-soft);color:var(--accent)}
  .lr-status.wait{background:var(--pending-soft);color:var(--pending)}
  .lr-cust-remark{font-size:12px;color:var(--warn);margin-top:2px}
  .lr-actions td{background:var(--raised)}
  .lr-actions textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:13px}
  .lr-actions .qo-cands{margin-top:8px}
  .lr-scan-img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:var(--card)}
  .lr-scan-frame{width:100%;height:75vh;border:1px solid var(--line);border-radius:8px}

  /* ---------- packing supervisors (Reports) ---------- */
  .ps-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);margin-bottom:10px}
  .ps-row{display:grid;grid-template-columns:1.3fr .6fr .7fr .8fr 1.2fr .9fr;gap:6px;padding:10px;font-size:13px;align-items:center;border-top:1px solid var(--line)}
  .ps-row.ps-head{font-size:11px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;border-top:none;background:#f4f6f8}
  .ps-click{cursor:pointer}.ps-click.sel{background:#e8f3f1}
  .ps-pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700}
  .ps-ok{background:#dcf5ec;color:#0b6b5f}.ps-warn{background:var(--pending-soft);color:#b45309}
  .ps-bad{background:#fde1dd;color:#b42318}.ps-leave{background:#e6e9ee;color:#475467}
  .ps-warnbox{background:var(--pending-soft);color:#7a4306;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
  .ps-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:14px}
  .ps-card.old{border-color:#b42318}
  .ps-sub{font-size:12px;color:var(--ink-soft);margin-top:3px}
  .ps-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .ps-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
  .ps-modal-box{background:var(--card);border-radius:14px;padding:18px;width:100%;max-width:420px;max-height:88vh;overflow:auto}
  .ps-modal-box h3{margin:0 0 10px;font-size:16px}
  .ps-modal-box label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:8px}
  .ps-modal-box input:not([type=checkbox]),.ps-modal-box select{display:block;width:100%;height:40px;margin-top:3px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
  .ps-modal-box .nc-save{margin-top:10px}
  .ps-chk{display:flex!important;align-items:center;gap:8px;font-size:14px!important;color:var(--ink)!important}
  .ps-brands{max-height:45vh;overflow:auto}
  .ps-code{font-size:36px;font-weight:800;letter-spacing:.2em;text-align:center;color:var(--accent);margin:10px 0}
  .ps-cover{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}.ps-cover span{flex:1}.ps-cover select{flex:1.3;margin:0!important}
  @media(max-width:640px){.ps-row{grid-template-columns:1.2fr .5fr .6fr .7fr 1fr .8fr;font-size:11px;padding:8px 6px}}

  /* ---------- redesign step 2: Home, Menu, search palette ---------- */
  #homeView{padding:8px 16px 96px;max-width:760px;margin:0 auto}
  .home-hello{padding:14px 0 4px}
  .home-date{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .home-hello h1{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.01em;margin-top:4px}
  .home-search{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;height:46px;padding:0 14px;background:var(--card);
    border:1px solid var(--line);border-radius:12px;color:var(--ink-3);font:inherit;font-size:15px;cursor:pointer;text-align:left}
  .home-search svg{width:18px;height:18px;stroke:currentColor;flex:none}
  .home-search span{flex:1}
  .home-search kbd{font:11px var(--mono);border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--raised)}
  @media (max-width:760px){.home-search kbd{display:none}}
  .home-cta{display:block;width:100%;margin-top:12px;height:52px;border:none;border-radius:12px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:17px;font-weight:700;cursor:pointer}
  .home-h{margin:22px 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
  .home-attn{display:flex;flex-direction:column;gap:8px}
  .home-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
  .home-row b{min-width:34px;height:34px;line-height:34px;text-align:center;border-radius:10px;background:var(--pending-soft);color:var(--pending);font-size:16px}
  .home-row span{flex:1;font-size:15px;font-weight:500}
  .home-row i{font-style:normal;color:var(--ink-3);font-size:20px}
  .home-clear{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--ink-soft);font-size:14px;text-align:center}
  .home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  @media (max-width:480px){.home-grid{grid-template-columns:repeat(3,1fr)}}
  .home-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;background:var(--card);border:1px solid var(--line);border-radius:12px;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;text-align:center}
  .home-ic{font-size:20px;line-height:1}
  .menu-search{position:sticky;top:0;background:var(--card);padding:4px 0 10px}
  .menu-search input{height:42px}
  .menu-h{margin:12px 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
  .gs-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:flex-start;padding:8vh 12px 0}
  .gs-panel{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
  .gs-panel input{border:none;border-bottom:1px solid var(--line);border-radius:0;height:54px;padding:0 18px;font-size:17px;background:transparent}
  .gs-panel input:focus{box-shadow:none}
  .gs-results{max-height:60vh;overflow:auto;padding:6px}
  .gs-h{padding:10px 12px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
  .gs-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:none;border:none;border-radius:10px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;text-align:left}
  .gs-item:hover,.gs-item:focus{background:var(--raised);outline:none}
  .gs-item small{display:block;color:var(--ink-soft);font-size:12px}
  .gs-ic{width:28px;text-align:center;font-size:17px}
  .gs-empty{padding:24px;text-align:center;color:var(--ink-soft)}
  .bar button.out svg{display:block}

  /* ---------- redesign step 3: Sell & Collect — laptop width + calmer rows ---------- */
  @media (min-width:1000px){
    body[data-tab="os"] main, body[data-tab="manage"] main, body[data-tab="cust"] main,
    body[data-tab="mine"] main, body[data-tab="requests"] main, body[data-tab="tasks"] main,
    body[data-tab="order"] main{max-width:1120px}
    body[data-tab="os"] .bar, body[data-tab="manage"] .bar, body[data-tab="cust"] .bar,
    body[data-tab="mine"] .bar, body[data-tab="requests"] .bar, body[data-tab="tasks"] .bar,
    body[data-tab="order"] .bar{max-width:1120px}
    body[data-tab="cust"] #custList, body[data-tab="order"] #orderCustList, body[data-tab="requests"] #requestsList,
    body[data-tab="mine"] #mineList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;align-items:start}
    body[data-tab="manage"] #manageList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;align-items:start}
  }
  .cust,.item,.kpi,.rank,.led-head{border-radius:14px}
  .cust:hover,.item:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
  .cust .chev{color:var(--ink-3)}
  .cs-subtabs{background:var(--raised);padding:3px;border-radius:12px;gap:2px;display:inline-flex;max-width:100%;overflow-x:auto}
  .cs-sub{border:none;background:transparent;border-radius:10px;padding:7px 14px;white-space:nowrap}
  .cs-sub.active{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:600}
  button.primary,#cartBar{border-radius:12px}
  .search input{background:var(--card);border-radius:12px}
  .qty .n.zero{color:var(--bad)}

  /* ---------- redesign step 4: Stock, warehouse & queues — one queue pattern ---------- */
  @media (min-width:1000px){
    body[data-tab="stock"] main, body[data-tab="receiving"] main, body[data-tab="stock_verify"] main,
    body[data-tab="wex"] main, body[data-tab="inbound_issues"] main, body[data-tab="lr"] main,
    body[data-tab="dms"] main, body[data-tab="expiry_claims"] main, body[data-tab="catalog"] main{max-width:1120px}
    body[data-tab="stock"] .bar, body[data-tab="receiving"] .bar, body[data-tab="stock_verify"] .bar,
    body[data-tab="wex"] .bar, body[data-tab="inbound_issues"] .bar, body[data-tab="lr"] .bar,
    body[data-tab="dms"] .bar, body[data-tab="expiry_claims"] .bar, body[data-tab="catalog"] .bar{max-width:1120px}
    body[data-tab="stock"] #stockList, body[data-tab="lr"] #lrList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;align-items:start}
  }
  /* status pills share one shape wherever a queue shows a state */
  .req-badge,.tab-badge,.cs-firm-badge,.cs-mapped-badge{border-radius:999px}
  .req-badge{font-weight:600;letter-spacing:.01em}
  /* bottom sheets: softer corners, grab handle, blurred backdrop */
  .cart-sheet,.cr-sheet,.rf-sheet,.more-panel,.inv-sheet{border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
  .cart-sheet::before,.cr-sheet::before,.rf-sheet::before,.more-panel::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 10px}
  .modal-overlay,.more-backdrop{backdrop-filter:blur(3px)}
  .more-panel{background:var(--card)}
  .cart-sheet,.cr-sheet,.rf-sheet{color:var(--ink)}
  .loading,.empty{color:var(--ink-3)}
  .empty{border:1px dashed var(--line);border-radius:14px;margin:12px 0;padding:36px 20px}
  .count{color:var(--ink-3);font-weight:500}

  /* ---------- redesign step 5: Reports, Samsung & admin — laptop tables ---------- */
  @media (min-width:1000px){
    body[data-tab="reports"] main, body[data-tab="samsung"] main, body[data-tab="users"] main,
    body[data-tab="analytics"] main, body[data-tab="dash"] main, body[data-tab="consolidated"] main,
    body[data-tab="reconciliation"] main, body[data-tab="letters"] main{max-width:1280px}
    body[data-tab="reports"] .bar, body[data-tab="samsung"] .bar, body[data-tab="users"] .bar,
    body[data-tab="analytics"] .bar, body[data-tab="dash"] .bar, body[data-tab="consolidated"] .bar,
    body[data-tab="reconciliation"] .bar, body[data-tab="letters"] .bar{max-width:1280px}
  }
  #reportsView table,#samsungView table,#usersView table,#analyticsView table,#dashView table,#consolidatedView table,#reconciliationView table,#lettersView table{border-collapse:collapse;font-variant-numeric:tabular-nums}
  #reportsView th,#samsungView th,#usersView th,#analyticsView th,#dashView th,#consolidatedView th,#reconciliationView th,#lettersView th{position:sticky;top:52px;background:var(--paper);color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;text-align:left}
  #reportsView td,#samsungView td,#usersView td,#analyticsView td,#dashView td,#consolidatedView td,#reconciliationView td,#lettersView td,#reportsView th,#samsungView th,#usersView th,#analyticsView th,#dashView th,#consolidatedView th,#reconciliationView th,#lettersView th{padding:9px 10px;border-bottom:1px solid var(--line)}
  #reportsView tbody tr:hover td,#samsungView tbody tr:hover td,#usersView tbody tr:hover td,#analyticsView tbody tr:hover td,#dashView tbody tr:hover td,#consolidatedView tbody tr:hover td,#reconciliationView tbody tr:hover td,#lettersView tbody tr:hover td{background:var(--raised)}
  .rpt-hub-card{background:var(--card);border-radius:14px}
  .rpt-hub-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .rpt-menu-item,.rpt-menu-btn{background:var(--card)}

  /* ---------- shared dialogs / toasts (js/ui-dialogs.js) ---------- */
  .ui-dlg-back{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
  .ui-dlg{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:18px;width:100%;max-width:380px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
  .ui-dlg-msg{font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;margin-bottom:14px}
  .ui-dlg-input{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:16px;margin-bottom:14px}
  .ui-dlg-btns{display:flex;gap:10px;justify-content:flex-end}
  .ui-dlg-btn{min-height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;width:auto;margin:0}
  .ui-dlg-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .ui-dlg-btn.danger{background:var(--warn);border-color:var(--warn);color:#fff}
  .ui-dlg-btn:focus-visible,.ui-dlg-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .ui-toasts{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:210;display:flex;flex-direction:column;gap:8px;align-items:center;width:92%;max-width:420px;pointer-events:none}
  .ui-toast{background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.25);transition:opacity .25s;white-space:pre-wrap}
  .ui-toast.error{background:var(--warn);color:#fff}
  .ui-toast.out{opacity:0}