:root{
    --ink:#1a1d1a; --ink-soft:#5c6159; --line:#e3e4df; --paper:#faf9f5;
    --card:#ffffff; --accent:#1d6e4f; --accent-soft:#e7f1ec;
    --warn:#a8421c; --warn-soft:#f6e9e2; --shadow:0 1px 3px rgba(0,0,0,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{overscroll-behavior-y:contain}   /* stop accidental pull-to-refresh reloads */
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    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:#fff;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:#fff;
    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:rgba(250,249,245,.92);
    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:#fff;
    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:#fff;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}

  /* ---------- 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:#fff;border:none;
    border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
  .invoice{background:#fff;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:#fff} 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:#fff;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:#fff;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:#fff;border-radius:8px;
    font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .oix-unit button.on{background:var(--accent);color:#fff;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:#fff;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:#fff}
  .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:#fff;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}
  .pr{padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .pr.active{background:var(--ink);color:#fff;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:#fff}
  .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:#fff;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:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
  .ph{padding:6px 13px;border:1px solid var(--line);background:#fff;border-radius:18px;font-size:13px;color:var(--ink-soft);cursor:pointer}
  .ph.active{background:var(--accent);color:#fff;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:#fff}
  .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:#fff;border-color:var(--accent)}
  .bo-noord{background:#fff;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:#fff;padding:0 11px;height:34px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .bnb.active{background:var(--accent);color:#fff}
  .ord-brand-chips{display:flex;flex-wrap:wrap;gap:6px}
  .brand-chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink)}
  .brand-chip.sel{background:var(--accent);color:#fff;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{position:fixed;inset:0;background:rgba(20,22,20,.5);z-index:80;display:flex;align-items:flex-end}
  .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:#fff;border-radius:15px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--ink)}
  .rf-bchip.active{background:var(--accent);color:#fff;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:#fff;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:#fff}
  .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:#fff;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:#fff;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:#fff}

  /* 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:#fff;border-radius:6px;
    font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .cle-unit button.on{background:var(--accent);color:#fff;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}

  #cartBar{position:fixed;left:0;right:0;bottom:62px;background:var(--accent);color:#fff;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:#fff;color:var(--accent);border:none;border-radius:9px;padding:10px 20px;
    font-size:15px;font-weight:700;cursor:pointer}

  #cartModal{position:fixed;inset:0;background:rgba(20,22,20,.45);z-index:50;display:flex;align-items:flex-end}
  #drillModal{position:fixed;inset:0;background:rgba(20,22,20,.45);z-index:50;display:flex;align-items:flex-end}
  #drillModal .cart-sheet{max-height:75vh;overflow-y:auto}
  #incModal .cart-sheet{max-height:85vh;overflow-y:auto}
  #incForm{padding-bottom:28px}
  #osModal{position:fixed;inset:0;background:rgba(20,22,20,.45);z-index:50;display:flex;align-items:flex-end}
  #osModal .cart-sheet{max-height:80vh;overflow-y:auto}
  #osInvModal{position:fixed;inset:0;background:rgba(20,22,20,.55);z-index:70;display:flex;align-items:flex-end}
  #osInvModal .cart-sheet{max-height:88vh;overflow-y:auto}
  .ol{padding:6px 13px;border:1px solid var(--line);background:#fff;border-radius:18px;font-size:13px;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
  .ol.active{background:var(--ink);color:#fff;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:#fff4d6;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-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:#fff;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:#fff;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:#fff6f6}
  .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:#fff;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:#fff;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:#fff;color:var(--ink-soft);font-weight:600;font-size:13px;cursor:pointer;margin-left:6px}
  .tk-pending{background:#fffaf0;border-color:#f0d9a8}
  .tk-await{font-size:12px;color:#b8860b;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:#fff;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)}
  .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:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;color:#1a1d1a}
  .vdoc{background:#fff;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:#fff1f1}
  .gap-row.declining{background:#fff8ec}
  .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:#fff;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:#fff;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:#fff;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:#fff;font-weight:700;font-size:14px;cursor:pointer}
  .an-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
  .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:#fff8ec;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}
  .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:#fff;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-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-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-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .os-paid-btn{height:46px;background:#fff;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:#fff;border-radius:11px;font-size:15px;font-weight:700;cursor:pointer}
  .os-await{text-align:center;font-size:13px;color:#b8860b;background:#fff4d6;border-radius:10px;padding:10px}
  .os-city-btn{background:#fff;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)}
  #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:#fff;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{position:fixed;inset:0;background:rgba(20,22,20,.5);z-index:80;
    display:flex;align-items:flex-end}
  .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:#fff;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:#fff;color:var(--ink-soft);border-color:var(--line)}
  .cr-proceed{background:var(--accent);color:#fff;border-color:var(--accent)}
  .cr-admin{background:var(--warn);color:#fff;border-color:var(--warn)}
  .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:#fff;border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .mg-f.active{background:var(--ink);color:#fff;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-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:#fdf3e0;color:#a8721c}
  .mg-badge.confirmed{background:var(--accent-soft);color:var(--accent)}
  .mg-badge.rejected{background:var(--warn-soft);color:var(--warn)}
  .mg-badge.cancelled{background:#eee;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-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:#fff;border-color:var(--accent)!important}
  .mg-reject{background:#fff;color:var(--warn);border-color:var(--warn)!important}
  .mg-expand{background:#fff;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:#fff;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:#fff;
    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:#fff;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:#fff}
  .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:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
  .mine-f{padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:20px;
    font-size:13px;color:var(--ink-soft);cursor:pointer}
  .mine-f.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .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:#fff;border-color:var(--accent)}
  .me-cancel{background:#fff;color:var(--warn);border-color:var(--warn)}