/* ==========================================================================
   Kalavara · Liquid Glass, Chirayil Group palette
   --------------------------------------------------------------------------
   The material is Kalikkalam's shared system (kalikkalam/styles.css): backdrop
   blur + saturation lift, the edge stack (thickness), a 135deg specular sweep,
   an inner bloom. Same token names. Spec + the four deliberate differences:
   kalavara/BRANDING.md § Liquid Glass.

   THE RULE: glass on the chrome only (header, sheets, bars, the sign-in card).
   Stock data sits on SOLID cards (--card) so numbers read in daylight.
   ========================================================================== */

:root {
  /* Theme: index.html's head script sets data-theme="light"|"dark" (the person's choice, or the
     system's) before first paint. Light overrides live under :root[data-theme="light"], one copy. */
  color-scheme: dark;
  --bg: #080f18;  --card: #0e1d2e;  --panel: rgba(14,29,46,.95);
  --text: #e8f0ec;  --muted: rgba(232,240,236,.6);  --faint: rgba(232,240,236,.38);
  --hair: rgba(255,255,255,.08);
  --teal: #1d9e75;  --teal-l: #3dbf90;  --gold: #c8a96e;  --amber: #fbbf24;  --red: #f87171;
  --on-teal: #fff;

  --blob-1: #1d9e75;  --blob-2: #c8a96e;  --blob-3: #0f5a6e;  --blob-op: .5;

  --lg-tint:        rgba(255,255,255,.055);
  --lg-tint-raised: rgba(255,255,255,.09);
  --lg-blur:        blur(24px) saturate(190%) brightness(1.12);
  --lg-blur-thin:   blur(14px) saturate(160%) brightness(1.08);
  --lg-edge:
    inset 0  1px 0      rgba(255,255,255,.55),
    inset 0  0   0 1px  rgba(255,255,255,.16),
    inset 0 -1px 0      rgba(255,255,255,.07),
    inset 0  0  14px -8px  rgba(150,190,255,.40),
    inset 0  0  22px -14px rgba(255,220,190,.22);
  --lg-lift: 0 18px 50px -22px rgba(0,0,0,.75), 0 4px 14px -8px rgba(0,0,0,.55);
  --lg-spec:  rgba(255,255,255,.30);
  --lg-bloom: rgba(255,255,255,.16);

  --radius-lg: 28px;  --radius-md: 18px;  --radius-sm: 12px;
  --ease-spring: cubic-bezier(.34,1.36,.64,1);
  --t-fast: .18s;  --t-med: .32s;

  --font: 'Rajdhani', system-ui, -apple-system, sans-serif;
  --font-ml: 'Noto Sans Malayalam', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #eaf1ee;  --card: #ffffff;  --panel: rgba(255,255,255,.96);
    --text: #0c1a24;  --muted: rgba(12,26,36,.62);  --faint: rgba(12,26,36,.42);
    --hair: rgba(12,26,36,.1);
    --teal-l: #137a5a;  --gold: #9a7a3c;  --amber: #b7791f;  --red: #c53030;
    --blob-op: .32;
    --lg-tint:        rgba(255,255,255,.55);
    --lg-tint-raised: rgba(255,255,255,.72);
    --lg-blur:        blur(24px) saturate(180%) brightness(1.04);
    --lg-blur-thin:   blur(14px) saturate(160%) brightness(1.02);
    --lg-edge:
      inset 0  1px 0      rgba(255,255,255,.95),
      inset 0  0   0 1px  rgba(255,255,255,.6),
      inset 0 -1px 0      rgba(12,26,36,.08),
      inset 0  0  14px -8px rgba(150,190,255,.35);
    --lg-lift: 0 18px 50px -24px rgba(12,40,50,.35), 0 4px 14px -8px rgba(12,40,50,.2);
    --lg-spec:  rgba(255,255,255,.65);
    --lg-bloom: rgba(255,255,255,.5);
  }
