/* ============ KitabKhata — Vyapar-style billing for Books & Stationery ============ */
:root {
  --red: #e11d48;
  --red-dark: #be123c;
  --blue: #2563eb;
  --green: #16a34a;
  --amber: #d97706;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --sidebar-bg: #1e293b;
  --radius: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.app { display: flex; min-height: 100vh; }

/* ============ Sidebar ============ */
.sidebar {
  width: 220px; min-width: 220px;
  background: var(--sidebar-bg);
  color: #cbd5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
/* brand and footer stay put; only the nav list scrolls */
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid #334155; flex-shrink: 0; }
.brand-icon { font-size: 26px; }
.brand-name { font-weight: 700; font-size: 17px; color: #fff; }
.brand-sub { font-size: 11px; color: #94a3b8; }
/* min-height:0 is what actually lets a flex child scroll instead of overflowing */
.nav {
  display: flex; flex-direction: column; padding: 10px 8px; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #475569 transparent;
}
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.nav::-webkit-scrollbar-thumb:hover { background: #64748b; }
.nav-item {
  background: none; border: none; color: #cbd5e1; text-align: left;
  padding: 10px 12px; font-size: 14px; border-radius: 8px; cursor: pointer;
  flex-shrink: 0;
}
.nav-item:hover { background: #334155; color: #fff; }
.nav-item.active { background: var(--red); color: #fff; font-weight: 600; }
.sidebar-footer { padding: 12px 16px; font-size: 12px; color: #94a3b8; border-top: 1px solid #334155; flex-shrink: 0; }
/* version sits last in the sidebar footer — quiet, but readable out loud on a support call */
.sidebar-version { margin-top: 10px; font-size: 11px; color: #64748b; letter-spacing: .02em; }
.side-sync { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.side-sync-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.side-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.side-email { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-logout { margin-top: 2px; width: 100%; background: #334155; color: #e2e8f0; border: none;
  padding: 6px 8px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.side-logout:hover { background: #475569; }

/* ============ Shared invoice link view ============ */
.shared-inv-wrap { width: 100%; height: 100vh; display: flex; flex-direction: column; background: #f1f5f9; }
.shared-inv-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--sidebar-bg); color: #fff; font-size: 14px; font-weight: 600;
}
.shared-inv-frame { flex: 1; width: 100%; border: none; background: #fff; }

/* ============ Help & Guide ============ */
.help-card { border: 1px solid var(--border); }
.help-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: none; padding: 13px 16px; cursor: pointer;
  font-size: 14.5px; text-align: left; color: inherit;
}
.help-head:hover { background: #f8fafc; }
.help-body { padding: 2px 16px 16px; font-size: 13.5px; line-height: 1.75; border-top: 1px solid var(--border); }
.help-body p { margin: 9px 0; }
.help-body ul, .help-body ol { margin: 8px 0 8px 20px; }
.help-body li { margin: 5px 0; }
.help-tip {
  background: #f0fdf4; border-left: 3px solid var(--green);
  padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 10px 0 !important;
}
.help-warn {
  background: #fffbeb; border-left: 3px solid var(--amber);
  padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 10px 0 !important;
}

/* ============ Main ============ */
.main { flex: 1; padding: 22px 26px; max-width: 1200px; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-title { font-size: 21px; font-weight: 700; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ============ Buttons ============ */
.btn {
  border: none; border-radius: 8px; padding: 9px 16px; font-size: 14px;
  cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--bg); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-danger { background: #fff; border: 1px solid #fecdd3; color: var(--red); }
.btn-danger:hover { background: #fff1f2; }

/* ============ Cards & stats ============ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.stat-value { font-size: 21px; font-weight: 700; margin-top: 6px; }
.stat-value.green { color: var(--green); }
.stat-value.red { color: var(--red); }
.stat-value.blue { color: var(--blue); }
.stat-value.amber { color: var(--amber); }
.stat-note { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.card h3 { font-size: 15px; margin-bottom: 12px; }

/* ============ Glass hero — the dashboard's top cards ============
   Frosted glass only reads as glass when there is something behind it to
   blur, and the app's page background is one flat slate. So the hero paints
   its own soft colour wash and the cards float on THAT. Keep the wash low
   contrast: these cards carry the numbers a shopkeeper reads at a glance, and
   decoration must never cost legibility. */
.glass-hero {
  position: relative;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(37, 99, 235, .20), transparent 55%),
    radial-gradient(120% 150% at 100% 0%, rgba(225, 29, 72, .16), transparent 55%),
    radial-gradient(150% 170% at 65% 130%, rgba(22, 163, 74, .16), transparent 55%),
    linear-gradient(135deg, #eef2ff 0%, #f8fafc 55%, #fff1f2 100%);
  border: 1px solid rgba(255, 255, 255, .6);
}
.glass-hero .stat-grid { margin-bottom: 0; }
.glass-hero .stat-card {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 4px 18px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .85);
}
/* Older WebViews (and anything with backdrop-filter disabled) get a solid card
   rather than washed-out text over a gradient. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass-hero .stat-card { background: rgba(255, 255, 255, .9); }
}

/* On a phone the default auto-fit grid drops to ONE card per row, which turns
   the top of the dashboard into seven screens of scrolling. Two-up fits the
   same numbers above the fold, which is the entire point of these cards. */
@media (max-width: 620px) {
  .glass-hero { padding: 12px; border-radius: 14px; }
  .glass-hero .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .glass-hero .stat-card { padding: 12px; }
  .glass-hero .stat-value { font-size: 18px; }
  .spark { height: 128px; gap: 5px; }
  .spark-val { font-size: 10.5px; }
}

/* A number on a dashboard is a question — "why is To Pay that high?" — and the
   answer is always one screen away, so the cards that HAVE an answer are
   buttons. Cards with nowhere to go stay plain divs and get no hover, rather
   than advertising a click that does nothing. */
button.stat-card {
  font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
button.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
}
button.stat-card:active { transform: translateY(0); }
button.stat-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-go { color: var(--muted); font-size: 13px; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
button.stat-card:hover .stat-go { opacity: 1; transform: translateX(2px); }

/* ============ 7-day sale bars ============ */
.spark { display: flex; align-items: stretch; gap: 8px; height: 150px; }
.spark-bar {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--muted); text-align: center;
}
.spark-val { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.spark-track { flex: 1; display: flex; align-items: flex-end; }
.spark-fill {
  width: 100%; min-height: 4px; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #93c5fd, #2563eb);
  transition: filter .15s ease, transform .15s ease;
}
.spark-bar:hover .spark-fill { filter: brightness(1.1); transform: scaleY(1.02); transform-origin: bottom; }
.spark-bar:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.spark-bar.is-today .spark-fill { background: linear-gradient(180deg, #fda4af, #e11d48); }
.spark-bar.is-empty .spark-fill { background: #e2e8f0; }
.spark-day { font-size: 11px; white-space: nowrap; }
.spark-bar.is-today .spark-day { color: var(--red); font-weight: 700; }

/* ============ Filter chips (day book) ============ */
.chip {
  background: #fff; border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 99px; font-size: 13px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.chip:hover { background: var(--bg); }
.chip-on { background: var(--text); border-color: var(--text); color: #fff; }
.chip-on:hover { background: var(--text); }

/* A whole row that opens something. Used on the dashboard lists and the day
   book — the pointer is the only affordance, so the hover tint has to be
   visible enough to read as one. */
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: #eff6ff; }
.see-more {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px 0; font-size: 13px; color: var(--muted);
}

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 10px 12px; background: #f8fafc; color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.amount-green { color: var(--green); font-weight: 600; }
.amount-red { color: var(--red); font-weight: 600; }
.empty-state { padding: 36px; text-align: center; color: var(--muted); }
.empty-state .big { font-size: 34px; margin-bottom: 8px; }

/* ============ Badges ============ */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.badge-book { background: #dbeafe; color: #1d4ed8; }
.badge-stationery { background: #fef3c7; color: #b45309; }
.badge-customer { background: #dcfce7; color: #15803d; }
.badge-supplier { background: #fce7f3; color: #be185d; }
.badge-low { background: #fee2e2; color: #b91c1c; }
.badge-paid { background: #dcfce7; color: #15803d; }
.badge-partial { background: #fef3c7; color: #b45309; }
.badge-unpaid { background: #fee2e2; color: #b91c1c; }
.badge-gray { background: #e2e8f0; color: #475569; }

/* ============ "Needs internet" notices ============
   Blue while the device has a connection (a heads-up), red the moment it drops
   (a warning about what will fail right now). Repainted in place by netRepaint(). */
.net-tag {
  display: inline-block; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  font-size: 11px; font-weight: 600; vertical-align: middle; margin-left: 6px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}
.net-tag.net-off { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.net-mark { font-size: 11px; margin-left: 5px; opacity: .85; vertical-align: middle; }
.net-mark.net-off { background: #fecaca; border-radius: 99px; padding: 1px 4px; opacity: 1; }

.net-notice {
  display: flex; gap: 10px; align-items: flex-start; max-width: 680px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; line-height: 1.7;
}
.net-notice.net-off { background: #fef2f2; border-color: #fecaca; }
.net-notice-icon { font-size: 15px; flex-shrink: 0; }
.net-notice-head { display: block; color: #1d4ed8; }
.net-notice.net-off .net-notice-head { color: #b91c1c; }
.net-notice-body { color: var(--muted); }

.net-line {
  font-size: 12px; line-height: 1.6; color: #1d4ed8; margin: -6px 0 12px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 6px 10px;
}
.net-line.net-off { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.net-line b { font-weight: 600; }

/* ============ Forms ============ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #fda4af; border-color: var(--red); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input[type="search"], .toolbar input[type="date"], .toolbar select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff;
}
.toolbar input[type="search"] { min-width: 220px; }

/* ============ Modal ============ */
/* Sits ABOVE the login gate (z-index 100) on purpose. The gate is the only
   full-screen layer that can be up at the same time, and the one case where
   both appear is the important one: a device-limit rejection while picking a
   company. The modal that frees a device slot has to be reachable there, or a
   shopkeeper who reinstalled is locked out of their own books with no way
   forward. Anything stacked over the gate belongs above it. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 200;
  overflow-y: auto;
}
.modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px;
  padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.modal.wide { max-width: 950px; }
.modal h2 { font-size: 17px; margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.hidden { display: none !important; }

/* ============ Login gate ============ */
.auth-gate { position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background: linear-gradient(135deg, #fff1f2 0%, #eef2ff 100%); }
.gate-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gate-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px; box-shadow: 0 12px 40px rgba(2,6,23,.10); }
.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gate-logo { font-size: 34px; line-height: 1; }
.gate-name { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.gate-sub { font-size: 12px; color: var(--muted); }
.gate-card .field label { font-size: 12.5px; }
.gate-card .field input { width: 100%; }

/* ============ Invoice builder ============ */
.inv-lines th, .inv-lines td { padding: 7px 8px; }
.inv-lines input, .inv-lines select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; width: 100%; }
.inv-lines .qty-col { width: 70px; }
.inv-lines .price-col { width: 100px; }
.inv-lines .disc-col { width: 75px; }
.inv-lines .amt-col { width: 100px; text-align: right; }
/* the name must stay readable; extra columns scroll inside .table-wrap instead */
.inv-lines .item-col { min-width: 170px; }
.inv-lines .code-col { width: 90px; font-family: monospace; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.inv-lines .mrp-col { width: 85px; text-align: right; color: var(--muted); white-space: nowrap; }
.inv-totals { margin-top: 14px; display: flex; justify-content: flex-end; }
.inv-totals table { width: auto; min-width: 300px; }
.inv-totals td { padding: 5px 10px; border: none; }
.inv-totals .grand td { font-size: 16px; font-weight: 700; border-top: 2px solid var(--text); }

/* ============ Toast ============ */
/* Top of the stacking ladder — fab 40, gate 100, modal 200, modal2 210, toast
   300 — because a toast is confirmation of something the user just did, and
   plenty of those ("Device hata diya ✓") are fired from inside a modal. */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #0f172a; color: #fff; padding: 11px 20px; border-radius: 10px;
  font-size: 14px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ============ Tabs ============ */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.tab.active { background: var(--red); border-color: var(--red); color: #fff; }

.link { color: var(--blue); cursor: pointer; text-decoration: underline; background: none; border: none; font-size: inherit; padding: 0; }

/* ============ POS ============ */
/* 480px, not 420: the cart's line row carries discount + edit, and at 420 a
   laptop-width cart was ~390px inside — too narrow to keep the ✕ on screen. */
.pos-wrap { display: grid; grid-template-columns: 1fr 480px; gap: 14px; align-items: start; }
.pos-left { min-width: 0; }
.pos-search {
  width: 100%; padding: 11px 14px; border: 2px solid var(--border);
  border-radius: 9px; font-size: 15px; margin-bottom: 10px;
}
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pos-tile {
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px; text-align: left; cursor: pointer; display: flex;
  flex-direction: column; gap: 3px; min-height: 78px; transition: border-color .12s, transform .06s;
}
.pos-tile:hover { border-color: var(--red); }
.pos-tile:active { transform: scale(.97); }
.pos-tile-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.pos-tile-meta { font-size: 11px; color: var(--muted); }
.pos-tile-price { font-size: 15px; font-weight: 700; margin-top: auto; }

.pos-right {
  background: #fff; border: 1px solid var(--border); border-radius: 11px;
  padding: 12px; position: sticky; top: 14px;
}
.pos-cart { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.pos-cart-table { width: 100%; }
/* Tight on purpose: on a 1366px laptop the cart is ≈390px wide, and a vertical
   scrollbar (once a few items are in) takes 15px more — any slack here decides
   whether the ✕ column stays on screen. */
.pos-cart-table th, .pos-cart-table td { padding: 6px 5px; font-size: 13px; }
.pos-cart-table td:first-child { overflow-wrap: anywhere; }
.pos-qty {
  width: 25px; height: 25px; border: 1px solid var(--border); background: #f8fafc;
  border-radius: 5px; cursor: pointer; font-size: 15px; line-height: 1; font-weight: 700;
}
.pos-qty:hover { background: #e2e8f0; }
.pos-qty-input { width: 46px; text-align: center; padding: 4px; border: 1px solid var(--border); border-radius: 5px; }
.pos-rate-input { width: 74px; text-align: right; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; }
.pos-line-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 4px; font-size: 11.5px; color: var(--muted);
}
.pos-line-tools label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0; font-weight: 500; }
.pos-line-tools label span { white-space: nowrap; }
.pos-cart-table .btn-sm { padding: 4px 7px; }
.pos-disc-input { width: 56px; text-align: right; padding: 2px 4px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; }
.pos-disc-amt { color: var(--green); font-weight: 600; white-space: nowrap; }
.pos-edit {
  background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
  padding: 2px 7px; font-size: 11.5px; color: var(--muted); font-family: inherit; white-space: nowrap;
}
.pos-edit:hover { border-color: var(--red); color: var(--red); }

.pos-totals { margin-top: 10px; font-size: 13.5px; }
.pos-totals > div { display: flex; justify-content: space-between; padding: 3px 2px; }
.pos-grand {
  font-size: 21px; font-weight: 800; border-top: 2px solid var(--border);
  margin-top: 5px; padding-top: 7px !important;
}
.pos-pay { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.pos-mode {
  flex: 1; padding: 9px 4px; border: 2px solid var(--border); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.pos-mode:hover { border-color: var(--m); }
.pos-mode.on { border-color: var(--m); background: color-mix(in srgb, var(--m) 12%, #fff); }
.pos-pay-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos-pay-row label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.pos-pay-row input { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; text-align: right; }
.pos-balance { margin-top: 8px; font-size: 13.5px; }
.pos-balance > div { display: flex; justify-content: space-between; padding: 2px 2px; }
.pos-balance .change { color: var(--green); font-weight: 700; }
.pos-balance .due { color: var(--red); font-weight: 700; }

.pos-qr {
  display: flex; gap: 12px; margin-top: 10px; padding: 11px;
  background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 9px; align-items: flex-start;
}
.pos-qr-code { flex-shrink: 0; }
.pos-qr-side { min-width: 0; }

@media (max-width: 1100px) {
  .pos-wrap { grid-template-columns: 1fr; }
  .pos-right { position: static; }
}

/* ============ Print invoice ============ */
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ============ Responsive ============ */
/* the phone shell (top header + bottom tabs + Menu sheet) lives at the very
   end of this file so it wins the cascade over everything above */
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   AI ACCOUNTANT
   ========================================================= */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-hint { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 5px; }

/* ---- the chat screen ---- */
.ai-wrap { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 150px); min-height: 380px; }

.ai-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.ai-log::-webkit-scrollbar { width: 8px; }
.ai-log::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.ai-msg {
  max-width: 78%; padding: 10px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
.ai-bot { align-self: flex-start; background: #f1f5f9; border-bottom-left-radius: 4px; }
.ai-user { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 4px; }
.ai-err { background: #fef2f2; color: var(--red-dark); border: 1px solid #fecaca; }
.ai-streaming::after { content: "▍"; animation: aiBlink 1s steps(2) infinite; }
@keyframes aiBlink { 50% { opacity: 0; } }

.ai-tool {
  align-self: flex-start; font-size: 12px; color: var(--muted);
  background: #f8fafc; border: 1px dashed var(--border);
  border-radius: 20px; padding: 4px 12px;
}

/* ---- suggestions ---- */
.ai-suggest { display: flex; gap: 7px; flex-wrap: wrap; }
.ai-chip {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--text);
}
.ai-chip:hover { border-color: var(--red); color: var(--red); }

/* ---- composer ---- */
.ai-composer { display: flex; gap: 8px; align-items: center; }
.ai-composer input {
  flex: 1; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.ai-composer input:focus { outline: none; border-color: var(--red); }
.ai-send { padding: 12px 20px; }

.ai-mic {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--card);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.ai-mic:hover { border-color: var(--red); }
.ai-mic.listening {
  background: var(--red); border-color: var(--red); color: #fff;
  animation: aiPulse 1.3s ease-out infinite;
}
@keyframes aiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 72, .5); }
  100% { box-shadow: 0 0 0 14px rgba(225, 29, 72, 0); }
}

.ai-foot { font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---- floating mic, on every other screen ---- */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; background: var(--red); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
}
.ai-fab:hover { background: var(--red-dark); transform: translateY(-2px); }

/* ---- calculator: button above the mic, panel above every modal ----
   z-index sits over both modal layers (200/210) because a bill is exactly where
   it gets used, and under the toast (300) so its own "copied" message shows. */
.kk-calc-fab {
  position: fixed; right: 27px; bottom: 90px; z-index: 220;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}
.kk-calc-fab:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
/* not on the login screen, nor over a shared bill a customer is reading */
body:has(#authGate:not(.hidden)) .kk-calc-fab,
body:has(#authGate:not(.hidden)) .kk-calc { display: none; }

.kk-calc {
  position: fixed; right: 22px; bottom: 146px; z-index: 250;
  width: 272px; max-height: calc(100vh - 170px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .26);
  padding: 10px 12px 12px; outline: none;
  animation: kkMenuIn .14s ease-out;
}
.kk-calc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px;
}
.kk-calc-hint {
  font-size: 10.5px; font-weight: 600; border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; margin-left: 6px;
}
.kk-calc-x {
  background: none; border: 0; color: var(--muted); font-size: 15px;
  cursor: pointer; padding: 4px 7px; border-radius: 7px;
}
.kk-calc-x:hover { background: #f1f5f9; color: var(--text); }
.kk-calc-screen {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; text-align: right; margin-bottom: 10px;
}
.kk-calc-expr { font-size: 13px; color: var(--muted); min-height: 18px; word-break: break-all; }
.kk-calc-val {
  font-size: 28px; font-weight: 700; line-height: 1.2; word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.kk-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kk-calc-keys button {
  height: 44px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 18px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.kk-calc-keys button:hover { background: #f1f5f9; }
.kk-calc-keys button:active { transform: scale(.96); }
.kk-calc-keys button.op { color: var(--red); background: #fff1f2; border-color: #fecdd3; }
.kk-calc-keys button.fn { color: var(--muted); font-size: 16px; }
.kk-calc-keys button.eq { background: var(--red); border-color: var(--red); color: #fff; }
.kk-calc-keys button.eq:hover { background: var(--red-dark); }
.kk-calc-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; margin-top: 8px; }
.kk-calc-actions button {
  padding: 8px 6px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.kk-calc-actions button:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.kk-calc-actions button:disabled { opacity: .45; cursor: default; }
.kk-calc-hist { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; }
.kk-calc-hist button {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: 0; padding: 5px 4px; border-radius: 6px;
  font-size: 12.5px; color: var(--muted); font-family: inherit; cursor: pointer; text-align: left;
}
.kk-calc-hist button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-calc-hist button b { color: var(--text); flex-shrink: 0; }
.kk-calc-hist button:hover { background: #f8fafc; }

/* ---- the "switched off" placeholder ---- */
.ai-off { max-width: 560px; margin: 40px auto; text-align: center; padding: 32px 28px; }
.ai-off-icon { font-size: 44px; margin-bottom: 10px; }
.ai-off h3 { margin: 0 0 10px; }
.ai-off p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 12px; }
.ai-off-note { background: #f8fafc; border-radius: 8px; padding: 10px 14px; font-size: 13px !important; }

/* ---- audit report ---- */
.ai-audit-sum { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-pill {
  font-size: 12px; padding: 4px 11px; border-radius: 20px;
  background: #f1f5f9; color: var(--muted); font-weight: 600;
}
.ai-pill.err { background: #fef2f2; color: var(--red-dark); }
.ai-pill.warn { background: #fffbeb; color: var(--amber); }
.ai-pill.info { background: #eff6ff; color: #1d4ed8; }

.ai-audit-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.ai-finding { border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; background: var(--card); }
.ai-finding.error { border-left: 3px solid var(--red); }
.ai-finding.warn  { border-left: 3px solid var(--amber); }
.ai-finding.info  { border-left: 3px solid #3b82f6; }
.ai-finding summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ai-finding p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 9px 0; }
.ai-audit-table { overflow-x: auto; margin: 8px 0; }
.ai-audit-table table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.ai-audit-table th, .ai-audit-table td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; white-space: nowrap; }
.ai-audit-table th { background: #f8fafc; font-weight: 600; }
.ai-more { font-size: 12px; color: var(--muted); font-style: italic; }
.ai-fix { font-size: 13px; color: var(--green); background: #f0fdf4; border-radius: 6px; padding: 7px 11px; margin-top: 8px; }
.ai-audit-note { font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---- usage strip in settings ---- */
.ai-usage { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-usage > div { display: flex; flex-direction: column; gap: 2px; }
.ai-usage span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.ai-usage b { font-size: 17px; }

.ai-disclaim ol { margin: 8px 0 0; padding-left: 20px; }
.ai-disclaim li { font-size: 13px; line-height: 1.75; margin-bottom: 8px; color: var(--muted); }
.ai-disclaim li b { color: var(--text); }

@media (max-width: 720px) {
  .ai-msg { max-width: 92%; }
  .ai-wrap { height: calc(100vh - 190px); }
  .ai-fab { right: 14px; bottom: 14px; }
  .kk-calc-fab { right: 19px; bottom: 80px; }
  .kk-calc { right: 12px; left: 12px; width: auto; max-width: 340px; margin-left: auto; bottom: 134px; }
}
.ai-ok {
  background: #f0fdf4; border-left: 3px solid var(--green);
  color: #14532d; border-radius: 6px; padding: 10px 13px;
  font-size: 13px; line-height: 1.7;
}
.ai-hint code {
  background: #f1f5f9; padding: 1px 5px; border-radius: 4px;
  font-size: 12px; word-break: break-all;
}

/* =========================================================
   PHONE SHELL  (≤860px: fixed top header + bottom tab bar)
   =========================================================
   The sidebar disappears on phones; the ☰ Menu tab brings it back as a
   full-screen sheet (body.menu-open), so every nav entry, the sync status
   and Sign out keep living in the one place. Kept at the END of the file
   on purpose — these rules must out-cascade the desktop ones above. */
.mob-head, .tabbar { display: none; }

@media (max-width: 860px) {
  :root { --mob-head-h: 54px; --tabbar-h: 60px; }

  /* ---- top bar: opened company + settings ---- */
  .mob-head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    height: calc(var(--mob-head-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 6px 0 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--sidebar-bg); color: #fff;
    box-shadow: 0 1px 8px rgba(2, 6, 23, .25);
  }
  .mob-head-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mob-head-icon { font-size: 24px; flex-shrink: 0; }
  .mob-head-text { min-width: 0; }
  .mob-head-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-head-sub { font-size: 10.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-head-settings {
    background: none; border: none; color: #e2e8f0; font-size: 22px; line-height: 1;
    width: 44px; height: 44px; border-radius: 10px; cursor: pointer; flex-shrink: 0;
  }
  .mob-head-settings:active { background: #334155; }

  /* ---- bottom tab bar ---- */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; align-items: stretch;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(2, 6, 23, .08);
  }
  .tab-item {
    flex: 1; background: none; border: none; cursor: pointer; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font-size: 11.5px; font-weight: 600; font-family: inherit;
  }
  .tab-ico { font-size: 21px; line-height: 1; }
  .tab-item.active { color: var(--red); }

  /* ---- page sits between the two fixed bars ---- */
  .app { flex-direction: column; }
  .main {
    max-width: 100%;
    padding: calc(var(--mob-head-h) + env(safe-area-inset-top, 0px) + 14px) 14px
             calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 18px);
  }

  /* ---- the sidebar becomes the Menu sheet ---- */
  .sidebar { display: none; }
  body.menu-open .sidebar {
    display: flex;
    position: fixed; z-index: 85;
    top: calc(var(--mob-head-h) + env(safe-area-inset-top, 0px));
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0; width: 100%; min-width: 0; height: auto;
    animation: kkMenuIn .16s ease-out;
  }
  body.menu-open .main { display: none; }   /* nothing peeks around the sheet */
  .brand { display: none; }                  /* the top bar already carries the brand */
  .nav { padding: 10px; gap: 4px; }
  .nav-item { padding: 13px 14px; font-size: 15px; border-radius: 10px; }

  /* ---- keep floating things clear of the tab bar ---- */
  .ai-fab { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  .kk-calc-fab { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 80px); }
  .kk-calc {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 134px);
    max-height: calc(100vh - var(--tabbar-h) - var(--mob-head-h) - 150px);
  }
  .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); max-width: calc(100vw - 28px); }
}
@keyframes kkMenuIn { from { opacity: 0; transform: translateY(10px); } }

/* ============ Variation builder (Add Item) ============
   One product, every colour/size, in one pass. The panel is a quiet grey box
   so it reads as a section of the item form rather than a second form. */
.kk-var-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #f8fafc; padding: 14px 16px;
}
.kk-var-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 4px !important; cursor: default;
}
.kk-var-head input[type="checkbox"] { margin-right: 8px; vertical-align: -1px; }

/* Attribute row: name, options, and the bin. Collapses to stacked on a phone,
   where two side-by-side inputs would each be too narrow to read. */
.kk-var-attr {
  display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 12px; align-items: end;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin: 10px 0;
}
.kk-var-attr .field { margin: 0; }

.kk-var-count { color: var(--muted); font-size: 12px; margin: 12px 0 6px; }

.kk-var-table { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.kk-var-table th {
  text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 10px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.kk-var-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.kk-var-table tr:last-child td { border-bottom: 0; }
.kk-var-table td:first-child { white-space: nowrap; }
/* Scoped through the table on purpose: these inputs sit inside a .field (the
   panel is one), and `.field input` above would otherwise win on specificity
   and give every cell the full-size form padding. */
.kk-var-table .kk-var-in { width: 100%; min-width: 88px; padding: 7px 9px; font-size: 13px; }
.kk-var-table .kk-var-sku { min-width: 120px; font-family: monospace; text-transform: uppercase; }

@media (max-width: 640px) {
  .kk-var-attr { grid-template-columns: 1fr auto; }
  .kk-var-attr .field:first-child { grid-column: 1 / -1; }
}

/* ============ AI chat window ============
   The munshi sits over the work instead of replacing it, so the panel is
   anchored to the corner and the page keeps its scroll position behind. */
.ai-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: min(420px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 100px));
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .26);
  overflow: hidden;
}
.ai-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px 10px 14px;
  background: var(--sidebar-bg); color: #fff; flex-shrink: 0;
}
.ai-panel-title { font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.ai-panel-btn {
  background: transparent; border: 0; color: #cbd5e1;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.ai-panel-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ai-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; }

/* Inside the panel the chat fills the panel, not the viewport — .ai-wrap's
   100vh height would otherwise push the composer off the bottom. */
.ai-panel .ai-wrap { height: 100%; min-height: 0; }
.ai-panel .page-head { display: none; }          /* the panel has its own title */
.ai-panel .ai-log { padding: 12px; }
.ai-panel .ai-msg { max-width: 88%; font-size: 14px; }
.ai-panel .ai-composer input { padding: 10px 12px; font-size: 14px; }
.ai-panel .ai-mic { width: 40px; height: 40px; font-size: 17px; }
.ai-panel .ai-send { padding: 10px 14px; }

@media (max-width: 640px) {
  .ai-panel {
    right: 0; left: 0; bottom: 0; width: 100vw;
    height: min(88vh, calc(100vh - 40px));
    border-radius: 16px 16px 0 0;
  }
}

/* The settings shortcut sits with each screen's action buttons. On a phone the
   label goes and the gear stands alone, so it never pushes the real actions off. */
.ctx-settings { white-space: nowrap; }
@media (max-width: 720px) {
  .ctx-settings-label { display: none; }
  .ctx-settings { padding: 5px 9px; }
}

/* ============ Type-to-find item picker (invoice lines) ============
   Replaces a <select> that became unusable past a few hundred items. The list
   is absolutely positioned so it floats over the rows below instead of pushing
   the table around while someone types. */
.kk-pick { position: relative; }
.kk-pick-input { width: 100%; }
.kk-pick-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 300px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.kk-pick-list.hidden { display: none; }
.kk-pick-opt {
  display: flex; align-items: baseline; gap: 7px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid #f1f5f9;
  padding: 8px 11px; font-size: 13px; text-align: left; cursor: pointer; color: var(--text);
}
.kk-pick-opt:last-child { border-bottom: 0; }
.kk-pick-opt:hover, .kk-pick-opt.active { background: #fff1f2; }
.kk-pick-code { font-family: monospace; font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.kk-pick-stock { margin-left: auto; font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.kk-pick-empty { padding: 12px; font-size: 12.5px; color: var(--muted); }

/* ============ UPI INBOX ============
   The stat strip and the candidate picker. Both collapse to a single column on
   phones, where this screen is most likely to be read standing at the counter. */
.upi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.upi-stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; min-width: 0;
}
.upi-stat-label { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.upi-stat-big { font-size: 21px; font-weight: 800; margin-top: 4px; line-height: 1.2; word-break: break-word; }
.upi-stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.upi-cand-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.upi-cand {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 11px 13px; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit; color: inherit;
}
.upi-cand:hover { background: #fff1f2; border-color: var(--red); }

@media (max-width: 860px) {
  .upi-stats { grid-template-columns: repeat(2, 1fr); }
  .upi-stat-big { font-size: 18px; }
}

/* "ya" divider on the login gate — separates signing in from starting offline. */
.gate-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.gate-or span { font-size: 11.5px; color: var(--muted); }