/* ═══════════════════════════════════════════════════════════
   FRESHMART GROCERY OS — style.css  (Phase 2)
   Theme: Premium Grocer · Dark Forest Green + Warm Cream + Gold
   Phase 2 adds: PWA banner, WhatsApp buttons, Loyalty system,
   Promo codes, Email receipt note, cross-dashboard navigation
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --g950:#040e08; --g900:#0d2818; --g800:#133d24; --g700:#1a5231;
  --g600:#21673e; --g500:#2a8c53; --g400:#35b56a; --g300:#60d48e;
  --g200:#96e8b8; --g100:#c8f5dc; --g50:#f0fdf5;
  --gold:#c8923a;  --gold2:#e8b86a; --gold3:#9a6e27;
  --wa:#25d366;    --wa-dark:#128c4a;
  --red:#e53935;   --amber:#f59e0b; --blue:#2563eb; --purple:#7c3aed;
  --bg:#f8f9f4;    --bg2:#f1f2ed;   --bg3:#e6f4ec;  --card:#ffffff;
  --sidebar:#0d2818;
  --border:rgba(0,0,0,.07);   --border2:rgba(0,0,0,.13);
  --tx1:#1a1c18;   --tx2:#454840;   --tx3:#7a7d74;
  --sh1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);
  --sh3:0 12px 40px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.07);
  --shg:0 4px 20px rgba(33,103,62,.28);
  --shw:0 4px 20px rgba(37,211,102,.28);
  --ff1:'Bricolage Grotesque',sans-serif;
  --ff2:'Instrument Sans',sans-serif;
  --sw:272px; --hh:62px;
  --r1:6px; --r2:10px; --r3:14px; --r4:18px; --r5:24px; --r6:32px; --rfull:999px;
  --ease:cubic-bezier(.2,0,0,1);
}

body.dark {
  --bg:#0b120e;   --bg2:#111a14;  --bg3:#0c2016;  --card:#182419;
  --sidebar:#040e08;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
  --tx1:#eff0ea;  --tx2:#9a9d94;  --tx3:#5e6158;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ff2);
  background:var(--bg);
  color:var(--tx1);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
button { font-family:var(--ff2); cursor:pointer; border:none; outline:none; background:none; }
input,select,textarea { font-family:var(--ff2); outline:none; border:none; background:none; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
::selection { background:rgba(42,140,83,.22); }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:rgba(42,140,83,.3); border-radius:4px; }


/* ═══════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   Slides down from top when install prompt is available
   ═══════════════════════════════════════════════════════════ */