/* light: a plain glass button vanishes into a white card, so tint it teal; give Google a hairline */
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-google):not(.btn-ghost) { background: rgba(29,158,117,.12); color: var(--teal-l);
    box-shadow: inset 0 0 0 1px rgba(29,158,117,.28), inset 0 1px 0 rgba(255,255,255,.8); }
:root[data-theme="light"] .btn-google { box-shadow: inset 0 0 0 1px rgba(12,26,36,.14), 0 10px 26px -16px rgba(12,40,50,.35); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.45;
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── backdrop: glass needs something to refract. Fixed + vmax = full coverage ── */
.blob-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--blob-op); }
.blob-a { width: 64vmax; height: 64vmax; top: -24vmax; left: -18vmax;
          background: radial-gradient(circle at 40% 40%, var(--blob-1), transparent 68%);
          animation: drift-a 28s ease-in-out infinite alternate; }
.blob-b { width: 52vmax; height: 52vmax; top: -6vmax; right: -20vmax;
          background: radial-gradient(circle at 60% 60%, var(--blob-2), transparent 68%);
          animation: drift-b 34s ease-in-out infinite alternate; }
.blob-c { width: 60vmax; height: 60vmax; bottom: -22vmax; left: -8vmax;
          background: radial-gradient(circle at 50% 50%, var(--blob-3), transparent 68%);
          animation: drift-c 30s ease-in-out infinite alternate; }
.blob-d { width: 66vmax; height: 46vmax; top: 30%; left: 50%; margin-left: -33vmax; opacity: calc(var(--blob-op) * .7);
          background: radial-gradient(ellipse at 50% 50%, var(--blob-1), transparent 66%);
          animation: drift-b 26s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(60px, 40px, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-50px, 60px, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(70px, -40px, 0) scale(1.14); } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }

/* ── the material ── */
.glass {
  position: relative; isolation: isolate;
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--lg-edge), var(--lg-lift);
}
.glass::before {            /* specular sweep, lit from above-left */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, var(--lg-spec) 0%, rgba(255,255,255,.06) 26%, transparent 52%);
}
.glass::after {             /* inner bloom near the top lip */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 22% -10%, var(--lg-bloom) 0%, transparent 60%);
}
.glass-thin { -webkit-backdrop-filter: var(--lg-blur-thin); backdrop-filter: var(--lg-blur-thin); }

