@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ============================================================================
   BusinessOS Lite — Qyverix identity
   "Precision Darkness. One accent. Warm off-white type."
   ============================================================================ */
:root{
  --bg:#050508; --surface:#0c0c15; --surface-2:#111120; --surface-3:#15151f;
  --border:rgba(184,150,80,.16); --border-strong:rgba(184,150,80,.32);
  --text:#f0ece0; --muted:#8a8a9a; --muted-2:#56566a;
  --primary:#c8a84b; --primary-d:#a98a33; --primary-l:rgba(200,168,75,.10); --primary-soft:rgba(200,168,75,.20);
  --gold-light:#e6c96e; --gold-glow:rgba(200,168,75,.18);
  --green:#34d399; --green-l:rgba(52,211,153,.12);
  --red:#f4796b; --red-l:rgba(244,121,107,.13);
  --amber:#fbbf24; --amber-l:rgba(251,191,36,.13);
  --blue:#1ecbc8; --blue-l:rgba(30,203,200,.12);
  --radius:14px; --radius-sm:9px;
  --shadow:0 2px 6px rgba(0,0,0,.5),0 10px 34px rgba(0,0,0,.35);
  --shadow-lg:0 18px 60px rgba(0,0,0,.6);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --caps:"Cinzel","Cormorant Garamond",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold-light)}
/* A name in a table that opens its own screen: reads as the row's heading
   first and a link second, so the list still scans as a list. */
a.link-strong{color:var(--text);font-weight:600}
a.link-strong:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.12;color:var(--text)}
img{max-width:100%}
::selection{background:var(--primary-d);color:#0a0a12}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(184,150,80,.22);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(184,150,80,.4)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ---- caps / eyebrow ---- */
.caps,.eyebrow{font-family:var(--caps);text-transform:uppercase;letter-spacing:.14em;font-weight:500}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 17px;border-radius:var(--radius-sm);
  border:1px solid transparent;font-family:var(--font);font-size:13.5px;font-weight:600;cursor:pointer;
  background:var(--surface-2);color:var(--text);transition:.18s var(--ease);white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#0a0a12;border-color:var(--primary)}
.btn-primary:hover{background:var(--gold-light);box-shadow:0 6px 22px var(--gold-glow)}
.btn-light{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.btn-light:hover{border-color:var(--primary);background:var(--surface-3);color:var(--gold-light)}
.btn-danger{background:transparent;color:var(--red);border-color:rgba(244,121,107,.4)}
.btn-danger:hover{background:var(--red-l)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--primary)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- Forms ---- */
.field{margin-bottom:15px}
.field label{display:block;font-family:var(--caps);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:500;color:var(--muted);margin-bottom:7px}
.input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);transition:.18s var(--ease)}
.input::placeholder,textarea::placeholder{color:var(--muted-2)}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c8a84b' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea{resize:vertical;min-height:66px}
.field-error{color:var(--red);font-size:12px;margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
.hint{font-size:12px;color:var(--muted-2)}
/* Section rule inside a long form modal (formModal type:'heading'). */
.form-section{font-family:var(--caps);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  color:var(--primary);margin:2px 0 13px;padding-top:15px;border-top:1px solid var(--border)}

/* ---- Badges ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.03em;
  font-family:var(--mono);border:1px solid transparent}
.badge-green{background:var(--green-l);color:var(--green);border-color:rgba(52,211,153,.25)}
.badge-red{background:var(--red-l);color:var(--red);border-color:rgba(244,121,107,.28)}
.badge-amber{background:var(--amber-l);color:var(--amber);border-color:rgba(251,191,36,.28)}
.badge-blue{background:var(--blue-l);color:var(--blue);border-color:rgba(30,203,200,.25)}
.badge-gray{background:rgba(255,255,255,.05);color:var(--muted);border-color:rgba(255,255,255,.08)}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px 22px}

/* ============================================================================
   AUTH
   ============================================================================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-aside{position:relative;overflow:hidden;padding:52px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(120% 90% at 80% 0%,rgba(200,168,75,.16),transparent 55%),linear-gradient(160deg,#0c0c14,#070709 70%);
  border-right:1px solid var(--border)}
.auth-aside::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 120%,rgba(200,168,75,.10),transparent);pointer-events:none}
.auth-aside h2{font-size:34px;line-height:1.12;margin-bottom:16px;font-weight:600}
.auth-aside p{color:var(--muted);font-size:15px;max-width:400px;line-height:1.7}
.auth-feats{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.auth-feats li{display:flex;gap:11px;align-items:center;color:var(--text);font-weight:500;font-size:14.5px}
.auth-feats li::before{content:"";font-family:var(--caps);display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:var(--primary-l);border:1px solid var(--border-strong);color:var(--primary);font-size:11px;font-weight:700}
.auth-feats li::before{content:"\2713"}
.auth-main{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--bg)}
.auth-box{width:100%;max-width:392px}
.auth-box .brand{font-family:var(--caps);font-size:20px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.auth-box .brand span{color:var(--primary)}
.auth-box h1{font-size:30px;margin-bottom:6px;font-weight:600}
.auth-box .sub{color:var(--muted);margin-bottom:26px}
.auth-alt{margin-top:20px;text-align:center;color:var(--muted)}
.alert{padding:11px 14px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px;display:none;border:1px solid transparent}
.alert.show{display:block}
.alert-error{background:var(--red-l);color:var(--red);border-color:rgba(244,121,107,.3)}
.alert-success{background:var(--green-l);color:var(--green);border-color:rgba(52,211,153,.3)}
@media(max-width:880px){.auth-wrap{grid-template-columns:1fr}.auth-aside{display:none}}

/* ============================================================================
   APP SHELL
   ============================================================================ */
/* One variable drives the whole shell: the grid column, the sticky rail width
   and every page's usable width follow it, so a collapse reflows the content
   area instead of overlapping it. Collapsed is the default (see app.js) — the
   till runs on a small screen and the icons alone are enough once the shop
   knows the menu. */
:root{--sb-w:248px;--sb-w-collapsed:66px}
.app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100vh;transition:grid-template-columns .22s var(--ease)}
body.sb-collapsed{--sb-w:var(--sb-w-collapsed)}
.sidebar{background:#08080e;border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  width:var(--sb-w);overflow:hidden;transition:width .22s var(--ease)}
.sidebar .logo{padding:22px 22px 16px;font-family:var(--caps);font-size:17px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);display:flex;align-items:center;gap:11px}
.sidebar .logo .dot{width:30px;height:30px;border-radius:9px;background:#111118;border:1px solid var(--border-strong);
  display:grid;place-items:center;font-family:var(--caps);font-size:16px;font-weight:700;
  color:var(--primary);box-shadow:inset 0 0 12px rgba(200,168,75,.12)}