#pwa-banner {
  position:fixed;
  top:0; left:0; right:0;
  z-index:500;
  background:var(--g900);
  border-bottom:1px solid rgba(255,255,255,.1);
  animation:slideDown .35s var(--ease);
}
@keyframes slideDown { from{transform:translateY(-100%)} to{transform:translateY(0)} }
.pwa-inner {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  max-width:900px;
  margin:0 auto;
}
.pwa-text { flex:1; min-width:0; }
.pwa-text strong { display:block; font-size:13px; font-weight:700; color:#fff; margin-bottom:2px; }
.pwa-text span   { font-size:11px; color:rgba(255,255,255,.45); }
.pwa-install-btn {
  padding:7px 16px;
  background:var(--g500);
  border-radius:var(--rfull);
  color:#fff;
  font-size:13px; font-weight:700;
  flex-shrink:0;
  transition:.15s;
}
.pwa-install-btn:hover { background:var(--g400); }
.pwa-dismiss-btn {
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0; transition:.15s;
}
.pwa-dismiss-btn:hover { background:rgba(255,255,255,.15); color:#fff; }


/* ═══════════════════════════════════════════════════════════
   PORTAL
   ═══════════════════════════════════════════════════════════ */
#portal {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  background:var(--g900);
  background-image:
    radial-gradient(ellipse 70% 60% at 20% 110%,rgba(33,103,62,.28),transparent),
    radial-gradient(ellipse 50% 40% at 80% -10%,rgba(200,146,58,.12),transparent);
  padding:20px; position:relative; overflow:hidden;
}
#portal::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(96,212,142,.05) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.portal-box {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r6);
  padding:52px 48px;
  max-width:580px; width:100%;
  backdrop-filter:blur(24px);
  position:relative; z-index:1;
  animation:riseIn .5s var(--ease) forwards;
}
@keyframes riseIn { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.portal-brand { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px; }
.portal-logo {
  width:56px; height:56px; border-radius:18px;
  background:linear-gradient(135deg,var(--g500),var(--g300));
  display:flex; align-items:center; justify-content:center;
  font-size:28px; box-shadow:0 0 32px rgba(42,140,83,.45);
}
.portal-name { font-family:var(--ff1); font-size:32px; font-weight:800; color:#fff; letter-spacing:-.04em; }
.portal-sub  { font-size:13px; color:rgba(255,255,255,.4); text-align:center; margin-bottom:44px; letter-spacing:.02em; }
.portal-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.p-btn {
  padding:30px 20px; border-radius:var(--r4);
  cursor:pointer;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  transition:all .25s var(--ease); text-align:center;
}
.p-btn:hover { background:rgba(255,255,255,.1); border-color:rgba(96,212,142,.4); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.p-btn:active { transform:translateY(-1px); }
.p-btn-ico   { font-size:34px; margin-bottom:14px; display:block; }
.p-btn-title { font-family:var(--ff1); font-size:18px; font-weight:700; color:#fff; margin-bottom:6px; }
.p-btn-sub   { font-size:12px; color:rgba(255,255,255,.38); line-height:1.5; }
.portal-hint { font-size:11px; color:rgba(255,255,255,.28); text-align:center; line-height:1.9; }
.portal-hint strong { color:var(--g300); }


/* ═══════════════════════════════════════════════════════════
   ADMIN AUTH
   ═══════════════════════════════════════════════════════════ */
#auth {
  display:none; min-height:100vh;
  background:var(--g900);
  background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(33,103,62,.18),transparent);
  overflow:hidden; position:relative;
}
#auth::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(96,212,142,.06) 1px,transparent 1px);
  background-size:30px 30px; pointer-events:none;
}
.auth-split { display:flex; min-height:100vh; }
.auth-left {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:64px 72px; position:relative; z-index:1;
}
.auth-logo-row { display:flex; align-items:center; gap:12px; margin-bottom:60px; }
.auth-logo {
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,var(--g500),var(--g300));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 0 24px rgba(42,140,83,.4);
}
.auth-logo-name { font-family:var(--ff1); font-size:22px; font-weight:800; color:#fff; letter-spacing:-.04em; }
.auth-hl {
  font-family:var(--ff1); font-size:clamp(32px,4vw,50px); font-weight:800;
  line-height:1.1; letter-spacing:-.04em; color:#fff; margin-bottom:18px;
}
.auth-hl em { font-style:normal; background:linear-gradient(90deg,var(--g300),var(--gold2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.auth-tag  { font-size:15px; color:rgba(255,255,255,.42); line-height:1.7; max-width:360px; margin-bottom:48px; }
.auth-feat { display:flex; align-items:center; gap:12px; font-size:13px; color:rgba(255,255,255,.58); margin-bottom:14px; }
.auth-feat-dot {
  width:26px; height:26px; border-radius:7px;
  background:rgba(96,212,142,.12); border:1px solid rgba(96,212,142,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--g300); flex-shrink:0;
}
.auth-right {
  width:460px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:40px 44px;
  background:rgba(255,255,255,.03);
  border-left:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(20px);
  position:relative; z-index:1;
}
.auth-form { width:100%; }
.auth-form-title { font-family:var(--ff1); font-size:26px; font-weight:800; color:#fff; letter-spacing:-.04em; margin-bottom:5px; }
.auth-form-sub   { font-size:13px; color:rgba(255,255,255,.38); margin-bottom:28px; }
.auth-tabs {
  display:flex; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--r2);
  padding:4px; gap:4px; margin-bottom:22px;
}
.atab { flex:1; padding:9px; border-radius:var(--r1); font-size:13px; font-weight:600; color:rgba(255,255,255,.38); transition:.2s; cursor:pointer; border:none; background:none; }
.atab.on { background:var(--g600); color:#fff; box-shadow:0 2px 8px rgba(33,103,62,.4); }
.af { margin-bottom:13px; }
.al { display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:5px; }
.aiw { position:relative; }
.aii { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.2); font-size:13px; pointer-events:none; }
.ai  { width:100%; padding:11px 13px 11px 38px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--r2); color:#fff; font-size:14px; transition:.2s; }
.ai:focus { border-color:rgba(96,212,142,.5); background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(96,212,142,.12); }
.ai::placeholder { color:rgba(255,255,255,.18); }
.abtn {
  width:100%; padding:13px;
  background:linear-gradient(135deg,var(--g600),var(--g400));
  border-radius:var(--r2); color:#fff; font-size:15px; font-weight:700;
  box-shadow:var(--shg); transition:all .2s; margin-top:6px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; border:none;
}
.abtn:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(33,103,62,.5); }

/* ── Auth back-nav row (Phase 2) ── */
.auth-back-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
}
.auth-back-link {
  font-size:12px;
  color:rgba(255,255,255,.35);
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:.15s;
}
.auth-back-link:hover { color:rgba(255,255,255,.7); }

.demo-hint {
  margin-top:16px; padding:13px;
  background:rgba(96,212,142,.07);
  border:1px solid rgba(96,212,142,.16);
  border-radius:var(--r2);
  font-size:11px; color:rgba(255,255,255,.42); line-height:1.8;
}
.demo-hint strong { color:var(--g300); }


/* ═══════════════════════════════════════════════════════════
   CUSTOMER STORE
   ═══════════════════════════════════════════════════════════ */
#store { display:none; min-height:100vh; flex-direction:column; background:var(--bg); }

/* Store top bar */
.store-top {
  height:66px; background:var(--g900);
  display:flex; align-items:center; padding:0 14px; gap:10px;
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.store-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.store-logo  {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--g500),var(--g300));
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.store-name { font-family:var(--ff1); font-size:20px; font-weight:800; color:#fff; letter-spacing:-.04em; }
.store-search-wrap { flex:1; max-width:480px; position:relative; }
.store-search {
  width:100%; padding:10px 16px 10px 40px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  border-radius:var(--rfull); color:#fff; font-size:13px; transition:.2s;
}
.store-search:focus { background:rgba(255,255,255,.16); border-color:rgba(96,212,142,.4); box-shadow:0 0 0 3px rgba(96,212,142,.1); }
.store-search::placeholder { color:rgba(255,255,255,.35); }
.search-ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.35); font-size:13px; pointer-events:none; }
.curr-sw {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rfull); padding:7px 14px;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.8);
  cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0;
}
.curr-sw:hover { background:rgba(255,255,255,.14); border-color:rgba(96,212,142,.35); }

/* ── WhatsApp topbar button (Phase 2) ── */
.wa-topbar-btn {
  display:flex; align-items:center; gap:7px;
  background:var(--wa); border-radius:var(--rfull);
  padding:8px 14px; color:#fff;
  font-size:13px; font-weight:700;
  transition:.2s; flex-shrink:0; border:none;
  box-shadow:var(--shw);
}
.wa-topbar-btn:hover { background:var(--wa-dark); transform:translateY(-1px); }
.wa-topbar-txt { display:none; }

/* Cart button */
.cart-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--g600); border-radius:var(--rfull);
  padding:9px 18px; color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; transition:.2s; position:relative;
  flex-shrink:0; box-shadow:var(--shg); border:none;
}
.cart-btn:hover { background:var(--g500); }
.cart-badge {
  position:absolute; top:-7px; right:-7px;
  width:20px; height:20px; border-radius:50%;
  background:var(--red); font-size:11px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
  animation:popIn .25s var(--ease);
}
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }

/* ── Staff login shortcut in store topbar (Phase 2) ── */
.store-staff-btn {
  width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55); font-size:13px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s; flex-shrink:0;
}
.store-staff-btn:hover { background:rgba(255,255,255,.16); color:#fff; }

/* ── Loyalty banner (Phase 2) ── */
.loyalty-banner {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(90deg,rgba(200,146,58,.15),rgba(200,146,58,.05));
  border-bottom:1px solid rgba(200,146,58,.22);
  padding:9px 18px;
  font-size:13px; color:var(--tx1);
}
.loyalty-banner strong { color:var(--gold3); }
.loyalty-banner-close {
  margin-left:auto; background:none; border:none;
  font-size:13px; color:var(--tx3); cursor:pointer;
  padding:2px 6px; border-radius:4px; transition:.12s;
}
.loyalty-banner-close:hover { background:var(--bg2); color:var(--tx1); }

/* Currency dropdown */
.curr-drop {
  display:none; position:fixed; top:74px; right:14px; z-index:200;
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--r4); padding:6px; box-shadow:var(--sh3);
  min-width:240px; animation:fadeDown .2s var(--ease);
}
.curr-drop.open { display:block; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.curr-opt { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r2); cursor:pointer; transition:.12s; }
.curr-opt:hover { background:var(--bg2); }
.curr-opt.on    { background:var(--bg3); }
.curr-flag      { font-size:18px; flex-shrink:0; }
.curr-code-name { flex:1; }
.curr-code-txt  { font-size:13px; font-weight:700; color:var(--tx1); }
.curr-name-txt  { font-size:10px; color:var(--tx3); }
.curr-rate-txt  { font-size:12px; color:var(--tx3); }
.curr-chg       { font-size:10px; font-weight:700; padding:2px 6px; border-radius:var(--rfull); margin-left:4px; }
.chg-up { background:rgba(42,140,83,.1);  color:var(--g600); }
.chg-dn { background:rgba(229,57,53,.08); color:var(--red);  }

/* Category nav strip */
.cat-nav { background:var(--g800); border-bottom:1px solid rgba(255,255,255,.07); padding:0 18px; display:flex; gap:2px; overflow-x:auto; }
.cat-nav::-webkit-scrollbar { height:0; }
.cat-nav-item {
  padding:12px 18px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.5); cursor:pointer; transition:.15s;
  white-space:nowrap; border-bottom:2px solid transparent; flex-shrink:0;
}
.cat-nav-item:hover { color:rgba(255,255,255,.85); }
.cat-nav-item.on    { color:var(--g300); border-bottom-color:var(--g400); }

/* Store content */
.store-content { max-width:1300px; margin:0 auto; width:100%; padding:22px 18px; }

/* ── Promo hero banner (Phase 2) ── */
.promo-hero { margin-bottom:18px; }
.promo-hero-inner {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg,rgba(200,146,58,.14),rgba(200,146,58,.06));
  border:1px solid rgba(200,146,58,.3);
  border-radius:var(--r3); padding:14px 18px;
}
.promo-hero-text { flex:1; min-width:0; }
.promo-hero-title { font-family:var(--ff1); font-size:15px; font-weight:700; color:var(--tx1); margin-bottom:3px; }
.promo-hero-sub   { font-size:13px; color:var(--tx2); }
.promo-hero-sub strong { color:var(--gold3); letter-spacing:.04em; }
.promo-copy-btn {
  padding:7px 14px; background:var(--gold); border-radius:var(--rfull);
  color:#fff; font-size:12px; font-weight:700; flex-shrink:0;
  transition:.15s; border:none; cursor:pointer;
}
.promo-copy-btn:hover { background:var(--gold3); }
.promo-hero-close {
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.06); border:none;
  color:var(--tx3); font-size:12px; cursor:pointer; flex-shrink:0; transition:.12s;
}
.promo-hero-close:hover { background:var(--bg2); color:var(--tx1); }

