/* Munshi AI — (c) 2026 MunshiAI SMC PVT LTD. Proprietary; all rights reserved.
   Author: Mujaddad · munshiai.pk · Not licensed for copying or redistribution. */
/* Design tokens + shared components. Evolved from the demo's validated
   green identity — 60 prospects have already seen that look. */

:root {
  /* Soft Daylight — calm light identity. Softer neutrals + lighter hairlines +
     a gentler, more diffuse shadow + rounder corners than the original, so the
     whole app reads calmer without changing any layout. */
  --ink: #12271e;
  --ink-2: #3d5148;
  --muted: #77897f;
  --brand: #0f7a4d;
  --brand-2: #12a366;
  --brand-soft: #e8f4ee;
  --amber: #b45309;
  --amber-soft: #fdf3e3;
  --red: #b42318;
  --red-soft: #fdeceb;
  --bg: #f3f6f4;
  --card: #ffffff;
  --line: #e9efeb;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 50, 35, .04), 0 8px 24px rgba(20, 50, 35, .05);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.02em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
/* Urdu secondary text — readable, not faint. */
.ur { font-weight: 500; color: var(--ink-2); }
.hint-text { font-size: 12px; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: 44px;
  transition: background .14s ease, border-color .14s ease, transform .1s ease, box-shadow .14s ease;
}
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background .14s ease; } .btn:active { transform: none; } }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: #0c6741; }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: #f7faf8; }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; min-height: 38px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > input, .field > select, .field > textarea { width: 100%; }
label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
input, select, textarea {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; outline: none; min-width: 0; max-width: 100%;
  font-size: 16px; /* prevents iOS zoom-on-focus */
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- cards / layout ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- auth screens (mobile-first login) ---------- */
.auth-gate {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(18,163,102,.30) 0%, transparent 62%),
    linear-gradient(165deg, #0c1a14 0%, #12352a 55%, #0c1a14 100%);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--card); border-radius: 22px;
  padding: 30px 26px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  position: relative; z-index: 2;
}
/* Aurora mesh (Direction A) adapted to the dark login: drifting green glow
   blobs + a faint grid over the existing gradient. Motion only via transform;
   disabled for reduced-motion. Scoped to the auth screens — never the app shell. */
.auth-gate .aurora-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-gate .ab { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.auth-gate .b1 { width: 420px; height: 420px; background: radial-gradient(circle, #12a366, transparent 70%); top: -150px; left: -90px; animation: authAb1 18s ease-in-out infinite; }
.auth-gate .b2 { width: 360px; height: 360px; background: radial-gradient(circle, #3ddc95, transparent 70%); bottom: -130px; right: -80px; opacity: .32; animation: authAb2 22s ease-in-out infinite; }
.auth-gate .b3 { width: 300px; height: 300px; background: radial-gradient(circle, #0f7a4d, transparent 70%); top: 32%; right: 18%; opacity: .4; animation: authAb3 26s ease-in-out infinite; }
.auth-gate .ab-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 70% at 50% 28%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 28%, #000, transparent); }
@keyframes authAb1 { 50% { transform: translate(80px, 60px) scale(1.15); } }
@keyframes authAb2 { 50% { transform: translate(-70px, -50px) scale(1.1); } }
@keyframes authAb3 { 50% { transform: translate(-60px, 50px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .auth-gate .ab { animation: none; } }
/* Centered branded header */
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-logo-badge {
  width: 60px; height: 60px; border-radius: 17px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 20px rgba(15,122,77,.35);
}
.auth-mark {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); font-weight: 700;
}
.auth-title { font-size: 22px; margin-top: 4px; line-height: 1.2; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
/* Large, touch-friendly fields */
.auth-card .field label { font-size: 13px; margin-bottom: 2px; }
.auth-card input {
  font-size: 17px; padding: 15px 15px; border-radius: 13px; border-width: 1.5px;
}
.pin-row { position: relative; }
.pin-row input { width: 100%; padding-right: 60px; letter-spacing: .12em; }
.pin-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--brand); font-weight: 650;
  font-size: 13px; padding: 8px 12px; cursor: pointer; min-height: 40px; border-radius: 9px;
}
.pin-toggle:hover { background: var(--brand-soft); }
.btn.btn-lg { min-height: 54px; font-size: 16.5px; border-radius: 13px; }
.auth-error {
  margin-top: 14px; padding: 11px 14px; border-radius: 11px;
  background: var(--red-soft); color: var(--red); font-size: 13.5px; font-weight: 550;
  text-align: center;
}
.auth-foot { text-align: center; font-size: 12px; color: var(--muted); margin: 22px 0 0; }
/* Legacy brand row kept for any card still using it */
.auth-brand { display: flex; gap: 13px; align-items: flex-start; }
.auth-logo { flex: none; line-height: 0; margin-top: 2px; }

/* ---------- app top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: #cfe0d8;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
}
.topbar .logo { line-height: 0; }
.topbar .shopname {
  color: #fff; font-weight: 650; font-size: 15px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .role {
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: var(--brand-2); padding: 4px 10px; border-radius: 999px;
}
.topbar .btn-bar {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: #cfe0d8; font-size: 12.5px; padding: 8px 12px; border-radius: 9px;
  cursor: pointer; min-height: 38px;
}
.topbar .btn-bar:hover { background: rgba(255,255,255,.13); }

/* ---------- global search (topbar) ---------- */
.topbar-search { flex: 1 1 auto; min-width: 0; max-width: 460px; }
.gsearch { position: relative; width: 100%; }
.gsearch .gs-lead {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #8fa79c; pointer-events: none;
}
#gsInput {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 13.5px; padding: 9px 12px 9px 34px; border-radius: 10px;
  min-height: 38px; -webkit-appearance: none;
}
#gsInput::placeholder { color: #8fa79c; }
#gsInput:focus {
  outline: none; background: rgba(255,255,255,.14);
  border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(18,163,102,.25);
}
#gsInput::-webkit-search-cancel-button { -webkit-appearance: none; }
.gs-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(12,26,20,.18); padding: 6px;
  max-height: min(66vh, 460px); overflow-y: auto;
}
.gs-empty { padding: 16px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.gs-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; color: var(--ink);
}
.gs-item:hover, .gs-item.active { background: var(--brand-soft); }
.gs-ico {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2f0; color: var(--muted);
}
.gs-ico.gs-phone { background: var(--brand-soft); color: var(--brand); }
.gs-ico.gs-customer { background: #eaf1fb; color: #2563a8; }
.gs-ico.gs-vendor { background: #fbeee6; color: #b5652b; }
.gs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-title {
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-money { flex: none; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.gs-money.pos { color: var(--brand); }
.gs-money.neg { color: var(--red); }
/* Mobile: the trial pill + search + avatar cannot share one 375px row without
   crushing the search to a sliver. Drop the search onto its own full-width
   second line; the pill and avatar keep the first line. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-search { order: 2; flex: 1 1 100%; max-width: none; }
}

/* ---------- date-range filter ---------- */
.date-range {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.date-range .dr-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.date-range input[type="date"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px; color: var(--ink); background: var(--card); min-height: 36px;
}
.date-range input[type="date"]:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft);
}
.date-range .dr-dash { color: var(--muted); }

/* ---------- undo-on-delete bar ---------- */
.undo-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  z-index: 3000; display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #eaf3ee; padding: 12px 14px 14px;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(12,26,20,.35);
  max-width: calc(100vw - 32px); font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease;
}
.undo-bar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.undo-bar .undo-msg { font-weight: 500; }
.undo-bar .undo-btn {
  flex: none; background: none; border: 0; color: var(--brand-2);
  font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 4px 6px;
  border-radius: 7px; white-space: nowrap;
}
.undo-bar .undo-btn:hover, .undo-bar .undo-btn:focus-visible { background: rgba(255,255,255,.1); }
.undo-bar .undo-prog {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--brand-2); border-radius: 0 0 12px 12px; transform-origin: left;
}
/* Lift above the mobile tab bar so it never hides behind it. */
body.has-tabbar .undo-bar { bottom: 78px; }
@media (prefers-reduced-motion: reduce) {
  .undo-bar { transition: opacity .2s ease; }
  .undo-bar .undo-prog { transition: none !important; }
}

/* ---------- tables (desktop) → cards (mobile) ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 600;
  padding: 0 12px 9px; border-bottom: 1px solid var(--line);
}
td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.t-right { text-align: right; }
.table-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 6px 6px; box-shadow: var(--shadow); overflow-x: auto;
}
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge.green { background: var(--brand-soft); color: var(--brand); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.grey { background: #eef1ef; color: var(--ink-2); }
.empty { text-align: center; padding: 42px 20px; color: var(--muted); font-size: 14px; }

#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 550; opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s; z-index: 90; box-shadow: var(--shadow);
  max-width: calc(100vw - 40px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- app shell: sidebar (desktop) / top bar (mobile) ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; flex: 0 0 248px; background: var(--ink); color: #cfe0d8;
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Desktop app-shell: the chrome (sidebar + topbar) is FIXED to the viewport and
   ONLY the content scrolls. Before this, the whole page scrolled AND the sidebar
   had its own scroll when its nav overflowed — two scroll regions that read as
   "the nav bar and the page both scroll". Mobile keeps normal body scroll +
   bottom tab bar (this block is desktop-only). */
@media (min-width: 901px) {
  html, body { overflow: hidden; }
  /* Subtract any top bar (e.g. the support-session banner sets --top-offset via
     shell.js) so the shell fits the visible area and the bottom is never
     clipped below the viewport. */
  .app { height: calc(100vh - var(--top-offset, 0px)); min-height: 0; overflow: hidden; }
  .sidebar { position: static; height: 100%; }
  .main-col { height: 100%; overflow: hidden; }
  .topbar { position: static; flex: none; }
  .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.modal-open .main { overflow: hidden; }

  /* Sell / Exchange = master-detail: a narrow phone-picker RAIL that stays put
     while the (much taller) buyer+payment form gets the room it needs. Equal
     columns left the picker short with dead space beside a cramped form; a
     sticky rail turns that gap into intentional structure and widens the form
     so its 2-up fields breathe. */
  .grid.sell-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; }
  .grid.sell-grid > .card:first-child { position: sticky; top: 0; align-self: start; }
}
.brand { padding: 6px 10px 18px; display: flex; gap: 10px; align-items: center; }
.brand img, .brand svg { border-radius: 8px; flex: none; }
.brand-mark { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-2); font-weight: 700; }
.brand-shop { color: #fff; font-size: 15.5px; font-weight: 650; line-height: 1.2; }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: #cfe0d8; text-decoration: none; font-size: 14px; font-weight: 500;
  border: none; background: none; width: 100%; text-align: left; cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; font-weight: 600; }
.nav-item .ur { margin-left: auto; font-size: 12.5px; color: rgba(255,255,255,.72); }
.nav-item.active .ur { color: rgba(255,255,255,.9); }
/* Duotone soft-depth icons: a low-opacity fill layer under a crisp line, plus a
   subtle drop-shadow so each glyph sits a hair above the surface. */
.nav-ic { flex: none; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.30)); }
.nav-ic .ic-soft { opacity: .30; transition: opacity .15s ease; }
.nav-item:hover .nav-ic .ic-soft { opacity: .42; }
.nav-item.active .nav-ic .ic-soft { opacity: .5; }
.nav-sep { height: 1px; background: rgba(255,255,255,.08); margin: 10px 12px; }
.sidebar-foot { margin-top: auto; padding: 12px 10px 0; font-size: 12px; color: #6f877c; }

/* Grouped sidebar (collapsible hubs) */
.nav-group { display: flex; flex-direction: column; }
.nav-group[hidden] { display: none; }
.nav-group-head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: #9fb4aa; font: inherit; font-weight: 700; font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; padding: 11px 12px 7px; border-radius: 9px;
}
.nav-group-head:hover { color: #e4f0ea; }
.nav-gi { width: 18px; height: 18px; flex: none; fill: none; stroke: #4cc98d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-gc { width: 13px; height: 13px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .16s ease; }
.nav-group.open .nav-gc { transform: rotate(90deg); }
.nav-group-body { display: none; flex-direction: column; gap: 3px; padding-left: 8px; margin: 0 0 4px; }
.nav-group.open .nav-group-body { display: flex; }
.nav-group-body .nav-item { font-size: 13.5px; padding: 8px 12px; }
.who { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.who-name { color: #fff; font-weight: 600; font-size: 13px; }
.who-role { font-size: 11px; color: var(--brand-2); text-transform: capitalize; }
.btn-reset {
  width: 100%; margin-top: 8px; padding: 9px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: #cfe0d8; font-size: 12.5px; cursor: pointer; min-height: 40px;
}
.btn-reset:hover { background: rgba(255,255,255,.13); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Centre the content column so a wide screen (or a zoomed-out window) frames it
   evenly instead of pinning it to the left with a dead gap on the right. */
.main { min-width: 0; padding: 22px 30px 60px; max-width: 1180px; width: 100%; margin-inline: auto; }
.lbl-narrow { display: none; }

/* Persistent topbar: trial pill on the left, profile menu on the right — so
   account controls and the trial notice live out of the nav, not inside it. */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 30px; min-height: 56px;
  background: var(--card, #fff); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 55;
}
.topbar-spacer { flex: 1; }
.profile { position: relative; flex: none; }
.profile-btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--brand); color: #fff;
  font-weight: 700; display: grid; place-items: center;
  transition: filter .12s, transform .12s;
}
.profile-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.profile-btn:focus-visible { outline: 3px solid var(--brand-2, #9fd3bd); outline-offset: 2px; }
.profile-ava { font-size: 14px; letter-spacing: .02em; }
.profile-menu {
  position: absolute; right: 0; top: 48px; min-width: 216px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(20,40,30,.16); padding: 6px; z-index: 70;
}
.profile-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.profile-name { font-weight: 650; font-size: 14px; color: var(--ink); }
.profile-role { font-size: 12px; color: var(--muted); text-transform: capitalize; margin-top: 1px; }
.profile-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer;
  font-size: 14px; color: var(--ink);
}
.profile-item:hover { background: var(--soft, #f1f5f3); }
.profile-item.danger { color: var(--red); }
@media (max-width: 900px) { .topbar { padding: 8px 16px; min-height: 50px; } }

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 24px; }
.page-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.section { margin-top: 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.section-head h2 { font-size: 16.5px; }
.section-head .hint { font-size: 13px; color: var(--muted); }

.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stat-value { font-size: 25px; font-weight: 680; letter-spacing: -.03em; margin-top: 6px; }
.stat-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.stat-value.pos { color: var(--brand); }
.stat-value.neg { color: var(--red); }

.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Labelled sub-groups inside one card (e.g. Reports "downloads": export + statements). */
.dl-group + .dl-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.dl-label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
/* A stat card that is also a link into its detail — looks tappable, lifts on hover. */
.kpi-link { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.kpi-link:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(12,26,20,.08); border-color: var(--brand-2); }
.kpi-link:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .kpi-link { transition: none; } .kpi-link:hover, .kpi-link:active { transform: none; } }
.search-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.search-bar input { flex: 1; min-width: 200px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: 13px; cursor: pointer; font-weight: 500; min-height: 40px;
  display: inline-flex; align-items: center;
}
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.callout {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--amber-soft); border: 1px solid #f0dfc2; font-size: 13.5px; color: #7a4a10;
}
.callout.info { background: var(--brand-soft); border-color: #c8e4d6; color: #0b5c3a; }

.model { font-weight: 600; }
.imei { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
tbody tr.clickable:hover { background: #fafcfb; cursor: pointer; }
.badge.pta { background: var(--brand-soft); color: var(--brand); }
.badge.nonpta { background: var(--amber-soft); color: var(--amber); }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -26px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--brand);
}
.tl-dot.grey { background: var(--muted); box-shadow: 0 0 0 2px var(--muted); }
.tl-title { font-weight: 650; font-size: 14.5px; }
.tl-date { font-size: 12.5px; color: var(--muted); }
.tl-body { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.tl-who { color: var(--brand); font-weight: 600; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; font-weight: 550; }

.dev-list { display: grid; gap: 10px; }
/* Trade lot picker: the whole stock is listed; cap it so the buyer/payment
   card stays reachable without scrolling the page (same idea as Sell on phones). */
#tradeRows { max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.dev-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer;
}
.dev-row:hover { border-color: var(--brand-2); background: #fafcfb; }
.dev-row.selected { border-color: var(--brand); background: var(--brand-soft); }
.dev-row .grow { flex: 1; min-width: 0; }

/* Designed empty state for the sell/exchange form panel (fills the right column
   invitingly before a phone is chosen). */
.pick-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 54px 20px; color: var(--muted); min-height: 300px; }
.pick-empty svg { color: var(--brand); opacity: .45; margin-bottom: 14px; }
.pick-empty-t { font-size: 16.5px; font-weight: 650; color: var(--ink); margin-bottom: 5px; }
.pick-empty-s { font-size: 13.5px; max-width: 250px; line-height: 1.55; }

/* Sell/Exchange end in a full-width submit button at the bottom-right — exactly
   where the floating action buttons sit. Hide the FABs on these two pages so the
   "Sale mukammal karein" / "Exchange record karein" button is never covered. */
body[data-route="#/sell"] .qr-fab,
body[data-route="#/sell"] .sticker-fab,
body[data-route="#/sell"] .asst-fab,
body[data-route="#/exchange"] .qr-fab,
body[data-route="#/exchange"] .sticker-fab,
body[data-route="#/exchange"] .asst-fab,
body[data-route="#/counter"] .qr-fab,
body[data-route="#/counter"] .sticker-fab,
body[data-route="#/counter"] .asst-fab,
body[data-route="#/insights"] .qr-fab,
body[data-route="#/insights"] .sticker-fab,
body[data-route="#/insights"] .asst-fab,
body[data-route="#/reports"] .qr-fab,
body[data-route="#/reports"] .sticker-fab,
body[data-route="#/reports"] .asst-fab,
body[data-route="#/display"] .qr-fab,
body[data-route="#/display"] .sticker-fab,
body[data-route="#/display"] .asst-fab,
body[data-route="#/pos"] .qr-fab,
body[data-route="#/pos"] .sticker-fab,
body[data-route="#/pos"] .asst-fab,
body[data-route="#/purchase"] .qr-fab,
body[data-route="#/purchase"] .sticker-fab,
body[data-route="#/purchase"] .asst-fab { display: none !important; }

/* ---- Items engine: purchase / cart lines ---- */
.pl-line { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.pl-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pl-grid .field label { font-size: 11.5px; }
.pl-grid input { min-width: 0; padding-left: 8px; padding-right: 8px; }
@media (max-width: 480px) { .pl-grid { grid-template-columns: repeat(2, 1fr); } }
.qty-ctl { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty-ctl button { width: 36px; border: 0; background: var(--soft, #f1f5f3); font: inherit; font-size: 18px; cursor: pointer; color: var(--ink); }
.qty-ctl input { width: 100%; min-width: 0; border: 0; text-align: center; border-radius: 0; }
.pick-row { border-bottom: 1px solid var(--line); border-radius: 0; }
.pick-row:last-child { border-bottom: 0; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12,26,20,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal {
  background: #fff; border-radius: 16px; max-width: 420px; width: 100%;
  max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
body.modal-open { overflow: hidden; }

/* Reusable detail-modal furniture (bank account, and future record details). */
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.detail-mono { width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.bank-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.bank-stat { background: var(--soft, #f6faf8); border: 1px solid var(--line); min-width: 0;
  border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.bank-stat-l { font-size: 11.5px; color: var(--muted); }
.bank-stat-v { font-size: 15px; font-weight: 700; letter-spacing: -.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .bank-stat-v { font-size: 13.5px; } .bank-stat { padding: 9px 9px; } }
.detail-line { display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.detail-line:last-child { border-bottom: 0; }

/* A clickable name inside a list row → opens that record's detail. */
.rowlink { cursor: pointer; }
.rowlink:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }

/* "aur N phone — dhoondein" line under a search-first picker. */
.picker-more { padding: 8px 2px 0; font-size: 12.5px; min-height: 8px; }

/* Invoices archive rows (Settings → Purani bills). */
.inv-row { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer; padding: 12px 6px; }
.inv-row:last-child { border-bottom: 0; }
.inv-row:hover { background: var(--soft, #f6faf8); }
.inv-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-row-no { font-weight: 650; font-size: 14.5px; }
.inv-row-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; white-space: nowrap; }
.inv-row-amt { font-weight: 650; font-size: 14.5px; }
.inv-row-date { font-size: 12px; color: var(--muted); }
.inv-row-baqi { color: var(--amber, #b45309); }

/* Collapsed-by-default downloads disclosure — one line until you need it. */
.dl-card { background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.dl-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 10px; padding: 13px 16px; font-weight: 600; }
.dl-card > summary::-webkit-details-marker { display: none; }
.dl-card .dl-ico { font-size: 16px; flex: none; }
.dl-card .dl-title { font-size: 15px; }
.dl-card .dl-sub { color: var(--muted); font-size: 12.5px; font-weight: 400; margin-left: 2px; }
.dl-card .dl-chev { margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1;
  transition: transform .18s ease; }
.dl-card[open] .dl-chev { transform: rotate(90deg); }
.dl-card .dl-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.dl-card .dl-body > .dl-group:first-child { margin-top: 12px; }
@media (max-width: 560px) { .dl-card .dl-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .dl-card .dl-chev { transition: none; } }
.receipt-head { text-align: center; border-bottom: 1px dashed var(--line); padding-bottom: 14px; }
.receipt-head img { border-radius: 10px; margin-bottom: 8px; }
.receipt-head h3 { font-size: 17px; }
.receipt-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.receipt-rows { margin: 16px 0; }
.receipt-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; gap: 12px; }
.receipt-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 16px; }
.receipt-foot { text-align: center; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 14px; }

/* ---------- proper A5 sales invoice (screen modal + print) ---------- */
.modal.modal-wide { max-width: 680px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; max-height: 92vh; }
/* The invoice body scrolls inside the modal; the action bar stays pinned. */
.inv-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.inv { color: var(--ink); background: #fff; font-size: 13.5px; line-height: 1.5; }
.inv .num { font-variant-numeric: tabular-nums; }
.inv-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px;
  background: linear-gradient(180deg, var(--brand), #0b5f3c); color: #eafaf2;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-brandrow { display: flex; gap: 12px; align-items: center; min-width: 0; }
.inv-logo { width: 46px; height: 46px; border-radius: 11px; background: #fff; color: var(--brand);
  display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; overflow: hidden; }
.inv-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.inv-shop { font-weight: 800; font-size: 20px; color: #fff; line-height: 1.1; }
.inv-shop-sub { font-size: 12px; color: #bfe6d3; margin-top: 2px; }
.inv-head-r { text-align: right; flex: none; }
.inv-doc { font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.inv-meta { margin-top: 6px; font-size: 12px; color: #cdeadb; }
.inv-meta b { color: #fff; }
.inv-strip { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1px; background: var(--line); }
.inv-strip > div { background: #fff; padding: 12px 22px; }
.inv-cap { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.inv-name { font-weight: 700; font-size: 15px; }
.inv-line { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.inv-pill { display: inline-block; background: var(--brand-soft); color: #0b5f3c; font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.inv-items { padding: 2px 22px 0; }
.inv table { width: 100%; border-collapse: collapse; }
.inv thead th { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--ink); }
.inv th.r, .inv td.r { text-align: right; }
.inv tbody td { padding: 12px 8px; border-bottom: 1px solid #eaf0ec; vertical-align: top; font-size: 13.5px; }
.inv-dt { font-weight: 600; }
.inv-dm { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.inv-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--brand-soft); color: #0b5f3c; margin-right: 4px; }
.inv-tag.warn { background: #fdf0e3; color: #a15c00; }
.inv tr.trade td { background: #f6faf8; }
.inv tr.trade .inv-dt, .inv tr.trade .inv-amt { color: #0b5f3c; }
.inv-amt { font-weight: 600; }
.inv-totwrap { display: flex; justify-content: flex-end; padding: 12px 22px 2px; }
.inv-tot { width: min(320px, 100%); }
.inv-totline { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); }
.inv-totline .v { font-weight: 600; color: var(--ink); }
.inv-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px;
  padding: 11px 13px; border-radius: 9px; background: var(--brand); color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-grand .l { font-weight: 600; font-size: 13.5px; }
.inv-grand .v { font-weight: 800; font-size: 22px; }
.inv-paid { display: flex; justify-content: space-between; padding: 8px 0 2px; margin-top: 6px; border-top: 1px dashed var(--line); font-size: 13.5px; }
.inv-paid .v { font-weight: 700; color: #0b5f3c; }
.inv-bal { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.inv-bal .v { font-weight: 800; color: var(--red); }
.inv-terms { padding: 14px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f6faf8; }
.inv-terms-h { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.inv-terms ul { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--ink-2); line-height: 1.7; columns: 2; column-gap: 26px; }
.inv-terms li { margin-bottom: 2px; break-inside: avoid; }
.inv-foot { text-align: center; padding: 14px 22px; }
.inv-thanks { font-weight: 700; font-size: 14px; }
.inv-foot-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.inv-brandtag { text-align: center; font-size: 10px; color: var(--muted); padding: 6px 0 12px; }
.inv-brandtag b { color: #0b5f3c; }
.inv-actions { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line);
  flex: none; background: #fff; }
@media (max-width: 560px) {
  .inv-strip { grid-template-columns: 1fr; }
  .inv-terms ul { columns: 1; }
  .inv-head { flex-direction: column; gap: 10px; }
  .inv-head-r { text-align: left; }
}

/* Trial notice — a compact pill in the topbar (light surface), not in the nav. */
.trial-banner {
  margin: 0; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; line-height: 1.3;
  background: #fff6e9; color: #92400e; border: 1px solid #fde3bd;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
}
.trial-banner strong { color: #7c3208; }
.trial-banner.slim { border-radius: 999px; }
.trial-banner.urgent { background: #fdecea; color: var(--red); border-color: #f6c9c4; }
.trial-banner.urgent strong { color: var(--red); }
@media (max-width: 900px) {
  /* Keep the trial pill to ONE line — it was wrapping to three and eating a
     third of the header. */
  .trial-banner { font-size: 11.5px; padding: 5px 11px; white-space: nowrap; flex: none; }
  .trial-banner br { display: none; }
  .trial-banner span:not(.ur) { display: inline; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; }
  /* One less floating button on a small screen: the sticker/print action lives
     on the Stock page, so it doesn't need to hover over every screen here. */
  .sticker-fab { display: none !important; }
}

/* ---------- searchable select ---------- */
.ss { position: relative; }
.ss-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 11px 13px; font: inherit; font-size: 15px;
  text-align: left; color: var(--ink); background: #fff; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; touch-action: manipulation;
}
.ss-btn:hover { border-color: var(--brand-2); }
.ss-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ss-btn svg { flex: none; color: var(--muted); }
.ss-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-val.ss-placeholder { color: var(--muted); }
.ss-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(12,26,20,.18); padding: 8px; max-width: 100%;
}
.ss-search {
  width: 100%; min-height: 44px; margin-bottom: 6px; font-size: 16px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
}
.ss-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ss-opt {
  display: block; width: 100%; min-height: 44px; padding: 11px 12px; font: inherit; font-size: 15px;
  text-align: left; background: none; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--ink); touch-action: manipulation;
}
.ss-opt:hover { background: var(--brand-soft); }
.ss-opt.sel { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.ss-empty { padding: 14px 12px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- brand breakdown (stock by brand) ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.brand-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  cursor: pointer; text-align: left; font: inherit; min-height: 62px; touch-action: manipulation;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.brand-tile:hover { border-color: var(--brand-2); background: #fafcfb; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(12,26,20,.07); }
.brand-tile:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .brand-tile { transition: border-color .15s ease, background .15s ease; } .brand-tile:hover, .brand-tile:active { transform: none; box-shadow: none; } }
.brand-tile .bt-name { font-weight: 620; font-size: 14.5px; }
.brand-tile .bt-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.brand-tile .bt-count {
  min-width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  border-radius: 9px; background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

.net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: var(--red); color: #fff; text-align: center;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; display: none;
}
.net-banner.show { display: block; }

.fieldset-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  font-weight: 650; margin: 22px 0 12px; grid-column: 1 / -1;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.fieldset-title:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* In-page invoice printing: hidden on screen, the ONLY thing on paper. */
#print-invoice { display: none; }

@page { margin: 4mm; }
@media print {
  html, body { width: auto; margin: 0; padding: 0; }
  body.printing-invoice > * { display: none !important; }
  body.printing-invoice > #print-invoice { display: block !important; }
  .sidebar, .quick-actions, .no-print, .search-bar, .chips, .net-banner { display: none !important; }
  .modal-backdrop { position: static; background: none; padding: 0; }
  .modal { box-shadow: none; max-width: 100%; }
  body { background: #fff; }
  /* A many-phone wholesale bill flows across pages: keep each row whole and
     repeat the column header on every page. */
  #print-invoice .inv-items table { break-inside: auto; }
  #print-invoice .inv-items thead { display: table-header-group; }
  #print-invoice .inv-items tr { break-inside: avoid; page-break-inside: avoid; }
  #print-invoice .inv-totwrap, #print-invoice .inv-terms, #print-invoice .inv-foot { break-inside: avoid; }
  /* Small sale → A5 (half A4): keep the receipt within A5 width and tighten it a
     touch so it reads as a compact slip, not a stretched page. */
  body.print-half #print-invoice > div { max-width: 138mm; }
  body.print-half #print-invoice .inv { font-size: 12px; }
  body.print-half #print-invoice .inv-head { margin-bottom: 8px; }
}

@media (max-width: 900px) {
  /* The page body must never scroll sideways — wide content (tables, etc.) has
     its own scroll container. `clip` (not `hidden`) enforces this without
     creating a scroll box that would break the sticky topbar. Catches the odd
     few-px spill so no screen shows a faint horizontal jiggle. */
  html, body { overflow-x: clip; }
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 50;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 14px 12px; overflow: visible;
  }
  .brand { order: 1; flex: 1; min-width: 0; padding: 0; }
  .brand-shop { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-mark { display: none; }
  .sidebar-foot { display: flex; order: 2; flex: none; align-items: center; gap: 7px; margin: 0; padding: 0; }
  .who { padding: 5px 9px; border-radius: 999px; }
  .who-name { display: none; }
  .btn-reset { width: auto; margin: 0; padding: 9px 12px; font-size: 12.5px; }
  .lbl-wide { display: none; }
  .lbl-narrow { display: inline; }
  /* The old horizontal-scroll strip of 15 nav items was the single densest thing
     on a phone. Navigation on mobile is the bottom tab bar (daily four) + the
     "Aur" sheet (everything else, now with icons). So the sidebar collapses to a
     compact brand-only header, and the strip is gone. The .nav-item elements
     stay in the DOM (hidden) so the "Aur" sheet can still read them. */
  .nav-list { display: none; }
  .sidebar { padding: 9px 14px; box-shadow: 0 1px 0 rgba(255,255,255,.04); }
  .main { padding: 18px 16px 64px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3, .g2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
  .stat-value { font-size: 22px; }
  .page-head h1 { font-size: 22px; }
  .dev-list { max-height: none; }
}

@media (max-width: 720px) {
  /* !important because several modals set grid-template-columns inline, and
     an inline 2-column layout beats a stylesheet rule — leaving those forms
     cramped into two 134px columns on a 375px phone. Author intent for
     desktop is fine; it must never survive to a phone. */
  .form-grid { grid-template-columns: 1fr !important; }
  .table-wrap { padding: 10px; overflow-x: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--card);
  }
  .table-wrap tr:last-child { margin-bottom: 0; }
  .table-wrap td {
    border: none; padding: 5px 0; font-size: 14px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    text-align: right;
  }
  .table-wrap td::before {
    content: attr(data-label); color: var(--muted); font-size: 12.5px;
    font-weight: 600; text-align: left; flex: none;
  }
  .table-wrap td:first-child {
    display: block; text-align: left; padding: 0 0 9px; margin-bottom: 7px;
    border-bottom: 1px solid var(--line); font-weight: 600;
  }
  .table-wrap td:first-child::before { display: none; }
  .table-wrap td:empty { display: none; }
}

/* ---------- barcode scanner ---------- */
.scan-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #000; }
.scan-wrap video {
  width: 100%; max-height: 46vh; display: block;
  /* contain, not cover: the shopkeeper must see exactly what the decoder
     sees. Cover hides the edges of the frame and they aim at the wrong
     place. */
  object-fit: contain;
}
/* UNIVERSAL scan frame — one shape for both a wide IMEI barcode AND a square
   Munshi/box QR. A near-square window with corner brackets is what every
   scanner app uses precisely because it fits both: a 1D barcode sits across
   the middle (the red aim line guides it), a 2D QR fills the box. The decoder
   reads whatever lands inside, so the shop never has to think about "type". */
.scan-frame {
  position: absolute; inset: 22% 16%; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.42);
  /* four corner brackets, drawn with layered gradients (no extra elements) */
  --bk: rgba(255,255,255,.95); --bl: 26px; --bw: 3px;
  background:
    linear-gradient(var(--bk),var(--bk)) left top/var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) left top/var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right top/var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right top/var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--bk),var(--bk)) left bottom/var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) left bottom/var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right bottom/var(--bl) var(--bw) no-repeat,
    linear-gradient(var(--bk),var(--bk)) right bottom/var(--bw) var(--bl) no-repeat;
}
.scan-frame::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%;
  height: 2px; background: rgba(255,80,80,.85); transform: translateY(-1px);
}
@media (prefers-reduced-motion: no-preference) {
  .scan-frame { animation: scanPulse 1.8s ease-in-out infinite; }
}
@keyframes scanPulse {
  0%, 100% { opacity: .95; }
  50% { opacity: .55; }
}
.scan-torch {
  position: absolute; right: 10px; bottom: 10px; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 19px; cursor: pointer; display: grid; place-items: center;
}
.scan-torch.on { background: var(--amber, #b8860b); }
.scan-log { min-height: 22px; margin-top: 10px; text-align: center; font-size: 14px; font-weight: 600; }
.scan-ok { color: var(--brand); }
.scan-bad { color: var(--red); }

.hint-text.ok   { color: var(--brand); font-weight: 600; }
.hint-text.warn { color: var(--amber); font-weight: 600; }
.hint-text.bad  { color: var(--red); font-weight: 600; }

/* ---------- bulk intake ---------- */
.bulk-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--card); }
.bulk-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bulk-n {
  min-width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  border-radius: 7px; background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.bulk-row-head .btn { margin-left: auto; }
.bulk-row-head .btn-icon { margin-left: auto; }
.bulk-row-head .btn + .btn-icon { margin-left: 0; }
.btn-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.btn-icon:hover { border-color: var(--red); color: var(--red); }

/* One clean, single-line action cluster for list rows: buttons + a borderless
   trash, all vertically centred and never wrapping onto a second line (the old
   bordered 34px box dropped below the row's button when the column was tight —
   the "delete icon not inline" bug). The trash is light and muted until hover. */
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.row-actions .btn-icon {
  width: 36px; height: 36px; border: 0; background: none; color: var(--muted);
  border-radius: 9px;
}
.row-actions .btn-icon:hover, .row-actions .btn-icon:focus-visible {
  color: var(--red); background: var(--red-soft); border: 0;
}
.bulk-grid { gap: 10px 12px; }
.bulk-grid .field { margin: 0; }
.bulk-grid label { font-size: 12px; }
.bulk-grid input, .bulk-grid select { min-height: 42px; }
.imei-note { display: block; margin-top: 3px; min-height: 15px; font-size: 11.5px; }
.bulk-total {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  padding: 12px 14px; margin-top: 4px; border-radius: 10px;
  background: #fafcfb; border: 1px solid var(--line); font-size: 13.5px;
}

/* ---------- assistant ---------- */
.asst-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(150deg, var(--brand), #0b6b3a);
  box-shadow: 0 10px 26px rgba(12,90,55,.34);
  font-size: 25px; line-height: 1; color: #fff;
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.asst-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,90,55,.4); }
.asst-fab.is-open { transform: scale(.92); }
.asst-fab:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }
.asst-panel {
  position: fixed; right: 18px; bottom: 84px; z-index: 91;
  width: min(380px, calc(100vw - 36px)); max-height: min(72vh, 580px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 22px 56px rgba(12,26,20,.24); overflow: hidden;
}
.asst-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px; color: #fff;
  background: linear-gradient(150deg, var(--brand), #0b6b3a);
}
.asst-head .btn-icon { color: #fff; opacity: .85; }
.asst-head .btn-icon:hover { opacity: 1; }
.asst-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 5px; }
.asst-title .ur { opacity: .9; font-weight: 600; }
.asst-sub { font-size: 11.5px; opacity: .85; margin-top: 2px; }
.asst-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.asst-msg { font-size: 13.8px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; max-width: 92%; }
.asst-msg.bot { background: var(--brand-soft); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.asst-msg.me  { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.asst-list { margin: 8px 0 0; padding-left: 18px; }
.asst-list li { margin-bottom: 5px; }
.asst-chips, .asst-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asst-chips .chip, .asst-act .chip { font-size: 12.5px; padding: 7px 11px; min-height: 34px; }
.asst-ask { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.asst-ask input { flex: 1; min-height: 42px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.asst-dots { display: inline-flex; gap: 4px; }
.asst-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .4; animation: asstb 1s infinite; }
.asst-dots i:nth-child(2) { animation-delay: .15s; }
.asst-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes asstb { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .asst-dots i { animation: none; }
  .asst-fab { transition: none; }
}
@media (max-width: 900px) {
  .asst-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 23px; }
  .asst-panel { left: 12px; right: 12px; width: auto; bottom: 74px; max-height: 66vh; }
  .asst-msg { max-width: 95%; }
  .bulk-grid { grid-template-columns: 1fr 1fr; }
  .bulk-total { font-size: 12.5px; gap: 10px; }
}

/* ---------- demo strip (demo build only) ---------- */
.demo-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; padding: 8px 14px;
  background: #0c1a14; color: #e8f5ee; font-size: 12.5px;
}
.demo-bar::-webkit-scrollbar { display: none; }
.demo-bar strong { color: #fff; letter-spacing: .06em; }
.demo-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.demo-bar .chip {
  background: rgba(255,255,255,.12); color: #e8f5ee; border-color: rgba(255,255,255,.22);
  font-size: 12px; padding: 6px 10px; min-height: 32px; text-decoration: none;
}
.demo-bar .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.demo-up-short { display: none; }
/* Phone-width: the strip can't hold the explainer + 4 chips on one 375px line
   without clipping off the right edge. Hide the long text, shorten the upgrade
   chip, and let the actions wrap instead of scrolling out of view. */
@media (max-width: 560px) {
  .demo-bar { flex-wrap: wrap; justify-content: center; overflow-x: visible; white-space: normal; gap: 6px 6px; }
  .demo-hint { display: none; }
  .demo-up-full { display: none; }
  .demo-up-short { display: inline; }
}
body.has-demo-bar .main { padding-bottom: 78px; }
body.has-demo-bar .asst-fab { bottom: 62px; }
body.has-demo-bar .asst-panel { bottom: 128px; }
@media (max-width: 900px) {
  .demo-bar { font-size: 11.5px; padding: 7px 10px; }
  body.has-demo-bar .asst-fab { bottom: 66px; }
  body.has-demo-bar .asst-panel { bottom: 124px; }
}

/* ---------- QR sticker sheets ---------- */
#print-stickers { display: none; }
.lbl-sheet { display: grid; grid-template-columns: repeat(4, 48mm); gap: 2mm; }
.lbl {
  width: 48mm; height: 26mm; display: flex; gap: 2mm; align-items: center;
  border: 0.3mm dashed #bbb; padding: 1.6mm; box-sizing: border-box; overflow: hidden;
  background: #fff; color: #111;
}
.lbl-qr { width: 20mm; height: 20mm; flex: none; }
.lbl-qr svg { width: 100%; height: 100%; display: block; }
.lbl-tx { min-width: 0; font-family: Arial, sans-serif; line-height: 1.25; }
.lbl-shop  { font-size: 2.6mm; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-model { font-size: 2.5mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-price { font-size: 3.4mm; font-weight: 700; letter-spacing: -.02em; margin: .3mm 0; }
.lbl-imei  { font-size: 2.3mm; font-variant-numeric: tabular-nums; }
.lbl-phone { font-size: 2.2mm; color: #444; }
.lbl-brand { font-size: 2mm; color: #0f5c3a; font-weight: 700; letter-spacing: .04em; margin-top: .5mm; }
@media print {
  body.printing-stickers > * { display: none !important; }
  body.printing-stickers > #print-stickers { display: block !important; }
}

/* ---------- accessory price tags (feature: accessory labels) ----------
 * A small price ticket for covers/chargers/protectors — no IMEI, no QR, just
 * name + price big enough to read across the counter, tiled for guillotine
 * cutting from plain A4 or label paper. */
#print-atags { display: none; }
.atag-sheet { display: grid; grid-template-columns: repeat(4, 48mm); gap: 2mm; }
.atag {
  width: 48mm; height: 24mm; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; border: 0.3mm dashed #bbb; padding: 1.6mm;
  box-sizing: border-box; overflow: hidden; background: #fff; color: #111;
  font-family: Arial, sans-serif;
}
.atag-shop  { font-size: 2.3mm; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.atag-name  { font-size: 2.9mm; font-weight: 600; line-height: 1.15; margin: .6mm 0; max-height: 7mm; overflow: hidden; }
.atag-price { font-size: 5mm; font-weight: 800; letter-spacing: -.02em; }
.atag-brand { font-size: 1.9mm; color: #0f5c3a; font-weight: 700; letter-spacing: .04em; margin-top: .5mm; }
@media print {
  body.printing-atags > * { display: none !important; }
  body.printing-atags > #print-atags { display: block !important; }
}

/* ---------- spec sheet: the back-of-phone card ----------
 *
 * Horizontal strip, 76x28mm — wide enough for a full model name and a price on
 * one line, short enough to sit on the back of a handset without covering the
 * camera. Sized in mm so it prints identically on every printer.
 *
 * Shop name on top and munshiai.pk at the bottom are deliberate: the card is a
 * price label AND a small advertisement, on every phone on every shelf.
 *
 * High contrast and large type throughout — this is read across a counter,
 * under a tube light, often by someone not wearing their glasses. */
.spec {
  width: 76mm; height: 28mm; box-sizing: border-box;
  border: .3mm solid #111; border-radius: 1.6mm;
  padding: 1.6mm 2.2mm; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #000; background: #fff; overflow: hidden;
}
.spec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 2mm;
  border-bottom: .25mm solid #ddd; padding-bottom: .8mm;
}
.spec-shop {
  font-size: 3.1mm; font-weight: 800; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Small, top right. A buyer scans for this one word and moves on. */
.spec-pta {
  font-size: 2.3mm; font-weight: 800; letter-spacing: .05em; white-space: nowrap;
  padding: .5mm 1.2mm; border-radius: .8mm;
}
.spec-pta.is-pta { background: #0f7a4d; color: #fff; }
.spec-pta.is-non { background: #b3261e; color: #fff; }
.spec-mid { flex: 1; display: flex; align-items: center; gap: 2mm; min-height: 0; }
.spec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* White behind the code always — a dark surface behind a QR is the usual
   reason a camera refuses to read it. */
.spec-qr { flex: none; width: 16mm; height: 16mm; background: #fff; }
.spec-qr svg { display: block; width: 100%; height: 100%; }
.spec-model {
  font-size: 4.2mm; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spec-bits { font-size: 2.7mm; color: #333; font-weight: 600; margin-top: .2mm; }
.spec-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2mm; margin-top: .6mm;
}
.spec-imei { font-size: 2.4mm; color: #444; font-variant-numeric: tabular-nums; }
.spec-price {
  font-size: 4.6mm; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spec-price.spec-ask { font-size: 2.9mm; font-weight: 700; color: #444; }
.spec-foot {
  text-align: center; font-size: 2.1mm; font-weight: 700; letter-spacing: .08em;
  color: #0f5c3a; border-top: .25mm solid #eee; padding-top: .6mm;
}

.spec-sheet { display: flex; flex-wrap: wrap; gap: 3mm; padding: 8mm; background: #fff; }
/* On screen the card is scaled to FIT, never blindly enlarged.
 *
 * The first version used transform: scale(1.5). A transform does not change
 * layout size, so the container's overflow knew nothing about it: on a 375px
 * phone the card was clipped on both sides and the PTA badge — the one thing
 * a buyer looks for — was off-screen entirely. The wrapper now carries the
 * SCALED dimensions (set in JS) so the box is honest about how big it is. */
.spec-preview { display: flex; justify-content: center; background: #f3f6f4;
  border-radius: 12px; padding: 16px 10px; overflow: hidden; }
.spec-fit { transform-origin: top left; }
.spec-fit > .spec { margin: 0; }

/* A filtered report, printed. Save-as-PDF turns this into the file a
   shopkeeper sends to his accountant. */
.exp-print { padding: 10mm; font-family: system-ui, sans-serif; color: #000; }
.exp-print h1 { font-size: 6mm; margin: 0 0 1mm; }
.exp-print > p { font-size: 3.2mm; color: #444; margin: 0 0 5mm; }
.exp-print table { width: 100%; border-collapse: collapse; font-size: 2.9mm; }
.exp-print th, .exp-print td {
  border: .2mm solid #bbb; padding: 1.2mm 1.6mm; text-align: left;
  word-break: break-word;
}
.exp-print th { background: #f0f4f2; font-weight: 700; }
.exp-print tr { break-inside: avoid; page-break-inside: avoid; }
.exp-foot { text-align: center; font-size: 2.6mm; color: #0f5c3a; font-weight: 700;
  letter-spacing: .08em; margin-top: 6mm; }

@media print {
  body.printing-specs > * { display: none !important; }
  body.printing-specs > #print-specs { display: block !important; }
  body.printing-export > * { display: none !important; }
  body.printing-export > #print-export { display: block !important; }
  .spec { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- slim trial banner ---------- */
.trial-banner.slim {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; font-size: 12px;
}

/* ---------- mobile: calmer first view ---------- */
@media (max-width: 640px) {
  .main { padding: 14px 12px 24px; }
  .page-head { margin-bottom: 12px; }
  .page-head h1 { font-size: 20px; }
  .page-head p { font-size: 12.5px; }
  .grid.g4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 12px 13px; }
  .stat-value { font-size: 19px; margin-top: 3px; }
  .stat-label { font-size: 11px; }
  .stat-sub { font-size: 10.5px; margin-top: 2px; }
  .section { margin-top: 16px; }
  .brand-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .brand-tile { min-height: 52px; padding: 9px 11px; }
  .brand-tile .bt-name { font-size: 13px; }
  .brand-tile .bt-sub { font-size: 10.5px; }
  .quick-actions .btn { padding: 10px 13px; font-size: 13px; }
  /* long tables scroll inside themselves instead of stretching the page */
  .table-wrap { max-height: 46vh; overflow-y: auto; }
}

/* bulk intake: a phone without prices is unmissable */
.bulk-grid input.need-price {
  border-color: var(--amber, #b8860b);
  background: #fffaf0;
}

/* ---- Scan-or-type fork (Buy). Two big targets, no hunting. ---- */
.pick-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 18px 16px; min-height: 116px;
  background: var(--surface, #fff); border: 1.5px solid var(--line);
  border-radius: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pick:hover:not(:disabled), .pick:focus-visible {
  border-color: var(--brand); box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.pick:disabled { cursor: not-allowed; }
.pick-ico { font-size: 24px; line-height: 1; }
.pick-t { font-weight: 650; font-size: 15.5px; }
.pick-s { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 560px) {
  .pick-row { grid-template-columns: 1fr; }
  .pick { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .pick-ico { margin-right: 10px; }
  .pick-t { flex: 1; }
  .pick-s { flex-basis: 100%; }
}

/* The QR generator emits a hard width="320" attribute. Left alone it spills
   past the modal on a phone and the code gets clipped — a clipped QR does
   not scan, which is the one thing this feature must never do. */
.qr-box svg { width: 100%; height: auto; display: block; }

/* ---- QR hub: sits directly above the assistant, same right edge ---- */
.qr-fab {
  position: fixed; right: 18px; bottom: 84px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: #1f3a5f; color: #fff;   /* solid blue so scan reads clearly, not white-on-white */
  border: 0;
  box-shadow: 0 8px 22px rgba(12,26,20,.22);
  font-size: 26px; line-height: 1;
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease;
}
.qr-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(12,26,20,.22); }
.qr-fab:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }
body.asst-open .qr-fab { opacity: 0; pointer-events: none; }
body.has-demo-bar .qr-fab { bottom: 128px; }
@media (max-width: 900px) {
  .qr-fab { right: 14px; bottom: 76px; width: 50px; height: 50px; font-size: 24px; }
  body.has-demo-bar .qr-fab { bottom: 124px; }
}
@media (prefers-reduced-motion: reduce) { .qr-fab { transition: none; } }

/* Both floating buttons carry drawn marks rather than emoji: emoji render
   differently on every phone and never match the brand. */
.fab-ico { width: 26px; height: 26px; display: block; }
.asst-fab .fab-ico { width: 27px; height: 27px; }
@media (max-width: 900px) {
  .fab-ico { width: 24px; height: 24px; }
  .asst-fab .fab-ico { width: 25px; height: 25px; }
}

/* ---- Live focus meter. On a fixed-focus webcam the barcode is unreadable
   until the box sits at the lens's focus distance, and people move CLOSER,
   which is backwards. A number that peaks is easier to act on than advice. ---- */
.focus-bar { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12.5px; }
.focus-label { color: var(--muted); flex: none; }
.focus-track {
  flex: 1; height: 7px; border-radius: 99px; background: var(--line, #e2e8e4);
  overflow: hidden; display: block;
}
.focus-track i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .18s ease, background .18s ease; }
.focus-track i.bad  { background: var(--red, #e24b4a); }
.focus-track i.mid  { background: var(--amber, #ef9f27); }
.focus-track i.good { background: var(--brand, #0f7a4d); }
.focus-word { flex: none; min-width: 132px; text-align: right; font-weight: 600; color: var(--ink-2, #3d5148); }
@media (max-width: 480px) { .focus-word { min-width: 0; font-size: 11.5px; } }

.zoom-bar { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12.5px; }
.zoom-bar input[type="range"] { flex: 1; min-width: 0; }

/* ---- Bulk lot rate ---- */
.lot-rate {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  background: var(--surface, #fff);
}
.lot-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.lot-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.lot-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 560px) { .lot-fields { grid-template-columns: 1fr; } }

/* ---- Bulk lot list: one line per scanned unit ---- */
.lot-head, .lot-item {
  /* six columns since dual-IMEI: n, IMEI, IMEI2, cost, ask, delete */
  display: grid; grid-template-columns: 26px minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 34px;
  gap: 8px; align-items: center;
}
.lot-head { font-size: 11.5px; color: var(--muted); padding: 0 0 6px; font-weight: 600; }
.lot-item { padding: 6px 0; border-bottom: 1px solid var(--line); position: relative; }
.lot-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lot-item input { min-height: 40px; }
.lot-imei { font-family: ui-monospace, monospace; letter-spacing: .01em; }
.lot-item.bad input.lot-imei, .lot-item.dup input.lot-imei { border-color: var(--red); }
.lot-note {
  grid-column: 2 / -1; font-size: 11.5px; color: var(--red); min-height: 0;
}
.lot-note:empty { display: none; }
@media (max-width: 620px) {
  /* Removing a scanned line is a destructive tap next to two number fields. */
  .lot-item .btn-icon { width: 44px; height: 44px; }
}
@media (max-width: 620px) {
  .lot-head { display: none; }
  .lot-item { grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr) 34px; row-gap: 6px; }
  /* phone layout: IMEIs side by side on row 1, prices pair up beneath */
  .lot-item .lot-price { grid-column: auto; }
  .lot-item .lot-price[data-f="cost"] { grid-column: 2 / 3; }
  .lot-item .lot-price[data-f="ask"] { grid-column: 3 / 4; }
}

/* ================= Demo front door =================
   Full-screen, mobile-first. Most shopkeepers meet this on a phone held in
   one hand, so the three choices are stacked thumb-height targets and the
   primary button sits within reach at the bottom. */
.dstart {
  position: fixed; inset: 0; z-index: 300; overflow-y: auto;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(15,122,77,.10), transparent 60%),
    #ffffff;
}
.dstart-inner { max-width: 760px; margin: 0 auto; padding: 26px 18px 44px; }

.dstart-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; font-size: 15px; }
.dstart-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--brand, #0f7a4d);
  position: relative; flex: none;
}
.dstart-mark::after {
  content: ""; position: absolute; left: 34%; top: 21%; width: 32%; height: 58%;
  background: #fff; border-radius: 2px;
}
.dstart-demo {
  margin-left: 7px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand, #0f7a4d);
  background: rgba(15,122,77,.1); padding: 3px 7px; border-radius: 99px;
}

.dstart h1 {
  font-size: clamp(25px, 7vw, 36px); line-height: 1.15; letter-spacing: -.03em;
  margin: 0 0 10px; font-weight: 680;
}
.dstart-sub { margin: 0 0 24px; color: var(--muted, #6f8279); font-size: 15.5px; max-width: 52ch; }

.dstart-cards { display: grid; gap: 12px; margin-bottom: 26px; }
@media (min-width: 720px) { .dstart-cards { grid-template-columns: repeat(3, 1fr); } }

.dcard {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  padding: 18px 16px 16px; border-radius: 15px;
  border: 1.5px solid var(--line, #e2e8e4); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dcard:hover { border-color: rgba(15,122,77,.45); }
.dcard.is-on {
  border-color: var(--brand, #0f7a4d); border-width: 2px; padding: 17px 15px 15px;
  box-shadow: 0 10px 30px rgba(12,90,55,.13);
}
.dcard:focus-visible { outline: 3px solid var(--brand-2, #12a366); outline-offset: 2px; }
.dcard-ico { width: 26px; height: 26px; color: var(--brand, #0f7a4d); margin-bottom: 6px; }
.dcard-ico svg { width: 100%; height: 100%; display: block; }
.dcard-t { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.dcard-en { font-size: 12px; color: var(--muted, #6f8279); }
.dcard-b { font-size: 13px; color: var(--ink-2, #3d5148); line-height: 1.5; margin-top: 5px; }

.dstart-form { border-top: 1px solid var(--line, #e2e8e4); padding-top: 22px; }
.dstart-fields { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 560px) { .dstart-fields { grid-template-columns: 1fr 1fr; } }
.dfield { display: grid; gap: 6px; }
.dfield span { font-size: 12.5px; font-weight: 600; color: var(--ink-2, #3d5148); }
.dfield input { min-height: 48px; font-size: 16px; }

.dstart-go {
  width: 100%; min-height: 54px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--brand, #0f7a4d); color: #fff; font-size: 16.5px; font-weight: 650;
  box-shadow: 0 10px 26px rgba(12,90,55,.28);
}
.dstart-go:hover { background: #0b6b3a; }
.dstart-go:focus-visible { outline: 3px solid var(--brand-2, #12a366); outline-offset: 3px; }
.dstart-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--muted, #6f8279); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) { .dcard { transition: none; } }

/* ---- Support-session banner ----
   Amber, not red: nothing is wrong, but nobody should be in any doubt about
   who is driving. Sits above everything and cannot be dismissed. */
.support-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 400;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; background: #9a5b12; color: #fff;
  font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.support-bar strong { letter-spacing: .06em; }
.support-bar button {
  margin-left: auto; background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 8px;
  padding: 6px 14px; min-height: 44px; font-weight: 600; cursor: pointer;
}
.support-bar button:hover { background: rgba(255,255,255,.26); }
/* padding-top is set from the banner's measured height in shell.js; these
   are only a first-paint fallback before that runs. */
body.has-support-bar { padding-top: 46px; }
@media (max-width: 620px) { body.has-support-bar { padding-top: 92px; } }

/* ---- Payment list with reversals ----
   A reversed payment is dimmed, never hidden: the point of a reversal is
   that both lines stay visible and the arithmetic still adds up. */
.pay-list { display: grid; gap: 2px; }
.pay-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.pay-row.is-reversed { opacity: .55; }
.pay-row.is-reversed .pay-amt { text-decoration: line-through; }
.pay-amt { font-weight: 650; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 620px) {
  /* Reversing a payment moves money. It should not be a 38px target on a
     phone held in one hand. */
  .pay-row .btn { min-height: 44px; padding: 0 14px; }
}

/* ===================== charts (Reports) ===================== */

.chart-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
.chart-grid > .chart-wide { grid-column: 1 / -1; }

.chart {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 14px;
}
.chart figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.chart-t { font-weight: 650; font-size: 15px; color: var(--ink); }
.chart-s { font-size: 12.5px; color: var(--muted); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: -4px 0 12px; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.chart-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.chart-box { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid line { stroke-width: 1; }
.chart-svg .ax { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-svg .hit { fill: transparent; cursor: crosshair; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: #fff; padding: 7px 10px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(12, 26, 20, .22);
}
.chart-tip b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.chart-empty, .chart-one {
  padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13.5px;
  background: var(--bg); border-radius: 10px;
}
.chart-one strong { display: block; font-size: 18px; color: var(--ink); margin-bottom: 3px; }

/* horizontal bars */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid; grid-template-columns: minmax(88px, 34%) 1fr auto;
  gap: 10px; align-items: center; cursor: default;
}
.bar-lab { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-tag { color: var(--amber); font-weight: 600; white-space: nowrap; }
.bar-track { background: var(--bg); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 0 4px 4px 0; transition: width .35s ease; }
.bar-val {
  font-size: 12.5px; font-weight: 650; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: right;
}

/* donut */
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut .hit-arc { cursor: pointer; }
.donut-n { font-size: 20px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.donut-s { font-size: 10px; fill: var(--muted); }
.donut-keys { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 8px; }
.donut-key { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 9px; align-items: center; font-size: 12.5px; }
.donut-key i { width: 10px; height: 10px; border-radius: 3px; }
.donut-key .k-name { color: var(--ink-2); }
.donut-key .k-val { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-key .k-pct { color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .chart-grid { grid-template-columns: 1fr; }
  .chart { padding: 14px 14px 12px; }
  .bar-row { grid-template-columns: minmax(76px, 40%) 1fr auto; }
  /* Both floating buttons sit over the bottom of the page; the last primary
     action on a screen must never hide under them. */
  .main { padding-bottom: 132px; }
  body.has-demo-bar .main { padding-bottom: 168px; }
  /* A tapped phone in Sell/Exchange must not push the form off-screen. Capped
     with momentum scroll so the list glides, and a touch shorter so the next
     step peeks below — hinting there's more without a second scroll surprise. */
  .dev-list { max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* ---- demo front door: step 1 (pick) and step 2 (who are you) ---- */

.dstart-narrow { max-width: 520px; }

/* The whole card is the button now, so it needs to read as one. */
.dcard { cursor: pointer; }
.dcard-go {
  margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--brand, #0f7a4d);
}
.dcard:hover .dcard-go, .dcard:focus-visible .dcard-go { text-decoration: underline; }

.dstart-back {
  background: none; border: 0; padding: 0; margin-bottom: 16px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--muted, #6f8279);
}
.dstart-back:hover { color: var(--ink, #0c1a14); }

/* A quiet reminder of what they picked, so step 2 never feels unmoored. */
.dstart-chosen {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  padding: 12px 14px; border: 1px solid var(--line, #e2e8e4);
  border-radius: 12px; background: var(--brand-soft, #e8f4ee);
}
.dstart-chosen .dcard-ico { margin: 0; flex: none; }
.dstart-chosen .dcard-b { margin-top: 2px; }

.dstart-form { border-top: 0; padding-top: 0; }

/* Skipping USED to be an option, and 139 demo sessions produced only 18 phone
   numbers because of it. The class stays for older cached bundles; nothing
   renders it any more. */
.dstart-skip {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: inherit; color: var(--brand, #0f7a4d); text-decoration: underline;
}
.dstart-fine a { color: var(--brand, #0f7a4d); }

/* Why the number was rejected, next to the field rather than in a toast the
   visitor may have already scrolled past. */
.dstart-err {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 9px;
  background: rgba(200, 40, 40, .07); border: 1px solid rgba(200, 40, 40, .3);
  color: #a11d1d; font-size: 13.5px; line-height: 1.5;
}

/* The login page is a destination in its own right (app.munshiai.pk), so it
   answers the two questions a stranded user actually has: I forgot my PIN,
   and I don't have an account yet. */
.auth-help {
  margin: 18px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--muted, #6f8279); text-align: center;
}
.auth-help a, .auth-foot a { color: var(--brand, #0f7a4d); }

/* Privacy mode — hide the money, not the work. Blur is used rather than
   masking so the layout never shifts, and any single figure can be revealed
   by touching it (hover on a mouse, tap on a phone). */
body.privacy .num,
body.privacy .stat-value,
body.privacy .bar-val,
body.privacy .donut-n,
body.privacy .vx-num,
body.privacy .k-val {
  filter: blur(7px);
  transition: filter .12s ease;
  cursor: pointer;
}
body.privacy .num:hover, body.privacy .num:active, body.privacy .num:focus-within,
body.privacy .stat-value:hover, body.privacy .stat-value:active,
body.privacy .bar-val:hover, body.privacy .bar-val:active,
body.privacy .k-val:hover, body.privacy .k-val:active,
body.privacy .vx-num:hover, body.privacy .vx-num:active { filter: none; }
/* Inputs must stay readable — you cannot type into a blur. */
body.privacy input, body.privacy select, body.privacy textarea { filter: none !important; }
@media (prefers-reduced-motion: reduce) { body.privacy .num { transition: none; } }

.bulk-sum { font-weight: 600; }

/* ===================== mobile tab bar =====================
   Desktop keeps the full sidebar. On a phone the daily four live under the
   thumb and the 13-item strip disappears — it cost 21% of the screen to show
   three links. */
.tabbar { display: none; }

@media (max-width: 900px) {
  .tabbar {
    /* minmax(0,1fr) lets a long label (e.g. "Khareedein") ellipsize instead of
       forcing its column wider than 1fr, which used to push the bar ~8px past
       the screen and add a faint horizontal scroll to every page. */
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 14px rgba(12, 26, 20, .07);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 58px; padding: 7px 2px 8px;
    background: none; border: 0; cursor: pointer; font: inherit;
    color: var(--muted); text-decoration: none;
    font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .tab svg { width: 22px; height: 22px; display: block; }
  .tab span { line-height: 1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab.active { color: var(--brand); }
  .tab:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -3px; border-radius: 8px; }

  /* The horizontal link strip is what the tab bar replaces. */
  .nav-list { display: none; }
  .sidebar { padding: 8px 14px 9px; }

  /* Room for the bar, and keep the floating buttons above it. */
  body.has-tabbar .main { padding-bottom: 92px; }
  body.has-tabbar.has-demo-bar .main { padding-bottom: 128px; }
  body.has-tabbar .asst-fab { bottom: 76px; }
  body.has-tabbar .qr-fab { bottom: 138px; }
  body.has-tabbar.has-demo-bar .asst-fab { bottom: 118px; }
  body.has-tabbar.has-demo-bar .qr-fab { bottom: 180px; }
  body.has-tabbar .demo-bar { bottom: 60px; }
}

/* "Aur" sheet — everything the four tabs could not hold. */
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.more-item {
  display: flex; flex-direction: row; align-items: center; gap: 11px;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); text-decoration: none;
  min-height: 58px;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.more-item .nav-ic { width: 24px; height: 24px; color: var(--brand); }
.more-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-weight: 650; font-size: 14px; }
.more-item-txt span { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.more-item:hover, .more-item:active { background: var(--brand-soft); border-color: var(--brand-2); }
.more-item:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════════════════════
   Bol kar entry — the voice screen.

   A deliberate FOCUS MODE: a dark surface inside the same brand hue as the rest
   of the app. The contrast is what tells a shopkeeper this screen is different,
   without restyling anything else.

   Restraint is what makes it read as premium rather than gaudy: one glow, one
   accent, thin rules, generous space. Everything still obeys the shop-floor
   rules - 44px targets, high contrast, tabular money, and motion that a
   prefers-reduced-motion user never sees.
   ═══════════════════════════════════════════════════════════════════════════ */
.vx {
  --vx-bg:      #071310;
  --vx-surface: #0d1f19;
  --vx-line:    #1b3a30;
  --vx-ink:     #e6f2ec;
  --vx-muted:   #7f9c92;
  --vx-glow:    #12a366;
  --vx-amber:   #f0b429;
  --vx-ask:     #5eb0e0;
  --vx-red:     #ff6b5e;

  background: var(--vx-bg);
  color: var(--vx-ink);
  border-radius: 18px;
  padding: 22px 18px 26px;
  margin: -4px 0 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .28);
}

.vx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vx-title { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; color: var(--vx-ink); }
.vx-sub { margin: 4px 0 0; color: var(--vx-muted); font-size: .9rem; }
.vx-badge {
  flex: none; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vx-glow); border: 1px solid var(--vx-line);
  padding: 4px 9px; border-radius: 999px;
}

/* the input, with a single soft glow behind it — the one flourish on the page */
.vx-stage { position: relative; margin-top: 18px; }
.vx-ring {
  position: absolute; inset: -30% -10% auto -10%; height: 190px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, rgba(18, 163, 102, .22), transparent 70%);
  filter: blur(18px);
}
.vx-label {
  position: relative; display: block; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vx-muted); margin-bottom: 8px;
}
.vx-input {
  position: relative; width: 100%; resize: vertical; min-height: 76px;
  background: var(--vx-surface); color: var(--vx-ink);
  border: 1px solid var(--vx-line); border-radius: 14px;
  padding: 14px 15px; font: inherit; font-size: 1.02rem; line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.vx-input::placeholder { color: #55736a; }
.vx-input:focus {
  outline: none; border-color: var(--vx-glow);
  box-shadow: 0 0 0 3px rgba(18, 163, 102, .16);
}

.vx-actions { position: relative; display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.vx .btn { min-height: 46px; border-radius: 12px; }
.vx-go { flex: 1 1 auto; }
.vx-mic {
  background: transparent; color: var(--vx-muted);
  border: 1px dashed var(--vx-line);
  display: inline-flex; align-items: center; gap: 8px;
}
.vx-mic[disabled] { opacity: .75; cursor: not-allowed; }
.vx-mic-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-muted); }

.vx-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vx-chip {
  background: transparent; color: var(--vx-muted); cursor: pointer;
  border: 1px solid var(--vx-line); border-radius: 999px;
  /* 44px even though these are only example-fillers: they are tappable, and a
     thumb in a shop does not know they are secondary. */
  padding: 7px 15px; font-size: .82rem; min-height: 44px;
}
.vx-chip:hover { color: var(--vx-ink); border-color: var(--vx-glow); }

/* ── the card ─────────────────────────────────────────────────────────────── */
.vx-out:empty { display: none; }
.vx-card {
  margin-top: 18px; background: var(--vx-surface);
  border: 1px solid var(--vx-line); border-left: 3px solid var(--vx-line);
  border-radius: 14px; padding: 16px;
  animation: vx-rise .22s ease-out;
}
.vx-card.is-ok      { border-left-color: var(--vx-glow); }
.vx-card.is-asking  { border-left-color: var(--vx-ask); }
.vx-card.is-blocked { border-left-color: var(--vx-red); }
.vx-oos             { border-left-color: var(--vx-amber); }
@keyframes vx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vx-heard { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.vx-heard-tag {
  flex: none; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vx-muted); border: 1px solid var(--vx-line);
  border-radius: 6px; padding: 3px 7px; margin-top: 2px;
}
.vx-heard p { margin: 0; color: var(--vx-muted); font-size: .93rem; line-height: 1.5; }

/* the read-back. Quiet rows, loud money — the thing being confirmed is a number. */
.vx-entry { border-top: 1px solid var(--vx-line); padding-top: 12px; }
.vx-entry-tag {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vx-glow); margin-bottom: 10px;
}
.vx-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid rgba(27, 58, 48, .55);
}
.vx-row:last-child { border-bottom: none; }
.vx-row span { color: var(--vx-muted); font-size: .88rem; }
.vx-row b { color: var(--vx-ink); font-weight: 600; text-align: right; }
.vx-row.is-money b { font-size: 1.06rem; }
.vx-row.is-baqi b { color: var(--vx-amber); }
.vx-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* an ASK is the loudest thing on the card, because it is the only thing that
   needs the shopkeeper's attention. */
.vx-ask {
  background: rgba(94, 176, 224, .08);
  border: 1px solid rgba(94, 176, 224, .28);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 14px;
}
.vx-ask-q { font-weight: 600; color: var(--vx-ask); margin-bottom: 4px; }
.vx-ask-why { margin: 0 0 10px; color: var(--vx-muted); font-size: .88rem; line-height: 1.5; }
.vx-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.vx-opt {
  background: rgba(94, 176, 224, .12); color: var(--vx-ink); cursor: pointer;
  border: 1px solid rgba(94, 176, 224, .4); border-radius: 10px;
  padding: 11px 14px; min-height: 44px; font: inherit; font-size: .9rem;
}
.vx-opt:hover { background: rgba(94, 176, 224, .22); }

.vx-hard {
  display: flex; gap: 10px; align-items: baseline;
  background: rgba(255, 107, 94, .08); border: 1px solid rgba(255, 107, 94, .3);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.vx-hard b { color: var(--vx-red); flex: none; font-size: .85rem; }
.vx-hard span { color: var(--vx-ink); font-size: .92rem; line-height: 1.5; }

.vx-warn { margin: 10px 0 0; color: var(--vx-amber); font-size: .85rem; }
.vx-dead-msg, .vx-oos-msg { margin: 0; color: var(--vx-ink); font-size: .96rem; line-height: 1.55; }

.vx-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.vx-foot .btn { flex: 1 1 auto; }
.vx-confirm { flex: 2 1 200px; }
.vx .btn.ghost { background: transparent; color: var(--vx-muted); border: 1px solid var(--vx-line); }

/* the waiting state: one thin sweep, no spinner */
.vx-thinking { position: relative; overflow: hidden; }
.vx-thinking p { margin: 0; color: var(--vx-muted); }
.vx-scan {
  position: absolute; top: 0; left: 0; height: 2px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--vx-glow), transparent);
  animation: vx-sweep 1.1s ease-in-out infinite;
}
@keyframes vx-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

@media (prefers-reduced-motion: reduce) {
  .vx-card { animation: none; }
  .vx-scan { animation: none; width: 100%; opacity: .5; }
}


/* ---- Scan action chooser: pick the flow, then scan ---- */
.scan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scan-act {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card, #fff); cursor: pointer; text-align: center;
  transition: border-color .12s, transform .06s;
}
.scan-act:hover { border-color: var(--brand); }
.scan-act:active { transform: scale(.97); }
.scan-act-ico { width: 30px; height: 30px; color: var(--brand); }
.scan-act-ico svg { width: 100%; height: 100%; }
.scan-act-t { font-weight: 650; font-size: 15px; }
.scan-act-sub { font-size: 11.5px; color: var(--muted); }


/* ---- Sub-page tabs (Stock <-> Stickers) ---- */
.subnav { display: flex; gap: 6px; margin: -6px 0 16px; flex-wrap: wrap; }
.subnav-tab {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); background: var(--soft, #f1f5f3); text-decoration: none;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.subnav-tab:hover { color: var(--ink); }
.subnav-tab.active { background: var(--brand); color: #fff; }

/* Sort control — one compact widget used on every list (ui.js sortControl). */
.sort-ctl { display: inline-flex; align-items: center; gap: 7px; flex-wrap: nowrap; }
.sort-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sort-lbl .ur { font-weight: 500; }
.sort-sel {
  height: 36px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card, #fff); color: var(--ink); font-size: 13.5px; font-weight: 500;
  max-width: 190px;
}
.sort-sel:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.sort-dir {
  height: 36px; min-width: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card, #fff); color: var(--ink); font-size: 13px; cursor: pointer;
  display: inline-grid; place-items: center; transition: background .12s, border-color .12s;
}
.sort-dir:hover { background: var(--soft, #f1f5f3); border-color: var(--brand); color: var(--brand); }
.sort-dir:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
/* When a list puts a search box and the sort control on one toolbar row. */
.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.list-toolbar .sort-ctl { margin-left: auto; }
@media (max-width: 560px) {
  .list-toolbar { gap: 8px; }
  .list-toolbar .sort-ctl { margin-left: 0; }
  /* A section heading with a sort control or action button can't fit both on
     one 375px row (the sort dropdown ran off the right edge on the Qistein
     list). Let the heading wrap so the control drops onto its own line. */
  .section-head { flex-wrap: wrap; row-gap: 8px; }
  .section-head > .sort-ctl { margin-left: auto; }
  /* Let the sort control (and any export+sort wrapper) shrink and wrap instead
     of pushing the row a few px past the screen edge. */
  .list-toolbar > * { min-width: 0; }
  .sort-ctl { flex-wrap: wrap; }
  .sort-sel { max-width: 128px; min-width: 0; }
}

/* Settings uses in-page tab buttons (no route change) — same pill look as
   .subnav, but they are <button>s that toggle panels rather than links. */
.settings-tabs { display: flex; gap: 6px; margin: -6px 0 18px; flex-wrap: wrap; }
.seg-tab {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); background: var(--soft, #f1f5f3); cursor: pointer;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.seg-tab:hover { color: var(--ink); }
.seg-tab.active { background: var(--brand); color: #fff; }


/* ---- Customers ledger ---- */
.cust-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.cust-row:last-child { border-bottom: none; }
.cust-row:hover { background: var(--soft, #f6f8f7); }
.cust-bal { font-weight: 650; font-size: 14px; white-space: nowrap; }
.cust-bal.pos, .cust-bal-big.pos { color: var(--brand); }
.cust-bal.neg, .cust-bal-big.neg { color: var(--red); }
.cust-bal.zero, .cust-bal-big.zero { color: var(--muted); }
.cust-bal-big { font-size: 26px; font-weight: 720; letter-spacing: -.02em; }
.cust-neg { color: var(--red); }

/* Coloured initials disc — turns the list into a contact book. Hue comes from
   the name (set inline as --ava-h); soft tinted fill, saturated text. */
.cust-ava {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  letter-spacing: .01em;
  background: hsl(var(--ava-h, 150) 46% 92%);
  color: hsl(var(--ava-h, 150) 55% 32%);
}
.cust-row-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cust-row-id .model { line-height: 1.2; }
.cust-row-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.row-del { opacity: .55; transition: opacity .12s; }
.cust-row:hover .row-del, .row-del:focus-visible { opacity: 1; }

/* Inline delete for a LOG / STATEMENT / ledger entry row — a light, borderless
   trash glyph that sits inline with the text and keeps the row's height, unlike
   the bulky bordered .btn-icon (which is for list-row actions). */
.ico-del {
  border: 0; background: none; padding: 4px; margin: -4px 0; cursor: pointer;
  color: var(--muted); opacity: .6; line-height: 0; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s, opacity .12s;
}
.ico-del:hover, .ico-del:focus-visible { color: var(--red); opacity: 1; }
.ico-edit:hover, .ico-edit:focus-visible { color: var(--brand); }
.ico-del svg { vertical-align: middle; }
.cust-bal-wrap { text-align: right; white-space: nowrap; }
.cust-bal-wrap .cust-bal { font-size: 16px; }
.cust-bal-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* Money summary band — two big semantic tiles (lena = green, dena = red).
   Shared by Customer / Khata / Amanat so the money story reads the same way
   on every page. */
.khata-band { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.khata-stat {
  background: var(--card, #fff); border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.khata-stat.pos { border-left-color: var(--brand); }
.khata-stat.neg { border-left-color: var(--red); }
.khata-stat.amber { border-left-color: var(--amber); }
.khata-stat-label { font-size: 12.5px; color: var(--muted); }
.khata-stat-value { font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.khata-stat.pos .khata-stat-value { color: var(--brand); }
.khata-stat.neg .khata-stat-value { color: var(--red); }
.khata-stat.amber .khata-stat-value { color: var(--amber); }
.khata-stat-sub { font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) { .khata-band { grid-template-columns: 1fr 1fr; } }

/* A summary tile that drills into the rows it counts. Renders as a button but
   keeps the .khata-stat look; a "· dekhein →" cue + hover lift say it's tappable. */
button.stat-link {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
button.stat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
button.stat-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button.stat-link .khata-stat-sub::after,
button.stat-link .stat-sub::after { content: " · dekhein →"; opacity: .75; }
/* The currently-applied filter tile reads as pressed. */
button.stat-link.active-filter { outline: 2px solid var(--brand); outline-offset: -1px; }
button.stat-link.active-filter .khata-stat-sub::after { content: ""; }
/* Brief highlight when a scroll-to lands on a section. */
.flash-focus { animation: flashFocus 1.2s ease; }
@keyframes flashFocus {
  0%, 20% { box-shadow: 0 0 0 3px var(--brand); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  button.stat-link { transition: none; }
  button.stat-link:hover { transform: none; }
  .flash-focus { animation: none; }
}

/* Customer detail: avatar header + balance hero with summary chips. */
.cust-detail-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cust-detail-id { display: flex; align-items: center; gap: 12px; }
.cust-detail-id .cust-ava { width: 46px; height: 46px; font-size: 16px; }
.cust-hero { border-left: 4px solid var(--line); }
.cust-hero.pos { border-left-color: var(--brand); }
.cust-hero.neg { border-left-color: var(--red); }
.cust-hero.zero { border-left-color: var(--muted); }
.cust-hero-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.cust-hero-chips { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0 4px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.mini-chip { display: flex; flex-direction: column; }
.mini-chip-v { font-size: 15px; font-weight: 650; }
.mini-chip-l { font-size: 11px; color: var(--muted); margin-top: 1px; }
.cust-hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cust-actions-primary { display: flex; gap: 10px; }
.cust-actions-primary .btn { flex: 1; }
.cust-actions-more { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cust-actions-more .cust-del-btn { margin-left: auto; }
/* Statement: quiet zebra so long ledgers stay readable. */
.statement tbody tr:nth-child(even) { background: var(--soft, #f6f8f7); }

/* "Aaj karein" priority strip — the few rows that need action today, lifted
   out of the long tables. Amber left-rail marks it as attention-needed. */
.prio-card { border-left: 4px solid var(--amber); }
.prio-list { display: flex; flex-direction: column; }
.prio-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.prio-row:last-child { border-bottom: none; }
.prio-main { min-width: 0; }
.prio-side { text-align: right; white-space: nowrap; }
.prio-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Amanat rows (phones out on consignment) ---- */
.amanat-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.amanat-row:last-child { border-bottom: none; }
.amanat-main { min-width: 0; }
.amanat-main .model { font-weight: 650; }
.amanat-side { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.amanat-amt { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.amanat-days { font-size: 12px; color: var(--muted); margin-top: 3px; }
.amanat-days.late { color: var(--amber); font-weight: 600; }
/* An overdue phone gets an amber wash so it reads at a glance in a long list. */
.amanat-row.overdue { background: #fff8ef; border-radius: 10px; padding-left: 12px;
  padding-right: 12px; border-bottom-color: transparent; }
.amanat-row.overdue + .amanat-row { border-top: 1px solid var(--line); }


/* ---- Invoice QR (same code as the phone sticker) ---- */
.receipt-qr { width: 96px; height: 96px; margin: 8px auto 0; }
.receipt-qr svg { width: 100%; height: 100%; display: block; }
.receipt-qr-cap { font-size: 9.5px; color: var(--muted); margin-top: 2px; }
.receipt-brand { font-size: 9.5px; color: var(--muted); letter-spacing: .03em; margin-top: 6px; opacity: .8; }


/* Stickers quick-access FAB — amber, stacked above the scan button, clearly a
   different tool (not another green/white circle). */
.sticker-fab {
  position: fixed; right: 18px; bottom: 150px; z-index: 90;   /* even 12px gap above the blue scan fab */
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: #f59e0b; color: #fff;
  box-shadow: 0 8px 22px rgba(120,70,0,.24);
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease;
}
.sticker-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(120,70,0,.3); }
.sticker-fab:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; }
body.asst-open .sticker-fab { opacity: 0; pointer-events: none; }
body.has-demo-bar .sticker-fab { bottom: 194px; }
body.has-tabbar .sticker-fab { bottom: 204px; }
@media (max-width: 620px) {
  .sticker-fab { right: 14px; bottom: 138px; width: 50px; height: 50px; }
  body.has-demo-bar .sticker-fab { bottom: 186px; }
  body.has-tabbar .sticker-fab { bottom: 204px; }
}
@media (prefers-reduced-motion: reduce) { .sticker-fab { transition: none; } }

/* ---------- FAB stack (centralised, supersedes the per-FAB bottoms above) ----------
 *
 * The three floating buttons used to carry hardcoded `bottom` values duplicated
 * across every state (default / demo-bar / tab-bar / mobile) and combination.
 * Some combinations were missing, so the sticker and QR buttons overlapped on a
 * phone. This drives all three from ONE base offset + a fixed step: give each
 * FAB an index and the stack spaces itself, so they can never collide. Only the
 * base changes per state (to clear the tab bar / demo bar). !important is
 * deliberate — it neutralises the older scattered rules without deleting them. */
:root { --fab-b: 18px; --fab-step: 68px; }
.asst-fab   { --fab-i: 0; }
.qr-fab     { --fab-i: 1; }
.sticker-fab{ --fab-i: 2; }
.asst-fab, .qr-fab, .sticker-fab {
  bottom: calc(var(--fab-b) + var(--fab-i) * var(--fab-step)) !important;
  right: 18px !important;
}
body.has-demo-bar { --fab-b: 72px; }
@media (max-width: 900px) {
  :root { --fab-step: 62px; }
  .asst-fab, .qr-fab, .sticker-fab { right: 14px !important; }
  body.has-tabbar { --fab-b: 78px; }              /* clear the bottom tab bar */
  body.has-tabbar.has-demo-bar { --fab-b: 122px; } /* clear tab bar + demo strip */
}

/* Auto-hide the FAB stack while the user scrolls DOWN to read, so the buttons
   never cover cards or right-aligned actions; they slide back on scroll up or
   near the top. Toggled by body.fabs-hidden from shell.js — visual only. */
.asst-fab, .qr-fab, .sticker-fab { transition: opacity .2s ease, transform .22s ease; }
body.fabs-hidden .asst-fab,
body.fabs-hidden .qr-fab,
body.fabs-hidden .sticker-fab { opacity: 0; transform: translateY(170%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  body.fabs-hidden .asst-fab, body.fabs-hidden .qr-fab, body.fabs-hidden .sticker-fab { transition: none; }
}

/* ---------- cash denomination counter (register close) ---------- */
.cash-count { display: flex; flex-direction: column; gap: 6px; }
.cc-row { display: grid; grid-template-columns: 72px 16px 1fr 96px; align-items: center; gap: 8px; }
.cc-denom { font-weight: 600; font-size: 14px; color: var(--ink); }
.cc-x { color: var(--muted); text-align: center; }
.cc-qty {
  height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line);
  font-size: 15px; text-align: center; -webkit-appearance: none; background: var(--card, #fff); color: var(--ink);
}
.cc-qty:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.cc-amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.cc-total, .cc-diff {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px;
}
.cc-total strong { font-size: 20px; }
.cc-diff { margin-top: 4px; padding-top: 0; border-top: none; font-size: 13.5px; color: var(--muted); }

/* ---------- quotation line-item rows ---------- */
.q-row { display: grid; grid-template-columns: 1fr 52px 84px 78px 30px; align-items: center; gap: 6px; margin-bottom: 6px; }
.q-row input { height: 38px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; -webkit-appearance: none; background: var(--card, #fff); color: var(--ink); min-width: 0; }
.q-row .q-qty, .q-row .q-price { text-align: right; }
.q-row input:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.q-row .q-lt { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--muted); }
.q-row .q-del { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; }
@media (max-width: 560px) {
  .q-row { grid-template-columns: 1fr 44px 72px 24px; }
  .q-row .q-lt { grid-column: 1 / -1; text-align: right; margin-top: -2px; }
}

/* ---- Repairs / cheques status badges + tiny buttons (features 110/112) ---- */
.rep-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; vertical-align: middle; margin-left: 4px; line-height: 1.5;
}
.rep-badge.st-recv   { background: #eef2f7; color: #46566b; }
.rep-badge.st-prog   { background: #fff3d6; color: #8a5a00; }
.rep-badge.st-ready  { background: var(--brand-soft, #e7f8ee); color: var(--brand, #0b6b3a); }
.rep-badge.st-done   { background: #e9edf1; color: #6b7785; }
.rep-badge.st-ret    { background: #fde7e7; color: #b3261e; }
.rep-badge.ch-pending  { background: #fff3d6; color: #8a5a00; }
.rep-badge.ch-cleared  { background: var(--brand-soft, #e7f8ee); color: var(--brand, #0b6b3a); }
.rep-badge.ch-bounced  { background: #fde7e7; color: #b3261e; }
.rep-badge.ch-cancel   { background: #e9edf1; color: #6b7785; }
.btn-xs {
  padding: 4px 9px; font-size: 12px; border-radius: 7px; min-height: 30px;
  line-height: 1; white-space: nowrap;
}

/* ---- Used-phone agreement: signature lines on the printed doc ---- */
.inv-sign { display: flex; gap: 32px; margin: 26px 4px 6px; }
.inv-sign-box { flex: 1; }
.inv-sign-line { border-top: 1.5px solid #333; height: 0; margin-bottom: 6px; }
.inv-sign-cap { font-size: 12px; color: var(--muted, #6b7785); text-align: center; }

/* ---- Shop display mode: customer-facing rate board (#/display) ---- */
.disp-wrap { max-width: 1100px; margin: 0 auto; }
.disp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.disp-shop { font-size: 26px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 12px; }
.disp-tag { font-size: 14px; font-weight: 600; color: var(--brand); background: var(--brand-soft, #e7f8ee); padding: 3px 10px; border-radius: 999px; }
.disp-controls { display: flex; gap: 8px; align-items: center; }
.disp-controls input { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; min-width: 160px; }
.disp-group { margin-bottom: 22px; }
.disp-brand { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.disp-rows { display: grid; gap: 4px; }
.disp-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.disp-name { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disp-str { font-size: 18px; color: var(--muted); font-weight: 500; }
.disp-color { font-size: 13px; color: var(--muted); }
.disp-pta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.disp-pta.is-pta { background: #e7f8ee; color: #0f7a4d; }
.disp-pta.is-non { background: #fde7e7; color: #b3261e; }
.disp-used { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fff3d6; color: #8a5a00; }
.disp-price { font-size: 24px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.disp-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; }
@media (max-width: 560px) {
  .disp-shop { font-size: 21px; }
  .disp-name { font-size: 17px; }
  .disp-str { font-size: 15px; }
  .disp-price { font-size: 20px; }
  .disp-controls { flex-wrap: wrap; }
  .disp-controls input { min-width: 0; flex: 1 1 100%; order: 2; box-sizing: border-box; }
}

/* ==================== COUNTER PAGE (#/counter) ==================== */
.ctr-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.ctr-kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); }
.ctr-k { font-size:12px; color:var(--muted); font-weight:600; }
.ctr-v { font-size:21px; font-weight:800; letter-spacing:-.02em; margin-top:3px; }
.ctr-d { font-size:11.5px; color:var(--muted); opacity:.85; margin-top:1px; }
.ctr-kpi.pos .ctr-v { color:var(--brand); }
.ctr-kpi.neg .ctr-v { color:var(--red); }

.ctr-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }

.ctr-search { position:relative; margin-bottom:6px; }
.ctr-ico { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); }
.ctr-search input { width:100%; font:inherit; font-size:16px; padding:15px 15px 15px 44px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.ctr-search input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.ctr-kbd { position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px; background:var(--bg); }

.ctr-reslabel { font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); opacity:.8; margin:14px 4px 7px; }
.ctr-res { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.ctr-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); }
.ctr-row:last-child { border-bottom:0; }
.ctr-av { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--brand-soft); color:var(--brand); }
.ctr-av.cu { background:var(--amber-soft); color:var(--amber); }
.ctr-body { min-width:0; flex:1; }
.ctr-t { font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctr-s { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctr-money { font-weight:800; font-size:14.5px; white-space:nowrap; }
.ctr-money.owe { color:var(--red); }
.ctr-badge { font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--brand-soft); color:var(--brand); }
.ctr-badge.non { background:var(--red-soft); color:var(--red); }
.ctr-acts { flex:none; }
.ctr-empty { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:22px 16px; text-align:center; color:var(--muted); font-size:14px; }

.ctr-sec { font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); opacity:.8; margin:20px 4px 10px; }
.ctr-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ctr-tile { display:flex; align-items:center; gap:11px; text-align:left; font:inherit; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow); color:var(--ink); transition:transform .08s ease, border-color .08s; }
.ctr-tile:hover { border-color:var(--brand); transform:translateY(-1px); }
.ctr-ti { width:34px; height:34px; border-radius:10px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:none; font-size:17px; }
.ctr-tile b { font-size:14.5px; font-weight:700; display:block; }
.ctr-tile span span { font-size:11.5px; color:var(--muted); }

.ctr-side { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; position:sticky; top:16px; }
.ctr-sidehead { font-size:13px; font-weight:800; padding:13px 15px; border-bottom:1px solid var(--line); }
/* Counter POS bill (cart) — sits above the feed in the side column. */
.ctr-cart { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 4%, var(--card, #fff)); }
.ctr-cart-lines { padding: 8px 15px 2px; display: flex; flex-direction: column; gap: 6px; }
.ctr-cl { display: flex; align-items: center; gap: 6px; }
.ctr-cl-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; }
.ctr-cl-s { font-size: 11px; color: var(--muted); font-weight: 500; }
.ctr-cl-in { width: 78px; padding: 5px 7px; font-size: 13px; text-align: right; }
.ctr-cl-qty { width: 48px; }
.ctr-cl .ico-del { font-size: 18px; opacity: .8; }
.ctr-cart-total { display: flex; justify-content: space-between; padding: 8px 15px; font-weight: 800; font-size: 14px; border-top: 1px solid var(--line); margin-top: 6px; }
.ctr-cart-form { display: flex; flex-direction: column; gap: 6px; padding: 0 15px 13px; }
.ctr-cart-form input, .ctr-cart-form select { padding: 7px 9px; font-size: 13px; }
.ctr-cart-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ctr-cart, .ctr-cart-lines, .ctr-cart-form { max-width: 100%; min-width: 0; }
@media (max-width: 520px) {
  /* Phone: the item name takes its own line; price / qty / × share the next. */
  .ctr-cl { flex-wrap: wrap; }
  .ctr-cl-t { flex-basis: calc(100% - 30px); white-space: normal; }
  .ctr-cl-in { flex: 1 1 0; width: auto; min-width: 0; }
  .ctr-cl-qty { flex: 0 0 60px; }
}
.ctr-fr { display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--line); }
.ctr-fr:last-child { border-bottom:0; }
.ctr-fdot { width:8px; height:8px; border-radius:50%; background:var(--brand-2); flex:none; }
.ctr-ft { font-size:13px; font-weight:500; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctr-fm { font-size:13px; font-weight:700; white-space:nowrap; }

/* in-page overlay hosting a real screen — route stays #/counter */
.ctr-flow { position:fixed; inset:0; z-index:1200; background:rgba(12,26,20,.42); display:flex; justify-content:flex-end; }
.ctr-flow-panel { width:min(960px, 96vw); height:100%; background:var(--bg); box-shadow:-8px 0 40px rgba(0,0,0,.2); display:flex; flex-direction:column; animation:ctrSlide .18s ease; }
@keyframes ctrSlide { from { transform:translateX(24px); opacity:.6; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ctr-flow-panel{ animation:none; } }
.ctr-flow-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); flex:none; }
.ctr-flow-back { font:inherit; font-size:14px; font-weight:600; color:var(--brand); background:var(--brand-soft); border:0; border-radius:9px; padding:8px 13px; cursor:pointer; }
.ctr-flow-title { font-size:15px; font-weight:800; }
.ctr-flow-stay { margin-left:auto; font-size:10.5px; font-weight:700; color:var(--brand); background:var(--card); border:1px solid var(--brand-soft); padding:3px 8px; border-radius:999px; }
.ctr-flow-body { flex:1; overflow-y:auto; padding:18px; }
body.ctr-flow-open { overflow:hidden; }

@media (max-width:900px) {
  .ctr-strip { grid-template-columns:1fr 1fr; }
  .ctr-grid { grid-template-columns:minmax(0,1fr); }   /* minmax(0) — a wide POS bill must shrink, not push the page sideways */
  .ctr-side { min-width:0; max-width:100%; }
  .ctr-tiles { grid-template-columns:1fr 1fr; }
  .ctr-side { position:relative; top:0; }
  .ctr-flow { justify-content:center; }
  .ctr-flow-panel { width:100%; }
}

/* ==================== VIZ — calm charts for reporting (viz.js) ==================== */
.viz-chart { width: 100%; height: auto; display: block; }
.viz-spark { width: 100%; height: 28px; display: block; }
.viz-empty { color: var(--muted); font-size: 13px; padding: 18px 4px; text-align: center; }

/* KPI stat tiles */
.viz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.viz-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; box-shadow: var(--shadow); }
.viz-stat-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.viz-stat-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }
.viz-stat-s { font-size: 11.5px; color: var(--muted); opacity: .85; margin-top: 1px; }
.viz-stat-spark { margin-top: 8px; }

/* card that holds a chart — calm, roomy */
.viz-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.viz-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.viz-card-h h2 { font-size: 15.5px; font-weight: 700; margin: 0; }
.viz-card-h .viz-hint { font-size: 12px; color: var(--muted); font-weight: 500; }
.viz-card-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.viz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* horizontal bars */
.viz-hbars { display: flex; flex-direction: column; gap: 12px; }
.viz-hbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 5px; }
.viz-hbar-l { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-hbar-v { font-weight: 700; white-space: nowrap; }
.viz-hbar-track { height: 8px; border-radius: 6px; background: var(--brand-soft); overflow: hidden; }
.viz-hbar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand-2, #12a366), var(--brand)); }
.viz-hbar-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* vertical bars */
.viz-vbars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.viz-vbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.viz-vbar-val { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-vbar-col { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.viz-vbar-fill { width: 100%; border-radius: 7px 7px 3px 3px; background: var(--brand-soft); min-height: 3px; }
.viz-vbar-fill.hot { background: linear-gradient(180deg, var(--brand-2, #12a366), var(--brand)); }
.viz-vbar-lbl { font-size: 11px; color: var(--muted); }

/* donut */
.viz-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.viz-legend { display: flex; flex-direction: column; gap: 7px; min-width: 120px; flex: 1; }
.viz-leg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.viz-leg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.viz-leg-l { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-leg-v { font-weight: 700; color: var(--muted); }

@media (max-width: 640px) {
  .viz-stats { grid-template-columns: 1fr 1fr; }
  .viz-grid2 { grid-template-columns: 1fr; }
  .viz-vbars { height: 130px; }
}

/* Counter — owner "Aaj ka jaiza" glance (folded from the retired Dashboard) */
.ctr-jaiza { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ctr-jz { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; box-shadow: var(--shadow); min-width: 130px; }
.ctr-jz:hover { border-color: var(--brand); }
.ctr-jz-l { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ctr-jz-v { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ctr-jz-v.warn { color: var(--amber); }

/* ==================== AMBIENT BACKGROUND (ambient.js) ====================
 * Whisper Aurora always on + Soft Node Network on hero screens. A fixed layer
 * behind #app (which is lifted to z-index:1). Cards are opaque, so text stays
 * crisp; the motion only lives in the gaps. Calm by design — low opacity, slow. */
.app-amb { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.app-amb-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px; opacity: .40;
  -webkit-mask-image: radial-gradient(120% 90% at 72% 20%, #000, transparent 74%);
          mask-image: radial-gradient(120% 90% at 72% 20%, #000, transparent 74%);
}
.app-amb-blob { position: absolute; border-radius: 50%; filter: blur(66px); opacity: .26; }
.app-amb-blob.b1 { width: 440px; height: 440px; background: #34e39b; top: -140px; right: -90px; animation: ambDrift1 17s ease-in-out infinite alternate; }
.app-amb-blob.b2 { width: 380px; height: 380px; background: #0f7a4d; bottom: -170px; left: 140px; animation: ambDrift2 21s ease-in-out infinite alternate; }
.app-amb-blob.b3 { width: 300px; height: 300px; background: #8ecdb2; top: 46%; right: 26%; animation: ambDrift3 26s ease-in-out infinite alternate; }
@keyframes ambDrift1 { to { transform: translate(-42px, 40px) scale(1.10); } }
@keyframes ambDrift2 { to { transform: translate(40px, -32px) scale(1.08); } }
@keyframes ambDrift3 { to { transform: translate(-30px, -24px) scale(1.12); } }
.app-amb-nodes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.app-amb.nodes-on .app-amb-nodes { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .app-amb-blob { animation: none; } }

/* ==================== EXPORT PREVIEW (exports.js) ==================== */
.exp-prev-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.exp-prev-tablewrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.exp-prev-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exp-prev-table th { position: sticky; top: 0; background: var(--card); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.exp-prev-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; }
.exp-prev-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-prev-table td:first-child { white-space: nowrap; }   /* the date never wraps */
.exp-prev-table th.t-right, .exp-prev-table td.t-right { text-align: right; }
.exp-prev-table tr:last-child td { border-bottom: 0; }
.exp-prev-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
.exp-prev-actions .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .exp-prev-actions .btn { flex: 1 1 auto; } }
#print-export { display: none; }
.exp-print h2 { font-size: 18px; margin: 0 0 2px; }
.exp-print-sub { font-size: 12px; color: #555; margin-bottom: 12px; }
.exp-print table { width: 100%; border-collapse: collapse; font-size: 12px; }
.exp-print th, .exp-print td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; }
.exp-print th { background: #f0f4f2; }
.exp-print-foot { margin-top: 14px; font-size: 11px; color: #0f5c3a; font-weight: 700; }
@media print {
  body.printing-export > * { display: none !important; }
  body.printing-export > #print-export { display: block !important; }
}

/* ---- Shuruaat onboarding checklist (Counter, new shops) ---- */
.onb-card {
  background: linear-gradient(160deg, #ffffff, var(--brand-soft));
  border: 1px solid #cfe8dc; border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.onb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.onb-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.onb-title { font-size: 18px; margin: 3px 0 0; color: var(--ink); }
.onb-hide { border: none; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.onb-hide:hover { background: #ffffff; color: var(--ink); }
.onb-bar { height: 7px; border-radius: 99px; background: #d7ebe0; overflow: hidden; margin: 12px 0 6px; }
.onb-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width .4s cubic-bezier(.16,1,.3,1); }
.onb-count { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.onb-steps { display: flex; flex-direction: column; gap: 8px; }
.onb-step { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.onb-step.is-next { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.onb-step.is-done { opacity: .72; }
.onb-tick { flex: none; color: var(--muted); display: grid; place-items: center; }
.onb-step.is-done .onb-tick { color: var(--brand); }
.onb-txt { flex: 1; min-width: 0; }
.onb-t { font-weight: 700; font-size: 14px; color: var(--ink); }
.onb-step.is-done .onb-t { text-decoration: line-through; text-decoration-color: #b9cfc4; }
.onb-opt { font-weight: 600; color: var(--muted); font-size: 12px; }
.onb-d { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.onb-badge { flex: none; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 4px 9px; border-radius: 99px; }
.onb-step .btn-sm { flex: none; }
.onb-foot { font-size: 11.5px; color: var(--muted); margin-top: 11px; }
.onb-link { border: none; background: none; color: var(--brand); font-weight: 650; cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }
@media (max-width: 560px) {
  .onb-step { flex-wrap: wrap; }
  .onb-step .btn-sm, .onb-step .onb-badge { margin-left: 32px; }
}

/* ---- Activity log (Settings → owner) ---- */
.act-day { margin-bottom: 18px; }
.act-day-head { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin: 0 2px 8px; }
.act-list { display: flex; flex-direction: column; gap: 6px; }
.act-row { display: grid; grid-template-columns: 58px 1fr auto auto; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.act-row.is-reverted { opacity: .6; }
.act-when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.act-main { min-width: 0; }
.act-title { font-size: 14px; font-weight: 650; color: var(--ink); }
.act-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.act-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--line); color: var(--ink-2); }
.act-tag.act-paisa { background: #e8f4ee; color: #0f5c3a; }
.act-tag.act-khata { background: #fff2e0; color: #9a5a00; }
.act-tag.act-stock { background: #e7eefb; color: #1c3d7a; }
.act-amt { font-weight: 700; white-space: nowrap; }
.act-badge { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--line); padding: 1px 7px; border-radius: 99px; margin-left: 4px; }
.act-act { min-width: 0; }
@media (max-width: 560px) {
  .act-row { grid-template-columns: 1fr auto; grid-template-areas: "main amt" "meta act"; row-gap: 6px; }
  .act-when { display: none; }
  .act-main { grid-area: main; } .act-amt { grid-area: amt; } .act-act { grid-area: act; justify-self: end; }
}

.onb-tip { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: #fff8e6; border: 1px solid #f2e2b8; border-radius: 10px; padding: 9px 12px; }
.onb-tip a { color: var(--brand); font-weight: 650; }

/* Demo front door polish: two-card layout centred, eyebrow, try-list. */
.dstart-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--brand, #0f7a4d); }
@media (min-width: 720px) { .dstart-cards.two { grid-template-columns: repeat(2, 1fr); max-width: 680px; } }
.dcard { display: flex; flex-direction: column; text-align: left; }
.dcard-try { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line, #e2e8e4); font-size: 12.5px; color: var(--ink-2, #3d5148); line-height: 1.5; }
.dcard-try b { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6f8279); margin-bottom: 4px; }
.dcard-try span { display: block; padding-left: 14px; position: relative; margin: 2px 0; }
.dcard-try span::before { content: "•"; position: absolute; left: 2px; color: var(--brand, #0f7a4d); }
.dcard-go { margin-top: auto; padding-top: 10px; }

/* ---------- Phase 2: orders / buyers / labels (8 Sep 2026) ---------- */
/* Maal multi-select for label printing */
.sel-bar { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 8px 12px; background: var(--brand-soft); border: 1px solid #c8e4d6; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.sel-bar > span { flex: 1; }
.sel-box { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; margin-right: 8px; }
.sel-box.on { background: var(--brand); border-color: var(--brand); }
/* subnav tabs as buttons (buyers / warranty) */
button.subnav-tab { font: inherit; border: 0; background: transparent; cursor: pointer; }
/* order sheet lines on a phone: qty / item / rate stack */
@media (max-width: 480px) {
  .pl-grid[style*="80px"] { grid-template-columns: 1fr 1fr !important; }
  .pl-grid[style*="80px"] .field:nth-child(2) { grid-column: 1 / -1; order: -1; }
}