.nav{flex:1;overflow-y:auto;padding:8px 13px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:9px;color:var(--muted);
  font-weight:500;font-size:13.5px;margin-bottom:2px;transition:.15s var(--ease);position:relative}
.nav a:hover{background:rgba(200,168,75,.06);color:var(--text);text-decoration:none}
.nav a.active{background:var(--primary-l);color:var(--gold-light)}
.nav a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--primary)}
.nav a .ic{width:18px;text-align:center;opacity:.85}
.nav a.active .ic{opacity:1;color:var(--primary)}
.nav .nav-label{font-family:var(--caps);font-size:9.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-2);
  padding:16px 13px 6px;font-weight:500}
.sidebar .side-foot{padding:14px;border-top:1px solid var(--border)}
.userchip{display:flex;align-items:center;gap:11px}
.userchip .avatar{width:35px;height:35px;border-radius:9px;background:var(--primary-l);border:1px solid var(--border-strong);
  color:var(--primary);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:17px}
.userchip .meta{flex:1;min-width:0}
.userchip .meta b{display:block;color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip .meta small{color:var(--muted-2);text-transform:capitalize;font-size:11.5px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;background:rgba(8,8,14,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20}
.topbar .hamburger{background:none;border:0;font-size:18px;cursor:pointer;color:var(--text);padding:6px 8px;border-radius:8px;transition:.15s var(--ease)}
.topbar .hamburger:hover{background:var(--primary-l);color:var(--primary)}
.topbar h2{font-family:var(--caps);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.topbar .spacer{flex:1}
.topbar .plan-pill{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--primary);background:var(--primary-l);
  padding:5px 12px;border-radius:99px;text-transform:capitalize;border:1px solid var(--border-strong)}
.content{padding:28px;flex:1}

/* ---- Collapsed rail ----
   Scoped to wide screens on purpose: below the breakpoint the rail is
   off-canvas and always shows its full self, so the collapsed rules simply do
   not apply there rather than being written and then undone. (Undoing them
   would mean guessing each element's original `display`, which `revert` gets
   wrong — it reverts past the author styles, not to them.) */
/* Exact complement of the 860px query below — `min-width:861px` would leave a
   dead band at fractional widths (860.5px on a zoomed display) where neither
   set of rules applied and the rail rendered expanded but un-collapsible. */
@media not all and (max-width:860px){
  body.sb-collapsed .sidebar .logo{padding:22px 0 16px;justify-content:center;gap:0}
  body.sb-collapsed .sidebar .logo .logo-txt{display:none}
  body.sb-collapsed .nav{padding:8px 9px}
  body.sb-collapsed .nav a{justify-content:center;padding:11px 0;gap:0}
  body.sb-collapsed .nav a .lbl{display:none}
  body.sb-collapsed .nav a.active::before{left:-9px}
  /* A hairline keeps the section rhythm without the wording. */
  body.sb-collapsed .nav .nav-label{padding:10px 0 0;height:11px;overflow:hidden;text-indent:-999px}
  body.sb-collapsed .nav .nav-label::after{content:"";display:block;height:1px;background:var(--border);margin:5px 8px 0}
  body.sb-collapsed .sidebar .side-foot{padding:10px 8px}
  body.sb-collapsed .userchip{justify-content:center}
  body.sb-collapsed .userchip .meta,body.sb-collapsed .userchip .btn,body.sb-collapsed .side-foot .powered{display:none}
  /* No wording left, so the icon takes a bigger hit area and a clearer hover;
     the name itself comes from the anchor's title attribute (a CSS tooltip
     cannot escape the nav's own scroll clip). */
  body.sb-collapsed .nav a .ic{width:22px;font-size:15px}
  body.sb-collapsed .nav a:hover{background:var(--primary-l);color:var(--primary)}
}

@media(max-width:860px){
  /* Off-canvas below the breakpoint — the collapse state is irrelevant here,
     the rail is either over the page or off it, always at full width. */
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:60;width:248px;transform:translateX(-100%);transition:transform .25s var(--ease)}
  .sidebar.open{transform:none}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:55}
  .backdrop.show{display:block}
}
/* No motion for anyone who asked for none — the width still changes, instantly. */
@media(prefers-reduced-motion:reduce){.app,.sidebar{transition:none}}