/* Filters row */
.filters-row { display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.f-pill {
  padding:7px 16px; border-radius:var(--rfull);
  border:1px solid var(--border2); background:var(--card);
  font-size:12px; font-weight:600; color:var(--tx2);
  cursor:pointer; transition:.18s; white-space:nowrap;
}
.f-pill:hover { border-color:var(--g500); color:var(--g600); }
.f-pill.on    { background:var(--g500); border-color:var(--g500); color:#fff; }
.f-sort {
  padding:7px 14px; border-radius:var(--rfull);
  border:1px solid var(--border2); background:var(--card);
  font-size:12px; font-weight:600; color:var(--tx2);
  cursor:pointer; -webkit-appearance:none;
}
.results-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.results-title { font-family:var(--ff1); font-size:17px; font-weight:700; color:var(--tx1); letter-spacing:-.03em; }
.results-count { font-size:12px; color:var(--tx3); }

/* Product grid */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(188px,1fr)); gap:14px; }
.prod-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r4); overflow:hidden;
  cursor:pointer; transition:all .22s var(--ease); position:relative;
}
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--sh2); border-color:rgba(33,103,62,.2); }
.prod-card:active { transform:translateY(-1px) scale(.99); }
.prod-card.oos { opacity:.55; pointer-events:none; }
.prod-img-wrap {
  height:158px; background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.prod-img { width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.prod-card:hover .prod-img { transform:scale(1.05); }
.prod-no-img { width:72px; height:72px; border-radius:var(--r3); background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:34px; }
.stock-badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; padding:3px 8px; border-radius:var(--rfull); }
.badge-out { background:rgba(229,57,53,.12); color:var(--red);   border:1px solid rgba(229,57,53,.22); }
.badge-low { background:rgba(245,158,11,.12); color:#c47a06;    border:1px solid rgba(245,158,11,.22); }
.tag-strip { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:3px; }
.dtag        { font-size:9px; font-weight:700; padding:2px 6px; border-radius:var(--rfull); background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(4px); }
.dtag-halal  { background:rgba(33,103,62,.85); }
.dtag-vegan  { background:rgba(96,212,142,.85); color:#0d2818; }
.dtag-gf     { background:rgba(200,146,58,.85); }
.prod-body   { padding:11px 13px 13px; }
.prod-cat    { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--tx3); margin-bottom:3px; }
.prod-name   { font-family:var(--ff1); font-size:14px; font-weight:700; color:var(--tx1); line-height:1.3; margin-bottom:3px; }
.prod-weight { font-size:11px; color:var(--tx3); margin-bottom:8px; }
.prod-bottom { display:flex; align-items:flex-end; justify-content:space-between; }
.prod-price  { font-family:var(--ff1); font-size:20px; font-weight:800; color:var(--g600); letter-spacing:-.02em; line-height:1; }
.prod-gbp    { font-size:10px; color:var(--tx3); margin-top:2px; }
.prod-add    {
  width:32px; height:32px; border-radius:9px;
  background:var(--g600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; transition:.15s;
  box-shadow:0 2px 8px rgba(33,103,62,.3);
}
.prod-add:hover { background:var(--g500); transform:scale(1.1); }

.load-more-wrap { text-align:center; margin-top:28px; }

/* ── Store footer nav (Phase 2) ── */
.store-footer-nav {
  text-align:center; padding:20px 18px 36px;
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--tx3);
}
.store-footer-nav span { cursor:pointer; transition:.15s; display:flex; align-items:center; gap:5px; }
.store-footer-nav span:hover { color:var(--tx1); }
.sfn-div { color:var(--border2); pointer-events:none; }


/* ═══════════════════════════════════════════════════════════
   CART DRAWER
   ═══════════════════════════════════════════════════════════ */
.cart-drawer { display:none; position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.52); backdrop-filter:blur(4px); }
.cart-drawer.open { display:block; }
.cart-panel {
  position:absolute; right:0; top:0; bottom:0;
  width:100%; max-width:440px;
  background:var(--card);
  display:flex; flex-direction:column;
  box-shadow:var(--sh3);
  animation:slideR .28s var(--ease);
}
@keyframes slideR { from{transform:translateX(100%)} to{transform:translateX(0)} }
.cart-head { padding:20px 22px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.cart-title { font-family:var(--ff1); font-size:20px; font-weight:800; letter-spacing:-.04em; }
.cart-cls   {
  width:34px; height:34px; border-radius:9px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--tx2); display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; transition:.14s;
}
.cart-cls:hover { background:var(--bg3); color:var(--tx1); }
.cart-scroll { flex:1; overflow-y:auto; padding:14px 22px; }
.cart-empty  { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; gap:10px; }
.cart-empty-txt { font-size:15px; font-weight:600; color:var(--tx2); }
.cart-empty-sub { font-size:12px; color:var(--tx3); }
.c-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.c-row:last-child { border-bottom:none; }
.c-img  { width:52px; height:52px; border-radius:var(--r2); background:var(--bg2); overflow:hidden; flex-shrink:0; }
.c-img img { width:100%; height:100%; object-fit:cover; }
.c-info   { flex:1; min-width:0; }
.c-name   { font-weight:700; font-size:13px; color:var(--tx1); margin-bottom:2px; }
.c-price  { font-size:12px; color:var(--tx3); }
.qty-ctrl { display:flex; align-items:center; gap:6px; }
.q-btn    {
  width:26px; height:26px; border-radius:7px;
  background:var(--bg2); border:1px solid var(--border2);
  color:var(--tx1); font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:.14s; cursor:pointer;
}
.q-btn:hover { background:var(--g100); border-color:var(--g400); color:var(--g700); }
.q-n     { font-weight:800; font-size:14px; min-width:22px; text-align:center; }
.c-total { font-weight:800; font-size:14px; min-width:52px; text-align:right; }

/* Cart footer */
.cart-foot { border-top:1px solid var(--border); padding:14px 22px; background:var(--bg2); }
.ct-row { display:flex; justify-content:space-between; font-size:13px; color:var(--tx2); margin-bottom:6px; }
.ct-row.grand {
  font-family:var(--ff1); font-size:21px; font-weight:800; color:var(--tx1);
  letter-spacing:-.03em; border-top:1px solid var(--border2);
  padding-top:10px; margin-top:6px; margin-bottom:0;
}

/* ── Promo code input row (Phase 2) ── */
.promo-input-row {
  display:flex; gap:6px; margin-bottom:8px;
}
.promo-inp {
  flex:1; padding:9px 12px;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--r2); color:var(--tx1); font-size:13px;
  transition:.15s;
}
.promo-inp:focus { border-color:var(--g500); box-shadow:0 0 0 3px rgba(42,140,83,.1); }
.promo-inp::placeholder { color:var(--tx3); }
.promo-apply-btn {
  padding:9px 14px;
  background:var(--g600); border-radius:var(--r2);
  color:#fff; font-size:12px; font-weight:700;
  border:none; cursor:pointer; transition:.15s; flex-shrink:0;
}
.promo-apply-btn:hover { background:var(--g500); }

/* ── Promo applied badge (Phase 2) ── */
.promo-applied {
  display:flex; align-items:center; gap:8px;
  background:rgba(42,140,83,.08); border:1px solid rgba(42,140,83,.2);
  border-radius:var(--r2); padding:8px 12px;
  font-size:13px; font-weight:600; color:var(--g600);
  margin-bottom:8px;
}

/* ── Promo saving row ── */
.promo-saving { color:var(--g600) !important; }

/* ── Loyalty earn preview (Phase 2) ── */
.loyalty-earn-row {
  display:flex; align-items:center; gap:7px;
  background:rgba(200,146,58,.08); border:1px solid rgba(200,146,58,.18);
  border-radius:var(--r2); padding:8px 12px;
  font-size:12px; color:var(--tx2); margin-top:8px;
}
.loyalty-earn-row strong { color:var(--gold3); }

/* Checkout form */
.ckout { display:none; background:var(--card); padding:14px 22px 0; }
.ck-title     { font-family:var(--ff1); font-size:15px; font-weight:700; margin-bottom:10px; }
.ck-title-opt { font-size:11px; color:var(--tx3); font-weight:400; }
.ck-inp {
  width:100%; padding:10px 13px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r2); color:var(--tx1); font-size:13px;
  transition:.15s; margin-bottom:8px;
}
.ck-inp:focus { border-color:var(--g500); box-shadow:0 0 0 3px rgba(42,140,83,.1); }
.ck-inp::placeholder { color:var(--tx3); }
.ck-sel {
  width:100%; padding:10px 13px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r2); color:var(--tx1); font-size:13px;
  -webkit-appearance:none; cursor:pointer; margin-bottom:8px;
}
.ck-pay-title { font-weight:700; font-size:13px; margin-bottom:8px; margin-top:4px; }
.pay-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:12px; }
.pay-opt  {
  padding:10px 4px; border:1.5px solid var(--border2);
  border-radius:var(--r2); text-align:center; cursor:pointer; transition:.18s; background:var(--card);
}
.pay-opt:hover { border-color:var(--g500); background:var(--g50); }
.pay-opt.sel   { border-color:var(--g500); background:var(--g50); box-shadow:0 0 0 2px rgba(42,140,83,.18); }
.pay-ico { font-size:20px; display:block; margin-bottom:4px; }
.pay-lbl { font-size:10px; font-weight:700; color:var(--tx2); display:block; line-height:1.2; }