/* ── layout ── */
.app { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app-hdr {
  position: sticky; top: calc(var(--safe-t) + 10px); z-index: 20;
  margin: calc(var(--safe-t) + 10px) 12px 0; height: 60px; border-radius: 22px;
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px;
}
.wordmark { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.wordmark-en { font-weight: 700; font-size: 22px; letter-spacing: .4px; }
.mark { width: 30px; height: 30px; flex: none; align-self: center; }
.main { width: 100%; max-width: 560px; margin: 0 auto; padding: 18px 16px calc(var(--safe-b) + 32px); flex: 1; }
.screen { display: none; }
.screen.on { display: block; animation: rise var(--t-med) var(--ease-spring); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ── controls (capsules, 48px+ targets) ── */
.btn {
  min-height: 52px; padding: 0 24px; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 17px; font-weight: 700; letter-spacing: .3px;
  background: var(--lg-tint-raised); color: var(--text);
  -webkit-backdrop-filter: var(--lg-blur-thin); backdrop-filter: var(--lg-blur-thin);
  box-shadow: var(--lg-edge);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) ease, opacity var(--t-fast);
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--teal), #27b384); color: var(--on-teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 30px -12px rgba(29,158,117,.7); }
.btn-google { background: #fff; color: #1f2937; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 26px -14px rgba(0,0,0,.6); }
.btn-ghost { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.icon-btn {
  width: 48px; height: 48px; flex: none; border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--lg-tint-raised); color: var(--text); box-shadow: var(--lg-edge);
  font-weight: 700; font-size: 18px; transition: transform var(--t-fast) var(--ease-spring);
}
.icon-btn:active { transform: scale(.94); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: none;
  border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: .3px;
  background: rgba(29,158,117,.16); color: var(--teal-l); box-shadow: inset 0 0 0 1px rgba(61,191,144,.35);
}
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; background: rgba(200,169,110,.16); color: var(--gold); }
.field {
  width: 100%; height: 54px; padding: 0 18px; border: none; border-radius: var(--radius-md);
  font-size: 17px; background: var(--lg-tint); color: var(--text); outline: none;
  box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255,255,255,.08);
}
.field:focus { box-shadow: inset 0 0 0 1px var(--teal-l), 0 0 0 3px rgba(61,191,144,.25); }
.field::placeholder { color: var(--faint); }

/* ── cards ── */
.card { background: var(--card); border-radius: var(--radius-md); padding: 20px; box-shadow: 0 1px 0 var(--hair) inset, 0 10px 30px -22px rgba(0,0,0,.6); }
.hero { padding: 28px 22px; text-align: center; }
.hero .mark { width: 72px; height: 72px; margin: 0 auto 14px; display: block; }
.hero-title { font-size: 34px; font-weight: 700; letter-spacing: .5px; line-height: 1.1; }
.hero-ml { font-family: var(--font-ml); font-weight: 600; color: var(--gold); font-size: 16px; margin-top: 2px; }
.hero-sub { color: var(--muted); font-size: 17px; margin: 12px auto 24px; max-width: 32ch; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; font-weight: 700; letter-spacing: 1px; margin: 6px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.fine { color: var(--faint); font-size: 14px; margin-top: 18px; }
.msg { font-size: 15px; font-weight: 600; min-height: 1.4em; }
.msg.err { color: var(--red); }  .msg.ok { color: var(--teal-l); }

.greet { margin: 6px 4px 18px; }
.greet-hi { color: var(--muted); font-size: 16px; }
.greet-biz { font-size: 30px; font-weight: 700; line-height: 1.15; }
.empty { text-align: center; padding: 34px 22px; }
.empty-icon { width: 64px; height: 64px; margin: 0 auto 12px; opacity: .9; }
.empty-title { font-size: 22px; font-weight: 700; }
.empty-text { color: var(--muted); margin-top: 6px; }
.banner { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; margin-bottom: 14px; border-radius: var(--radius-md); }
.banner-text { flex: 1; font-size: 15px; font-weight: 600; }
.banner-text b { display: block; font-size: 17px; }

/* ── bottom sheet ── */
.sheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4,8,14,.45); opacity: 0; pointer-events: none; transition: opacity var(--t-med) ease; }
.sheet-scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 61; width: min(560px, 100%);
  transform: translate(-50%, 110%); transition: transform var(--t-med) var(--ease-spring);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 10px 22px calc(var(--safe-b) + 22px);
  background: var(--panel);
  max-height: 88vh; overflow-y: auto;
}
.sheet.on { transform: translate(-50%, 0); visibility: visible; transition: transform var(--t-med) var(--ease-spring), visibility 0s; }
/* A closed sheet is hidden, not just moved off-screen: otherwise Tab and screen readers still reach it. */
.sheet:not(.on) { visibility: hidden; transition: transform var(--t-med) var(--ease-spring), visibility 0s linear var(--t-med); }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--hair); margin: 0 auto 16px; }
.sheet-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.sheet-body { color: var(--muted); font-size: 16px; }
.sheet-body ol, .sheet-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; margin: 12px 0 18px; }
.sheet-body li { color: var(--text); }
.ver { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--teal-l); margin: 14px 0 6px; }

/* ── update bar + toast (Kurivattam patterns, glass) ── */
.update-bar {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 18px); z-index: 70;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 700; transition: opacity var(--t-med), transform var(--t-med) var(--ease-spring);
}
.update-bar.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 84px); z-index: 80; transform: translate(-50%, -10px);
  opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 999px; font-weight: 700;
  transition: opacity var(--t-fast), transform var(--t-med) var(--ease-spring); max-width: calc(100% - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.loader { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22vh; color: var(--muted); }
.loader .mark { width: 64px; height: 64px; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.92); opacity: .7; } }

:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 3px; }

/* ── accessibility + fallbacks ── */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn, .icon-btn, .field { background: var(--panel) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .blob-field, .grain { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn, .icon-btn { background: var(--panel); }
}
a.btn { text-decoration: none; }

/* ==========================================================================
   Phase 2 · stock list, detail, editor, settings
   Data on SOLID cards (--card); glass only for the tab bar, FAB and support bar.
   ========================================================================== */
.main.has-tabbar { padding-bottom: calc(var(--safe-b) + 150px); }
.greet.compact .greet-biz { font-size: 24px; }
.screen-title { font-size: 28px; font-weight: 700; margin: 6px 4px 14px; }
.hint { color: var(--muted); font-size: 14px; }
.lbl { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: -6px; }

/* search + chips */
.search { margin-bottom: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair); }
.chip span { font-weight: 600; opacity: .7; margin-left: 2px; }
.chip.on { background: var(--teal); color: var(--on-teal); box-shadow: none; }

/* item cards */
.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-card { display: flex; align-items: stretch; width: 100%; border-radius: var(--radius-md); background: var(--card);
  box-shadow: 0 1px 0 var(--hair) inset, 0 8px 22px -20px rgba(0,0,0,.6); overflow: hidden; }
.item-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 14px 10px 10px;
  border: none; background: none; color: var(--text); text-align: left; cursor: pointer; transition: transform var(--t-fast) var(--ease-spring); }