/* ---- Page header ---- */
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:30px;font-weight:600}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.page-head .spacer{flex:1}
.toolbar{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{position:relative;flex:1;max-width:340px}
.search input{padding-left:36px}
.search::before{content:"\f002";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--primary);opacity:.7}

/* ---- Tables ---- */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:left;padding:13px 18px;background:var(--surface-2);color:var(--muted);
  font-family:var(--caps);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--border)}
table.data td{padding:13px 18px;border-bottom:1px solid var(--border);color:var(--text)}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .15s var(--ease)}
table.data tbody tr:hover{background:rgba(200,168,75,.04)}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
table.data .actions{text-align:right;white-space:nowrap}
.row-actions button{background:none;border:0;cursor:pointer;color:var(--muted);padding:6px 8px;border-radius:7px;font-size:13px;transition:.15s var(--ease)}
.row-actions button:hover{background:var(--surface-3);color:var(--primary)}
.row-actions button.del:hover{color:var(--red)}
.empty{padding:54px 20px;text-align:center;color:var(--muted-2)}
.empty .big{font-size:30px;margin-bottom:10px;color:var(--primary);opacity:.5}
.linkish{cursor:pointer;color:var(--primary);font-weight:600}
.linkish:hover{text-decoration:underline}

/* ---- Stat cards (the signature: serif gold numerals) ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);overflow:hidden;transition:.2s var(--ease)}
.stat:hover{border-color:var(--border-strong)}
.stat::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary-soft),transparent)}
.stat .lab{font-family:var(--caps);color:var(--muted);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;display:flex;align-items:center;gap:9px}
.stat .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:var(--primary-l)!important;border:1px solid var(--border-strong);color:var(--primary)}
.stat .val{font-family:var(--display);font-size:34px;font-weight:600;margin-top:12px;letter-spacing:-.01em;line-height:1;color:var(--text)}
.stat .meta{font-family:var(--mono);color:var(--muted-2);font-size:11.5px;margin-top:8px}
/* a card that stands for a screen behaves like the link it is */
.stat-link{cursor:pointer}
.stat-link:hover{border-color:var(--primary);transform:translateY(-1px)}
.stat-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.stat-link .val{transition:color .15s ease}
.stat-link:hover .val{color:var(--primary)}
/* The headline pair on a scorecard — today's and this month's earnings sit
   above the supporting figures, so they get the gold edge and a bigger number. */
.stat-accent{border-color:var(--border-strong)}
.stat-accent::after{background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.stat-accent .val{color:var(--primary);font-size:38px}
.stats-3{grid-template-columns:repeat(3,1fr)}
/* counter stock guard: only ever rendered when a line really does oversell */
.stock-warn{display:block;color:var(--red);font-size:11.5px;font-weight:600;margin-top:2px}
.guard-note{background:var(--red-l);color:var(--red);border:1px solid rgba(244,121,107,.3);
  border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.45;margin-bottom:10px}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
@media(max-width:1024px){.stats{grid-template-columns:repeat(2,1fr)!important}.dash-grid{grid-template-columns:1fr}}
@media(max-width:520px){.stats{grid-template-columns:1fr!important}}

/* ---- Modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(3,3,6,.72);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:44px 16px;overflow-y:auto}
.modal-backdrop.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:564px;animation:pop .2s var(--ease)}
.modal.wide{max-width:924px}
@keyframes pop{from{transform:translateY(-10px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{font-family:var(--display);font-size:21px;font-weight:600}
.modal-head .x{margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;transition:color .15s}
.modal-head .x:hover{color:var(--primary)}
.modal-body{padding:22px;max-height:70vh;overflow-y:auto}
.modal-foot{display:flex;gap:11px;justify-content:flex-end;padding:15px 22px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}

/* ---- Toast ---- */
#toasts{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text);padding:13px 17px;border-radius:11px;
  box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:500;display:flex;gap:10px;align-items:center;animation:slidein .25s var(--ease);max-width:350px;border-left:3px solid var(--primary)}
.toast.success{border-left-color:var(--green)}.toast.error{border-left-color:var(--red)}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