/* ── WhatsApp order button in checkout (Phase 2) ── */
.wa-order-btn {
  width:100%; padding:12px;
  background:var(--wa);
  border-radius:var(--r2); color:#fff;
  font-size:14px; font-weight:700;
  border:none; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:var(--shw); margin-bottom:10px;
}
.wa-order-btn:hover { background:var(--wa-dark); transform:translateY(-1px); }
.wa-order-btn i { font-size:18px; }

/* ── Checkout divider ── */
.ck-divider {
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px; color:var(--tx3); font-size:11px;
}
.ck-divider::before,
.ck-divider::after { content:''; flex:1; height:1px; background:var(--border2); }

.ck-btn {
  width:100%; padding:13px;
  background:linear-gradient(135deg,var(--g600),var(--g400));
  border-radius:var(--r2); color:#fff; font-size:15px; font-weight:800;
  box-shadow:var(--shg); transition:all .2s;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; border:none;
}
.ck-btn:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(33,103,62,.45); }
.ck-secure-note {
  text-align:center; font-size:11px; color:var(--tx3);
  margin:8px 0 14px; display:flex; align-items:center; justify-content:center; gap:5px;
}
.ck-proceed {
  width:100%; padding:13px; background:var(--g600);
  border-radius:var(--r2); color:#fff; font-size:14px; font-weight:700;
  cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:8px; border:none;
}
.ck-proceed:hover { background:var(--g500); }


/* ═══════════════════════════════════════════════════════════
   ORDER TRACKER
   ═══════════════════════════════════════════════════════════ */
