/* =========================================================
     StockPro identity — practical shop-software system (Vyapar-style):
     trustworthy blue app bar, white cards on a light grey ground,
     green for money in, red for money out. Inter everywhere for
     maximum readability on cheap Android screens.
     ========================================================= */
  :root{
    color-scheme:light;
    --paper:#EEF3F4;
    --surface:#FAFCFC;
    --surface-2:#E7EEEF;
    --ink:#12232A;
    --ink-soft:#2E4650;
    --muted:#61787F;
    --line:#D6E2E4;

    --rail:#12262C;
    --rail-soft:#1B353D;
    --rail-text:#CBDBDD;
    --rail-muted:#8AA3A8;

    --primary:#0E7C86;
    --primary-dark:#0A5F68;
    --primary-tint:#E0F1F2;

    --marigold:#0E7C86;
    --marigold-dark:#0A5F68;
    --marigold-tint:#E0F1F2;

    --jade:#16A34A;
    --jade-tint:#E7F6EC;

    --wine:#B4541F;
    --wine-tint:#F7E9DF;

    --info:#0E7C86;
    --tally:#D89B00;
    --tally-tint:#FFF2A8;
    --login-bg:radial-gradient(120% 60% at 20% 0%, #1F2937 0%, #111827 45%, #0F1115 100%);
    --login-panel:rgba(255,255,255,.08);
    --login-line:rgba(255,255,255,.18);
    --login-text:#FFFFFF;
    --login-text-soft:#C9CDD4;

    --radius-sm:8px;
    --radius-md:10px;
    --radius-lg:14px;
    --shadow:0 1px 2px rgba(16,32,52,.06), 0 8px 20px -12px rgba(16,32,52,.18);

    --bg:var(--paper);
    --gold:var(--primary);
    --gold-tint:var(--primary-tint);
    --danger:var(--wine);
    --danger-tint:var(--wine-tint);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:"Inter", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    background:var(--paper);
    color:var(--ink);
    font-size:14px;
    -webkit-font-smoothing:antialiased;
  }
  .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; font-family:"Inter",sans-serif; }
  h1,h2,h3{ font-family:"Inter", system-ui, sans-serif; margin:0; letter-spacing:-.01em; font-weight:600; color:var(--ink); }
  button{ font-family:inherit; }
  ::selection{ background:var(--primary-tint); }

  /* ---------- App shell ---------- */
  #app{ display:flex; height:100vh; overflow:hidden; }

  /* ---------- Sidebar ---------- */
  .rail{
    width:250px; flex:0 0 250px; background:var(--rail); color:var(--rail-text);
    display:flex; flex-direction:column; height:100%;
  }
  .rail-brand{
    display:flex; align-items:center; gap:11px; padding:20px 18px 17px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .rail-brand .mark{
    width:36px;height:36px;border-radius:10px; border:1.5px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--marigold);font-size:14.5px;flex:none;
    font-family:"Inter",sans-serif;
  }
  img.mark{
    border-radius:50%; object-fit:cover; background:var(--rail-soft);
  }
  .rail-brand .name{ font-family:"Inter",sans-serif; font-weight:600; font-size:17px; color:#fff; line-height:1.1; }
  .rail-brand .name small{ display:block; font-weight:500; font-family:"Inter",sans-serif; font-size:10px; color:var(--rail-muted); letter-spacing:.09em; margin-top:3px;}

  .rail-shop{ padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; gap:10px; align-items:center; }
  .rail-shop .avatar{
    width:36px;height:36px;border-radius:50%;background:var(--rail-soft); border:1px solid rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex:none;
  }
  .rail-shop .who{ min-width:0; }
  .rail-shop .who .n{ color:#fff; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rail-shop .who .r{ font-size:11px; color:var(--rail-muted); display:flex; align-items:center; gap:5px; margin-top:2px;}
  .rail-shop .who .r::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--jade); display:inline-block; }

  .rail-nav{ flex:1; overflow-y:auto; padding:12px 12px 12px; }
  .rail-group-label{ font-size:11px; letter-spacing:.02em; color:var(--rail-muted); font-weight:500; margin:18px 10px 7px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08); }
  .rail-group-label:first-child{ margin-top:6px; }
  .rail-item{
    display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px; color:var(--rail-text);
    cursor:pointer; font-size:13.6px; font-weight:500; margin-bottom:2px; border:1px solid transparent;
    text-decoration:none;
  }
  .rail-item .ic{ width:19px; text-align:center; flex:none; opacity:.9; }
  .rail-item:hover{ background:rgba(255,255,255,.06); }
  .rail-item.active{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 3px 0 0 #0E7C86; }
  .rail-item.active .ic{ color:#F87171; }
  .rail-foot{ padding:12px; border-top:1px solid rgba(255,255,255,.08); }
  .rail-item.logout{ color:#E3A7B4; }
  .rail-item.logout:hover{ background:rgba(156,55,82,.18); }

  /* ---------- Main ---------- */
  .main{ flex:1; display:flex; flex-direction:column; min-width:0; height:100%; }
  .topbar{
    height:60px; flex:none; background:linear-gradient(180deg,#0E7C86,#0A5F68); border-bottom:none;
    display:flex; align-items:center; padding:0 20px; gap:12px; color:#fff;
    box-shadow:0 2px 8px rgba(111,52,172,.28);
  }
  .topbar .title{ color:#fff; }
  .topbar .date{ color:rgba(255,255,255,.85) !important; }
  .topbar .sync{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
  .topbar .user-badge{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
  .topbar .notif-bell{ color:#fff; }
  .topbar .notif-bell:hover{ background:rgba(255,255,255,.16); }
  .rail-toggle{ color:#fff !important; border-color:rgba(255,255,255,.35) !important; }
  .back-btn{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.3) !important; color:#fff !important; }
  .topbar .title{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
  .topbar .spacer{ flex:1; }
  .topbar .date{ font-size:12.5px; color:var(--muted); }
  .topbar .sync{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--jade); background:var(--jade-tint); padding:6px 10px; border-radius:20px; font-weight:600;}
  .topbar .sync::before{ content:"●"; font-size:8px; }
  .header-backup-btn{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 11px;
    border:1px solid rgba(255,255,255,.35); border-radius:8px; background:rgba(255,255,255,.16);
    color:#fff; font:600 12.5px/1 inherit; cursor:pointer; white-space:nowrap; }
  .header-backup-btn:hover{ background:rgba(255,255,255,.24); }

  .view{ flex:1; overflow-y:auto; padding:24px 26px 60px; }
  .view-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap;}
  .view-head h1{ font-size:23px; }
  .view-head p{ margin:4px 0 0; color:var(--muted); font-size:13px; }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface);
    color:var(--ink); padding:9px 14px; border-radius:8px; font-size:13.3px; font-weight:600; cursor:pointer;
  }
  .btn:hover{ border-color:var(--primary); }
  .btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
  .btn.primary:hover{ background:var(--primary-dark); }
  .btn.gold{ background:var(--marigold); border-color:var(--marigold); color:#fff;}
  .btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-soft); }
  .btn.danger{ background:var(--wine-tint); border-color:#E7C6AC; color:var(--wine); }
  .btn.success{ background:#1F8B4D; border-color:#1F8B4D; color:#fff; }
  .btn.success:hover{ background:#186B3C; }
  .btn.reject{ background:#C1274A; border-color:#C1274A; color:#fff; }
  .btn.reject:hover{ background:#9C1D3B; }
  .back-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line);
    color:var(--ink); font-size:12.6px; font-weight:600; padding:7px 11px; border-radius:8px; cursor:pointer; }
  .back-btn:hover{ border-color:var(--primary); }
  .back-btn.hidden{ display:none; }
  .pill-id{ display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
    background:var(--bg-soft,#F3F4FA); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink-soft); }
  .inv-preview{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px; max-height:60vh; overflow:auto; }
  /* Sale invoice page (redesigned) */
  .sale-hero{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
  .sale-stat{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--primary);
    border-radius:12px; padding:12px 14px; }
  .sale-stat .lbl{ font-size:10.5px; letter-spacing:.08em; color:var(--muted); font-weight:700; }
  .sale-stat .val{ font-size:19px; font-weight:700; margin-top:4px; }
  .cart.sale-cart{ position:sticky; top:8px; }
  .cart-steps{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .cart-steps span{ font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--muted);
    border:1px dashed var(--line); border-radius:999px; padding:3px 9px; }
  .aging-bar{ height:8px; border-radius:999px; background:var(--line); overflow:hidden; display:flex; }
  .aging-bar i{ display:block; height:100%; }
  .btn.sm{ padding:6px 10px; font-size:12.3px; border-radius:7px; }
  .btn:disabled{ opacity:.45; cursor:not-allowed; }

  /* KPI cards */
  .kpi-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; margin-bottom:18px; }
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:0 1px 2px rgba(16,32,52,.04); }
  .kpi-hero{
    background:
      radial-gradient(120% 140% at 105% -25%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%),
      linear-gradient(150deg, #0E7C86 0%, #0A3B42 100%);
    color:#fff; border:none;
    display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
  }
  .kpi-hero::after{ content:""; position:absolute; right:-46px; top:-56px; width:190px;height:190px;border-radius:50%; border:1px solid rgba(255,255,255,.14); }
  .kpi-hero::before{ content:""; position:absolute; right:22px; top:-18px; width:96px;height:96px;border-radius:50%; border:1px solid rgba(255,255,255,.28); }
  .kpi-hero .lbl{ font-size:11.5px; opacity:.85; letter-spacing:.02em; position:relative; }
  .kpi-hero .big{ font-family:"Inter",sans-serif; font-size:32px; font-weight:800; margin-top:6px; color:#fff; letter-spacing:-.02em; position:relative; }
  .kpi-hero .sub{ font-size:12px; opacity:.9; margin-top:8px; display:inline-flex; align-items:center; gap:6px; position:relative;}
  .kpi-hero .sub .pill{ background:rgba(255,255,255,.16); padding:3px 8px; border-radius:20px; }
  .kpi-mini .lbl{ font-size:11.5px; color:var(--muted); letter-spacing:.01em; }
  .kpi-mini .big{ font-size:23px; font-weight:700; margin-top:8px; }
  .kpi-mini.good .big{ color:var(--jade); }
  .kpi-mini.warn .big{ color:var(--marigold-dark); }
  .kpi-mini.bad .big{ color:var(--wine); }

  .two-col{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; align-items:start; }
  .card h3{ font-family:"Inter",sans-serif; font-weight:600; font-size:15.5px; margin-bottom:2px; }
  .card .card-sub{ font-size:12px; color:var(--muted); margin-bottom:14px; }

  /* trend bars (svg-free simple bars) */
  .trend{ display:flex; align-items:flex-end; gap:8px; height:110px; margin-top:6px; }
  .trend .bar{ flex:1; background:var(--primary-tint); border-radius:5px 5px 0 0; position:relative; display:flex; align-items:flex-end; }
  .trend .bar i{ display:block; width:100%; background:var(--primary); border-radius:5px 5px 0 0; }
  .trend .bar span{ position:absolute; bottom:-19px; left:0; right:0; text-align:center; font-size:10.5px; color:var(--muted); }

  table{ width:100%; border-collapse:collapse; }
  th{ text-align:left; font-size:12px; color:var(--ink-soft); font-weight:600; padding:0 10px 9px; border-bottom:1px solid var(--line); }
  td{ padding:11px 10px; border-bottom:1px solid var(--line); font-size:13.3px; vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
  .row-list .empty{ padding:26px 10px; text-align:center; color:var(--muted); font-size:13px; }

  .tag{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600; }
  .tag.green{ background:var(--jade-tint); color:#1F5B41; }
  .tag.gold{ background:var(--marigold-tint); color:var(--marigold-dark); }
  .tag.pending-fill{ background:var(--warning, #d99000); color:#fff; box-shadow:0 1px 4px rgba(217,144,0,.35); }
  .tag.red{ background:var(--wine-tint); color:var(--wine); }
  .tag.grey{ background:var(--surface-2); color:var(--ink-soft); }

  /* Toolbar / filters */
  .toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
  .search{ flex:1; min-width:200px; position:relative; }
  .search input{ width:100%; padding:9px 12px 9px 34px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-size:13.3px; }
  .search::before{ content:"⌕"; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; }
  select, input[type=text], input[type=number], input[type=date], input[type=tel], input[type=password], textarea{
    padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-size:13.3px; color:var(--ink); font-family:inherit;
  }
  select:focus, input:focus, textarea:focus{ outline:2px solid var(--primary-tint); border-color:var(--primary); }
  label.field{ display:flex; flex-direction:column; gap:5px; font-size:12.3px; color:var(--ink-soft); font-weight:600; }

  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

  /* Card list layout for nav sections like settings/products grid */
  .content-card{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--marigold); border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:16px;}

  /* POS / Sales screen */
  .pos-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
  .product-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
  .pp-item{ border:1px solid var(--line); border-radius:10px; padding:12px; cursor:pointer; background:var(--surface); }
  .pp-item:hover{ border-color:var(--primary); background:var(--primary-tint); }
  .pp-item .n{ font-weight:600; font-size:13px; }
  .pp-item .p{ color:var(--primary-dark); font-weight:700; margin-top:6px; font-size:13.5px; }
  .pp-item .s{ color:var(--muted); font-size:11px; margin-top:2px; }
  .cart{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--marigold); border-radius:var(--radius-lg); padding:16px; position:sticky; top:0; }
  .cart-line{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
  .cart-line .n{ flex:1; font-size:13px; font-weight:600; }
  .cart-line .qty{ display:flex; align-items:center; gap:6px; }
  .qtybtn{ width:22px;height:22px;border-radius:6px;border:1px solid var(--line); background:var(--surface-2); cursor:pointer; font-size:13px; line-height:1;}
  .cart-total-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:13.3px; }
  .cart-total-row.grand{ font-size:17px; font-weight:700; border-top:1px dashed var(--line); margin-top:8px; padding-top:12px; }

  /* Modal */
  .modal-bg{ position:fixed; inset:0; background:rgba(15,18,40,.5); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
  .modal-bg.show{ display:flex; }
  .modal{ background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:460px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow); }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
  .modal-head h3{ font-size:16px; }
  .modal-body{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
  .modal-foot{ padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
  .x-close{ border:none; background:none; font-size:18px; color:var(--muted); cursor:pointer; }
  .invoice-actions{ display:grid; grid-template-columns:repeat(5,minmax(0,auto)); }
  .invoice-actions .btn{ justify-content:center; white-space:nowrap; }

  .toast{ position:fixed; bottom:22px; right:22px; background:var(--rail); color:#fff; padding:12px 18px; border-radius:9px; font-size:13px; font-weight:600; box-shadow:var(--shadow); z-index:80; display:none; }
  .toast.show{ display:flex; align-items:center; gap:8px; }
  .toast::before{ content:"✓"; color:var(--jade); }

  .badge-dot{ width:8px;height:8px;border-radius:50%; display:inline-block; }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:6px; }
  .rail-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); }

  @media (max-width:1000px){
    .kpi-grid{ grid-template-columns:1fr 1fr; }
    .two-col{ grid-template-columns:1fr; }
    .pos-wrap{ grid-template-columns:1fr; }
  }

  /* ---------- Printable invoice (themeable) ---------- */
  #printInvoice{ display:none; font-family:"Inter",sans-serif; }
  .inv{ --inv:#161C33; color:#111; font-family:"Inter",sans-serif; position:relative; background:#fff; }
  .inv-band{ display:none; }
  .inv-logo{ width:52px; height:52px; border-radius:10px; object-fit:cover; margin-right:12px; flex:none; }
  .inv-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--inv); padding-bottom:14px; margin-bottom:14px; gap:12px; }
  .inv-shop{ display:flex; align-items:center; font-size:20px; font-weight:700; color:var(--inv); }
  .inv-shop small{ display:block; font-size:12px; font-weight:400; color:#444; margin-top:3px; }
  .inv-meta{ text-align:right; font-size:12.5px; color:#333; flex:none; }
  .inv-meta .num-big{ font-size:18px; font-weight:800; color:var(--inv); }
  .inv-block-title{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#777; margin-bottom:4px; font-weight:600; }
  .inv-billto{ margin-bottom:4px; }
  .inv-billto-row{ display:flex; align-items:center; gap:10px; }
  .inv-cust-photo{ width:54px; height:54px; border-radius:8px; object-fit:cover; border:1px solid #ddd; flex:none; }
  .inv-cust{ font-size:14px; font-weight:700; }
  .inv-cust-sub{ font-size:12.5px; color:#444; }
  .inv-table{ width:100%; border-collapse:collapse; margin:16px 0; }
  .inv-table th{ text-align:left; font-size:11.5px; color:#fff; background:var(--inv); padding:8px 6px; font-weight:600; }
  .inv-table th:first-child{ border-radius:6px 0 0 6px; } .inv-table th:last-child{ border-radius:0 6px 6px 0; }
  .inv-table td{ padding:8px 6px; border-bottom:1px solid #e3e3e3; font-size:13px; }
  .inv-table td.r, .inv-table th.r{ text-align:right; } .inv-table td.c, .inv-table th.c{ text-align:center; width:32px; color:#888; }
  .inv-totals{ width:280px; max-width:100%; margin-left:auto; margin-top:6px; }
  .inv-totals div{ display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
  .inv-totals .grand{ font-size:17px; font-weight:800; border-top:2px solid var(--inv); margin-top:6px; padding-top:8px; color:var(--inv); }
  .inv-totals .ledger{ color:#555; }
  .inv-totals .grand.due{ background:var(--inv); color:#fff; padding:8px 10px; border-radius:8px; border:0; margin-top:8px; }
  .inv-foot{ margin-top:26px; text-align:center; font-size:12px; color:#666; border-top:1px dashed #bbb; padding-top:14px; }
  .inv-dev{ margin-top:8px; text-align:center; font-size:10.5px; color:#888; }
  .inv-dev b{ color:#444; }

  /* Theme: classic — full colour band across the top */
  .inv-t-classic .inv-band{ display:block; height:10px; background:var(--inv); margin:-4px -4px 14px; border-radius:4px 4px 0 0; }
  /* Theme: modern — accent stripe on the left, rounded totals card */
  .inv-t-modern{ border-left:8px solid var(--inv); padding-left:16px; }
  .inv-t-modern .inv-head{ border-bottom:0; }
  .inv-t-modern .inv-shop{ font-size:24px; letter-spacing:-.02em; }
  .inv-t-modern .inv-table th{ background:transparent; color:var(--inv); border-bottom:2px solid var(--inv); border-radius:0; }
  .inv-t-modern .inv-totals{ background:#f5f6fa; border-radius:12px; padding:10px 14px; }
  .inv-t-modern .inv-meta .num-big{ font-size:24px; }
  /* Theme: elegant — serif headings, thin rules */
  .inv-t-elegant .inv-shop, .inv-t-elegant .inv-meta .num-big, .inv-t-elegant .inv-cust{ font-family:"Fraunces",Georgia,serif; }
  .inv-t-elegant .inv-shop{ font-size:26px; font-weight:600; }
  .inv-t-elegant .inv-head{ border-bottom:1px solid var(--inv); }
  .inv-t-elegant .inv-table th{ background:transparent; color:var(--inv); border-top:1px solid var(--inv); border-bottom:1px solid var(--inv); border-radius:0; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; }
  .inv-t-elegant .inv-table td{ border-bottom:1px solid #eee; }
  .inv-t-elegant .inv-totals .grand.due{ background:transparent; color:var(--inv); border:1px solid var(--inv); }
  /* Theme: corporate — striped table & boxed totals */
  .inv-t-corporate .inv-head{ background:var(--inv); color:#fff; padding:14px 16px; border-radius:8px; border:0; }
  .inv-t-corporate .inv-shop, .inv-t-corporate .inv-meta, .inv-t-corporate .inv-shop small, .inv-t-corporate .inv-meta .num-big{ color:#fff; }
  .inv-t-corporate .inv-table{ border:1px solid #ccc; }
  .inv-t-corporate .inv-table th{ border-radius:0; }
  .inv-t-corporate .inv-table tbody tr:nth-child(even) td{ background:#f4f5f8; }
  .inv-t-corporate .inv-table td{ border-bottom:1px solid #ddd; }
  .inv-t-corporate .inv-totals{ border:1px solid #ccc; padding:8px 12px; border-radius:4px; }
  /* Theme: simple — pure black & white */
  .inv-t-simple{ --inv:#000 !important; }
  .inv-t-simple .inv-table th{ background:transparent; color:#000; border-bottom:2px solid #000; border-radius:0; }
  .inv-t-simple .inv-totals .grand.due{ background:transparent; color:#000; border-top:2px solid #000; border-bottom:2px solid #000; border-radius:0; padding:6px 0; }
  .inv-t-simple .inv-shop, .inv-t-simple .inv-meta .num-big, .inv-t-simple .inv-totals .grand{ color:#000; }
  /* Theme: minimal — light lines, airy */
  .inv-t-minimal .inv-head{ border-bottom:1px solid #e5e5e5; }
  .inv-t-minimal .inv-shop{ color:#111; font-weight:600; }
  .inv-t-minimal .inv-table th{ background:transparent; color:#999; border-bottom:1px solid #e5e5e5; border-radius:0; font-weight:500; }
  .inv-t-minimal .inv-table td{ border-bottom:1px solid #f0f0f0; padding:10px 6px; }
  .inv-t-minimal .inv-totals .grand{ border-top:1px solid #e5e5e5; }
  .inv-t-minimal .inv-totals .grand.due{ background:transparent; color:var(--inv); border:0; padding:6px 0; }
  /* Theme: receipt — narrow thermal slip */
  .inv-t-receipt{ max-width:340px; margin:0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
  .inv-t-receipt .inv-head{ flex-direction:column; align-items:center; text-align:center; border-bottom:1px dashed #000; }
  .inv-t-receipt .inv-shop{ font-size:16px; justify-content:center; text-align:center; color:#000; flex-direction:column; }
  .inv-t-receipt .inv-logo{ margin:0 0 6px; }
  .inv-t-receipt .inv-meta{ text-align:center; margin-top:8px; } .inv-t-receipt .inv-meta .num-big{ color:#000; }
  .inv-t-receipt .inv-table th{ background:transparent; color:#000; border-bottom:1px dashed #000; border-radius:0; padding:4px 2px; }
  .inv-t-receipt .inv-table td{ border-bottom:0; padding:4px 2px; font-size:12px; }
  .inv-t-receipt .inv-table th.c, .inv-t-receipt .inv-table td.c{ display:none; }
  .inv-t-receipt .inv-totals{ width:100%; border-top:1px dashed #000; }
  .inv-t-receipt .inv-totals .grand{ color:#000; border-top:0; }
  .inv-t-receipt .inv-totals .grand.due{ background:transparent; color:#000; border:1px dashed #000; border-radius:0; }
  .inv-t-receipt .inv-foot{ border-top:1px dashed #000; }

  /* Theme picker UI */
  .theme-bar{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
  .theme-bar-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .theme-lbl{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; min-width:80px; }
  .theme-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .chip{ border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer; }
  .chip.on{ background:var(--primary); border-color:var(--primary); color:#fff; }
  .theme-colors{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .swatch{ width:24px; height:24px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; }
  .swatch.on{ box-shadow:0 0 0 2px var(--primary); transform:scale(1.1); }
  .theme-colors input[type=color]{ width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer; }
  .theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:12px; }
  .theme-card{ text-align:left; background:var(--surface); border:2px solid var(--line); border-radius:12px; padding:10px; cursor:pointer; font-family:inherit; }
  .theme-card.on{ border-color:var(--primary); background:var(--primary-tint); }
  .theme-thumb{ height:64px; border-radius:6px; border:1px solid var(--line); background:#fff; padding:8px; display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
  .theme-thumb i{ display:block; height:6px; border-radius:3px; background:#e5e7eb; }
  .theme-thumb i:first-child{ background:var(--inv); width:60%; }
  .theme-thumb i:last-child{ width:40%; align-self:flex-end; background:var(--inv); opacity:.6; }
  .theme-thumb.inv-t-simple i:first-child, .theme-thumb.inv-t-simple i:last-child{ background:#000; }
  .theme-thumb.inv-t-receipt{ width:60%; margin-left:auto; margin-right:auto; }
  .theme-thumb.inv-t-modern{ border-left:5px solid var(--inv); }
  .theme-thumb.inv-t-corporate{ border-top:10px solid var(--inv); }
  .theme-thumb.inv-t-elegant i:first-child{ height:2px; }
  .theme-thumb.inv-t-minimal i{ background:#f0f0f0; }
  .theme-name{ font-size:13px; font-weight:700; } .theme-desc{ font-size:11px; color:var(--muted); margin-top:2px; }
  .btn.wa{ background:#25D366; border-color:#25D366; color:#fff; } .btn.wa:hover{ background:#1DB954; }
  .btn.sms{ background:var(--rail-soft); border-color:var(--rail-soft); color:#fff; } .btn.sms:hover{ background:var(--rail); }

  /* Sale history */
  .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  @media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
  .seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:3px; flex-wrap:wrap; }
  .seg button{ border:0; background:transparent; padding:7px 12px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; font-family:inherit; }
  .seg button.on{ background:var(--surface); color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,.08); }
  table .bar{ height:8px; background:var(--surface-2); border-radius:5px; overflow:hidden; }
  table .bar div{ height:100%; background:var(--primary); border-radius:5px; }

  @media print{
    body *{ visibility:hidden; }
    #printInvoice, #printInvoice *{ visibility:visible; }
    #printInvoice{ display:block; position:absolute; top:0; left:0; width:100%; padding:24px; color:#000; }
    .modal-bg, .toast{ display:none !important; }
    .inv-table th, .inv-band, .inv-totals .grand.due, .inv-t-corporate .inv-head{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }

  /* ---------- Auth / login ---------- */
  .hidden{ display:none !important; }
  .login-screen{ min-height:100vh; display:flex; }
  .login-brand-panel{
    flex:1.15; background:var(--rail); color:#fff; display:flex; flex-direction:column; justify-content:center;
    padding:60px; position:relative; overflow:hidden;
  }
  .login-brand-panel::before{
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);
    background-size:28px 28px;
  }
  .login-brand-panel::after{
    content:""; position:absolute; width:340px; height:340px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
    right:-140px; bottom:-140px;
  }
  .login-brand-panel .content{ position:relative; max-width:380px; z-index:1; }
  .login-brand-panel .mark-lg{
    width:52px;height:52px;border-radius:13px;border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center; font-family:"Inter",sans-serif; font-weight:700; font-size:21px; color:var(--marigold); margin-bottom:28px;
  }
  .login-brand-panel h1{ color:#fff; font-size:30px; line-height:1.2; }
  .login-brand-panel p{ color:var(--rail-text); font-size:13.5px; margin-top:14px; line-height:1.65; max-width:320px; }
  .login-form-panel{ flex:1; background:var(--paper); display:flex; align-items:center; justify-content:center; padding:24px; }
  .login-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:34px 32px; width:100%; max-width:360px; display:flex; flex-direction:column; }
  .login-error{ display:none; color:var(--wine); background:var(--wine-tint); border-radius:8px; padding:8px 10px; font-size:12.3px; margin-top:12px; }
  .login-hint{ margin-top:18px; font-size:11.3px; color:var(--muted); text-align:center; line-height:1.6; background:var(--surface-2); border-radius:8px; padding:9px 10px; }
  @media (max-width:860px){ .login-brand-panel{ display:none; } }

  .user-chip{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink); background:var(--surface-2); padding:6px 13px 6px 10px; border-radius:20px; cursor:default; }
  .user-chip .dot{ width:7px;height:7px;border-radius:50%; flex:none; }

  /* ---------- Notifications ---------- */
  .notif-bell{ position:relative; cursor:pointer; font-size:17px; padding:7px 9px; border-radius:9px; color:var(--ink-soft); }
  .notif-bell:hover{ background:var(--surface-2); }
  .notif-dot{ position:absolute; top:0; right:0; background:var(--wine); color:#fff; font-size:10px; font-weight:700; min-width:15px; height:15px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
  .notif-item{ display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item .dot{ width:8px;height:8px;border-radius:50%; margin-top:5px; flex:none; background:var(--primary); }
  .notif-item.read .dot{ background:var(--line); }
  .notif-item .msg{ font-size:13px; }
  .notif-item .time{ font-size:11px; color:var(--muted); margin-top:2px; }

  /* ---------- Mobile / Android responsive layer ---------- */
  .rail-toggle{ display:none; background:transparent; border:1px solid var(--line); color:var(--ink);
    font-size:18px; line-height:1; padding:8px 11px; border-radius:var(--radius-sm); cursor:pointer; }
  .rail-scrim{ display:none; position:fixed; inset:0; background:rgba(15,18,40,.45); z-index:60; }
  .rail-scrim.open{ display:block; }

  @media (max-width:820px){
    html,body{ height:auto; }
    #app{ height:100dvh; }
    .rail-toggle{ display:inline-flex; align-items:center; justify-content:center; }
    .rail{ position:fixed; top:0; left:0; bottom:0; z-index:70; transform:translateX(-104%);
      transition:transform .22s ease; width:min(78vw,270px); flex-basis:auto; box-shadow:0 0 40px rgba(0,0,0,.35); }
    .rail.open{ transform:translateX(0); }
    .main{ width:100%; min-width:0; }
    .topbar{ flex-wrap:nowrap; gap:8px; overflow:hidden; padding:10px 12px; position:sticky; top:0; z-index:40; }
    .topbar .date, .topbar .sync:not(.user-badge){ display:none; }
    .topbar .title{ font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .topbar .user-badge{ max-width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .header-backup-btn span{ display:none; }
    .header-backup-btn{ width:38px; padding:7px; justify-content:center; font-size:17px; }
    .view{ padding:12px !important; -webkit-overflow-scrolling:touch; }
    .kpi-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .two-col, .pos-wrap, .grid-2, .grid-3{ grid-template-columns:1fr !important; }
    table{ min-width:560px; }
    .card, .panel, .table-wrap{ overflow-x:auto; }
    .modal{ width:100% !important; max-width:100% !important; max-height:88dvh; overflow-y:auto; }
    .modal-bg{ padding:10px; align-items:flex-end; }
    .btn{ min-height:40px; }
    input, select, textarea{ font-size:16px; }
    .toast{ left:12px; right:12px; bottom:12px; text-align:center; }
  }

  @media (max-width:480px){
    .kpi-grid{ grid-template-columns:1fr; }
    .login-card{ width:100%; padding:22px 18px; }
  }

  /* ---------- Boot + install prompt ---------- */
  .app-boot{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:var(--login-bg); color:var(--login-text-soft); font-size:14px; z-index:5; }

  /* ---------- Splash screen ---------- */
  .splash{ z-index:200; background:var(--login-bg);
    transition:opacity .45s ease, visibility .45s ease; }
  .splash-leave{ opacity:0; visibility:hidden; pointer-events:none; }
  .splash-inner{ display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:24px; animation:splash-in .5s ease both; }
  .splash-logo{ width:96px; height:96px; border-radius:24px; box-shadow:var(--shadow);
    animation:splash-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
  .splash-title{ margin:18px 0 4px; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--login-text); }
  .splash-tagline{ margin:0 0 26px; font-size:13px; color:var(--login-text-soft); }
  .splash-spinner{ width:34px; height:34px; border-radius:50%;
    border:3px solid var(--login-line); border-top-color:var(--login-text);
    animation:splash-spin .8s linear infinite; }
  .splash-credit{ margin:28px 0 0; font-size:12px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--login-text-soft); }
  @keyframes splash-spin{ to{ transform:rotate(360deg); } }
  @keyframes splash-pop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  @keyframes splash-in{ 0%{ opacity:0; transform:translateY(8px); } 100%{ opacity:1; transform:translateY(0); } }
  .pwa-install{ position:fixed; left:12px; right:12px; bottom:12px; z-index:120;
    display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--login-bg);
    border:1px solid var(--login-line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
  .pwa-install img{ width:44px; height:44px; border-radius:10px; flex:0 0 44px; }
  .pwa-install-text{ display:flex; flex-direction:column; min-width:0; }
  .pwa-install-text strong{ font-size:14px; color:var(--login-text); }
  .pwa-install-text span{ font-size:12px; color:var(--login-text-soft); }
  .pwa-install-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .pwa-install-btn{ background:linear-gradient(90deg,var(--primary),#0A5F68); color:var(--login-text); border:0; border-radius:var(--radius-sm);
    padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; }
  .pwa-install-btn:hover{ background:var(--primary-dark); }
  .pwa-install-close{ background:transparent; border:0; color:var(--login-text-soft); font-size:15px; cursor:pointer; padding:4px; }
  @media (min-width:820px){ .pwa-install{ left:auto; right:18px; bottom:18px; max-width:400px; } }

/* cash / credit toggles */
.field-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-ink,#64748b);margin-bottom:6px;}
.type-toggle{display:flex;gap:8px;}
.type-toggle .btn{flex:1;justify-content:center;}


  /* ===== Vyapar-style easy-use layer: quick actions, bottom tabs, FAB ===== */
  .quick-actions{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px;
  }
  .quick-action{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:15px 10px; cursor:pointer; font-size:12.8px; font-weight:700; color:var(--ink);
    text-align:center; min-height:88px; box-shadow:0 1px 2px rgba(16,32,52,.04);
  }
  .quick-action:active{ transform:scale(.98); }
  .quick-action:hover{ border-color:var(--primary); background:var(--primary-tint); }
  .quick-action .qa-ic{
    width:38px;height:38px;border-radius:12px; display:flex;align-items:center;justify-content:center;
    background:var(--primary-tint); color:var(--primary); font-size:18px;
  }
  .quick-action.green .qa-ic{ background:var(--jade-tint); color:var(--jade); }
  .quick-action.red .qa-ic{ background:var(--wine-tint); color:var(--wine); }

  .dashboard-primary-action{
    width:252px; min-height:96px; flex:none; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:8px; padding:14px 18px; background:var(--surface); color:var(--ink);
    border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
    font-size:13px; font-weight:700; cursor:pointer;
  }
  .dashboard-primary-action:hover{ border-color:var(--primary); background:var(--primary-tint); }
  .dashboard-primary-action:active{ transform:scale(.98); }
  .dashboard-action-icon{
    width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
    background:var(--primary-tint); color:var(--primary); font-size:18px;
  }

  .money-in{ color:var(--jade); font-weight:700; }
  .money-out{ color:var(--wine); font-weight:700; }

  .bottom-nav{ display:none; }

  @media (max-width:820px){
    .view{ padding-bottom:96px !important; }
    .bottom-nav{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
      background:var(--surface); border-top:1px solid var(--line);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
      box-shadow:0 -4px 16px rgba(16,32,52,.08);
    }
    .bottom-nav button{
      flex:1; background:transparent; border:0; cursor:pointer; padding:6px 2px;
      display:flex; flex-direction:column; align-items:center; gap:3px;
      font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.01em;
    }
    .bottom-nav button .bn-ic{ font-size:18px; line-height:1; }
    .bottom-nav button.active{ color:var(--primary); }
    .quick-actions{ grid-template-columns:repeat(2,1fr); }
    .pwa-install{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
    .view-head{ align-items:stretch; }
    .dashboard-primary-action{ width:100%; min-height:96px; }
    .modal-bg:has(.invoice-actions){ padding:0; align-items:stretch; }
    .modal-bg:has(.invoice-actions) .modal{
      display:flex; flex-direction:column; max-height:100dvh; border-radius:0;
      padding-top:env(safe-area-inset-top,0px);
    }
    .modal-bg:has(.invoice-actions) .modal-body{ flex:1; min-height:0; overflow-y:auto; }
    .invoice-actions{
      flex:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
      padding:12px 12px calc(88px + env(safe-area-inset-bottom,0px)); background:var(--surface);
    }
    .invoice-actions .btn{ width:100%; min-height:48px; padding:10px 8px; white-space:normal; line-height:1.2; }
    .invoice-actions .btn:last-child{ grid-column:1 / -1; }
  }

  /* ===== Mobile app-like layer (all tabs & modals) ===== */
  .topbar-logout{ display:none; }

  @media (max-width:820px){
    /* topbar sign out always reachable */
    .topbar-logout{
      display:inline-flex; align-items:center; gap:6px; flex:none;
      background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32); color:#fff;
      font-size:12.5px; font-weight:700; padding:8px 11px; border-radius:20px; cursor:pointer;
    }
    .topbar-logout span{ display:none; }
    .topbar .user-badge{ max-width:96px; }

    /* rail: nav scrolls, logout pinned and above the safe area */
    .rail{ padding-bottom:env(safe-area-inset-bottom,0px); }
    .rail-nav{ -webkit-overflow-scrolling:touch; }
    .rail-foot{ flex:none; background:var(--rail); }

    /* every modal behaves like a native bottom sheet */
    .modal-bg{ padding:0; align-items:flex-end; }
    .modal{
      display:flex; flex-direction:column; border-radius:18px 18px 0 0;
      max-height:92dvh; overflow:hidden;
    }
    .modal-head{ position:sticky; top:0; z-index:2; background:var(--surface); padding:14px 16px; }
    .modal-head h3{ font-size:15.5px; line-height:1.25; }
    .modal-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px; }
    .modal-foot{
      flex:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
      padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--surface);
    }
    .modal-foot .btn{ width:100%; justify-content:center; min-height:46px; white-space:normal; line-height:1.2; }
    .modal-foot .btn:only-child, .modal-foot .btn.primary:last-child:nth-child(odd){ grid-column:1 / -1; }

    /* forms and toolbars stack cleanly */
    .field, .modal-body label{ width:100%; }
    .type-toggle{ flex-wrap:wrap; }
    .view-head{ flex-direction:column; align-items:stretch; }
    .view-head .btn{ width:100%; justify-content:center; }
    .sale-hero{ grid-template-columns:1fr 1fr; }
    .cart, .cart.sale-cart{ position:static; }
    .inv-preview{ max-height:none; padding:12px; }
    .inv-head{ flex-direction:column; align-items:flex-start; }
    .inv-meta{ text-align:left; }
    .inv-totals{ width:100%; }

    /* tables scroll horizontally instead of breaking the page */
    .card, .panel, .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table{ min-width:520px; }

    /* keep content clear of bottom nav */
    .view{ padding-bottom:104px !important; }
  }

  @media (max-width:480px){
    .sale-hero{ grid-template-columns:1fr; }
    .modal-foot{ grid-template-columns:1fr; }
    .login-screen{ align-items:flex-start; overflow-y:auto; padding:18px 14px 32px; }
  }

  /* install banner must never cover an open dialog */
  .pwa-install{ z-index:45; }
  @media (max-width:480px){
    .topbar .user-badge{ display:none !important; }
    .topbar .title{ font-size:16px; }
  }

  /* invoice action bar keeps its 2-up layout on small phones */
  @media (max-width:820px){
    .modal-foot.invoice-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .modal-foot.invoice-actions .btn:last-child{ grid-column:1 / -1; }
  }

  @media (max-width:820px){
    .modal-bg{ z-index:100; }
    .modal-bg.show ~ .toast{ z-index:110; }
    body:has(.modal-bg.show) .bottom-nav{ display:none !important; }
  }

/* ---------- bottom slide-up product sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(12,16,32,.5);backdrop-filter:blur(2px);z-index:120;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease,padding-bottom .16s ease;box-sizing:border-box;}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.sheet{width:100%;max-width:720px;background:var(--card,#fff);border-radius:20px 20px 0 0;padding:10px 16px 18px;box-shadow:0 -12px 40px rgba(0,0,0,.28);transform:translateY(100%);transition:transform .28s cubic-bezier(.22,.8,.3,1);max-height:86vh;display:flex;flex-direction:column;}
.sheet-backdrop.open .sheet{transform:translateY(0);}
.sheet-grip{width:44px;height:5px;border-radius:99px;background:rgba(128,138,170,.45);margin:2px auto 10px;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sheet-head h3{margin:0;}
.sheet-body{overflow:auto;flex:1;-webkit-overflow-scrolling:touch;}
.pp-item.picked{outline:2px solid var(--primary,#4f46e5);outline-offset:-2px;}

/* ---------- New login design ---------- */
.login-screen{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  background:var(--login-bg);
  padding:0 0 40px; overflow-y:auto;
}
.login-screen.hidden{ display:none; }
.login-hero{
  width:100%; display:flex; justify-content:center; padding:14px 0 0;
  background:radial-gradient(70% 100% at 50% 0%, rgba(229,57,53,.32), transparent 70%);
}
.login-hero img{ width:auto; height:230px; max-width:80%; object-fit:contain; }
.login-card{
  width:100%; max-width:420px; padding:8px 26px 26px; background:transparent;
  border:0; box-shadow:none; display:flex; flex-direction:column;
}
.login-title{ color:#fff; font-size:38px; font-weight:800; letter-spacing:-.5px; text-align:center; }
.login-sub{ color:#C9CDD4; font-size:14px; text-align:center; margin-top:8px; }
.lg-field{ margin-top:22px; display:block; }
.lg-label{ display:block; color:#D5D9E0; font-size:13.5px; margin-bottom:8px; }
.lg-input{
  display:flex; align-items:center; gap:10px; padding:0 14px; height:56px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:14px;
}
.lg-input:focus-within{ border-color:#0E7C86; box-shadow:0 0 0 3px rgba(14,124,134,.22); }
.lg-ic{ color:#A7ADB8; font-size:17px; }
.lg-input input{
  flex:1; background:transparent; border:0; outline:none; color:#fff; font-size:15px; height:100%;
}
.lg-input input::placeholder{ color:#A7ADB8; }
.lg-eye{ background:transparent; border:0; color:#A7ADB8; font-size:16px; cursor:pointer; padding:4px; }
.lg-remember{ margin-top:14px; }
.lg-remember-label{ display:flex; align-items:center; gap:9px; color:#C9CDD4; font-size:13px; cursor:pointer; user-select:none; }
.lg-remember-label input{ width:17px; height:17px; accent-color:#0E7C86; cursor:pointer; }
.lg-forgot{ text-align:right; margin-top:12px; }
.lg-forgot a{ color:#C9CDD4; font-size:13px; text-decoration:none; }
.lg-btn{
  margin-top:22px; height:54px; width:100%; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(90deg,#0E7C86,#0A5F68); color:#fff; font-size:16px; font-weight:700;
}
.lg-btn:active{ transform:translateY(1px); }
.login-screen .login-error{ margin-top:14px; background:rgba(255,90,90,.14); color:#ffb3b3; }
.login-screen .login-hint{
  margin-top:18px; background:rgba(255,255,255,.05); color:#C9CDD4; border-radius:10px;
  padding:10px; font-size:11.5px; text-align:center; line-height:1.6;
}
.login-screen .login-hint b{ color:#FFFFFF; }
@media (max-width:420px){
  .login-hero img{ height:180px; }
  .login-title{ font-size:32px; }
}

.cart-line .qty .cart-qty{ width:56px; text-align:center; padding:4px 6px; }
.lg-ic svg, .lg-eye svg{ width:20px; height:20px; display:block; stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- Theme switcher (Light / Dark / System) ---------- */
  .theme-switch{ position:relative; margin-right:6px; display:inline-flex; }
  .theme-toggle{
    background:rgba(255,255,255,.16);
    border:none; color:#fff; cursor:pointer;
    width:32px; height:32px; border-radius:9px;
    font-size:15px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s ease, transform .15s ease;
  }
  .theme-toggle:hover{ background:rgba(255,255,255,.3); transform:translateY(-1px); }
  .theme-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .theme-menu{
    position:absolute; top:38px; right:0; z-index:120; min-width:168px;
    background:var(--surface); color:var(--ink);
    border:1px solid var(--line); border-radius:12px; padding:6px;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
    display:none; flex-direction:column; gap:2px;
  }
  .theme-menu.open{ display:flex; }
  .theme-menu button{
    display:flex; align-items:center; gap:9px; width:100%;
    background:none; border:0; cursor:pointer; font:600 13px/1 inherit;
    color:var(--ink); padding:9px 10px; border-radius:9px; text-align:left;
  }
  .theme-menu button:hover{ background:var(--surface-2); }
  .theme-menu button.on{ background:var(--primary-tint); color:var(--primary-dark); }
  .theme-menu button .tick{ margin-left:auto; font-size:12px; opacity:0; }
  .theme-menu button.on .tick{ opacity:1; }

  /* ---------- Dark theme ---------- */
  :root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#0F1115;
    --surface:#171A21;
    --surface-2:#1F232B;
    --ink:#FFFFFF;
    --ink-soft:#D5D9E0;
    --muted:#A7ADB8;
    --line:#2A2F38;

    --rail:#12151B;
    --rail-soft:#1F232B;
    --rail-text:#D5D9E0;
    --rail-muted:#A7ADB8;

    --primary:#0E7C86;
    --primary-dark:#3FB6BE;
    --primary-tint:#10262B;

    --marigold:#0E7C86;
    --marigold-dark:#3FB6BE;
    --marigold-tint:#10262B;
    --tally:#F2C94C;
    --tally-tint:#554619;

    --jade:#34D399;
    --jade-tint:#13291F;

    --wine:#E08A4F;
    --wine-tint:#2E2118;

    --info:#0E7C86;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.8);
    --bg:var(--paper);
    --gold:var(--primary);
    --gold-tint:var(--primary-tint);
    --danger:var(--wine);
    --danger-tint:var(--wine-tint);
  }
  :root[data-theme="dark"] body{ background:var(--paper); color:var(--ink); }
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .modal,
  :root[data-theme="dark"] .bottom-nav,
  :root[data-theme="dark"] .sheet,
  :root[data-theme="dark"] .cloud-card,
  :root[data-theme="dark"] .cloud-btn,
  :root[data-theme="dark"] .theme-card,
  :root[data-theme="dark"] .quick-action,
  :root[data-theme="dark"] .pp-item,
  :root[data-theme="dark"] .login-card{ background:var(--surface); color:var(--ink); border-color:var(--line); }
  :root[data-theme="dark"] .card.kpi-hero, :root[data-theme="dark"] .kpi-hero{
    background:linear-gradient(150deg, #0E7C86 0%, #0A3B42 100%); color:#fff; border-color:transparent;
  }
  :root[data-theme="dark"] .theme-bar,
  :root[data-theme="dark"] .kpi-mini,
  :root[data-theme="dark"] .chip{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
  :root[data-theme="dark"] .chip.on{ background:var(--primary); border-color:var(--primary); color:#fff; }
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea{
    background:var(--surface-2); color:var(--ink); border-color:var(--line);
  }
  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder{ color:var(--muted); }
  :root[data-theme="dark"] table th{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
  :root[data-theme="dark"] table td{ border-color:var(--line); color:var(--ink); }
  :root[data-theme="dark"] .btn{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
  :root[data-theme="dark"] .btn:hover{ border-color:var(--primary); }
  :root[data-theme="dark"] .btn.primary,
  :root[data-theme="dark"] .btn.gold{ background:var(--primary); border-color:var(--primary); color:#fff; }
  :root[data-theme="dark"] .btn.danger{ background:var(--wine-tint); border-color:var(--wine); color:var(--wine); }
  :root[data-theme="dark"] .modal-bg{ background:rgba(0,0,0,.7); }
  :root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#39404B; }
  :root[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--surface-2); }
  /* printed invoice always stays light */
  :root[data-theme="dark"] .inv,
  :root[data-theme="dark"] .inv-preview{ background:#fff; color:#1a1a1a; }
  :root[data-theme="dark"] .topbar{
    background:linear-gradient(180deg,#1B1F27,#141820);
    box-shadow:0 2px 8px rgba(0,0,0,.5);
    border-bottom:1px solid var(--line);
  }
  :root[data-theme="dark"] .theme-thumb{ background:#fff; }


/* ---------------- cloud backup ---------------- */
.cloud-btn{
  position:fixed; right:14px; bottom:82px; z-index:60;
  display:flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px; cursor:pointer;
  font:600 13px/1 inherit;
  background:var(--surface,#fff); color:var(--ink,#1a1a1a);
  border:1px solid var(--line,#e2e2e8);
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.cloud-btn .cloud-ic{ font-size:15px; }
.cloud-btn[data-state="on"]{ border-color:var(--primary,#6B3FA0); color:var(--primary,#6B3FA0); }
.cloud-btn[data-state="sync"]{ opacity:.75; }
.cloud-btn[data-state="bad"]{ border-color:var(--danger,#a33); color:var(--danger,#a33); }
.cloud-scrim{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(20,10,30,.55);
}
.cloud-scrim.open{ display:flex; }
.cloud-card{
  width:100%; max-width:380px; border-radius:18px; overflow:hidden;
  background:var(--surface,#fff); color:var(--ink,#1a1a1a);
  border:1px solid var(--line,#e2e2e8);
  box-shadow:0 22px 50px rgba(0,0,0,.3);
}
.cloud-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; color:#fff;
  background:linear-gradient(180deg,#4A2A6B,#33194B);
}
.cloud-head h3{ margin:0; font-size:16px; }
.cloud-head .x-close{ background:none; border:0; color:#fff; font-size:16px; cursor:pointer; }
.cloud-body{ padding:16px; display:grid; gap:12px; }
.cloud-note{ margin:0; font-size:13px; color:var(--muted,#6b6b78); line-height:1.5; }
.cloud-field{ display:grid; gap:6px; font-size:12px; font-weight:600; color:var(--muted,#6b6b78); }
.cloud-field input{
  padding:10px 12px; border-radius:10px; font-size:14px;
  border:1px solid var(--line,#e2e2e8);
  background:var(--surface-2,#f7f7fa); color:var(--ink,#1a1a1a);
}
.cloud-msg{ font-size:12.5px; min-height:16px; }
.cloud-msg.ok{ color:var(--primary,#6B3FA0); }
.cloud-msg.bad{ color:var(--danger,#a33); }
.cloud-foot{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
  padding:12px 16px 16px; border-top:1px solid var(--line,#e2e2e8);
}
.cloud-foot .btn.danger{ color:var(--danger,#a33); }

/* ---------- Inline rate / qty / discount editors ---------- */
.rate-edit{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  font-size:10px; font-weight:600; letter-spacing:.02em;
  color:var(--muted,#7a7a86); text-transform:uppercase;
}
.rate-edit span{ line-height:1; padding-left:2px; }
.rate-edit .qty-input,
.cart-line .qty-input{
  width:74px; padding:5px 7px; font-size:13px; font-weight:600;
  text-align:right; color:var(--text,inherit);
  background:var(--card,#fff);
  border:1px solid var(--line,#e2e2e8); border-radius:8px;
  outline:none; -moz-appearance:textfield;
}
.rate-edit .qty-input:focus,
.cart-line .qty-input:focus{
  border-color:var(--brand,#7b3fa0);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand,#7b3fa0) 22%, transparent);
}
.rate-edit .qty-input::-webkit-outer-spin-button,
.rate-edit .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cart-line{ flex-wrap:wrap; }
.cart-line .n{ min-width:140px; }
@media (max-width:520px){
  .rate-edit .qty-input, .cart-line .qty-input{ width:64px; }
  .cart-line .n{ flex:1 1 100%; }
}

/* customer ledger action buttons */
.btn.ledger-tally-action{ background:var(--tally); border-color:var(--tally); color:#1F2937; box-shadow:0 1px 3px rgba(138,99,0,.22); }
.btn.ledger-tally-action:hover{ background:#B98100; border-color:#B98100; color:#fff; }
.btn.ledger-invoice-action{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 1px 3px rgba(10,95,104,.22); }
.btn.ledger-invoice-action:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
:root[data-theme="dark"] .btn.ledger-tally-action{ background:var(--tally); border-color:var(--tally); color:#1F2937; }
:root[data-theme="dark"] .btn.ledger-invoice-action{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* saved ledger tally point */
tr.ledger-ok > td{ background:var(--primary-tint) !important; color:var(--ink) !important; }
tr.ledger-ok > td:first-child{ box-shadow:inset 4px 0 0 var(--primary) !important; }
.btn.tally-active{ background:#8A6300; border-color:#8A6300; color:#fff; }
.ledger-tally-note{ margin-top:8px; padding:9px 11px; border-left:4px solid var(--tally);
  background:var(--tally-tint); color:var(--ink); font-size:12.5px; font-weight:600; }
tr.ledger-invoice > td:first-child{ box-shadow: inset 3px 0 0 #d9534f; }
tr.ledger-payin > td{ background:rgba(34,170,96,.07); }
tr.ledger-payin > td:first-child{ box-shadow: inset 3px 0 0 #22aa60; }

  /* developer credit shown at the end of every page / report */
  .page-dev-footer{ margin:26px 0 8px; padding-top:12px; border-top:1px solid var(--line); text-align:center;
    font-size:12px; color:var(--muted); letter-spacing:.2px; }
  .page-dev-footer b{ color:var(--text); }
  .page-dev-footer a{ color:var(--brand); text-decoration:none; }
  .login-dev{ margin-top:18px; text-align:center; font-size:12px; color:var(--muted); line-height:1.6; }
  .login-dev b{ display:block; color:var(--text); font-size:12.5px; }
  .login-dev a{ color:var(--brand); text-decoration:none; }
  @media print{ .page-dev-footer{ display:none; } }

/* ===== Customer ledger opens full screen ===== */
.modal-bg:has(.ledger-actions){ padding:0; align-items:stretch; justify-content:stretch; }
.modal-bg:has(.ledger-actions) .modal{
  display:flex; flex-direction:column;
  width:100%; max-width:100%;
  height:100dvh; max-height:100dvh;
  border-radius:0;
  padding-top:env(safe-area-inset-top,0px);
}
.modal-bg:has(.ledger-actions) .modal-head{ position:sticky; top:0; z-index:2; background:var(--surface); }
.modal-bg:has(.ledger-actions) .modal-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-bg:has(.ledger-actions) .ledger-actions{
  flex:none; background:var(--surface);
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
@media (max-width:768px){
  .modal-bg:has(.ledger-actions) .ledger-actions{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
    padding:12px 12px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .modal-bg:has(.ledger-actions) .ledger-actions .btn{ width:100%; min-height:46px; justify-content:center; }
}

/* ---------- Maximize (full screen) for any popup ---------- */
.modal-head .x-max{ border:none; background:none; font-size:16px; color:var(--muted); cursor:pointer; margin-left:auto; margin-right:8px; line-height:1; padding:2px 6px; border-radius:6px; }
.modal-head .x-max:hover{ background:var(--line); }
.modal-bg.maximized{ padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
.modal-bg.maximized .modal{
  display:flex; flex-direction:column;
  width:100% !important; max-width:100% !important;
  height:100dvh !important; max-height:100dvh !important;
  border-radius:0 !important; padding-top:env(safe-area-inset-top,0px);
}
.modal-bg.maximized .modal-head{ position:sticky; top:0; z-index:2; background:var(--surface); }
.modal-bg.maximized .modal-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-bg.maximized .modal-foot{ flex:none; background:var(--surface); padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
@media print{ .modal-bg.maximized{ display:none !important; } }

/* Company management */
.company-heading,.company-row,.company-name,.company-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.company-heading,.company-row{justify-content:space-between}
.company-list{margin-top:16px;border-top:1px solid var(--line)}
.company-row{padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.company-name{min-width:0;overflow-wrap:anywhere}
.company-actions{flex-shrink:0}
@media(max-width:600px){.company-row{align-items:flex-start}.company-actions{width:100%}}

.company-input,input[type=email]{width:100%;min-height:46px;padding:12px 14px!important;font-size:15px!important;border:1.5px solid var(--line)!important;border-radius:10px!important;background:var(--surface);color:var(--ink);font-family:inherit;box-sizing:border-box}
.company-input:focus,input[type=email]:focus{border-color:var(--primary)!important;outline:2px solid var(--primary-tint)}