/* ---- POS / invoice builder ---- */
.pos{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}
/* When a company has GST switched off, hide every GST column/row. */
.gst-off .gst-col{display:none!important}
.pos-items table{width:100%;border-collapse:collapse;font-size:13px}
.pos-items th{font-family:var(--caps);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--border)}
.pos-items td{padding:6px 8px;border-bottom:1px solid var(--border)}
.pos-items input{padding:6px 9px}
.pos-side .totals{margin-top:10px}
.totals .line{display:flex;justify-content:space-between;padding:7px 0;color:var(--muted);font-size:13.5px}
.totals .line.grand{border-top:1px solid var(--border-strong);margin-top:8px;padding-top:14px;color:var(--text);font-family:var(--display);font-size:24px;font-weight:600}
.prod-pick{position:relative}
.pick-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:9px;box-shadow:var(--shadow-lg);max-height:264px;overflow-y:auto;z-index:30;margin-top:5px}
.pick-list div{padding:10px 13px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border)}
.pick-list div:hover,.pick-list div.hl{background:var(--primary-l)}
.pick-list small{color:var(--muted)}
@media(max-width:920px){.pos{grid-template-columns:1fr}}

/* ---- Supplier entry (goods inward) --------------------------------------
   The bill header reads left to right the way the paper bill does: who, which
   bill, when, and their GSTIN. */
.entry-head{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:15px;align-items:start}
.entry-head .field{margin-bottom:0}
.gstin-box{display:flex;align-items:center;min-height:42px;padding:10px 13px;border-radius:var(--radius-sm);
  border:1px dashed var(--border-strong);background:var(--surface-2);font-size:13px;color:var(--text)}
.gstin-box.has{border-style:solid;border-color:var(--green);background:var(--green-l);color:var(--green)}
.gstin-box code{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.gstin-box .muted{color:var(--muted)}
@media(max-width:900px){.entry-head{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.entry-head{grid-template-columns:1fr}}

/* Line-item grid. Every cell but the serial is an input, so the row heights
   stay even and the numbers line up down each column. */
.entry-table td.sr{color:var(--muted-2);font-family:var(--mono);font-size:12px;text-align:center}
.entry-table .row-code{display:block;margin-top:3px;color:var(--muted-2);font-family:var(--mono);font-size:10.5px}
.entry-table input{width:100%}
.entry-table tbody tr:hover{background:var(--surface-2)}
kbd{font-family:var(--mono);font-size:10px;background:rgba(255,255,255,.08);border:1px solid var(--border-strong);
  border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}

/* F1 picker popup: a full-height results panel, then a confirm card for the
   one product about to join the bill. */
.pick-panel{max-height:46vh;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2)}
.pick-row{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .12s var(--ease)}
.pick-row:last-child{border-bottom:0}
.pick-row:hover,.pick-row.hl{background:var(--primary-l)}
.pick-main{min-width:0}
.pick-main b{display:block;font-size:13.5px;font-weight:600}
.pick-main small,.pick-nums small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.pick-nums{text-align:right;white-space:nowrap;font-family:var(--mono)}
.pick-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px}
.confirm-card{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);padding:18px}
.confirm-name{font-family:var(--display);font-size:19px;font-weight:600}
.confirm-code{font-family:var(--mono);font-size:11.5px;color:var(--muted-2);margin-top:3px}
.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin-top:15px}
.confirm-grid .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;
  border-bottom:1px dashed var(--border);padding-bottom:6px}
.confirm-grid .kv span{color:var(--muted)}
.confirm-note{margin-top:13px;font-size:12.5px;color:var(--amber)}
@media(max-width:560px){.confirm-grid{grid-template-columns:1fr}}

/* ---- barcode scanner ---------------------------------------------------- */
/* "Scanner ready" chip; flashes green as each code lands. */
.scan-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--muted);
  font-size:12.5px;transition:.2s var(--ease)}
.scan-chip i{color:var(--primary)}
.scan-chip.hit{border-color:var(--green);color:var(--green);background:var(--green-l)}
.scan-chip.hit i{color:var(--green)}
/* Camera viewfinder inside the scan modal. */
.scan-frame{position:relative;width:100%;aspect-ratio:4/3;background:#000;border-radius:10px;overflow:hidden}
.scan-video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame::after{content:'';position:absolute;left:8%;right:8%;top:35%;height:30%;
  border:2px solid rgba(255,255,255,.85);border-radius:8px;box-shadow:0 0 0 100vmax rgba(0,0,0,.32)}
/* Live capture log in Settings → Barcode Scanner. */
.scan-log{border:1px solid var(--border);border-radius:9px;background:var(--surface-2);
  padding:10px 13px;min-height:96px;font-family:var(--mono);font-size:13px}
.scan-log div{padding:3px 0;border-bottom:1px solid var(--border)}
.scan-log div:last-child{border-bottom:0}

.spinner{width:34px;height:34px;border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin:44px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid;place-items:center;padding:44px}

/* ============================================================================
   LANDING PAGE
   ============================================================================ */
.lp-nav{display:flex;align-items:center;gap:14px;padding:22px 6%;max-width:1280px;margin:0 auto}
.lp-nav .brand{font-family:var(--caps);font-size:19px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.lp-nav .brand span{color:var(--primary)}
.lp-nav .spacer{flex:1}
.hero{position:relative;max-width:1000px;margin:0 auto;padding:72px 6% 48px;text-align:center}
.hero::before{content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:680px;max-width:90%;height:420px;
  background:radial-gradient(50% 50% at 50% 30%,rgba(200,168,75,.14),transparent 70%);pointer-events:none;z-index:-1}
.hero .pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--caps);background:var(--primary-l);color:var(--primary);
  font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;border-radius:99px;margin-bottom:24px;border:1px solid var(--border-strong)}