#tracker { display:none; position:fixed; inset:0; z-index:250; background:var(--g900); overflow-y:auto; }
#tracker.show { display:block; }
.trk-wrap {
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--g900);
  background-image:radial-gradient(ellipse 70% 50% at 50% -5%,rgba(33,103,62,.22),transparent);
  position:relative;
}
.trk-wrap::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(96,212,142,.05) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.trk-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; z-index:1; flex-wrap:wrap; gap:10px;
}
.trk-brand { display:flex; align-items:center; gap:10px; }
.trk-logo  { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--g500),var(--g300)); display:flex; align-items:center; justify-content:center; font-size:16px; }
.trk-name  { font-family:var(--ff1); font-size:18px; font-weight:800; color:#fff; letter-spacing:-.04em; }

/* ── Tracker nav buttons (Phase 2) ── */
.trk-nav-btn {
  padding:8px 16px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--rfull);
  font-size:12px; font-weight:600; color:rgba(255,255,255,.75);
  cursor:pointer; transition:.2s;
  display:inline-flex; align-items:center; gap:6px;
}
.trk-nav-btn:hover { background:rgba(255,255,255,.16); color:#fff; }

.trk-body { flex:1; display:flex; flex-direction:column; align-items:center; padding:36px 20px 64px; position:relative; z-index:1; }
.trk-ring {
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,var(--g700),var(--g500));
  display:flex; align-items:center; justify-content:center;
  font-size:40px; margin:0 auto 22px;
  box-shadow:0 0 0 10px rgba(33,103,62,.12),0 0 0 20px rgba(33,103,62,.06);
  animation:ringPop .6s var(--ease);
}
@keyframes ringPop { 0%{transform:scale(0);opacity:0} 65%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
.trk-title { font-family:var(--ff1); font-size:30px; font-weight:800; color:#fff; letter-spacing:-.04em; text-align:center; margin-bottom:6px; }
.trk-cname { font-size:15px; color:rgba(255,255,255,.45); text-align:center; margin-bottom:14px; }

/* ── Loyalty earned badge on tracker (Phase 2) ── */
.trk-loyalty-badge {
  display:flex; align-items:center; gap:8px;
  background:rgba(200,146,58,.14); border:1px solid rgba(200,146,58,.3);
  border-radius:var(--rfull); padding:8px 20px;
  font-size:13px; color:var(--gold2); margin-bottom:16px;
}
.trk-loyalty-badge strong { color:var(--gold2); }

.trk-card {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r4); padding:24px 28px;
  max-width:480px; width:100%; margin-bottom:22px; backdrop-filter:blur(14px);
}
.trk-num     { font-family:var(--ff1); font-size:52px; font-weight:900; color:var(--g300); letter-spacing:-.05em; text-align:center; line-height:1; margin-bottom:4px; }
.trk-num-lbl { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.32); text-align:center; margin-bottom:22px; }
.t-steps     { position:relative; padding:0 8px; }
.t-steps-line{ position:absolute; top:20px; left:28px; right:28px; height:3px; background:rgba(255,255,255,.1); z-index:0; border-radius:2px; }
.t-steps-prog{ position:absolute; top:20px; left:28px; height:3px; background:linear-gradient(90deg,var(--g500),var(--g300)); z-index:1; border-radius:2px; transition:width 1.2s var(--ease); }
.t-steps-row { display:flex; justify-content:space-between; position:relative; z-index:2; }
.t-step  { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.t-dot   { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; transition:all .5s var(--ease); background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.1); color:rgba(255,255,255,.28); }
.t-dot.done  { background:var(--g600); border-color:var(--g400); color:#fff; box-shadow:0 0 0 4px rgba(33,103,62,.22); }
.t-dot.active{ background:var(--g500); border-color:var(--g300); color:#fff; animation:tdPulse 2s ease-in-out infinite; }
@keyframes tdPulse { 0%,100%{box-shadow:0 0 0 4px rgba(42,140,83,.3)} 50%{box-shadow:0 0 0 10px rgba(42,140,83,0)} }
.t-lbl        { font-size:10px; font-weight:600; color:rgba(255,255,255,.38); text-align:center; line-height:1.3; max-width:60px; }
.t-lbl.done   { color:rgba(255,255,255,.72); }
.t-lbl.active { color:var(--g300); font-weight:700; }
.trk-status { max-width:480px; width:100%; background:rgba(42,140,83,.08); border:1px solid rgba(42,140,83,.2); border-radius:var(--r3); padding:16px 20px; display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.trk-s-ico  { width:42px; height:42px; border-radius:11px; background:rgba(42,140,83,.15); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.trk-s-title{ font-size:15px; font-weight:700; color:var(--g300); margin-bottom:2px; }
.trk-s-sub  { font-size:13px; color:rgba(255,255,255,.42); }
.trk-eta    { display:inline-flex; align-items:center; gap:8px; background:rgba(200,146,58,.12); border:1px solid rgba(200,146,58,.25); border-radius:var(--rfull); padding:8px 20px; font-size:14px; font-weight:600; color:var(--gold2); margin-bottom:22px; }
.trk-pay-pill{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--rfull); padding:6px 14px; font-size:12px; color:rgba(255,255,255,.48); margin-bottom:22px; }
.trk-summary { max-width:480px; width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r3); padding:18px 20px; margin-bottom:20px; }
.trk-sum-title  { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:12px; }
.trk-item-row   { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.trk-item-row:last-child { border-bottom:none; }
.trk-item-img   { width:36px; height:36px; border-radius:7px; background:rgba(255,255,255,.08); overflow:hidden; flex-shrink:0; }
.trk-item-img img{ width:100%; height:100%; object-fit:cover; }
.trk-item-name  { font-size:13px; color:rgba(255,255,255,.7); flex:1; }
.trk-item-qty   { font-size:12px; color:rgba(255,255,255,.32); margin-right:6px; }
.trk-item-price { font-size:13px; font-weight:600; color:rgba(255,255,255,.6); }
.trk-total-row  { display:flex; justify-content:space-between; padding-top:10px; margin-top:6px; border-top:1px solid rgba(255,255,255,.1); }
.trk-total-lbl  { font-size:14px; font-weight:700; color:rgba(255,255,255,.65); }
.trk-total-val  { font-family:var(--ff1); font-size:20px; font-weight:900; color:var(--g300); letter-spacing:-.03em; }

/* ── WhatsApp share button on tracker (Phase 2) ── */
.trk-wa-share-btn {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--wa); border-radius:var(--rfull);
  padding:11px 24px; color:#fff;
  font-size:14px; font-weight:700;
  border:none; cursor:pointer; transition:.2s;
  box-shadow:var(--shw); margin-bottom:18px;
}
.trk-wa-share-btn:hover { background:var(--wa-dark); transform:translateY(-1px); }
.trk-wa-share-btn i { font-size:18px; }

.trk-refresh-note { font-size:12px; color:rgba(255,255,255,.22); text-align:center; max-width:320px; }


/* ═══════════════════════════════════════════════════════════
   ADMIN APP SHELL
   ═══════════════════════════════════════════════════════════ */
#app { display:none; }
#app.on { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
  width:var(--sw); min-height:100vh; background:var(--sidebar);
  position:fixed; left:0; top:0; bottom:0; z-index:50;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease); overflow:hidden;
}
.sidebar::before {
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(33,103,62,.14),transparent 65%);
  top:-80px; left:-60px; pointer-events:none;
}
.sb-logo { padding:20px 18px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.07); position:relative; z-index:1; }
.sb-logo-ico { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--g500),var(--g300)); display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 0 16px rgba(42,140,83,.3); flex-shrink:0; }
.sb-sname { font-family:var(--ff1); font-size:18px; font-weight:800; color:#fff; letter-spacing:-.04em; line-height:1; }
.sb-stag  { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-top:2px; }
.sb-nav   { flex:1; overflow-y:auto; padding:10px 8px; }
.sb-nav::-webkit-scrollbar { width:0; }
.nav-sec  { font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.18); padding:14px 12px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:2px; border-radius:var(--r2); color:rgba(255,255,255,.45); font-size:13px; font-weight:500; cursor:pointer; transition:all .14s; position:relative; }
.nav-item:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.05); }
.nav-item.on    { color:#fff; background:linear-gradient(90deg,rgba(33,103,62,.22),rgba(33,103,62,.05)); }
.nav-item.on::before { content:''; position:absolute; left:0; top:20%; height:60%; width:3px; background:linear-gradient(180deg,var(--g400),var(--g300)); border-radius:0 3px 3px 0; }
.nav-ico  { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.nav-item.on .nav-ico { background:rgba(42,140,83,.2); color:var(--g300); }
.nav-badge       { margin-left:auto; background:var(--g500); color:#fff; font-size:10px; font-weight:800; padding:2px 7px; border-radius:var(--rfull); }
.nav-badge.red   { background:var(--red); }
.nav-badge.amber { background:var(--amber); }

/* Sidebar bottom */
.sb-bottom { padding:10px 8px 14px; border-top:1px solid rgba(255,255,255,.07); }

/* ── View Customer Store button in sidebar (Phase 2) ── */
.sb-view-store-btn {
  width:100%; margin-bottom:10px;
  padding:10px 14px;
  background:rgba(37,211,102,.1);
  border:1px solid rgba(37,211,102,.22);
  border-radius:var(--r2);
  color:rgba(255,255,255,.85);
  font-size:13px; font-weight:600;
  cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.sb-view-store-btn:hover { background:rgba(37,211,102,.2); color:#fff; border-color:rgba(37,211,102,.4); }

.sb-stat     { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r2); padding:11px 13px; margin-bottom:8px; }
.sb-stat-lbl { font-size:10px; color:rgba(255,255,255,.28); letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.sb-stat-val { font-family:var(--ff1); font-size:21px; font-weight:900; color:var(--g300); letter-spacing:-.03em; }
.sb-stat-sub { font-size:10px; color:rgba(255,255,255,.25); margin-top:2px; }
.user-row    { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r2); cursor:pointer; transition:.14s; }
.user-row:hover { background:rgba(255,255,255,.06); }
.user-av { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--g700),var(--g500)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#fff; border:1.5px solid rgba(96,212,142,.22); flex-shrink:0; }
.u-name  { font-size:13px; font-weight:600; color:#fff; }
.u-role  { font-size:11px; color:rgba(255,255,255,.3); }

/* Main wrap */
.main-wrap { margin-left:var(--sw); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar    { height:var(--hh); background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 26px; gap:12px; position:sticky; top:0; z-index:30; transition:background .3s; }
.tb-left   { flex:1; }
.tb-title  { font-family:var(--ff1); font-size:19px; font-weight:700; color:var(--tx1); letter-spacing:-.04em; line-height:1; }
.tb-sub    { font-size:11px; color:var(--tx3); margin-top:3px; }
.tb-right  { display:flex; align-items:center; gap:8px; }
.live-pill { display:flex; align-items:center; gap:7px; padding:5px 14px; background:rgba(42,140,83,.08); border:1px solid rgba(42,140,83,.2); border-radius:var(--rfull); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--g500); }
.live-dot  { width:7px; height:7px; border-radius:50%; background:var(--g400); animation:ldPulse 2s ease-in-out infinite; }
@keyframes ldPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(42,140,83,.4)} 50%{opacity:.5;box-shadow:0 0 0 6px rgba(42,140,83,0)} }
.tb-ico-btn { width:36px; height:36px; border-radius:var(--r1); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--tx2); background:var(--bg2); border:1px solid var(--border); transition:.14s; cursor:pointer; }
.tb-ico-btn:hover { background:var(--bg3); color:var(--tx1); }

/* ── View Store button in topbar (Phase 2) ── */
.tb-store-btn {
  display:flex; align-items:center; gap:7px;
  padding:8px 16px;
  background:rgba(37,211,102,.1);
  border:1px solid rgba(37,211,102,.22);
  border-radius:var(--r2);
  color:var(--g600); font-size:13px; font-weight:600;
  cursor:pointer; transition:.2s;
}
.tb-store-btn:hover { background:rgba(37,211,102,.18); border-color:rgba(37,211,102,.4); }
.tb-store-txt { }

.tb-cta { display:flex; align-items:center; gap:7px; padding:9px 18px; background:linear-gradient(135deg,var(--g600),var(--g500)); border-radius:var(--r2); font-size:13px; font-weight:700; color:#fff; box-shadow:var(--shg); transition:.2s; cursor:pointer; border:none; }
.tb-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(33,103,62,.4); }
.mob-toggle { display:none; width:36px; height:36px; border-radius:var(--r1); align-items:center; justify-content:center; font-size:15px; color:var(--tx2); border:1px solid var(--border); background:var(--bg2); cursor:pointer; }
.content { flex:1; padding:26px; overflow-y:auto; }


/* ═══════════════════════════════════════════════════════════
   ADMIN COMPONENT LIBRARY
   ═══════════════════════════════════════════════════════════ */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.kpi { background:var(--card); border:1px solid var(--border); border-radius:var(--r4); padding:20px 22px; position:relative; overflow:hidden; transition:transform .22s var(--ease),box-shadow .22s var(--ease); }
.kpi:hover { transform:translateY(-3px); box-shadow:var(--sh2); }
.kpi::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--kc,transparent),transparent 60%); opacity:.05; pointer-events:none; }
.kpi-top  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.kpi-ico  { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.kpi-badge{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--rfull); }
.kpi-badge.up { background:rgba(42,140,83,.1);  color:var(--g600); }
.kpi-badge.dn { background:rgba(229,57,53,.08); color:var(--red);  }
.kpi-lbl  { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--tx3); margin-bottom:5px; }
.kpi-val  { font-family:var(--ff1); font-size:32px; font-weight:900; color:var(--tx1); letter-spacing:-.04em; line-height:1; }
.kpi-sub  { font-size:12px; color:var(--tx3); margin-top:5px; }
.kpi-spark{ display:flex; align-items:flex-end; gap:2px; height:24px; margin-top:12px; }
.sp-b { flex:1; border-radius:2px 2px 0 0; transition:height .5s var(--ease); }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r4); padding:20px 22px; box-shadow:var(--sh1); transition:box-shadow .2s; }
.card:hover { box-shadow:var(--sh2); }
.card-hd    { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.card-title { font-family:var(--ff1); font-size:15px; font-weight:700; color:var(--tx1); letter-spacing:-.03em; }
.card-sub   { font-size:12px; color:var(--tx3); margin-top:2px; }
.card-pill  { font-size:11px; font-weight:600; padding:4px 11px; border-radius:var(--rfull); background:var(--bg2); color:var(--tx2); border:1px solid var(--border); }
.g    { display:grid; gap:18px; }
.g2   { grid-template-columns:1fr 1fr; }
.g3   { grid-template-columns:1fr 1fr 1fr; }
.g4   { grid-template-columns:repeat(4,1fr); }
.g75  { grid-template-columns:7fr 5fr; }
.gauto{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.tw   { overflow-x:auto; margin:0 -2px; padding:0 2px; }
table { width:100%; border-collapse:collapse; }
thead tr { border-bottom:1px solid var(--border2); }
thead th { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--tx3); padding:7px 11px; text-align:left; white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--border); transition:background .12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg2); }
tbody td { padding:12px 11px; font-size:13px; color:var(--tx1); }
td.r,th.r { text-align:right; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--rfull); white-space:nowrap; }
.chip::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.cg  { background:rgba(42,140,83,.1);  color:var(--g600);  } .cg::before  { background:var(--g400);   }
.ca  { background:rgba(245,158,11,.1); color:#c47a06;      } .ca::before  { background:var(--amber);  }
.cb  { background:rgba(37,99,235,.1);  color:var(--blue);  } .cb::before  { background:var(--blue);   }
.cr  { background:rgba(229,57,53,.08); color:var(--red);   } .cr::before  { background:var(--red);    }
.cn  { background:var(--bg2); color:var(--tx3);            } .cn::before  { background:var(--tx3);    }
.cp  { background:rgba(124,58,237,.1); color:var(--purple);} .cp::before  { background:var(--purple); }
.cau { background:rgba(200,146,58,.1); color:var(--gold3); } .cau::before { background:var(--gold);   }
.btn    { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--r2); font-family:var(--ff2); font-size:13px; font-weight:600; transition:all .14s; white-space:nowrap; cursor:pointer; border:none; }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn-ico{ width:32px; height:32px; padding:0; justify-content:center; border-radius:var(--r1); font-size:13px; }
.bpri   { background:var(--g600); color:#fff; } .bpri:hover   { background:var(--g700); transform:translateY(-1px); box-shadow:var(--shg); }
.bout   { background:transparent; color:var(--tx2); border:1px solid var(--border2); } .bout:hover   { background:var(--bg2); color:var(--tx1); }
.bghost { background:transparent; color:var(--tx3); } .bghost:hover { background:var(--bg2); color:var(--tx1); }
.bdanger{ background:rgba(229,57,53,.08); color:var(--red); border:1px solid rgba(229,57,53,.18); } .bdanger:hover { background:var(--red); color:#fff; }
.bgold  { background:rgba(200,146,58,.1); color:var(--gold3); border:1px solid rgba(200,146,58,.2); } .bgold:hover { background:var(--gold); color:#fff; }
.fld  { margin-bottom:13px; }
.flbl { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); margin-bottom:5px; }
.finp { width:100%; padding:9px 12px; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2); color:var(--tx1); font-size:13px; transition:.15s; }
.finp:focus { border-color:var(--g500); box-shadow:0 0 0 3px rgba(42,140,83,.1); background:var(--card); }
.fsel { width:100%; padding:9px 12px; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2); color:var(--tx1); font-size:13px; -webkit-appearance:none; cursor:pointer; }
.ftarea{ width:100%; padding:9px 12px; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2); color:var(--tx1); font-size:13px; resize:vertical; min-height:70px; }
.mo    { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(5px); z-index:100; align-items:center; justify-content:center; padding:20px; }
.mo.open { display:flex; }
.mo-box{ background:var(--card); border:1px solid var(--border); border-radius:var(--r6); width:100%; max-width:520px; max-height:92vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,.22); animation:moIn .22s var(--ease); }
@keyframes moIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.mo-hd    { padding:22px 26px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--card); z-index:1; }
.mo-title { font-family:var(--ff1); font-size:19px; font-weight:800; letter-spacing:-.04em; color:var(--tx1); }
.mo-cls   { width:30px; height:30px; border-radius:8px; background:var(--bg2); color:var(--tx3); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:.14s; }
.mo-cls:hover { background:var(--bg3); color:var(--tx1); }
.mo-body  { padding:20px 26px; }
.mo-foot  { padding:14px 26px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:9px; }
#toast { position:fixed; bottom:26px; right:26px; z-index:400; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r3); font-size:13px; font-weight:600; color:#fff; max-width:320px; transform:translateY(90px) scale(.95); opacity:0; transition:all .25s var(--ease); pointer-events:none; box-shadow:var(--sh2); }
#toast.show { transform:translateY(0) scale(1); opacity:1; }
#toast.ts { background:#162a1a; border:1px solid rgba(42,140,83,.3); }
#toast.te { background:#2e1212; border:1px solid rgba(229,57,53,.3); }
#toast.ti { background:#121e2e; border:1px solid rgba(37,99,235,.3); }
.t-ico { width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.ts .t-ico { background:rgba(42,140,83,.22); color:var(--g300); }
.te .t-ico { background:rgba(229,57,53,.2);  color:#ff8080; }
.ti .t-ico { background:rgba(37,99,235,.2);  color:#90b8ff; }
.img-zone { border:2px dashed var(--border2); border-radius:var(--r3); padding:24px; text-align:center; cursor:pointer; transition:.2s; background:var(--bg2); }
.img-zone:hover { border-color:var(--g500); background:var(--bg3); }
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:49; backdrop-filter:blur(2px); }
.sb-overlay.open { display:block; }
.sbar      { height:5px; background:var(--bg2); border-radius:var(--rfull); overflow:hidden; margin-top:4px; }
.sbar-fill { height:100%; border-radius:var(--rfull); transition:width .6s var(--ease); }
.sok  { background:var(--g500); }
.slow { background:var(--amber); }
.sout { background:var(--red); }
.pbar      { height:4px; background:var(--bg3); border-radius:var(--rfull); overflow:hidden; margin-top:4px; }
.pbar-fill { height:100%; border-radius:var(--rfull); background:linear-gradient(90deg,var(--g600),var(--g300)); transition:width .8s var(--ease); }
.curr-monitor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.curr-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r3); padding:16px; transition:.2s; }
.curr-card:hover { transform:translateY(-2px); box-shadow:var(--sh2); }
.fu    { opacity:0; transform:translateY(14px); animation:faUp .4s var(--ease) forwards; }
.fu.d1 { animation-delay:.05s; } .fu.d2 { animation-delay:.10s; }
.fu.d3 { animation-delay:.15s; } .fu.d4 { animation-delay:.20s; }
.fu.d5 { animation-delay:.25s; }
@keyframes faUp { to{opacity:1;transform:translateY(0)} }
.flex { display:flex; } .ic { align-items:center; } .jb { justify-content:space-between; }
.je { justify-content:flex-end; } .jc { justify-content:center; }
.gap1{gap:4px;} .gap2{gap:8px;} .gap3{gap:12px;} .gap4{gap:16px;}
.f1{flex:1;} .wf{width:100%;} .tr{text-align:right;} .tc{text-align:center;}
.mt2{margin-top:8px;} .mt3{margin-top:12px;} .mt4{margin-top:16px;}
.mb2{margin-bottom:8px;} .mb3{margin-bottom:12px;} .mb4{margin-bottom:16px;}
.mb5{margin-bottom:20px;} .mb6{margin-bottom:24px;}
.fxs{font-size:11px;} .fsm{font-size:13px;} .fmd{font-size:15px;}
.fd{font-family:var(--ff1);} .fw6{font-weight:600;} .fw7{font-weight:700;} .fw9{font-weight:900;}
.tg{color:var(--g600);} .tred{color:var(--red);} .tm{color:var(--tx3);} .td2{color:var(--tx2);}
.hidden{display:none!important;} .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .g75     { grid-template-columns:1fr; }
}
@media(max-width:820px) {
  :root { --sw:0px; }
  .sidebar       { transform:translateX(-272px); width:272px; }
  .sidebar.open  { transform:translateX(0); }
  .main-wrap     { margin-left:0; }
  .mob-toggle    { display:flex; }
  .auth-left     { display:none; }
  .auth-right    { width:100%; border-left:none; }
  .g2            { grid-template-columns:1fr; }
  .content       { padding:16px; }
  .topbar        { padding:0 16px; }
  .tb-store-txt  { display:none; }
  .store-search-wrap { flex:1; }
}
@media(max-width:640px) {
  .kpi-row  { grid-template-columns:1fr 1fr; }
  .prod-grid { grid-template-columns:repeat(2,1fr); }
  .curr-monitor-grid { grid-template-columns:repeat(2,1fr); }
  .store-name  { display:none; }
  .pay-grid    { grid-template-columns:repeat(3,1fr); }
  .portal-grid { grid-template-columns:1fr; }
  .wa-topbar-txt { display:none; }
  .wa-topbar-btn { padding:8px 10px; }
}
@media(max-width:400px) {
  .kpi-row   { grid-template-columns:1fr; }
  .prod-grid { grid-template-columns:1fr; }
  .trk-nav-btn span { display:none; }
}