.item-open:active { transform: scale(.985); }
.item-use { flex: none; width: 66px; border: none; border-left: 1px solid var(--hair); cursor: pointer;
  background: rgba(29,158,117,.10); color: var(--teal-l); font-size: 26px; font-weight: 700; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.item-use small { font-size: 12px; letter-spacing: .4px; }
.item-use:active { background: rgba(29,158,117,.22); }
.thumb { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; background: var(--bg); }
.thumb-ph { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  color: var(--teal-l); background: rgba(29,158,117,.12); }
.thumb-xl { width: 96px; height: 96px; border-radius: 22px; font-size: 40px; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-name { font-size: 18px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badges:empty { display: none; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; }
.badge-red { background: rgba(248,113,113,.16); color: var(--red); }
.badge-amber { background: rgba(251,191,36,.18); color: var(--amber); }
.badge-muted { background: var(--hair); color: var(--muted); }
.item-qty { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.item-qty b { font-size: 24px; line-height: 1; }
.item-qty small { font-size: 13px; color: var(--muted); }

/* detail */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; margin-bottom: 4px;
  color: var(--teal-l); font-weight: 700; font-size: 17px; text-decoration: none; }
.detail { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.photo-box { margin: -6px -6px 6px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg);
  display: flex; align-items: center; justify-content: center; }
.photo-box img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-med); }
.photo-box img.blurred { filter: blur(8px); }
.photo-ph { aspect-ratio: 16 / 7; }
.detail-name { font-size: 26px; font-weight: 700; line-height: 1.15; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qty-big { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.qty-big b { font-size: 44px; line-height: 1; }
.qty-big span { font-size: 18px; color: var(--muted); }
.qty-big small { margin-left: auto; color: var(--muted); font-size: 14px; }
.detail-line { color: var(--muted); }
.detail-desc { white-space: pre-wrap; }
.soon { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* FAB + tab bar */
.fab { position: fixed; z-index: 30; right: max(16px, calc(50% - 264px)); bottom: calc(var(--safe-b) + 92px);
  min-height: 56px; padding: 0 22px; border: none; border-radius: 999px; cursor: pointer; font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg, var(--teal), #27b384); color: var(--on-teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 32px -12px rgba(29,158,117,.75);
  transition: transform var(--t-fast) var(--ease-spring); }
.fab:active { transform: scale(.95); }
.tabbar { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 14px);
  width: min(360px, calc(100% - 32px)); height: 64px; border-radius: 999px; display: flex; padding: 6px; gap: 6px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tab { position: relative; z-index: 1; transition: color var(--t-med) ease; -webkit-tap-highlight-color: transparent; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }   /* a tab is a link: no native link drag or iOS link preview mid-slide */
.tab svg { transition: transform var(--t-med) var(--ease-spring); }
.tab:active svg { transform: scale(.88); }
.tab.on { color: var(--teal-l); }
/* The liquid pill: the outer layer glides (CSS spring), the inner glass layer stretches (tabbar.mjs). */
.tab-thumb { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.32,1.32,.42,1), width .4s ease; will-change: transform; }
.tab-thumb-in { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--lg-tint-raised);
  transform-origin: center; transition: transform .25s var(--ease-spring), box-shadow .25s ease; }
.tab-thumb.lifted .tab-thumb-in { transform: scale(1.08, 1.12); box-shadow: var(--lg-edge), 0 10px 28px -12px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .tab-thumb { transition: transform .15s ease, width .15s ease; } }

/* editor form */
select.field { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea.field { height: auto; padding: 14px 18px; resize: vertical; line-height: 1.4; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack-tight { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .field { text-align: center; padding: 0 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.icon-btn.sm { width: 40px; height: 40px; font-size: 17px; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.photo-pick { display: flex; align-items: center; gap: 14px; }
.photo-prev { width: 96px; height: 96px; flex: none; border-radius: 18px; overflow: hidden; background: var(--lg-tint);
  box-shadow: inset 0 0 0 1px var(--hair); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.photo-btns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 6px 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui { width: 52px; height: 32px; flex: none; border-radius: 999px; background: var(--hair); position: relative; transition: background var(--t-fast); }
.toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform var(--t-med) var(--ease-spring); }
.toggle input:checked + .toggle-ui { background: var(--teal); }
.toggle input:checked + .toggle-ui::after { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-ui { outline: 2px solid var(--teal-l); outline-offset: 3px; }
.toggle-text { display: flex; flex-direction: column; }
.toggle-text small { color: var(--muted); font-size: 14px; }

/* settings */
.card + .card { margin-top: 12px; }
.set-head { font-size: 20px; font-weight: 700; }
.set-list { display: flex; flex-direction: column; margin: 12px 0; }
.set-row { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--hair); }
.set-name { flex: 1; min-width: 0; font-weight: 700; display: flex; flex-direction: column; overflow-wrap: anywhere; line-height: 1.25; }
.icon-btn.danger { color: var(--red); }
.set-name small { font-weight: 500; color: var(--muted); font-size: 13px; }
.add-row { display: flex; gap: 8px; align-items: center; }
.starter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 14px 0; padding: 14px;
  border-radius: var(--radius-sm); background: rgba(29,158,117,.08); box-shadow: inset 0 0 0 1px rgba(29,158,117,.25); }
.starter small { color: var(--muted); }

/* super admin: business picker + support bar */
.pick-hint { margin: 18px 4px 10px; }
.biz-list { display: flex; flex-direction: column; gap: 8px; }
.biz-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--card);
  color: var(--text); text-decoration: none; box-shadow: 0 1px 0 var(--hair) inset; min-height: 64px; }
.biz-card b { flex: 1; font-size: 18px; }
.biz-card small { color: var(--muted); }
.support-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; margin-bottom: 14px;
  font-weight: 700; color: var(--amber); }
.support-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glass-thin { background: var(--lg-tint); box-shadow: var(--lg-edge); }
:root[data-theme="light"] .chip.on { color: #fff; }
:root[data-theme="light"] .badge-amber { background: rgba(183,121,31,.14); }

/* ==========================================================================
   Phase 3 · movements, batches, history, count
   ========================================================================== */
.move-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.move-actions .btn { min-height: 58px; font-size: 18px; }
.banner-warn { color: var(--red); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(248,113,113,.35); margin-bottom: 12px; }
.warn { color: var(--amber); font-weight: 700; }
.link-btn { background: none; border: none; color: var(--teal-l); font-weight: 700; font-size: 15px; padding: 8px 0; cursor: pointer; align-self: flex-start; }

.batch-list { display: flex; flex-direction: column; margin-top: 8px; }
.batch-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: none; border-top: 1px solid var(--hair);
  background: none; color: var(--text); text-align: left; font: inherit; }
button.batch-row { cursor: pointer; }
.batch-row.red .batch-main b { color: var(--red); }
.batch-row.amber .batch-main small { color: var(--amber); }
.batch-list.finished { opacity: .6; }
.batch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.batch-main small { color: var(--muted); font-size: 13px; }
.batch-qty { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.batch-qty small { font-size: 13px; color: var(--muted); font-weight: 500; }

.move-list { display: flex; flex-direction: column; }
.card .move-list { margin-top: 6px; }
.move-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
#hist-list .move-row { background: var(--card); border-top: none; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 6px; }
.move-qty { flex: none; min-width: 64px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.1; }
.move-qty small { font-size: 12px; color: var(--muted); font-weight: 500; }
.move-row.in .move-qty { color: var(--teal-l); }
.move-row.red .move-qty { color: var(--red); }
.move-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.move-main small { color: var(--muted); font-size: 13px; }
.move-note { font-style: italic; }
.day-head { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 14px 4px 6px; }
.hist-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

/* movement sheet */
.mv-head { color: var(--muted); font-size: 15px; }
.stepper.big .icon-btn { width: 52px; height: 52px; font-size: 22px; }
.stepper.big .field { font-size: 22px; font-weight: 700; height: 56px; }
.fefo { font-size: 15px; color: var(--muted); padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(29,158,117,.08); line-height: 1.5; }
.fefo:empty { display: none; }
.batch-pick { display: flex; flex-direction: column; gap: 6px; }
.pick-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--lg-tint); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.pick-row span { flex: 1; }
.pick-row input { width: 20px; height: 20px; accent-color: var(--teal); }
.pick-row.expired span { color: var(--red); }
.pick-row.off { opacity: .5; cursor: not-allowed; }
.segmented { display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--lg-tint); box-shadow: inset 0 0 0 1px var(--hair); }
.seg { flex: 1; min-height: 42px; border: none; border-radius: 999px; background: none; color: var(--muted); font-weight: 700; cursor: pointer; }
.seg.on { background: var(--teal); color: var(--on-teal); }
.btn-danger { background: linear-gradient(135deg, #c53030, #e05252) !important; color: #fff !important; box-shadow: 0 12px 30px -14px rgba(197,48,48,.7) !important; }

/* stock count */
.count-item { margin-bottom: 10px; }
.count-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.count-row.expired .batch-main b { color: var(--red); }
.count-in { width: 96px; height: 48px; text-align: center; font-size: 18px; font-weight: 700; padding: 0 8px; }
.count-bar { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 14px);
  width: min(528px, calc(100% - 32px)); padding: 8px; border-radius: 999px; }

/* ==========================================================================
   Phase 4 · alarm centre + theme switch
   ========================================================================== */
.bell { position: relative; }
.bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.bell-count { position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg); }
.alert-banner { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 16px; margin-bottom: 12px;
  border: none; border-radius: var(--radius-md); cursor: pointer; text-align: left; font-weight: 700; font-size: 15px;
  background: rgba(248,113,113,.14); color: var(--red); box-shadow: inset 0 0 0 1px rgba(248,113,113,.4); }
.alert-banner span:nth-child(2) { flex: 1; }
.sheet-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sheet-head-row .sheet-title { margin-bottom: 0; }
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-row { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
.alert-row.seen { opacity: .65; }
.alert-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--amber); }
.alert-row.expired .alert-dot { background: var(--red); }
.alert-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alert-main small { color: var(--muted); font-size: 13px; }
.alert-btns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.theme-seg .seg { font-size: 15px; }
:root[data-theme="light"] .toggle-ui { background: rgba(12,26,36,.22); }   /* an OFF switch vanished on a white card */