.hero h1{font-size:clamp(2.8rem,5.5vw,4.6rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px;font-weight:600}
.hero h1 em{font-style:italic;color:var(--primary)}
.hero p{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 30px;line-height:1.7}
.hero .cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.lp-modules{max-width:1140px;margin:34px auto;padding:0 6%;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lp-mod{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:left;transition:.2s var(--ease)}
.lp-mod:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.lp-mod .ic{font-size:19px;margin-bottom:11px;color:var(--primary);width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--primary-l);border:1px solid var(--border-strong)}
.lp-mod b{display:block;margin-bottom:4px;font-size:15px}
.lp-mod small{color:var(--muted)}
.pricing{max-width:1040px;margin:72px auto;padding:0 6%}
.pricing h2{text-align:center;font-size:clamp(2rem,4vw,3rem);margin-bottom:10px;font-weight:600}
.pricing .lead{text-align:center;color:var(--muted);margin-bottom:38px;font-size:16px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 26px;transition:.2s var(--ease)}
.price:hover{border-color:var(--border-strong)}
.price.featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),0 18px 50px var(--gold-glow)}
.price .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--caps);background:var(--primary);color:#0a0a12;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 14px;border-radius:99px}
.price h3{font-size:18px;margin-bottom:4px;font-family:var(--caps);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.price .amt{font-family:var(--display);font-size:46px;font-weight:600;margin:12px 0 2px;color:var(--text)}
.price .amt small{font-size:15px;color:var(--muted);font-weight:500;font-family:var(--font)}
.price ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:11px}
.price ul li{display:flex;gap:10px;color:var(--text);font-size:14px}
.price ul li::before{content:"\2713";color:var(--primary);font-weight:700}
.lp-foot{text-align:center;padding:44px 6%;color:var(--muted-2);border-top:1px solid var(--border);margin-top:48px}
.lp-foot .brand{font-family:var(--caps);font-size:17px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;color:var(--text)}
.lp-foot .brand span{color:var(--primary)}
/* Landing: the "at the counter" band — larger cards for the POS story. */
.lp-band{max-width:1140px;margin:76px auto;padding:0 6%}
.lp-band .band-head{text-align:center;margin-bottom:34px}
.lp-band h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:600;margin-bottom:12px;letter-spacing:-.015em}
.lp-band .band-head p{color:var(--muted);font-size:16.5px;max-width:640px;margin:0 auto;line-height:1.7}
.lp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:.2s var(--ease)}
.lp-feat:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.lp-feat .ic{font-size:19px;margin-bottom:13px;color:var(--primary);width:44px;height:44px;display:grid;place-items:center;
  border-radius:12px;background:var(--primary-l);border:1px solid var(--border-strong)}
