*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f0f2f5;color:#0a1628;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit}
a{color:#1a6ef5;text-decoration:none}

/* ═══ LOGIN ═══════════════════════════════════════════════════ */
#LP{position:fixed;inset:0;display:flex;overflow-y:auto;background:linear-gradient(135deg,#0a1628 0%,#1a4dc4 100%);padding:20px;z-index:10}
.lp-card{width:100%;max-width:380px;margin:auto;background:#fff;border-radius:14px;padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
@media(max-height:760px){.lp-card{padding:22px 26px}}
@media(max-width:420px){.lp-card{padding:24px 20px}}
.lp-logo{width:60px;height:60px;background:#1a6ef5;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 14px}
.lp-title{font-size:22px;font-weight:800;color:#0a1628;text-align:center;margin-bottom:4px}
.lp-sub{font-size:12px;color:#666;text-align:center;margin-bottom:22px}
.lp-row{margin-bottom:11px;position:relative}
.lp-row input{width:100%;padding:11px 14px 11px 38px;border:1.5px solid #ddd;border-radius:8px;font-size:13px;outline:none;transition:border .15s}
.lp-row input:focus{border-color:#1a6ef5}
.lp-row .ic{position:absolute;left:12px;top:11px;color:#999;font-size:14px}
.lp-btn{width:100%;padding:13px;border-radius:10px;border:none;background:#1a6ef5;color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:9px;transition:all .15s}
/* Secondary "Try demo" button — outlined so Sign in stays the primary action */
.lp-btn-ghost{background:#fff;color:#1a6ef5;border:1.5px solid #c5d9f6}
.lp-btn-ghost:hover{background:#eff6ff}
.lp-btn:hover{background:#0052cc}
.lp-err{display:none;background:#ffeaea;border:1px solid #ffb3b3;color:#bf2600;padding:9px 11px;border-radius:6px;font-size:11px;margin-bottom:11px}
.lp-hint{margin-top:16px;padding-top:14px;border-top:1px solid #eee;font-size:11px;color:#999;text-align:center}
.lp-hint code{background:#f5f7fa;padding:2px 5px;border-radius:3px;color:#0a1628;font-family:monospace}

/* ═══ APP SHELL ═══════════════════════════════════════════════ */
#AP{display:none;height:100vh;overflow:hidden}
#AP.open{display:flex}
.AW{display:flex;width:100%;height:100%}

/* Sidebar */
.SB{width:220px;flex-shrink:0;background:#0a1628;display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top);transition:transform .25s;z-index:100}
.sbTop{padding:18px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.sbLB{width:30px;height:30px;background:#1a6ef5;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0}
.sbName{flex:1;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbClose{display:none;background:none;border:none;color:#fff;font-size:18px;cursor:pointer}
.sbNav{flex:1;padding:10px 0;overflow-y:auto}
.sbSec{font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;padding:14px 16px 6px;font-weight:700}
.sbIt{display:flex;align-items:center;gap:9px;padding:9px 16px;color:rgba(255,255,255,.7);cursor:pointer;font-size:12px;transition:all .15s}
.sbIt:hover{background:rgba(255,255,255,.05);color:#fff}
.sbIt.on{background:rgba(26,110,245,.2);color:#fff;border-left:3px solid #1a6ef5;padding-left:13px}
.sbIc{width:18px;text-align:center;font-size:14px}
.sbUsr{padding:11px 16px;padding-bottom:max(11px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.sbUsrRow{display:flex;align-items:center;gap:8px}
.sbAv{width:30px;height:30px;border-radius:50%;background:#1a6ef5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.sbNm{flex:1;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbRl{font-size:10px;color:rgba(255,255,255,.5);white-space:nowrap}
/* Full-width, clearly-labelled Sign out button (was a tiny faint icon nobody saw) */
.sbOut{width:100%;cursor:pointer;color:#fff;background:#d63b3b;border:none;font-size:13px;font-weight:700;padding:11px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 8px rgba(214,59,59,.35)}
.sbOut:hover{background:#c22e2e}
.sbOut:active{transform:translateY(1px)}
.sbOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}

/* Topbar */
.MA{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.TB{height:54px;flex-shrink:0;background:#fff;border-bottom:1px solid #ddd;display:flex;align-items:center;padding:0 18px;gap:10px}
.tbMenu{display:none;background:#1a6ef5;border:none;font-size:22px;cursor:pointer;color:#fff;flex-shrink:0;padding:6px 12px;border-radius:7px;line-height:1;box-shadow:0 2px 6px rgba(26,110,245,.35)}
.tbTitle{font-size:15px;font-weight:700;color:#0a1628;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbBtn{padding:6px 12px;border-radius:7px;border:1px solid #ddd;background:#fff;font-size:11px;font-weight:700;color:#444;cursor:pointer;transition:all .15s;white-space:nowrap}
.tbBtn:hover{border-color:#1a6ef5;color:#1a6ef5;background:#eff6ff}
.tbBtn.on{background:#1a6ef5;color:#fff;border-color:#1a6ef5}
.PA{flex:1;overflow-y:auto;padding:18px}

/* Full-screen POS ("posmode"): the sidebar collapses to an overlay and the
   topbar menu button appears, so the till uses the whole screen like Vektori.
   Applies at ALL widths (not just phones) while on the POS page. */
#AP.posmode .SB{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);width:260px;box-shadow:0 0 34px rgba(0,0,0,.45)}
#AP.posmode .SB.open{transform:translateX(0)}
#AP.posmode .tbMenu{display:block}
#AP.posmode .sbOverlay{display:none}
#AP.posmode .sbOverlay.open{display:block}
#AP.posmode .PA{padding:12px}

/* ═══ COMPONENTS ═══════════════════════════════════════════════ */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.phT{font-size:20px;font-weight:800;color:#0a1628;margin-bottom:2px}
.phS{font-size:12px;color:#666}
.phA{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

.btn{padding:7px 13px;border-radius:7px;border:1px solid #ddd;background:#fff;font-size:12px;font-weight:600;color:#0a1628;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn:hover{border-color:#1a6ef5;color:#1a6ef5}
.btnP{background:#1a6ef5;color:#fff;border-color:#1a6ef5}.btnP:hover{background:#0052cc;border-color:#0052cc;color:#fff}
.btnG{background:#36b37e;color:#fff;border-color:#36b37e}.btnG:hover{background:#1f7a55;border-color:#1f7a55;color:#fff}
.btnR{background:#fff;color:#bf2600;border-color:#bf2600}.btnR:hover{background:#bf2600;color:#fff}

.kG{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:16px}
.kC{background:#fff;border-radius:10px;border:1px solid #e3e6eb;padding:14px 16px;box-shadow:0 1px 2px rgba(10,22,40,.03)}
.kL{font-size:10px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.kV{font-size:24px;font-weight:800;color:#0a1628;line-height:1}
.kSb{font-size:10px;color:#999;margin-top:4px}

.box{background:#fff;border-radius:10px;border:1px solid #e3e6eb;margin-bottom:14px;overflow:hidden;box-shadow:0 1px 2px rgba(10,22,40,.03)}
.bH{padding:11px 16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;gap:10px}
.bT{font-size:13px;font-weight:700;color:#0a1628}
.bB{padding:14px 16px}

.empty{padding:36px 20px;text-align:center;color:#999}
.emIc{font-size:36px;margin-bottom:8px;opacity:.5}

.bdg{display:inline-block;padding:2px 8px;border-radius:11px;font-size:10px;font-weight:700}
.bg{background:rgba(54,179,126,.15);color:#1f7a55}
.bb{background:rgba(26,110,245,.15);color:#1a6ef5}
.ba{background:rgba(255,153,31,.15);color:#974f0c}
.br{background:rgba(222,53,11,.15);color:#bf2600}
.bgr{background:#f0f2f5;color:#666}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0a1628;color:#fff;padding:11px 18px;border-radius:9px;font-size:12px;font-weight:600;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.show{opacity:1}

table{width:100%;border-collapse:collapse;font-size:12px}
th{background:#f5f7fa;color:#666;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:9px 12px;text-align:left;border-bottom:1px solid #e3e6eb}
td{padding:10px 12px;border-bottom:1px solid #f0f2f5}
tr:hover td{background:#fafbfd}

input[type=text],input[type=number],input[type=password],input[type=date],select,textarea{
  width:100%;padding:8px 11px;border:1.5px solid #ddd;border-radius:7px;font-size:12px;background:#fff;outline:none;transition:border .15s
}
input:focus,select:focus,textarea:focus{border-color:#1a6ef5}
label{display:block;font-size:11px;font-weight:700;color:#0a1628;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.fi{margin-bottom:11px}

/* ═══ MODAL ════════════════════════════════════════════════════ */
.MOv{display:none;position:fixed;inset:0;background:rgba(10,22,40,.55);z-index:200;align-items:center;justify-content:center;padding:20px}
.MOv.open{display:flex}
.MB{background:#fff;border-radius:12px;padding:22px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.MB.wide{max-width:680px}
.MC{position:absolute;top:14px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:#999}
.MC:hover{color:#bf2600}
.MT{font-size:18px;font-weight:800;color:#0a1628;margin-bottom:4px;padding-right:30px}
.MS{font-size:12px;color:#666;margin-bottom:18px}
.MF{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* ═══ POS TERMINAL ═════════════════════════════════════════════ */
.posWrap{display:grid;grid-template-columns:1fr 360px;gap:0;height:calc(100vh - 90px)}
.posLeft{display:flex;flex-direction:column;gap:11px;overflow:hidden;padding-right:14px}
.posSearch{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:11px;background:#fff;border:1px solid #d8e0ea;border-radius:10px;box-shadow:0 1px 2px rgba(10,22,40,.04)}
.posSearch input{flex:1;min-width:160px}
/* Bigger tap target + darker label so categories are readable at a glance */
.catChip{padding:9px 17px;border-radius:12px;background:#fff;color:var(--cc,#33415c);border:2px solid var(--cc,#dbe2ec);cursor:pointer;font-size:13px;font-weight:800;white-space:nowrap;transition:all .12s}
.catChip:hover{filter:brightness(.97)}
.catChip.on{background:var(--cc,#1a6ef5);color:#fff;box-shadow:0 3px 8px rgba(10,22,40,.22)}
/* Compact colored tiles (POS look): denser grid, colored by category, white
   text — many products visible at once on a tablet. */
.prodGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;padding-right:4px;align-content:start}
.prodC{position:relative;background:var(--pc,#1a6ef5);border:none;border-radius:12px;padding:9px 10px;min-height:72px;cursor:pointer;transition:transform .1s,box-shadow .15s;display:flex;flex-direction:column;justify-content:space-between;gap:4px;color:#fff;box-shadow:0 1px 3px rgba(10,22,40,.18);overflow:hidden}
.prodC:hover{box-shadow:0 7px 16px rgba(10,22,40,.30);transform:translateY(-2px)}
.prodC:active{transform:translateY(0)}
.prodC .pNm{font-size:12.5px;font-weight:700;color:#fff;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prodC .pEm{font-size:13px}
.prodC .pPr{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.prodC .pQty{position:absolute;top:0;right:0;background:rgba(0,0,0,.42);color:#fff;font-size:11px;font-weight:800;min-width:22px;text-align:center;padding:2px 6px;border-radius:0 12px 0 11px}
.prodC .pLow{position:absolute;top:6px;left:7px;background:rgba(0,0,0,.32);color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:20px}
.prodC.out{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}

.posRight{background:#fff;border:none;border-left:1px solid #e6eaf0;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
.posCartH{padding:13px 16px;background:#0a1628;color:#fff;display:flex;align-items:center;justify-content:space-between}
.posCartH .ttl{font-size:13px;font-weight:700}
.posCartH .clr{background:rgba(255,255,255,.1);border:none;color:#fff;padding:4px 9px;border-radius:6px;cursor:pointer;font-size:10px;font-weight:600}
.posCartH .clr:hover{background:rgba(255,80,80,.4)}
.posCartList{flex:1;overflow-y:auto;padding:9px 11px}
.cartRow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #f0f2f5}
.cartRow:last-child{border-bottom:none}
.cartRow .cNm{flex:1;font-size:12.5px;font-weight:800;color:#0a1628;line-height:1.3}
.cartRow .cPr{font-size:10.5px;color:#5c6b82;font-weight:600}
.qtyBtn{width:24px;height:24px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer;font-weight:700;color:#0a1628;display:flex;align-items:center;justify-content:center}
.qtyBtn:hover{background:#1a6ef5;color:#fff;border-color:#1a6ef5}
.qtyVal{min-width:24px;text-align:center;font-weight:700;font-size:12px}
.cartTot{font-size:13px;font-weight:800;color:#1a6ef5;text-align:right;min-width:60px}
.cartRm{background:none;border:none;color:#bf2600;font-size:14px;cursor:pointer}
/* Receipt table (Vektori-style): Product · Qty · Unit price · Line total */
.cartTbl{width:100%;border-collapse:collapse;font-size:13px}
.cartTbl thead th{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:#8a93a3;font-weight:800;text-align:left;padding:7px 5px;border-bottom:1.5px solid #e6eaf0;position:sticky;top:0;background:#fff;z-index:1}
.cartTbl th.c{text-align:center}.cartTbl th.r{text-align:right}
.cartTbl td{padding:8px 5px;border-bottom:1px solid #f0f2f6;vertical-align:middle}
.cartTbl td.r{text-align:right}
.cartTbl .ctNm{font-weight:700;color:#0a1628;line-height:1.25}
.cartTbl .ctP{color:#5c6b82;white-space:nowrap}
.cartTbl .ctT{font-weight:800;color:#1152cc;white-space:nowrap}
.cartTbl .ctQ{white-space:nowrap;text-align:center}
.cartTbl .ctQ .qtyBtn{display:inline-flex;vertical-align:middle}
.cartTbl .ctQ .qtyVal{display:inline-block;vertical-align:middle;margin:0 2px;min-width:18px}
.cartTbl .cartRm{opacity:.55}.cartTbl .cartRm:hover{opacity:1}
.posSum{padding:12px 16px;background:#f2f6fc;border-top:1px solid #dbe4f0}
.sumRow{display:flex;justify-content:space-between;font-size:12.5px;color:#44536b;font-weight:600;margin-bottom:5px}
.sumRow.tot{font-size:16px;font-weight:800;color:#0a1628;margin-top:8px;padding-top:8px;border-top:1px solid #e3e6eb}
.posCheckout{padding:13px 16px;background:#fff;border-top:1px solid #e3e6eb}
.posCheckout button{width:100%;padding:13px;font-size:14px;font-weight:800}

.mobOnly{display:none}
/* Sidebar and cart MUST switch layout at the same width. The sidebar used to dock
   below 700px while the cart stayed a full-width fixed sheet until 900px, so on
   tablet portrait (768px) the cart sheet covered the docked navigation. Both now
   switch at 900px: the sidebar becomes a drawer and the cart a bottom sheet
   together. (Docking the cart as a side column here instead would leave only
   ~138px for products at 768px — not even one card fits.) */
@media(max-width:900px){
  /* sidebar → off-canvas drawer */
  .SB{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);width:260px}
  .SB.open{transform:translateX(0)}
  .sbClose{display:block}
  .sbOverlay{display:none}
  .sbOverlay.open{display:block}
  .tbMenu{display:block}
  /* Push the top bar (hamburger + title) DOWN below the phone/tablet status bar.
     The WebView draws under it, so without this the hamburger is jammed against
     the clock. Fallback 26px where no inset is reported. */
  .TB{height:auto;min-height:54px;padding-top:calc(max(env(safe-area-inset-top),26px));align-items:flex-start;padding-bottom:8px}
  .TB .tbMenu,.TB .tbTitle,.TB .tbBtn{margin-top:2px}
  .posWrap{grid-template-columns:1fr;height:auto}
  /* The cart is a bottom sheet. On a phone bottom:0 sits UNDER the system nav
     bar, so the collapsed "Cart" handle was half-hidden. Peek = 56px header +
     the nav-bar height (safe-area inset, or a 40px fallback for 3-button nav). */
  .posRight{position:fixed;bottom:0;left:0;right:0;max-height:72vh;border-radius:14px 14px 0 0;z-index:50;box-shadow:0 -10px 30px rgba(0,0,0,.25);transform:translateY(calc(100% - 56px - max(env(safe-area-inset-bottom),40px)));transition:transform .25s}
  .posRight.open{transform:translateY(0)}
  .posCartH{cursor:pointer}
  /* Lift the green Sell/Checkout button clear of the phone's bottom nav bar,
     which was covering it. */
  .posCheckout{padding-bottom:calc(13px + max(env(safe-area-inset-bottom),40px))}
  .mobOnly{display:inline-block}
}

/* ═══ PHONE-ONLY TWEAKS ════════════════════════════════════════ */
/* Sidebar-drawer + top-bar rules now live in the 900px block above, so tablets
   get them too. What stays here is genuinely phone-sized: tighter grids/type. */
@media(max-width:700px){
  .kG{grid-template-columns:repeat(2,1fr)}
  .PA{padding:12px}
  .phT{font-size:17px}
  .phA{gap:5px}
  .btn{padding:6px 10px;font-size:11px}
}
@media(max-width:400px){
  .kG{grid-template-columns:1fr}
}

/* ═══ PRINT — receipt only ═════════════════════════════════════ */
/* #printArea is filled by printReceipt() and is the ONLY thing that prints.
   Printing in-page instead of via a popup window, which the app's WebView blocks. */
#printArea{display:none}
@media print{
  body > *{display:none !important}
  #printArea{display:block !important;font-family:ui-monospace,'Courier New',monospace;
    font-size:12px;line-height:1.5;white-space:pre;margin:0;padding:0;color:#000}
  /* Labels and invoices are laid-out HTML, not a monospace slip — the receipt
     rules above would force pre-wrap monospace on them and destroy the layout. */
  #printArea.labelMode,#printArea.docMode{font-family:inherit;white-space:normal;font-size:inherit}
}

/* ═══ PAYMENT ══════════════════════════════════════════════════ */
.payTot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,#f8fbff,#e8f1ff);border:1.5px solid #c5d9f6;
  border-radius:11px;padding:14px 16px;margin:14px 0}
.payTot span{font-size:12px;font-weight:700;color:#44536b;text-transform:uppercase;letter-spacing:.04em}
.payTot strong{font-size:26px;font-weight:800;color:#0a1628;letter-spacing:-.02em}
.payMethods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.payM{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 6px;
  border-radius:11px;border:2px solid #dbe2ec;background:#fff;cursor:pointer;transition:all .15s}
.payM .ic{font-size:22px;line-height:1}
.payM .lb{font-size:12px;font-weight:700;color:#33415c}
.payM:hover{border-color:#c5d9f6;background:#f6faff}
.payM.on{border-color:#1a6ef5;background:#eaf2ff;box-shadow:0 3px 10px rgba(26,110,245,.22)}
.payM.on .lb{color:#1152cc}
.payQuick{display:flex;gap:7px;flex-wrap:wrap;margin:-4px 0 12px}
.payQuick button{padding:7px 12px;border-radius:8px;border:1.5px solid #dbe2ec;background:#f4f7fb;
  font-size:12px;font-weight:700;color:#33415c;cursor:pointer}
.payQuick button:hover{border-color:#1a6ef5;color:#1152cc;background:#eaf2ff}
.payChange{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:10px;background:#f2f6fc;border:1px solid #dbe4f0}
.payChange span{font-size:12px;font-weight:700;color:#44536b;text-transform:uppercase;letter-spacing:.04em}
.payChange strong{font-size:20px;font-weight:800;color:#1a7a4f}
.payChange.short strong{color:#c62f16}

/* Prompt/choice body text keeps its line breaks (business lists, multi-line asks) */
#pr_text,#ch_text{white-space:pre-wrap}

/* ═══ INVOICE DOCUMENT ═════════════════════════════════════════ */
.MB.wide{max-width:720px}
.invDoc{background:#fff;border:1px solid #dbe2ec;border-radius:9px;padding:22px;
  margin:14px 0;font-size:12px;color:#0e1726;overflow-x:auto}
.invHd{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid #0a1628}
.invBiz b{display:block;font-size:17px;font-weight:800;color:#0a1628;letter-spacing:-.01em}
.invBiz span{display:block;font-size:11px;color:#5c6b82;margin-top:2px}
.invMeta{text-align:right;font-size:11px;color:#5c6b82;min-width:150px}
.invMeta .lbl{font-size:19px;font-weight:800;color:#1a6ef5;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:4px}
.invMeta b{color:#0e1726}
.invTo{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px 0}
.invTo .blk{min-width:170px}
.invTo .cap{font-size:9.5px;font-weight:800;color:#8b97a8;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:4px}
.invTo .nm{font-size:14px;font-weight:800;color:#0e1726}
.invTo .ln{font-size:11.5px;color:#44536b}
table.invT{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
table.invT th{background:#f2f6fc;text-align:left;padding:8px 10px;font-size:9.5px;
  font-weight:800;color:#44536b;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1.5px solid #dbe2ec}
table.invT th.num,table.invT td.num{text-align:right;font-variant-numeric:tabular-nums}
table.invT td{padding:9px 10px;border-bottom:1px solid #eef1f5}
table.invT td.nm{font-weight:700}
.invSum{display:flex;justify-content:flex-end;margin-top:12px}
.invSum table{font-size:12.5px;min-width:240px}
.invSum td{padding:5px 10px;font-variant-numeric:tabular-nums}
.invSum td:last-child{text-align:right;font-weight:700}
.invSum tr.tot td{border-top:2px solid #0a1628;font-size:16px;font-weight:800;
  color:#0a1628;padding-top:9px}
.invPaid{display:inline-block;margin-top:10px;padding:4px 11px;border-radius:20px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:#e7f6ef;color:#1f7a55;border:1px solid #b9e3cd}
.invFt{margin-top:18px;padding-top:12px;border-top:1px solid #eef1f5;
  font-size:11px;color:#5c6b82;text-align:center}

@media print{
  body > *{display:none !important}
  #printArea{display:block !important}
}

/* ═══ BARCODE LABELS ═══════════════════════════════════════════ */
.lblList{max-height:46vh;overflow-y:auto;border:1px solid #dbe2ec;border-radius:9px}
.lblRow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #eef1f5}
.lblRow:last-child{border-bottom:none}
.lblNm{flex:1;min-width:0}
.lblNm strong{font-size:12.5px;color:#0a1628}
.lblCode{font-family:ui-monospace,monospace;font-size:11px;color:#5c6b82;margin-top:1px}
.lblRow input{width:74px;flex:none;text-align:center;font-weight:700}
.lblRow input:disabled{background:#f2f4f7;color:#98a2b3}

/* the printable sheet */
.lblSheet{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;padding:6mm}
.lbl{border:1px dashed #b9c2d0;border-radius:2mm;padding:3mm 2mm;text-align:center;
  page-break-inside:avoid;break-inside:avoid;background:#fff}
.lblBiz{font-size:7pt;color:#5c6b82;text-transform:uppercase;letter-spacing:.05em}
.lblPn{font-size:9.5pt;font-weight:800;color:#0a1628;margin:1mm 0;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcSvg{display:block;width:100%;height:34px}
.lblTxt{font-family:ui-monospace,monospace;font-size:8pt;letter-spacing:.08em;color:#0a1628;margin-top:.5mm}
.lblPr{font-size:12pt;font-weight:800;color:#0a1628;margin-top:1mm}
@media print{ .lblSheet{gap:3mm;padding:4mm} .lbl{border-color:#ccc} }

/* ═══ LOGIN RECOVERY ═══════════════════════════════════════════ */
.lp-forgot{text-align:center;margin-top:12px}
.lp-forgot a{font-size:12px;color:#1a6ef5;text-decoration:none;font-weight:600}
.lp-forgot a:hover{text-decoration:underline}
.rcOpt{border:1px solid #dbe2ec;border-radius:10px;padding:13px 14px;margin-bottom:11px}
.rcOpt.rcDanger{border-color:#f0c2ba;background:#fdf6f5}
.rcH{font-size:13px;font-weight:800;color:#0a1628;margin-bottom:3px}
.rcD{font-size:11.5px;color:#5c6b82;line-height:1.45;margin-bottom:8px}
.rcOpt .btn{margin-top:2px}

/* ═══ LOGIN — workspace multi-step ═════════════════════════════ */
.lp-step{font-size:13px;font-weight:800;color:#0a1628;margin:6px 0 12px;text-align:center}
.lp-lbl{font-size:12.5px;color:#5c6b82;margin-bottom:8px;text-align:center}
.lp-lbl b{color:#0a1628;word-break:break-all}
.lp-newws{margin-top:14px;padding-top:12px;border-top:1px solid #eee;font-size:12px;color:#5c6b82;text-align:center}
.lp-newws a{color:#1a6ef5;font-weight:700;text-decoration:none}
.lp-btn:disabled{opacity:.6;cursor:default}

/* ═══ LOGIN — demo industry + PIN ══════════════════════════════ */
.lp-inds{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:6px}
.lp-ind{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;
  border:1.5px solid #dbe2ec;border-radius:11px;background:#fff;cursor:pointer;
  font-size:12px;font-weight:700;color:#33415c;transition:all .12s}
.lp-ind span{font-size:24px;line-height:1}
.lp-ind:hover{border-color:#c5d9f6;background:#f6faff}
.lp-ind.on{border-color:#1a6ef5;background:#eaf2ff;color:#1152cc;box-shadow:0 2px 8px rgba(26,110,245,.2)}

/* create-workspace plan picker — compact 3-across */
.lp-plabel{font-size:10.5px;font-weight:700;color:#5c6a80;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
.lp-plans{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:6px}
.lp-plan{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 4px;border:1.5px solid #dbe2ec;border-radius:10px;background:#fff;cursor:pointer;text-align:center;font-family:inherit;transition:all .12s}
.lp-plan b{font-size:13px;font-weight:800;color:#0c1420}
.lp-plan span{font-size:9.5px;color:#5c6a80;line-height:1.3}
.lp-plan:hover{border-color:#c5d9f6;background:#f6faff}
.lp-plan.on{border-color:#1a6ef5;background:#eaf2ff;box-shadow:0 2px 8px rgba(26,110,245,.2)}
.lp-plan.on b{color:#1152cc}
.lp-note{font-size:10px;color:#7c8aa0;margin:0 0 10px;text-align:center;line-height:1.35}

/* login language toggle */
.lp-lang{display:flex;justify-content:center;gap:0;margin:14px auto 0;border:1px solid #e2e8f2;border-radius:999px;padding:3px;width:fit-content}
.lp-lang-b{background:transparent;border:none;padding:6px 18px;border-radius:999px;font-size:13px;font-weight:700;color:#5c6a80;cursor:pointer;font-family:inherit;transition:all .12s}
.lp-lang-b.on{background:#1a6ef5;color:#fff}

/* MareegTech branding footer on the login card */
.lp-foot{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:12px;color:#8a93a3;font-weight:600}
.lp-foot b{color:#1a6ef5}
.mtMark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:radial-gradient(120% 120% at 30% 20%,#12233d,#0a1628)}

.pinDots{display:flex;justify-content:center;gap:11px;margin:14px 0 16px}
.pinDots .pd{width:13px;height:13px;border-radius:50%;border:2px solid #c5d0de;background:transparent}
.pinDots .pd.on{background:#1a6ef5;border-color:#1a6ef5}
.pinPad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pinPad button{height:54px;border-radius:12px;border:1.5px solid #e3e8ef;background:#fff;
  font-size:21px;font-weight:700;color:#0a1628;cursor:pointer;transition:all .1s}
.pinPad button:hover{background:#eff6ff;border-color:#c5d9f6}
.pinPad button:active{transform:scale(.96)}
.pinPad .pinAux{color:#8b97a8;font-size:22px}
.pinPad .pinOk{background:#1a6ef5;color:#fff;border-color:#1a6ef5;font-size:24px}
.pinPad .pinOk:hover{background:#0052cc}