.lp-feat h3{font-size:16.5px;margin:0 0 7px;font-weight:600}
.lp-feat p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}
.lp-feat .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.lp-feat .tags span{font-family:var(--caps);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;background:var(--primary-l);color:var(--primary);border:1px solid var(--border-strong)}
/* Long-tail capabilities, as a quiet strip of pills. */
.lp-strip{max-width:1040px;margin:0 auto 76px;padding:0 6%;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.lp-strip span{font-size:13px;color:var(--muted);border:1px solid var(--border);background:var(--surface);border-radius:99px;padding:7px 15px}
.lp-strip i{color:var(--primary);margin-right:7px}
@media(max-width:900px){.lp-modules{grid-template-columns:repeat(2,1fr)}.price-grid{grid-template-columns:1fr}.price.featured{transform:none}
  .lp-feats{grid-template-columns:1fr}}

/* ---- utility ---- */
.text-muted{color:var(--muted)}
.text-right{text-align:right}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.flex{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.nowrap{white-space:nowrap}
.tabnav{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px}
.tabnav button{background:none;border:0;padding:11px 17px;font-family:var(--caps);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:.15s var(--ease)}
.tabnav button:hover{color:var(--text)}
.tabnav button.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ---- Admin console accent (platform = teal within the Qyverix palette) ---- */
.sidebar.admin .logo .dot{color:var(--blue);box-shadow:inset 0 0 12px rgba(30,203,200,.14)}
.sidebar.admin .nav a.active{background:var(--blue-l);color:var(--blue)}
.sidebar.admin .nav a.active::before{background:var(--blue)}
.sidebar.admin .nav a.active .ic{color:var(--blue)}
.sidebar.admin .logo{flex-wrap:wrap}
.admin-tag{font-family:var(--caps);font-size:8.5px;font-weight:600;background:var(--blue-l);color:var(--blue);padding:3px 7px;border-radius:5px;letter-spacing:.16em;border:1px solid rgba(30,203,200,.3)}
.auth-aside.admin{background:radial-gradient(120% 90% at 80% 0%,rgba(30,203,200,.14),transparent 55%),linear-gradient(160deg,#08110f,#060808 70%)}

/* ---- Qyverix logo marks ---- */
.brand-img{height:1.15em;width:auto;vertical-align:-.22em;margin-right:.4em}
.logo .logo-img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(200,168,75,.22))}
.lp-nav .brand-img{height:30px;vertical-align:-9px;margin-right:9px}
.lp-foot .brand-img{height:26px;vertical-align:-8px;margin-right:8px}

/* ---- Powered-by credit (appears across the whole system) ---- */
.powered{display:block;font-size:10.5px;line-height:1.6;color:var(--muted-2);text-align:center;letter-spacing:.01em;text-decoration:none;transition:color .2s var(--ease)}
.powered:hover{color:var(--primary);text-decoration:none}
.powered b{color:var(--primary);font-weight:500}
.side-foot .powered{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.auth-main .powered{margin-top:24px}

/* ============================================================================
   MOBILE RESPONSIVE PASS  (phones & small tablets)
   ============================================================================ */

/* Wide data tables scroll sideways on tablets before they collapse to cards. */
@media(max-width:860px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .content{padding:20px 16px}
  .page-head h1{font-size:25px}
  .topbar{padding:0 16px;gap:10px}
}

/* Modals go (almost) full-width and stack their two/three-column form rows. */
@media(max-width:640px){
  .modal-backdrop{padding:12px}
  .modal,.modal.wide{max-width:100%}
  .modal-body{max-height:78vh}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .toolbar{gap:9px}
  .toolbar .input[type=date]{max-width:none;flex:1}
  .search{max-width:none;width:100%}
}

/* The signature move on phones: each table row becomes a labelled card so no
   horizontal scrolling is needed.  data-label is emitted by renderTable(). */
@media(max-width:680px){
  table.data{font-size:13.5px}
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border-bottom:1px solid var(--border);padding:6px 0}
  table.data tr:last-child{border-bottom:0}
  table.data td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    flex-wrap:wrap;text-align:right;border:0;padding:8px 16px;min-width:0}
  table.data td.num{text-align:right}
  table.data td::before{content:attr(data-label);text-align:left;flex:0 0 auto;
    align-self:center;font-family:var(--caps);text-transform:uppercase;font-size:9.5px;
    letter-spacing:.1em;color:var(--muted);font-weight:600;white-space:nowrap}
  table.data td[data-label=""]::before{content:none}
  table.data td.actions,table.data td[data-label=""]{justify-content:flex-end}
  .row-actions{justify-content:flex-end}
  .table-wrap{overflow:visible}
  /* keep the first cell (usually the name) visually primary */
  table.data td:first-child{font-size:14.5px}
}

/* POS / invoice & purchase & quotation builder: the line-item grid scrolls
   horizontally inside its card so the inputs stay tappable on a phone. */
@media(max-width:920px){
  .pos-side{position:static}
}
@media(max-width:640px){
  .pos-items{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pos-items table{min-width:610px}   /* Item · Qty · Price · GST% · Disc% · Disc₹ · Total · × */
  /* Goods inward carries two more money columns (MRP, SP) than the counter. */
  .pos-items table.entry-table{min-width:820px}
  .pos-side .form-row{grid-template-columns:1fr 1fr}
  .content{padding:16px 12px}
}

/* Larger, finger-friendly hit targets on touch devices. */
@media(max-width:680px){
  .btn{padding:10px 16px}
  .row-actions button{padding:8px 10px;font-size:15px}
  .nav a{padding:11px 13px}
  .tabnav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tabnav button{white-space:nowrap}
  .page-head .spacer{display:none}
  .page-head{gap:10px}
  .page-head .btn{flex:1}
}

/* Safe-area padding for notched phones when installed as a PWA. */
@supports(padding:max(0px)){
  .topbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================================
   LIGHT THEME  — toggled via <html data-theme="light">. Keeps the gold identity
   but on a warm off-white surface with dark, high-contrast type.
   ============================================================================ */
html[data-theme="light"]{color-scheme:light}
[data-theme="light"]{
  --bg:#f6f4ee; --surface:#ffffff; --surface-2:#f1eee5; --surface-3:#e7e2d6;
  --border:rgba(120,92,30,.18); --border-strong:rgba(120,92,30,.34);
  --text:#272218; --muted:#6f6754; --muted-2:#9b9484;
  --primary:#9a7723; --primary-d:#7d6019; --primary-l:rgba(154,119,35,.10); --primary-soft:rgba(154,119,35,.18);
  --gold-light:#7d6019; --gold-glow:rgba(154,119,35,.22);
  --green:#0c8a5b; --green-l:rgba(12,138,91,.12);
  --red:#cf3b29; --red-l:rgba(207,59,41,.10);
  --amber:#9a6b12; --amber-l:rgba(154,107,18,.14);
  --blue:#0d8784; --blue-l:rgba(13,135,132,.12);
  --shadow:0 1px 2px rgba(60,45,15,.08),0 8px 24px rgba(60,45,15,.08);
  --shadow-lg:0 20px 55px rgba(60,45,15,.18);
}
/* Components with hard-coded dark backgrounds need an explicit light value. */
[data-theme="light"] .sidebar{background:#fbf9f2}
[data-theme="light"] .topbar{background:rgba(251,249,242,.82)}
[data-theme="light"] .sidebar .logo .dot{background:#f1eee5}
[data-theme="light"] .auth-aside{
  background:radial-gradient(120% 90% at 80% 0%,rgba(154,119,35,.12),transparent 55%),linear-gradient(160deg,#fbf9f2,#efe9dc 70%)}
[data-theme="light"] .auth-aside h2,[data-theme="light"] .auth-feats li{color:var(--text)}
[data-theme="light"] .sidebar.admin .logo .dot{background:#eef2f0}
[data-theme="light"] .logo .logo-img{filter:none}
/* gold caret inside selects → use the darker light-theme gold for contrast */
[data-theme="light"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a7723' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>")}

/* Theme toggle button (circular, in the topbar / nav). */
.theme-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--primary);
  cursor:pointer;font-size:14px;transition:.18s var(--ease)}
.theme-btn:hover{color:var(--gold-light);border-color:var(--primary);background:var(--surface-3)}

/* ---- Pagination ----------------------------------------------------------
   Sits directly under a .table-wrap. Hidden automatically when the whole
   result set fits on one page (see paginate() in ui.js). */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:14px;padding:10px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.pager-info{color:var(--muted-2);font-size:13px;font-variant-numeric:tabular-nums}
.pager-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pager-page{color:var(--muted-2);font-size:13px;padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pager-btn{min-width:38px;padding:7px 10px;line-height:1}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-size{padding:7px 10px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);font-size:13px;cursor:pointer}

@media (max-width:640px){
  .pager{justify-content:center;gap:10px}
  .pager-info{width:100%;text-align:center}
  .pager-controls{width:100%;justify-content:center}
}

/* ---- Dashboard: scanner mode card ---------------------------------------- */
.stat-scanner .scan-mode{display:flex;gap:8px;margin:10px 0 6px;flex-wrap:wrap}
.scan-mode-btn{flex:1 1 0;min-width:96px;padding:9px 10px;font-size:13px;justify-content:center}

/* ---- Dashboard: search console ------------------------------------------- */
.console-card{margin-top:18px}
.console-results{margin-top:12px;max-height:420px;overflow-y:auto}
.console-hint{color:var(--muted-2);font-size:13px;padding:10px 2px}
.console-group{margin-bottom:12px}
.console-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--primary);font-weight:700;margin:8px 0 6px}
.console-hit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border:1px solid transparent;border-radius:10px;background:transparent;
  color:var(--text);cursor:pointer;font:inherit;transition:.15s var(--ease)}
.console-hit:hover{background:var(--surface-2);border-color:var(--border)}
.console-hit i{color:var(--primary);width:16px;text-align:center;flex-shrink:0}
.console-hit-main{font-weight:600;flex-shrink:0;max-width:46%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.console-hit-sub{color:var(--muted-2);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media (max-width:640px){
  .console-hit{flex-wrap:wrap;gap:4px 10px}
  .console-hit-main{max-width:100%}
  .console-hit-sub{width:100%;padding-left:26px}
}

/* ============================================================================
   Plan & Billing (tenant) — everything below is built from the theme tokens,
   so the light theme needs no overrides of its own.
   ========================================================================== */
.bill-alert{border-radius:var(--radius-sm);padding:12px 15px;margin-bottom:16px;font-size:13.5px;line-height:1.55;
  border:1px solid var(--border-strong);background:var(--primary-l);color:var(--text)}
.bill-alert.warn{background:var(--amber-l);border-color:rgba(251,191,36,.3);color:var(--text)}
.bill-alert.danger{background:var(--red-l);border-color:rgba(244,121,107,.32);color:var(--text)}
.bill-alert.info{background:var(--blue-l);border-color:rgba(30,203,200,.28)}
.bill-alert b{color:var(--text)}

.bill-status{margin-bottom:20px}
.bill-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bill-fact .lab{font-family:var(--caps);color:var(--muted);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em}
.bill-fact .val{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.15;margin-top:8px;
  text-transform:capitalize}
.bill-fact .meta{font-family:var(--mono);color:var(--muted-2);font-size:11.5px;margin-top:7px}

/* monthly ⇄ yearly */
.seg-wrap{display:flex;justify-content:center;margin:4px 0 20px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--border)}
.seg-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:132px;
  padding:9px 18px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);
  font-family:var(--font);font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s var(--ease)}
.seg-btn small{font-family:var(--mono);font-size:10.5px;font-weight:400;opacity:.8}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--primary);color:#0a0a12;box-shadow:0 4px 16px var(--gold-glow)}
.seg-btn.active small{opacity:.75}

/* plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.plan-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:.18s var(--ease)}
.plan-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.plan-card.current{border-color:var(--primary)}
.plan-card.current::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.plan-flag{position:absolute;top:-10px;right:16px;padding:3px 10px;border-radius:99px;
  background:var(--primary);color:#0a0a12;font-family:var(--caps);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em}
.plan-name{font-family:var(--caps);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--primary)}
.plan-price{font-family:var(--display);font-size:34px;font-weight:600;line-height:1;color:var(--text)}
.plan-price.muted{color:var(--muted-2)}
.plan-price small{font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
.plan-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted-2)}
.plan-save{font-size:12.5px;font-weight:600;color:var(--green)}
.plan-users{font-size:13px;color:var(--muted)}
.plan-feats{margin:0;padding:0 0 0 2px;list-style:none;font-size:13px;color:var(--muted);
  display:flex;flex-direction:column;gap:5px}
.plan-feats li{position:relative;padding-left:18px;line-height:1.45}
.plan-feats li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:9.5px;
  position:absolute;left:0;top:3px;color:var(--primary)}
.plan-card .btn{margin-top:auto}

@media (max-width:720px){
  .bill-facts{grid-template-columns:1fr;gap:14px}
  .bill-fact .val{font-size:22px}
  .seg-btn{min-width:110px;padding:8px 12px}
}

/* ============================================================================
   Topbar notices (the bell)
   ========================================================================== */
.notif{position:relative;display:inline-flex}
.notif-btn{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-2);
  color:var(--muted);font-size:15px;cursor:pointer;transition:.15s var(--ease)}
.notif-btn:hover,.notif-btn.open{color:var(--primary);border-color:var(--primary);background:var(--surface-3)}
.notif-btn.has-unread{color:var(--primary)}
.notif-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--red);color:#fff;font-family:var(--mono);font-size:10px;
  font-weight:600;line-height:17px;text-align:center;border:2px solid var(--bg)}
.notif-panel{position:absolute;top:46px;right:0;z-index:60;width:min(370px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;border-bottom:1px solid var(--border)}
.notif-head b{font-family:var(--caps);font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.notif-list{max-height:min(430px,60vh);overflow-y:auto}
.notif-item{display:flex;gap:11px;padding:13px 15px;cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .15s var(--ease)}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:var(--primary-l)}
.notif-item.unread:hover{background:var(--surface-3)}
.notif-item .ic{flex-shrink:0;font-size:14px;padding-top:2px}
.notif-item .ttl{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--text)}
.notif-item .msg{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px}
.notif-item .meta{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-top:6px}
.notif-empty{padding:34px 20px;text-align:center;color:var(--muted-2);font-size:13px}
.notif-empty i{display:block;font-size:22px;margin-bottom:10px;color:var(--primary);opacity:.5}

@media (max-width:560px){
  .notif-panel{position:fixed;top:64px;left:16px;right:16px;width:auto}
}

/* ============================================================================
   Billing-only shell — what a lapsed trial sees instead of the app
   ========================================================================== */
.locked-shell{min-height:100vh;background:var(--bg)}
.locked-top{display:flex;align-items:center;gap:12px;height:64px;padding:0 22px;
  border-bottom:1px solid var(--border);background:var(--surface)}
.locked-top .spacer{flex:1}
.locked-top .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:19px;font-weight:600;color:var(--text)}
.locked-top .logo-img{width:26px;height:26px;object-fit:contain}
.locked-body{max-width:1020px;margin:0 auto;padding:40px 22px 60px}
.locked-body h1{font-size:34px;margin-bottom:10px}
.locked-body .sub{color:var(--muted);max-width:620px;margin:0 0 28px;line-height:1.65}
@media (max-width:640px){
  .locked-body{padding:28px 16px 44px}
  .locked-body h1{font-size:26px}
}
.notif-cta{margin-top:9px}

/* ---- Landing page: billing-cycle switch ---------------------------------- */
.cycle-switch{display:flex;justify-content:center;gap:4px;margin:-16px auto 34px;padding:4px;width:max-content;
  background:var(--surface-2);border:1px solid var(--border);border-radius:99px}
.cycle-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 22px;border:0;border-radius:99px;
  background:transparent;color:var(--muted);font-family:var(--font);font-size:14px;font-weight:600;
  cursor:pointer;transition:.18s var(--ease)}
.cycle-btn:hover{color:var(--text)}
.cycle-btn.active{background:var(--primary);color:#0a0a12;box-shadow:0 4px 16px var(--gold-glow)}
.cycle-save{font-family:var(--mono);font-size:10.5px;font-weight:500;padding:2px 8px;border-radius:99px;
  background:var(--green-l);color:var(--green)}
.cycle-btn.active .cycle-save{background:rgba(10,10,18,.16);color:#0a0a12}
.price .amt-note{font-family:var(--mono);font-size:12px;color:var(--muted-2);margin:0 0 10px;min-height:18px}
.price .amt-note .save{color:var(--green);font-weight:600}
.price-foot{text-align:center;color:var(--muted-2);font-size:13px;margin-top:26px;line-height:1.6}
@media(max-width:520px){
  .cycle-switch{width:100%;justify-content:stretch}
  .cycle-btn{flex:1;justify-content:center;padding:9px 12px;font-size:13px}
}