/* Nepbyte Bazaar: the shared stylesheet, loaded by every page.
   Design rules and tokens: _changes/design-system/nepbyte-bazaar/MASTER.md */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Mukta:wght@400;500;600;700&display=swap');

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; }
button, [role="button"], a, label[for], summary { touch-action: manipulation; }
ul { list-style: none; }
[hidden] { display: none !important; }

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .875rem;
  --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.4,0,1,1);
  --dur-1: 150ms; --dur-2: 220ms; --dur-3: 320ms;

  --tap: 44px;
  /* Brand colour as RGB so any alpha can be taken from it; the fonts as tokens.
     Appearance settings (html[data-accent], html[data-font]) swap these. */
  --blue-rgb: 37 99 235;
  --font-body: 'DM Sans', 'Mukta', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-head: 'Chakra Petch', 'Mukta', 'DM Sans', sans-serif;
  --nb-header-h: 54px; --nb-bottom-nav-h: 58px;
  --z-sticky: 100; --z-nav: 300; --z-pop: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700;
}

:root,
[data-theme="dark"] {
  --bg-base:    #060912;
  --bg-raised:  #0b1020;
  --bg-float:   #0f152a;
  --bg-hover:   #141b33;

  --border:     rgba(255,255,255,0.055);
  --border-md:  rgba(255,255,255,0.10);
  --border-lg:  rgba(255,255,255,0.16);
  --edge:       rgba(255,255,255,0.05);

  --blue:       #2563eb;
  --blue-dark:  #1e40af;
  --blue-light: #60a5fa;
  --blue-dim:   rgb(var(--blue-rgb) / 0.12);
  --blue-glow:  0 0 22px rgb(var(--blue-rgb) / 0.28);
  --ring:       #60a5fa;

  --amber:      #f59e0b;
  --amber-dim:  rgba(245,158,11,0.12);

  --accent:       #ff7a1a;
  --accent-light: #ff9b52;
  --accent-dim:   rgba(255,122,26,0.14);
  /* Orange with words on it (buttons, badges, flags): a deeper orange so white text reads at 4.5:1. */
  --accent-bg:       #d2470c;
  --accent-bg-hover: #b93e0a;
  --on-accent:       #ffffff;

  --text:       #e7ecf7;
  --text-sub:   #97a3bf;
  --text-muted: #7c89a8;   /* the quietest text that still reads at 4.6:1 */
  --text-faint: #171f30;   /* dividers and disabled glyphs only, never text */

  --success: #22c55e;
  --error:   #ef4444;
  --warning: #f59e0b;

  /* Money semantics; light values below are darkened to stay readable on white. */
  --pos:        #22c55e;
  --neg:        #ef4444;
  --warn-fg:    #f59e0b;
  --info-fg:    var(--blue-light);   /* follow the chosen colour */
  --info-strong:var(--blue-light);
  --mute-fg:    #76869e;
  --violet-fg:  #9370f7;

  /* Text on tinted alert and badge backgrounds. */
  --on-err:  #fca5a5;
  --on-ok:   #86efac;
  --on-warn: #fcd34d;

  --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.22);
  --sh-2: 0 12px 32px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.03);
  --sh-3: 0 24px 64px rgba(0,0,0,.5);

  --logo-filter: none;
  --nav-bg: rgba(6,9,18,0.9);
  --bottom-nav-bg: rgba(11,16,32,0.97);
}

[data-theme="light"] {
  --bg-base:    #f3f5fa;
  --bg-raised:  #ffffff;
  --bg-float:   #f5f8fd;
  --bg-hover:   #e8eef8;

  --border:     rgba(0,0,0,0.065);
  --border-md:  rgba(0,0,0,0.11);
  --border-lg:  rgba(0,0,0,0.17);
  --edge:       rgba(255,255,255,0.6);

  --blue:       #2563eb;
  --blue-dark:  #1e40af;
  --blue-light: #2563eb;
  --blue-dim:   rgb(var(--blue-rgb) / 0.1);
  --blue-glow:  0 0 22px rgb(var(--blue-rgb) / 0.2);
  --ring:       #2563eb;

  --amber:      #d97706;
  --amber-dim:  rgba(217,119,6,0.1);

  --accent:       #ea580c;
  --accent-light: #c2410c;
  --accent-dim:   rgba(234,88,12,0.1);
  --accent-bg:       #d2470c;
  --accent-bg-hover: #b93e0a;
  --on-accent:       #ffffff;

  --text:       #0f172a;
  --text-sub:   #475569;
  --text-muted: #5b6b82;
  --text-faint: #cbd5e1;

  --pos:        #167c3c;
  --neg:        #c81e1e;
  --warn-fg:    #8f4f05;
  --info-fg:    var(--blue-dark);
  --info-strong:var(--blue-dark);
  --mute-fg:    #52627a;
  --violet-fg:  #c2410c;

  --on-err:  #b91c1c;
  --on-ok:   #15803d;
  --on-warn: #92400e;

  --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
  --sh-2: 0 12px 32px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.04);
  --sh-3: 0 24px 64px rgba(15,23,42,.18);

  --logo-filter: invert(1);
  --nav-bg: rgba(255,255,255,0.92);
  --bottom-nav-bg: rgba(255,255,255,0.98);
}

/* ── Appearance settings: the customer's own choices (includes/ui-prefs.php) ── */
/* Colour: the brand colour and its tints. White text on each is 4.7:1 or more. */
html[data-accent="ocean"]   { --blue: #0e7490; --blue-dark: #155e75; --blue-light: #22d3ee; --ring: #22d3ee; --blue-rgb: 14 116 144; }
html[data-accent="emerald"] { --blue: #047857; --blue-dark: #065f46; --blue-light: #34d399; --ring: #34d399; --blue-rgb: 4 120 87; }
html[data-accent="rose"]    { --blue: #e11d48; --blue-dark: #be123c; --blue-light: #fb7185; --ring: #fb7185; --blue-rgb: 225 29 72; }
html[data-accent="sunset"]  { --blue: #c2410c; --blue-dark: #9a3412; --blue-light: #fb923c; --ring: #fb923c; --blue-rgb: 194 65 12;
                              --accent: #38bdf8; --accent-light: #7dd3fc; --accent-dim: rgba(56,189,248,.14);
                              --accent-bg: #0e7cad; --accent-bg-hover: #0b6891; --on-accent: #fff; }
html[data-accent="slate"]   { --blue: #475569; --blue-dark: #334155; --blue-light: #cbd5e1; --ring: #cbd5e1; --blue-rgb: 71 85 105; }
html[data-accent][data-theme="light"] { --blue-light: var(--blue); --ring: var(--blue); }
html[data-accent="sunset"][data-theme="light"] { --accent: #0369a1; --accent-light: #075985; --accent-dim: rgba(3,105,161,.1); --accent-bg: #0369a1; --accent-bg-hover: #075985; --on-accent: #fff; }
/* Font: Nepali keeps Mukta whichever is picked. */
html[data-font="clean"]    { --font-body: 'Inter', 'Mukta', system-ui, sans-serif; --font-head: 'Inter', 'Mukta', system-ui, sans-serif; }
html[data-font="rounded"]  { --font-body: 'Nunito', 'Mukta', system-ui, sans-serif; --font-head: 'Nunito', 'Mukta', system-ui, sans-serif; }
html[data-font="classic"]  { --font-body: 'Poppins', 'Mukta', system-ui, sans-serif; --font-head: 'Poppins', 'Mukta', system-ui, sans-serif; }
html[data-font="readable"] { --font-body: 'Atkinson Hyperlegible', 'Mukta', system-ui, sans-serif; --font-head: 'Atkinson Hyperlegible', 'Mukta', system-ui, sans-serif; }
html[data-font="system"]   { --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Mukta', sans-serif; --font-head: system-ui, -apple-system, 'Segoe UI', Roboto, 'Mukta', sans-serif; }
/* Text size: everything sized in rem follows. */
html[data-size="s"]  { font-size: 93.75%; }
html[data-size="l"]  { font-size: 112.5%; }
html[data-size="xl"] { font-size: 125%; }
/* High contrast: brighter secondary text and firmer lines. */
html[data-contrast="high"] { --text: #ffffff; --text-sub: #d3dbec; --text-muted: #b6c1d9; --border: rgba(255,255,255,.14); --border-md: rgba(255,255,255,.24); --border-lg: rgba(255,255,255,.34); }
html[data-contrast="high"][data-theme="light"] { --text: #000000; --text-sub: #1e293b; --text-muted: #334155; --border: rgba(0,0,0,.16); --border-md: rgba(0,0,0,.26); --border-lg: rgba(0,0,0,.36); }
/* Stars off: a plain background. */
html[data-stars="off"] body::before { display: none; }

/* ── Base ──────────────────────────────────────────────────────────── */
body {
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: var(--nb-header-h);
  padding-bottom: var(--nb-bottom-inset, 0px);
  transition: background var(--dur-2), color var(--dur-2), padding-bottom var(--dur-2) var(--ease-out);
}
h1, h2, h3, .section-title, .rail-title, .promo-title, .footer-col-title { font-family: var(--font-head); letter-spacing: 0; }
/* Dark theme: a still star field with one soft nebula at the top, behind everything. */
html:not([data-theme="light"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 42% at 88% -6%, rgb(var(--blue-rgb) / .22), transparent 70%),
    radial-gradient(ellipse 50% 32% at -4% 0%, rgba(255,122,26,.08), transparent 70%),
    radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 190px 140px, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 250px 30px, rgba(191,219,254,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 230px, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 330px 260px, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 150px 330px, rgba(254,215,170,.45) 50%, transparent 51%);
  background-size: 100% 100%, 100% 100%, 380px 380px, 380px 380px, 380px 380px, 530px 470px, 530px 470px, 530px 470px;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}
/* Phones: always keep the bottom menu's height free, more when the bottom stack is taller. */
@media (max-width: 680px) {
  body { padding-bottom: max(calc(var(--nb-bottom-nav-h) + env(safe-area-inset-bottom, 0px)), var(--nb-bottom-inset, 0px)); }
}

::selection { background: rgb(var(--blue-rgb) / .35); color: #fff; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--blue-dark); border-radius: 99px; }

/* Keyboard focus is always visible; mouse clicks do not draw it. */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.form-control:focus-visible, .search-input:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; margin: 0; padding: 8px 14px; clip: auto; overflow: visible;
  background: var(--blue); color: #fff; border-radius: var(--r-md); font-weight: 600;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ── Layout ────────────────────────────────────────────────────────── */
.container    { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(.9rem, 3vw, 2rem); }
.container-sm { width: 100%; max-width: 440px;  margin: 0 auto; padding: 0 1rem; }
.section       { padding: clamp(1rem, 2.4vw, 1.6rem) 0;  position: relative; z-index: 1; }
.section-sm    { padding: clamp(.7rem, 1.6vw, 1rem) 0;   position: relative; z-index: 1; }
.section-tight { padding: clamp(.45rem, 1.2vw, .8rem) 0; position: relative; z-index: 1; }

/* ── Header ────────────────────────────────────────────────────────── */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--nb-header-h);
  background: var(--nav-bg);
  backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2);
}
.hdr.nav-hidden { transform: translateY(-100%); transition-timing-function: var(--ease-in); }
.hdr.nav-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.28); }
[data-theme="light"] .hdr.nav-scrolled { box-shadow: 0 4px 18px rgba(15,23,42,.08); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 10px; }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; min-height: var(--tap); }
.nav-logo-img { height: 24px; width: auto; filter: var(--logo-filter); }
.nav-logo-fallback { display: none; font: 800 .9rem var(--font-head); color: var(--blue-light); }

.nav-links { flex: 1; min-width: 0; }
.nav-links ul { display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav-links a {
  display: flex; align-items: center; gap: 7px; position: relative;
  height: 34px; padding: 0 11px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-sub); white-space: nowrap;
  transition: color var(--dur-1), background var(--dur-1);
}
.nav-links a i { font-size: .72rem; opacity: .8; }
.nav-links a:hover { color: var(--text); background: var(--bg-hover); }
.nav-links a.active { color: var(--blue-light); background: var(--blue-dim); }
.nav-links a.active i { opacity: 1; }
.nav-admin-link { color: var(--accent) !important; }

.nav-cart-badge, .nav-bell-badge, .adm-bell-badge, .bn-badge, .drawer-badge {
  display: flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full);
  font-size: .625rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; pointer-events: none;
}
.nav-cart-badge { position: absolute; top: -3px; right: -2px; background: var(--accent-bg); color: var(--on-accent); border: 2px solid var(--bg-base); }

.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; position: relative; }

.nav-toggle, .nav-bell-btn, .nav-search-btn, .adm-bell-btn {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: var(--bg-float); border: 1px solid var(--border); border-radius: var(--r-full);
  color: var(--text-sub); font-size: .85rem; cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.nav-toggle:hover, .nav-bell-btn:hover, .nav-search-btn:hover, .adm-bell-btn:hover { background: var(--bg-hover); border-color: var(--border-md); color: var(--text); }
.nav-toggle:active, .nav-bell-btn:active, .nav-search-btn:active, .adm-bell-btn:active { transform: scale(.92); }
.nav-toggle { flex-direction: column; gap: 3.5px; }
.nav-toggle-bar { display: block; width: 14px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(5.1px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); }

.nav-login {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-full);
  background: var(--blue); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  transition: background var(--dur-1), transform var(--dur-1);
}
.nav-login:hover { background: var(--blue-dark); }
.nav-login:active { transform: scale(.96); }

/* Balance chip and its panel */
.nav-stats { position: relative; }
.nav-stats-trigger {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 11px;
  background: var(--accent-dim); border: 1px solid rgba(255,122,26,.28); border-radius: var(--r-full);
  font-weight: 700; font-size: var(--fs-sm); font-family: inherit; color: var(--text); cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: background var(--dur-1), border-color var(--dur-1);
}
.nav-stats-trigger > .fa-wallet { color: var(--accent); font-size: .78rem; }
.nav-stats-trigger:hover, .nav-stats-trigger.open { background: rgba(255,122,26,.2); border-color: rgba(255,122,26,.45); }
.nav-stats-trigger-caret { font-size: .625rem; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.nav-stats-trigger.open .nav-stats-trigger-caret { transform: rotate(180deg); }

.nav-stats-panel, .nav-notif-panel, .adm-notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--bg-raised); border: 1px solid var(--border-md); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity var(--dur-1) var(--ease-in), transform var(--dur-1) var(--ease-in), visibility 0s linear var(--dur-1);
}
.nav-stats-panel.open, .nav-notif-panel.open, .adm-notif-panel.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s;
}
.nav-stats-panel { width: 240px; padding: 6px; z-index: 400; }
.nsp-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-md); transition: background var(--dur-1); }
.nsp-item:hover { background: var(--bg-hover); }
.nsp-icon, .ds-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; }
.nsp-body { display: flex; flex-direction: column; line-height: 1.25; }
.nsp-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.nsp-val { font-size: var(--fs-base); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nsp-add {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; height: 36px;
  border-radius: var(--r-md); background: var(--accent-bg); color: var(--on-accent); font-size: var(--fs-sm); font-weight: 800;
  transition: filter var(--dur-1);
}
.nsp-add:hover { filter: brightness(1.08); }

.stat-ic-wallet { background: rgba(255,122,26,.14); color: var(--accent); }
.stat-ic-points { background: rgb(var(--blue-rgb) / .14); color: var(--blue-light); }
.stat-ic-spins  { background: rgba(245,158,11,.14); color: #f59e0b; }
[data-theme="light"] .stat-ic-spins { color: #b45309; }

@media (max-width: 950px) { .nav-links { display: none; } }
@media (max-width: 680px) {
  .nav-stats, .nav-login { display: none; }
  .hdr-in { gap: 6px; }
  .nav-right { gap: 5px; }
}

/* ── Appearance switch ─────────────────────────────────────────────── */
.theme-toggle-wrapper { cursor: pointer; user-select: none; display: flex; align-items: center; flex-shrink: 0; }
.theme-toggle-track {
  display: flex; align-items: center; justify-content: space-between; position: relative;
  width: 64px; height: 28px; padding: 0 6px;
  background: var(--blue-dim); border: 1px solid var(--border-md); border-radius: var(--r-full);
  transition: background var(--dur-1), border-color var(--dur-1);
}
.theme-toggle-wrapper:hover .theme-toggle-track { border-color: var(--border-lg); }
.theme-toggle-track i { font-size: .625rem; opacity: .5; position: relative; z-index: 1; transition: opacity var(--dur-2); }
.theme-toggle-track .theme-icon-dark { color: var(--blue-light); }
.theme-toggle-track .theme-icon-auto { color: var(--accent); }
.theme-toggle-track .theme-icon-light { color: #d97706; }
.theme-toggle-ball { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform var(--dur-3) var(--ease-out); }
.theme-toggle-wrapper[data-theme="auto"] .theme-toggle-ball { transform: translateX(19px); }
.theme-toggle-wrapper[data-theme="light"] .theme-toggle-ball { transform: translateX(38px); }
.theme-toggle-wrapper[data-theme="dark"] .theme-icon-dark,
.theme-toggle-wrapper[data-theme="auto"] .theme-icon-auto,
.theme-toggle-wrapper[data-theme="light"] .theme-icon-light { opacity: 1; }
/* Compact: one round button showing the current choice; a tap moves to the next. */
.theme-toggle-wrapper.is-compact .theme-toggle-track { width: 36px; height: 36px; padding: 0; justify-content: center; background: var(--bg-float); border-color: var(--border); }
.theme-toggle-wrapper.is-compact .theme-toggle-ball,
.theme-toggle-wrapper.is-compact .theme-toggle-track i { display: none; }
.theme-toggle-wrapper.is-compact[data-theme="dark"] .theme-icon-dark,
.theme-toggle-wrapper.is-compact[data-theme="auto"] .theme-icon-auto,
.theme-toggle-wrapper.is-compact[data-theme="light"] .theme-icon-light { display: block; font-size: .82rem; }
.theme-toggle-wrapper.is-compact:active .theme-toggle-track { transform: scale(.92); }

.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--bg-float); border: 1px solid var(--border); border-radius: var(--r-full); }
.theme-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: var(--r-full);
  background: none; color: var(--text-sub); font-weight: 600; font-size: var(--fs-xs); font-family: inherit; cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2);
}
.theme-btn i { font-size: .68rem; }
.theme-btn:hover { color: var(--text); }
.theme-btn.active { background: var(--bg-raised); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.theme-btn.active i { color: var(--accent); }

/* ── Side menu ─────────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 498; background: rgba(2,4,10,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2);
}
.drawer-overlay.open { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--ease-out), visibility 0s; }
.side-drawer {
  position: fixed; top: 0; right: 0; z-index: 499;
  width: 320px; max-width: 88vw; height: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg-raised); border-left: 1px solid var(--border-md); box-shadow: var(--sh-3);
  transform: translateX(100%); visibility: hidden; overflow: hidden; overscroll-behavior: contain;
  transition: transform var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2);
}
.side-drawer.open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; height: var(--nb-header-h); padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-logo-img { height: 24px; width: auto; filter: var(--logo-filter); }
.drawer-close { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--bg-float); border: 1px solid var(--border); color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-1), color var(--dur-1); }
.drawer-close:hover { background: var(--bg-hover); color: var(--text); }
.drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-md) transparent; }

.drawer-me { margin: 12px 12px 4px; padding: 10px; border-radius: var(--r-lg); background: var(--bg-float); border: 1px solid var(--border); }
.drawer-user { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; }
.drawer-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--blue); display: flex; align-items: center; justify-content: center; }
.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-avatar-fb { color: #fff; font: 700 1rem var(--font-head); }
.drawer-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.drawer-username { font-size: var(--fs-base); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-tier { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); }
.drawer-tier.tier-silver { color: #94a3b8; } .drawer-tier.tier-gold { color: #f59e0b; }
.drawer-tier.tier-platinum { color: #60a5fa; } .drawer-tier.tier-diamond { color: #22d3ee; } .drawer-tier.tier-bronze { color: #cd7f32; }
.drawer-user-arrow { color: var(--text-muted); font-size: .7rem; transition: transform var(--dur-1); }
.drawer-user:hover .drawer-user-arrow { transform: translateX(2px); color: var(--text); }
/* Balance, points, spins: icon beside the words, one row that slides when it doesn't fit. */
.drawer-stats { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.drawer-stats::-webkit-scrollbar { display: none; }
.ds-item { flex: 1 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--border); white-space: nowrap; transition: border-color var(--dur-1), transform var(--dur-1); }
.ds-item:hover { border-color: var(--border-md); }
.ds-item:active { transform: scale(.97); }
.ds-icon { flex-shrink: 0; width: 30px; height: 30px; font-size: .72rem; border-radius: 9px; }
.ds-body { display: flex; flex-direction: column; line-height: 1.2; }
.ds-label { font-size: .625rem; font-weight: 600; color: var(--text-muted); }
.ds-val { font-size: var(--fs-sm); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
/* Admin lists that update themselves (assets/js/admin-live-list.js) */
.nb-live-new > :last-child { animation: nbLiveNew 4s var(--ease-out) both !important; }
.nb-live-upd > * { animation: none !important; }
/* A customer screen part that just changed by itself (app.js) */
.nb-live-flash { animation: nbLiveFlash 1.8s var(--ease-out); }
@keyframes nbLiveFlash { 0%, 30% { box-shadow: 0 0 0 2px rgb(var(--blue-rgb) / .55); } 100% { box-shadow: 0 0 0 2px rgb(var(--blue-rgb) / 0); } }
@media (prefers-reduced-motion: reduce) { .nb-live-flash { animation: none; } }
@keyframes nbLiveNew { 0% { opacity: 0; transform: translateY(-8px); background: rgb(var(--blue-rgb) / .28); } 10% { opacity: 1; transform: none; } 70% { background: rgb(var(--blue-rgb) / .14); } 100% { background: transparent; } }
.nb-live-pill {
  position: fixed; top: 70px; left: 50%; z-index: 1200; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--r-full); background: var(--blue); color: #fff; font: 700 var(--fs-sm) var(--font-body); cursor: pointer;
  box-shadow: 0 10px 28px -8px rgb(var(--blue-rgb) / .8); transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2);
}
.nb-live-pill.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .nb-live-new > :last-child { animation-duration: .01s !important; } }
/* Any row that slides sideways fades at the edge that has more (app.js marks it). */
.has-more[data-hscroll] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.has-less[data-hscroll] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px); mask-image: linear-gradient(90deg, transparent, #000 26px); }
.has-less.has-more[data-hscroll] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); }

.drawer-guest { margin: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--bg-float); border: 1px solid var(--border); }
.drawer-guest p { font-size: var(--fs-sm); color: var(--text-sub); line-height: 1.5; margin-bottom: 10px; }
.drawer-guest-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.drawer-nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px 12px; }
.drawer-section-label { font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 12px 10px 4px; }
.drawer-link {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 4px 8px;
  border: 0; border-radius: var(--r-md); background: none; cursor: pointer; text-align: left;
  color: var(--text-sub); font-weight: 600; font-size: var(--fs-sm); font-family: inherit;
  transition: color var(--dur-1), background var(--dur-1);
}
.drawer-link:hover { color: var(--text); background: var(--bg-hover); }
.drawer-link.active { color: var(--text); background: var(--blue-dim); }
.drawer-link-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0; background: var(--bg-float); color: var(--text-sub); transition: background var(--dur-1), color var(--dur-1); }
.drawer-link.active .drawer-link-icon { background: var(--blue); color: #fff; }
.drawer-link-text { flex: 1; min-width: 0; }
.drawer-badge { background: var(--accent-bg); color: var(--on-accent); }
.drawer-tag { font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full); background: var(--blue-dim); color: var(--blue-light); }
.drawer-tag.is-win { background: var(--accent-dim); color: var(--accent); }
.drawer-link-admin .drawer-link-icon { background: var(--accent-dim); color: var(--accent); }
.drawer-link-danger, .drawer-link-danger .drawer-link-icon { color: var(--neg); }
.drawer-link-danger:hover { background: rgba(239,68,68,.08); color: var(--neg); }

.drawer-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.drawer-footer-bottom { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-2xs); color: var(--text-muted); }
.drawer-footer-bottom a { color: var(--text-muted); } .drawer-footer-bottom a:hover { color: var(--text); }
.drawer-ap { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 7px 10px; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--bg-float); border: 1px solid var(--border); color: var(--text); font-family: inherit; transition: background var(--dur-1), border-color var(--dur-1); }
.drawer-ap:hover { background: var(--bg-hover); border-color: var(--border-md); }
.drawer-ap-ic { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(from 200deg, var(--blue), var(--accent), #22c55e, var(--blue)); color: #fff; font-size: .8rem; }
.drawer-ap-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.drawer-ap-t b { font-size: var(--fs-sm); } .drawer-ap-t small { font-size: var(--fs-2xs); color: var(--text-muted); }
.drawer-ap > i { font-size: .65rem; color: var(--text-muted); }

/* ── Appearance panel: a sheet from the bottom on phones, a side panel on a computer ── */
.ap-scrim { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(3,6,14,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur-2); }
.ap-scrim.is-open { opacity: 1; }
.ap-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); max-height: min(88dvh, 720px); display: flex; flex-direction: column;
  background: var(--bg-raised); border: 1px solid var(--border-md); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -18px 50px rgba(0,0,0,.45);
  transform: translateY(104%); transition: transform var(--dur-3) var(--ease-out);
}
.ap-sheet.is-open { transform: none; }
.ap-grab { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 99px; background: var(--border-lg); flex-shrink: 0; cursor: grab; touch-action: none; }
.ap-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; flex-shrink: 0; }
.ap-head-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
  background: conic-gradient(from 200deg, var(--blue), var(--accent), #22c55e, var(--blue)); }
.ap-head div { flex: 1; min-width: 0; }
.ap-head h2 { font-size: 1.1rem; line-height: 1.2; }
.ap-head p { font-size: var(--fs-xs); color: var(--text-muted); }
.ap-x { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--bg-float); border: 1px solid var(--border); color: var(--text-sub); }
.ap-x:hover { color: var(--text); background: var(--bg-hover); }
.ap-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 14px; }
.ap-preview { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
  background: var(--bg-float); border: 1px solid var(--border-md); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.ap-pv-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--blue-dim); color: var(--blue-light); }
.ap-pv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ap-pv-t b { font: 700 var(--fs-sm) var(--font-head); } .ap-pv-t small { font-size: var(--fs-2xs); color: var(--text-sub); }
.ap-pv-price { font: 700 var(--fs-md) var(--font-head); color: var(--accent); white-space: nowrap; }
.ap-pv-btn { padding: 7px 14px; border-radius: var(--r-full); background: var(--blue); color: #fff; font-size: var(--fs-xs); font-weight: 800; }
.ap-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.ap-label { display: flex; align-items: baseline; gap: 6px; padding: 0; margin-bottom: 7px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ap-label small { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0; text-transform: none; }
.ap-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ap-size .ap-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-contrast .ap-opts, .ap-motion .ap-opts, .ap-stars .ap-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-opt { position: relative; display: block; cursor: pointer; }
.ap-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ap-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 48px; padding: 8px 6px; border-radius: 14px; text-align: center;
  background: var(--bg-float); border: 1.5px solid var(--border); color: var(--text-sub); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2;
  transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.ap-theme .ap-tile, .ap-contrast .ap-tile, .ap-motion .ap-tile, .ap-stars .ap-tile { flex-direction: row; gap: 7px; }
.ap-opt:hover .ap-tile { border-color: var(--border-lg); color: var(--text); }
.ap-opt:active .ap-tile { transform: scale(.97); }
.ap-opt input:checked + .ap-tile { border-color: var(--blue); background: var(--blue-dim); color: var(--text); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .15); }
.ap-opt input:focus-visible + .ap-tile { outline: 2px solid var(--ring); outline-offset: 2px; }
.ap-dot { position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c1) 55%, var(--c2) 55%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); color: #fff; font-size: .7rem; }
.ap-dot i { opacity: 0; transform: scale(.4); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); }
.ap-opt input:checked + .ap-tile .ap-dot i { opacity: 1; transform: none; }
.ap-aa { font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--text); }
.ap-a { font-weight: 800; line-height: 1; color: var(--text); height: 1.3rem; display: flex; align-items: flex-end; }
.ap-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); flex-shrink: 0; }
.ap-reset { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--r-full); cursor: pointer;
  background: none; border: 1px solid var(--border-md); color: var(--text-sub); font-family: inherit; font-size: var(--fs-xs); font-weight: 700; }
.ap-reset:hover { color: var(--text); border-color: var(--border-lg); }
.ap-saved { flex: 1; min-width: 0; font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; }
.ap-saved.is-ok { color: var(--pos); }
.ap-done { height: 38px; padding: 0 18px; }
@media (min-width: 681px) {
  .ap-sheet { left: auto; top: 12px; bottom: 12px; right: 12px; width: 400px; max-height: none; border-radius: 22px; border-bottom: 1px solid var(--border-md);
    transform: translateX(calc(100% + 24px)); box-shadow: -18px 0 50px rgba(0,0,0,.4); }
  .ap-grab { display: none; }
  .ap-head { padding-top: 14px; }
}

/* ── Log-out confirm ───────────────────────────────────────────────── */
.logout-modal-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(2,4,10,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 16px; }
.logout-modal-overlay.open { display: flex; animation: fadeIn var(--dur-2) var(--ease-out); }
.logout-modal { width: 100%; max-width: 330px; background: var(--bg-raised); border: 1px solid var(--border-md); border-radius: var(--r-xl); padding: 22px 18px 18px; text-align: center; box-shadow: var(--sh-3); animation: modalPop var(--dur-3) var(--ease-out); }
.logout-modal-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(239,68,68,.12); color: var(--neg); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.logout-modal-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.logout-modal-msg { font-size: var(--fs-sm); color: var(--text-sub); margin-bottom: 16px; line-height: 1.5; }
.logout-modal-actions { display: flex; gap: 8px; }
.logout-modal-actions .btn { flex: 1; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Bottom menu (phones) ──────────────────────────────────────────── */
.bottom-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bottom-nav-bg); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-top: 1px solid var(--border);
  transition: transform var(--dur-3) var(--ease-out);
}
.bottom-nav.nav-hidden { transform: translateY(100%); transition-timing-function: var(--ease-in); }
.bottom-nav-inner { display: flex; height: var(--nb-bottom-nav-h); padding: 0 4px; }
.bn-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); -webkit-tap-highlight-color: transparent; }
.bn-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 28px; border-radius: var(--r-full); font-size: 1rem; transition: background var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1); }
.bn-lbl { max-width: 100%; font-size: .625rem; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.bn-item:active .bn-ic { transform: scale(.9); }
.bn-item.active { color: var(--text); }
.bn-item.active .bn-ic { background: var(--blue-dim); color: var(--blue-light); }
.bn-wallet-bal { color: var(--accent); font-variant-numeric: tabular-nums; }
.bn-badge { position: absolute; top: -3px; right: 6px; background: var(--accent-bg); color: var(--on-accent); border: 2px solid var(--bg-raised); }
@media (max-width: 680px) { .bottom-nav { display: block; } }

/* ── Notification bells ────────────────────────────────────────────── */
.nav-bell-btn.has-unread { color: var(--blue-light); }
.nav-bell-badge, .adm-bell-badge { position: absolute; top: -4px; right: -4px; background: #ef4444; border: 2px solid var(--bg-base); }
.adm-bell-btn.has-unread { color: var(--amber); border-color: rgba(245,158,11,.4); }
.nav-notif-panel { width: 350px; max-width: calc(100vw - 24px); z-index: 450; overflow: hidden; }
.adm-notif-panel { width: 350px; max-width: calc(100vw - 24px); z-index: 500; overflow: hidden; }
@media (max-width: 500px) {
  .nav-notif-panel { position: fixed; top: calc(var(--nb-header-h) + 8px); left: 10px; right: 10px; width: auto; max-width: none; }
  .adm-notif-panel { position: fixed; top: var(--adm-topbar-h, 60px); left: 12px; right: 12px; width: auto; max-width: none; }
}
.nnp-header, .anp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.nnp-title, .anp-title { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.nnp-mark-all, .anp-mark-all { font-size: var(--fs-xs); font-weight: 600; color: var(--blue-light); background: none; border: none; cursor: pointer; min-height: 32px; padding: 0 8px; border-radius: var(--r-sm); transition: background var(--dur-1); }
.nnp-mark-all:hover, .anp-mark-all:hover { background: var(--blue-dim); }
.nnp-list, .anp-list { max-height: min(380px, 60vh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-md) transparent; }
.nnp-empty, .anp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; color: var(--text-muted); font-size: var(--fs-sm); }
.nnp-empty i, .anp-empty i { font-size: 1.4rem; opacity: .45; }
.nnp-item, .anp-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); position: relative; cursor: pointer; transition: background var(--dur-1); }
.nnp-item:last-child, .anp-item:last-child { border-bottom: none; }
.nnp-item:hover, .anp-item:hover { background: var(--bg-hover); }
.nnp-item.unread { background: rgb(var(--blue-rgb) / .06); }
.anp-item.unread { background: rgba(245,158,11,.06); }
.nnp-item.unread .nnp-item-title::after, .anp-item.unread .anp-item-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--blue-light); vertical-align: middle; }
.anp-item.unread .anp-item-title::after { background: var(--amber); }
.nnp-icon, .anp-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); flex-shrink: 0; background: var(--bg-float); }
.nnp-body, .anp-body { flex: 1; min-width: 0; }
.nnp-item-title, .anp-item-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nnp-item-msg, .anp-item-msg { font-size: var(--fs-xs); color: var(--text-sub); line-height: 1.45; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nnp-item-time, .anp-item-time { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 3px; }
.nnp-footer, .anp-footer { display: flex; align-items: center; justify-content: center; min-height: 42px; font-size: var(--fs-xs); font-weight: 600; color: var(--blue-light); border-top: 1px solid var(--border); transition: background var(--dur-1); }
.nnp-footer:hover, .anp-footer:hover { background: var(--blue-dim); }
.atp-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.atp-item:last-child { border-bottom: none; }
.atp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #64748b; }
.atp-dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.atp-body { flex: 1; min-width: 0; }
.atp-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.atp-role { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: capitalize; }
.atp-sub { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 1px; }
.atp-manual { font-size: var(--fs-2xs); flex-shrink: 0; }
.atp-manual.online { color: var(--pos); }
.atp-manual.offline { color: var(--mute-fg); }

/* ── Search ────────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 600; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(12px, 8vh, 80px) 10px 10px; background: rgba(2,4,10,.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-in), visibility 0s linear var(--dur-1);
}
.search-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-2) var(--ease-out), visibility 0s; }
.search-modal { width: 100%; max-width: 600px; background: var(--bg-raised); border: 1px solid var(--border-md); border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; transform: translateY(-10px) scale(.98); transition: transform var(--dur-3) var(--ease-out); }
.search-overlay.open .search-modal { transform: none; }
.search-input-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--border); }
.search-input-icon { color: var(--blue-light); font-size: .85rem; flex-shrink: 0; }
.search-input { flex: 1; min-width: 0; height: 42px; background: none; border: none; outline: none; font-size: 1rem; font-weight: 500; color: var(--text); caret-color: var(--blue-light); }
.search-input::placeholder { color: var(--text-muted); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--bg-float); border: 1px solid var(--border); color: var(--text-sub); font-size: .8rem; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.search-close-btn:hover { background: var(--bg-hover); color: var(--text); }
.search-body { max-height: min(480px, 70vh); overflow-y: auto; overscroll-behavior: contain; }
.search-empty, .search-noresult { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px; text-align: center; }
.search-empty-icon { width: 46px; height: 46px; border-radius: var(--r-lg); background: var(--bg-float); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--text-muted); margin-bottom: 4px; }
.search-empty-title { font-size: .94rem; font-weight: 700; color: var(--text); }
#searchEmpty { align-items: flex-start; text-align: left; padding: 14px 16px 16px; }
#searchEmpty .search-empty-title { font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.search-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.search-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; background: var(--bg-float); color: var(--text-sub); border: 1px solid var(--border-md); border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
.search-chip:hover { background: var(--blue-dim); color: var(--blue-light); border-color: rgb(var(--blue-rgb) / .35); }
.search-chip:active { transform: scale(.96); }
.search-noresult .btn { margin-top: 8px; }
.search-empty-sub { font-size: var(--fs-sm); color: var(--text-sub); max-width: 280px; line-height: 1.5; }
.search-hint { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 7px 16px; border-top: 1px solid var(--border); font-size: var(--fs-2xs); color: var(--text-muted); }
.search-hint kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px; font: inherit; font-weight: 600; background: var(--bg-float); border: 1px solid var(--border-md); border-radius: 5px; }
.search-hint kbd:first-child { margin-left: 0; }
@media (hover: none), (max-width: 680px) { .search-hint { display: none; } }
.search-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; font-size: var(--fs-sm); color: var(--text-muted); }
.search-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-md); border-top-color: var(--blue-light); animation: spin .6s linear infinite; }
.search-results-header { display: flex; align-items: center; gap: 6px; padding: 10px 16px 4px; }
.search-results-count { font-size: var(--fs-2xs); font-weight: 700; color: var(--blue-light); background: var(--blue-dim); padding: 1px 8px; border-radius: var(--r-full); }
.search-results-query { font-size: var(--fs-xs); color: var(--text-muted); }
.search-results-list { padding: 4px 8px 10px; }
.search-result-item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-1); }
.search-result-item:hover, .search-result-item.is-active { background: var(--bg-hover); }
.search-result-img, .search-result-img-fallback { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; }
.search-result-img { object-fit: cover; background: var(--bg-float); border: 1px solid var(--border); }
.search-result-img-fallback { background: var(--blue-dim); color: var(--blue-light); font-size: .875rem; display: flex; align-items: center; justify-content: center; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-game { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.search-result-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-meta { font-size: var(--fs-xs); color: var(--text-sub); display: flex; align-items: center; gap: 6px; }
.search-result-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.search-result-price { font-size: var(--fs-base); font-weight: 800; color: var(--text); }
.search-result-price.has-discount { color: var(--accent); }
.search-result-price-orig { font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: line-through; }
.search-result-arrow { color: var(--text-muted); font-size: var(--fs-xs); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1), transform var(--dur-1); }
.search-result-item:hover .search-result-arrow, .search-result-item.is-active .search-result-arrow { opacity: 1; transform: none; }
@media (hover: none) { .search-result-arrow { opacity: .6; transform: none; } }
.sr-badge { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); font-weight: 700; line-height: 1.4; padding: 0 6px; border-radius: var(--r-full); vertical-align: middle; }
.sr-badge-hot, .sr-badge-oos { background: rgba(239,68,68,.14); color: var(--on-err); }
.sr-badge-new { background: rgba(34,197,94,.14); color: var(--on-ok); }
.sr-currency { font-size: var(--fs-2xs); color: var(--text-muted); }
.sr-section-label { font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 4px; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #fff; opacity: 0;
  transition: opacity var(--dur-1);
}
.btn:hover::after { opacity: .05; }
.btn:active { transform: scale(.97); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: var(--fs-xs); position: relative; z-index: 1; }

.btn-blue {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgb(var(--blue-rgb) / .28);
}
.btn-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 6px 20px rgb(var(--blue-rgb) / .4); }

.btn-ghost { background: transparent; border-color: var(--border-md); color: var(--text-sub); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-light); background: var(--blue-dim); }

.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue-light); }
.btn-outline:hover { background: var(--blue-dim); }

.btn-surface { background: var(--bg-float); border-color: var(--border); color: var(--text); }
.btn-surface:hover { border-color: var(--border-md); background: var(--bg-hover); }

.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-sm { padding: 4px 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg { padding: 10px 20px; font-size: .9375rem; border-radius: var(--r-md); }
.btn-full { width: 100%; }

@media (pointer: coarse) {
  .btn { min-height: var(--tap); }
  .btn-sm { min-height: 34px; }
}

.btn-spinner {
  display: none; flex-shrink: 0;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: spin .6s linear infinite;
}
.btn.loading { pointer-events: none; }
.btn.loading .btn-spinner { display: inline-block; }
.btn.loading .btn-text { opacity: .7; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.card:hover { border-color: var(--border-md); }
[data-theme="light"] .card { box-shadow: var(--sh-1); }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-3); }
.form-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text-sub);
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 5px;
}
.form-label a { font-size: var(--fs-xs); color: var(--blue-light); font-weight: 600; text-transform: none; letter-spacing: 0; }
.form-label a:hover { text-decoration: underline; }

.form-control {
  width: 100%;
  background: var(--bg-float);
  border: 1px solid var(--border-md); border-radius: var(--r-md);
  padding: 10px 14px;
  color: var(--text);
  font-size: var(--fs-base); line-height: 1.5;
  outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
/* A hint inside a field sits a size below what is typed (13px at most). The field keeps 16px on phones, so iOS does not zoom. */
input::placeholder, textarea::placeholder { font-size: min(var(--fs-sm), 1em); }
.form-control:hover { border-color: var(--border-lg); }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .18); }
.form-control:disabled { opacity: .6; cursor: not-allowed; }
.form-control.is-error { border-color: var(--error); }
.form-control.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 88px; }

.field-hint {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-xs); color: var(--text-sub); line-height: 1.55;
}

.form-error { display: none; margin-top: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--on-err); }
.form-error.show { display: block; }

.input-wrap { position: relative; }
.input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 14px; text-align: center; pointer-events: none;
  color: var(--text-muted); font-size: var(--fs-xs);
  transition: color var(--dur-1);
}
.input-wrap:focus-within .input-icon { color: var(--blue-light); }
.input-wrap .form-control { padding-left: 36px; }
/* Show-password eye: a finger-sized target with the icon where it always was. */
.input-icon-right {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-width: 36px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-sm); padding: 0;
  color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer;
  transition: color var(--dur-1), background var(--dur-1);
}
.input-icon-right:hover { color: var(--text); background: var(--bg-hover); }
.form-control.has-right { padding-right: 42px; }

.checkbox-wrap { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkbox-wrap input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.checkbox-box {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--border-lg); background: var(--bg-float);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.checkbox-wrap:active .checkbox-box { transform: scale(.9); }
.checkbox-wrap input:focus-visible ~ .checkbox-box { outline: 2px solid var(--ring); outline-offset: 2px; }
.checkbox-wrap input:checked ~ .checkbox-box { background: var(--blue); border-color: var(--blue); }
.checkbox-wrap input:checked ~ .checkbox-box::after {
  content: ''; display: block; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
}
.checkbox-label { font-size: var(--fs-sm); color: var(--text-sub); line-height: 1.5; }
.checkbox-label a { color: var(--blue-light); }
.checkbox-label a:hover { text-decoration: underline; }

/* ── Alerts and badges (text colours tuned per theme) ──────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: var(--sp-3);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
}
.alert i { margin-top: 3px; flex-shrink: 0; font-size: var(--fs-xs); }
.alert-error   { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.22);  color: var(--on-err); }
.alert-success { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.22);  color: var(--on-ok); }
.alert-warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.24); color: var(--on-warn); }
.alert-info    { background: var(--blue-dim);      border-color: rgb(var(--blue-rgb) / .24);  color: var(--info-fg); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1.6; letter-spacing: .02em;
  white-space: nowrap;
}
.badge i { font-size: .625rem; }
.badge-blue   { background: var(--blue-dim);      color: var(--info-fg);   border: 1px solid rgb(var(--blue-rgb) / .24); }
.badge-green  { background: rgba(34,197,94,.1);   color: var(--on-ok);     border: 1px solid rgba(34,197,94,.24); }
.badge-red    { background: rgba(239,68,68,.1);   color: var(--on-err);    border: 1px solid rgba(239,68,68,.24); }
.badge-muted  { background: var(--bg-float);      color: var(--text-muted); border: 1px solid var(--border); }
.badge-yellow { background: rgba(245,158,11,.12); color: var(--on-warn);   border: 1px solid rgba(245,158,11,.28); }
.badge-amber  { background: var(--amber-dim);     color: var(--warn-fg);   border: 1px solid rgba(245,158,11,.24); }

/* ── Dividers and section headings ─────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); }
.divider-text { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-xs); }
.divider-text::before,
.divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.section-label {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 2px 9px; border-radius: var(--r-full);
  font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-light); background: var(--blue-dim);
}
.section-title { font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; margin-bottom: 6px; text-wrap: balance; }
.section-sub { color: var(--text-sub); font-size: var(--fs-sm); line-height: 1.65; }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; margin-top: 12px; background: var(--bg-raised); border-top: 1px solid var(--border); padding: 22px 0 14px; }
.ft-grid { display: grid; grid-template-columns: 1.25fr 1.5fr 1fr 1fr; gap: 28px; }
.footer-logo-img { height: 22px; width: auto; filter: var(--logo-filter); }
.footer-logo-text { font: 800 1rem var(--font-head); color: var(--blue-light); }
.ft-desc { margin: 8px 0 12px; font-size: var(--fs-sm); color: var(--text-sub); line-height: 1.6; max-width: 36ch; }
.ft-row { display: flex; flex-direction: column; gap: 12px; }
.social-row { display: flex; gap: 6px; }
.social-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-float); border: 1px solid var(--border); font-size: .85rem; color: var(--text-sub); transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out); }
.social-btn:hover { transform: translateY(-2px); color: #fff; }
.social-btn.is-wa:hover { background: #25d366; } .social-btn.is-fb:hover { background: #1877f2; } .social-btn.is-ig:hover { background: #e1306c; }
.payment-logos { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.payment-logo { height: 26px; width: auto; background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 3px 6px; }

.ft-col summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); padding-bottom: 8px; }
.ft-col summary::-webkit-details-marker { display: none; }
.ft-col summary i { font-size: .625rem; color: var(--text-muted); transition: transform var(--dur-2) var(--ease-out); }
.ft-col[open] summary i { transform: rotate(180deg); }
.ft-col a { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: var(--fs-sm); color: var(--text-sub); transition: color var(--dur-1), transform var(--dur-1); }
.ft-col a:hover { color: var(--text); transform: translateX(2px); }
.ft-col a i { width: 14px; text-align: center; font-size: .7rem; color: var(--text-muted); }
.ft-games ul { column-count: 2; column-gap: 16px; }
.ft-games li { break-inside: avoid; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
.footer-legal { font-size: var(--fs-2xs); max-width: 64ch; }

@media (min-width: 681px) { .ft-col summary { pointer-events: none; } .ft-col summary i { display: none; } }
@media (max-width: 900px) and (min-width: 681px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand, .ft-games { grid-column: 1 / -1; } .ft-games ul { column-count: 3; } }
@media (max-width: 680px) {
  .footer { padding: 16px 0 10px; }
  .ft-grid { grid-template-columns: 1fr; gap: 0; }
  .ft-brand { padding-bottom: 12px; }
  .ft-row { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .ft-col { border-top: 1px solid var(--border); }
  .ft-col summary { min-height: 46px; padding: 0 2px; }
  .ft-col ul { padding: 0 2px 10px; }
  .ft-games ul { column-count: 2; }
  .footer-bottom { margin-top: 0; flex-direction: column; align-items: flex-start; }
}

/* Old full-screen loader markup is still on some pages; it never shows. */
#page-loader { display: none !important; }

/* ── Toasts ────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed; right: var(--sp-4); z-index: 700;
  bottom: calc(var(--sp-4) + var(--nb-bottom-inset, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
  transition: bottom var(--dur-2) var(--ease-out);
}
@media (max-width: 680px) {
  #toast-container {
    left: var(--sp-3); right: var(--sp-3); align-items: stretch;
    bottom: calc(max(calc(64px + env(safe-area-inset-bottom, 0px)), var(--nb-bottom-inset, 0px)) + 8px);
  }
}
.toast {
  display: flex; align-items: center; gap: 8px;
  max-width: 340px;
  padding: 10px 14px;
  background: var(--bg-float); color: var(--text);
  border: 1px solid var(--border-md); border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.45;
  pointer-events: auto;
  animation: toastIn var(--dur-3) var(--ease-out);
}
@media (max-width: 680px) { .toast { max-width: none; } }
.toast.success { border-color: rgba(34,197,94,.35); }
.toast.error   { border-color: rgba(239,68,68,.35); }
.toast.warning { border-color: rgba(245,158,11,.35); }
.toast.success > i:first-child { color: var(--pos); }
.toast.error > i:first-child   { color: var(--neg); }
.toast.warning > i:first-child { color: var(--warn-fg); }
.toast.info > i:first-child    { color: var(--info-fg); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.bg-ambient {
  position: fixed; pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--blue-rgb) / .045) 0%, transparent 68%);
}
[data-theme="light"] .bg-ambient { display: none; }

/* ── One-time codes and password strength ──────────────────────────── */
.otp-row { display: flex; gap: 8px; justify-content: center; margin-bottom: var(--sp-5); }
.otp-box {
  width: 46px; height: 54px;
  text-align: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg-hover); color: var(--text);
  border: 1.5px solid var(--border-md); border-radius: var(--r-md);
  caret-color: var(--blue-light);
  transition: border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.otp-box:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .18); transform: translateY(-1px); }
.otp-box.is-error { border-color: var(--error); }
@media (max-width: 360px) { .otp-row { gap: 6px; } .otp-box { width: 40px; height: 50px; font-size: 1.3rem; } }

.strength-bar { height: 3px; margin-top: 4px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; }
.strength-fill { width: 0; height: 100%; border-radius: var(--r-full); transition: width var(--dur-3) var(--ease-out), background var(--dur-3); }
.strength-text { font-size: var(--fs-2xs); margin-top: 3px; }

/* ── Rails: one sideways row per game (index.php, products/index.php) ─ */
.browse-head { margin-bottom: var(--sp-4); }
.game-block { margin-bottom: clamp(1.1rem, 2.6vw, 1.7rem); }

.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rail-title { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 1.05rem; font-weight: 700; }
.rail-title > i { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--blue-dim); color: var(--blue-light); }
.rail-title-link:hover .rail-game-name { color: var(--blue-light); }
.rail-thumb {
  width: 38px; height: 38px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-md); background: var(--bg-hover);
}
.rail-thumb-icon { display: flex; align-items: center; justify-content: center; color: var(--blue-light); font-size: .9rem; }
.rail-title-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail-game-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9375rem; font-weight: 800; transition: color var(--dur-1); }
.rail-game-name .badge { padding: 0 7px; }
.rail-game-sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }

.rail-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rail-all {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 30px; padding: 0 12px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--blue-light);
  background: var(--blue-dim); border: 1px solid rgb(var(--blue-rgb) / .25); border-radius: var(--r-full);
  transition: background var(--dur-1), gap var(--dur-1) var(--ease-out);
}
.rail-all:hover { background: rgb(var(--blue-rgb) / .22); gap: 9px; }
/* "Clear" throws something away, so it must not look like "See all". */
.rail-all.is-clear { background: transparent; border-color: var(--border-md); color: var(--text-muted); }
.rail-all.is-clear:hover { background: var(--bg-hover); color: var(--text); gap: 6px; }
.rail-nav {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text-sub); font-size: var(--fs-2xs); cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), opacity var(--dur-1);
}
.rail-nav:hover { background: var(--blue-dim); color: var(--blue-light); border-color: rgb(var(--blue-rgb) / .4); }
.rail-nav[disabled] { opacity: .3; cursor: default; }
.rail-nav[disabled]:hover { background: var(--bg-raised); color: var(--text-sub); border-color: var(--border); }
@media (hover: none), (max-width: 700px) { .rail-nav { display: none; } }

.rail {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Bleeds to the screen edge so a phone user sees the row continues. */
  margin: 0 calc(-1 * clamp(.9rem, 3vw, 2rem));
  padding: 3px clamp(.9rem, 3vw, 2rem) 8px;
  scroll-padding-inline: clamp(.9rem, 3vw, 2rem);
}
.rail::-webkit-scrollbar { display: none; }

.rail-card {
  flex: 0 0 auto; width: 148px;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; color: inherit;
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2);
}
[data-theme="light"] .rail-card { box-shadow: var(--sh-1); }
.rail-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--blue-rgb) / .42);
  box-shadow: 0 12px 28px rgba(0,0,0,.3), 0 0 0 1px rgb(var(--blue-rgb) / .14);
}
[data-theme="light"] .rail-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.12), 0 0 0 1px rgb(var(--blue-rgb) / .16); }
.rail-card:active { transform: scale(.97); transition-duration: var(--dur-1); }

.rc-shot { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(135deg, var(--bg-float), var(--bg-hover)); }
.rc-shot img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.rail-card:hover .rc-shot img { transform: scale(1.06); }
/* Behind the image: a game icon shows if the artwork is missing. */
.rc-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--blue); opacity: .3;
}
.rc-flag {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 1px 7px; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.rc-flag-hot  { background: #dc2626; color: #fff; }
.rc-flag-new  { background: #22c55e; color: #052e16; }
.rc-flag-deal { background: var(--accent-bg); color: var(--on-accent); }

.rc-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; }
.rc-name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-sub { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-foot { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.rc-price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.rc-price s { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.rc-note { font-size: var(--fs-2xs); color: var(--text-muted); }

@media (max-width: 560px) { .rail-card { width: 136px; } .rail { gap: 8px; } }
@media (max-width: 360px) { .rail-card { width: 126px; } }

/* One-category products: same card, laid out in a grid. */
.single-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.single-grid .rail-card { width: auto; }
@media (max-width: 560px) { .single-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ── Game tile (homepage games grid, More games on game pages) ─── */
.gcard { display: flex; flex-direction: column; min-width: 0; color: inherit; -webkit-tap-highlight-color: transparent; }
.gcard-img {
  position: relative; display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: linear-gradient(145deg, var(--bg-float), var(--bg-hover)); border: 1px solid var(--border);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2);
}
.gcard-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gcard-img > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--blue-light); opacity: .45; }
.gcard:hover .gcard-img { transform: translateY(-3px); border-color: rgb(var(--blue-rgb) / .5); box-shadow: 0 14px 28px rgba(0,0,0,.3); }
.gcard:hover .gcard-img img { transform: scale(1.07); }
.gcard:active .gcard-img { transform: scale(.96); }
.gcard-flag { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 1px 7px; border-radius: var(--r-full); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.gcard-flag.is-hot { background: var(--accent-bg); color: var(--on-accent); }
.gcard-flag.is-new { background: #16a34a; color: #fff; }
.gcard-name { margin-top: 6px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard-sub { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Reviews block (includes/reviews-widget.php: home, game pages) ─── */
.rv-sec { position: relative; z-index: 1; padding: 10px 0; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rv-title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.rv-title > i { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; background: rgba(245,158,11,.14); color: #f59e0b; flex-shrink: 0; }
.rv-sum { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px 14px; margin-bottom: 10px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--border); }
.rv-score { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 16px; border-right: 1px solid var(--border); }
.rv-score > b { font: 700 2rem/1 var(--font-head); color: var(--text); }
.rv-score small { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }
.rv-stars { display: flex; gap: 2px; font-size: .72rem; }
.rv-star { position: relative; display: inline-block; color: #f59e0b; }
.rv-star > span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.rv-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rv-bar { display: grid; grid-template-columns: 26px 1fr 32px; align-items: center; gap: 8px; font-size: var(--fs-2xs); color: var(--text-sub); }
.rv-bar > span { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.rv-bar > span i { font-size: .625rem; color: #f59e0b; }
.rv-track { display: block; height: 6px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; }
.rv-track > i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: #f59e0b; transform-origin: left; animation: rvGrow .9s var(--ease-out) both; }
.rv-bar em { font-style: normal; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@keyframes rvGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rv-rail-wrap { position: relative; }
.rv-rail { align-items: flex-start; }
.rv-card { flex: 0 0 auto; width: 272px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; padding: 12px; border-radius: 16px; background: var(--bg-raised); border: 1px solid var(--border); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.rv-card:hover { border-color: var(--border-md); transform: translateY(-2px); }
.rv-card-top { display: flex; align-items: center; gap: 9px; }
.rv-av { position: relative; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 .72rem var(--font-head); }
.rv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rv-who b { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-who small { font-size: var(--fs-2xs); color: var(--text-muted); }
.rv-rate { display: flex; gap: 1px; font-size: .6875rem; color: #f59e0b; flex-shrink: 0; }
.rv-rate .fa-regular { color: var(--text-faint); }
.rv-text { font-size: var(--fs-sm); color: var(--text-sub); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rv-reply { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 12px; background: var(--bg-float); font-size: var(--fs-xs); color: var(--text-sub); line-height: 1.5; }
.rv-reply img { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; background: #fff; }
.rv-reply b { color: var(--text); margin-right: 2px; }
.rv-reply span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-full); background: var(--bg-float); color: var(--text-sub); font-size: .625rem; font-weight: 700; }
.rv-tag i { font-size: .625rem; }
.rv-tag.is-ok { background: rgba(34,197,94,.12); color: var(--pos); }
.rv-cmt { margin-left: auto; color: var(--blue-light); }
.rv-cmt:hover { background: var(--blue-dim); }
.rv-nav { position: absolute; top: 50%; z-index: 2; margin-top: -15px; box-shadow: var(--sh-1); }
.rv-nav.is-prev { left: -10px; } .rv-nav.is-next { right: -10px; }

.rv-write { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; color: inherit; background: linear-gradient(120deg, var(--accent-dim), transparent 70%), var(--bg-raised); border: 1px solid rgba(255,122,26,.28); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.rv-write:hover { border-color: rgba(255,122,26,.55); transform: translateY(-2px); }
.rv-write-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--on-accent); font-size: .9rem; }
.rv-write-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-write-t b { font-size: var(--fs-sm); color: var(--text); }
.rv-write-t small { font-size: var(--fs-xs); color: var(--text-sub); }
.rv-write-go { color: var(--accent); transition: transform var(--dur-2) var(--ease-out); }
.rv-write:hover .rv-write-go { transform: translateX(3px); }
@media (max-width: 420px) { .rv-card { width: 244px; } .rv-sum { gap: 12px; padding: 10px 12px; } .rv-score { padding-right: 12px; } }

/* ── Chat message content (customer widget and admin console) ──────── */
.cf-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.cf-link:hover { opacity: .8; }
.cf-ref { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-style: dotted; }
.cf-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; padding: .1em .35em; border-radius: 4px; background: rgba(127,127,127,.18); }
.cf-img { display: block; max-width: 100%; max-height: 240px; margin-bottom: 4px; border-radius: var(--r-md); cursor: zoom-in; }
.cf-video { display: block; max-width: 100%; max-height: 240px; margin-bottom: 4px; border-radius: var(--r-md); }
.cf-audio { display: block; width: 230px; max-width: 100%; height: 36px; margin-bottom: 4px; }

/* Any other file: a card that says what it is and opens it. */
.cf-file {
  display: flex; align-items: center; gap: 9px;
  max-width: 280px; margin-bottom: 4px; padding: 8px 10px;
  border-radius: var(--r-md); color: inherit;
  background: rgba(127,127,127,.12); border: 1px solid rgba(127,127,127,.22);
}
.cf-file:hover { background: rgba(127,127,127,.2); }
.cf-file-i { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: rgba(127,127,127,.2); font-size: var(--fs-sm); }
.cf-file-t { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cf-file-n { font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-file-s { font-size: var(--fs-2xs); opacity: .75; line-height: 1.3; }
.cf-file-d { font-size: var(--fs-xs); opacity: .6; flex-shrink: 0; }

/* Voice message: listen back before sending (NBVoice.previewStrip). */
.nbv-prev,
.nbv-rec {
  display: flex; align-items: center; flex-wrap: nowrap;
  max-width: 100%; margin-bottom: 8px; padding: 7px 8px;
  border-radius: var(--r-md);
}
.nbv-prev { gap: 6px; background: rgba(127,127,127,.12); border: 1px solid rgba(127,127,127,.25); }
.nbv-rec  { gap: 8px; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.30); }
/* The <audio> plays but never draws: its native control will not fit a chat panel. */
.nbv-prev-a { display: none; }
.nbv-prev-p,
.nbv-prev-x {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127,127,127,.3); background: transparent; color: inherit;
  font-size: var(--fs-2xs); cursor: pointer;
}
.nbv-prev-x { border-radius: var(--r-sm); }
.nbv-prev-p:hover { background: rgba(127,127,127,.18); }
.nbv-prev-x:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); }
.nbv-prev-bar { flex: 1 1 auto; min-width: 24px; height: 5px; border-radius: 3px; cursor: pointer; background: rgba(127,127,127,.32); overflow: hidden; }
.nbv-prev-bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--blue); }
.nbv-prev-m { flex: 0 0 auto; font-size: var(--fs-2xs); opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nbv-prev-s,
.nbv-rec-x,
.nbv-rec-s {
  flex: 0 0 auto; min-height: 32px; padding: 0 10px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
  border: 1px solid rgba(127,127,127,.3); background: transparent; color: inherit;
}
.nbv-prev-s { background: var(--blue); border-color: var(--blue); color: #fff; }
.nbv-prev-s:hover,
.nbv-rec-s:hover { filter: brightness(1.1); }
.nbv-rec-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: nbvPulse 1.1s ease-in-out infinite; }
.nbv-rec-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--neg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbv-rec-time { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.nbv-rec-x:hover { background: rgba(127,127,127,.16); }
.nbv-rec-s { background: #dc2626; border-color: #dc2626; color: #fff; }
#chat-panel .nbv-prev,
#chat-panel .nbv-rec { margin-left: 12px; margin-right: 12px; }
@keyframes nbvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Account restriction notice: calm, with the way out obvious ────── */
.nbrx {
  margin: 0 0 var(--sp-4); padding: 12px 14px;
  border: 1px solid rgba(251,146,60,.38); background: rgba(251,146,60,.09);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: 1.55;
}
.nbrx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-base); font-weight: 800; color: #fb923c; }
[data-theme="light"] .nbrx-head,
[data-theme="light"] .nbrx-foot a { color: #c2410c; }
.nbrx-ic { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(251,146,60,.18); font-size: var(--fs-xs); }
.nbrx-reason { font-weight: 600; }
.nbrx-when { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); opacity: .85; }
.nbrx-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(251,146,60,.22); font-size: var(--fs-xs); opacity: .95; }
.nbrx-foot a { color: #fb923c; font-weight: 700; }
.nbrx-foot a:hover { text-decoration: underline; }

/* ── Alert dialog (includes/modal.php) ─────────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadeIn var(--dur-2) var(--ease-out);
}
#modal-overlay.show { display: flex; }
#modal-container {
  width: 100%; max-width: 420px;
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--border-md); border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  animation: modalPop var(--dur-3) var(--ease-out);
}
#modal-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
#modal-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
#modal-icon.icon-success { background: rgba(34,197,94,.12);  color: var(--pos); }
#modal-icon.icon-error   { background: rgba(239,68,68,.12);  color: var(--neg); }
#modal-icon.icon-warning { background: rgba(245,158,11,.12); color: var(--warn-fg); }
#modal-icon.icon-info    { background: var(--blue-dim);      color: var(--blue-light); }
#modal-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
#modal-message { margin: 0 0 var(--sp-5); font-size: var(--fs-base); color: var(--text-sub); line-height: 1.6; overflow-wrap: anywhere; }
#modal-footer { display: flex; gap: 10px; justify-content: flex-end; }
#modal-btn-action {
  min-height: 40px; padding: 0 20px;
  background: var(--blue); color: #fff; border: none; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
#modal-btn-action:hover { background: var(--blue-dark); }
#modal-btn-action.is-danger { background: #dc2626; }
#modal-btn-action.is-danger:hover { background: #b91c1c; }
#modal-btn-cancel {
  min-height: 40px; padding: 0 20px;
  background: var(--bg-hover); color: var(--text);
  border: 1px solid var(--border-md); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
#modal-btn-cancel:hover { background: var(--bg-float); }
#modal-btn-action:active,
#modal-btn-cancel:active { transform: scale(.97); }
@media (max-width: 480px) {
  #modal-container { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  #modal-footer > button { flex: 1; min-height: var(--tap); }
}

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ── Bottom stack: one row per kind, stacked; a row swipes when it holds several ── */
:root { --nb-nav-h: 0px; }
@media (max-width: 680px) { :root { --nb-nav-h: calc(var(--nb-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); } }

#nb-bottom-stack { position: fixed; left: 0; right: 0; bottom: var(--nb-nav-h); z-index: 350; display: flex; flex-direction: column; padding: 2px 0 6px; pointer-events: none; }
#nb-bottom-stack.is-empty { display: none; }
.nbs-row[hidden] { display: none; }
.nbs-track {
  position: relative; display: flex; align-items: flex-end; gap: 8px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 12px 2px; scroll-padding: 0 12px; overscroll-behavior-x: contain;
}
.nbs-track::-webkit-scrollbar { display: none; }
#ann-wrap { display: contents; }
.ann-toast, .sb-toast, .deal-bar, .pend-bar {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start; pointer-events: auto;
  position: relative; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--border-md); border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
  animation: stackIn var(--dur-3) var(--ease-out);
}
[data-theme="light"] .ann-toast, [data-theme="light"] .sb-toast, [data-theme="light"] .deal-bar, [data-theme="light"] .pend-bar { box-shadow: 0 6px 16px rgba(15,23,42,.12); }
/* Several of one kind: the next card peeks in, so the row reads as swipeable. */
.nbs-row.is-multi .ann-toast { flex-basis: calc(100% - 34px); }
@keyframes stackIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ann-toast.is-leaving, .deal-bar.is-leaving, .pend-bar.is-leaving { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in); }

.nbs-dots { display: none; justify-content: center; gap: 5px; height: 8px; margin-bottom: 1px; align-items: center; pointer-events: auto; }
.nbs-row.is-multi .nbs-dots { display: flex; }
.nbs-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: var(--border-lg); cursor: pointer; transition: width var(--dur-2) var(--ease-out), background var(--dur-2); }
.nbs-dots button.on { width: 16px; background: var(--blue-light); }

@media (min-width: 681px) {
  #nb-bottom-stack { left: 16px; right: auto; width: 400px; padding-bottom: 16px; }
  .nbs-track { padding: 4px 0 2px; scroll-padding: 0; }
}

/* Shared card anatomy: icon chip, text, close */
.ann-toast, .sb-toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 12px; line-height: 1.45; }
.ann-toast[hidden] { display: none; }
.ann-icon, .sb-icon, .pend-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.ann-icon img { width: 100%; height: 100%; object-fit: cover; }
.ann-body, .sb-body { flex: 1; min-width: 0; }
.ann-title, .sb-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.ann-msg, .sb-msg {
  margin-top: 1px; font-size: var(--fs-xs); color: var(--text-sub); overflow-wrap: anywhere; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.is-expanded .ann-msg, .is-expanded .sb-msg { -webkit-line-clamp: unset; display: block; }
.ann-msg strong, .sb-msg strong { color: var(--text); }
.ann-close, .sb-close {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; margin: -2px -2px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-float); border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  color: var(--text-muted); font-size: .7rem; transition: color var(--dur-1), background var(--dur-1);
}
.ann-close:hover, .sb-close:hover { color: var(--text); background: var(--bg-hover); }

.ann-info    { --ann-ic-bg: rgb(var(--blue-rgb) / .16);  --ann-ic: var(--blue-light); }
.ann-warning { --ann-ic-bg: rgba(245,158,11,.16); --ann-ic: #fcd34d; }
.ann-success { --ann-ic-bg: rgba(16,185,129,.16); --ann-ic: #6ee7b7; }
.ann-error   { --ann-ic-bg: rgba(239,68,68,.16);  --ann-ic: #fca5a5; }
[data-theme="light"] .ann-info    { --ann-ic: var(--blue-dark); }
[data-theme="light"] .ann-warning { --ann-ic: #92400e; }
[data-theme="light"] .ann-success { --ann-ic: #047857; }
[data-theme="light"] .ann-error   { --ann-ic: #b91c1c; }
.ann-icon { background: var(--ann-ic-bg); color: var(--ann-ic); }
.ann-dismiss-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ann-link { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; font-size: var(--fs-xs); font-weight: 800; color: var(--ann-ic); }
.ann-link i { font-size: .625rem; }
.ann-link:hover { text-decoration: underline; }
.ann-checkbox-label { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; cursor: pointer; user-select: none; font-size: var(--fs-2xs); color: var(--text-muted); }
.ann-checkbox-label input { width: 13px; height: 13px; cursor: pointer; accent-color: var(--blue); }

.sb-icon { background: var(--bg-hover); color: var(--text-muted); }
.is-open .sb-icon { background: rgba(34,197,94,.14); color: var(--pos); }
.is-closed .sb-icon { background: rgba(245,158,11,.14); color: var(--warn-fg); }
.sb-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.sb-badge { padding: 0 7px; border-radius: var(--r-full); font-size: .6875rem; font-weight: 800; letter-spacing: .05em; line-height: 1.7; text-transform: uppercase; background: var(--bg-hover); color: var(--text-sub); }
.is-open .sb-badge { background: rgba(34,197,94,.16); color: var(--pos); }
.is-closed .sb-badge { background: rgba(245,158,11,.16); color: var(--warn-fg); }
.sb-badge.live::before { content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: currentColor; animation: livePulse 1.9s ease-in-out infinite; }
.sb-hours { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.sb-hours i { font-size: .625rem; opacity: .7; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Deal bar */
.deal-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; }
.deal-shot-link { flex-shrink: 0; line-height: 0; }
.deal-shot { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; background: var(--bg-hover); border: 1px solid var(--border); }
.deal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deal-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.deal-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-game { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.deal-game::before { content: '\00b7'; margin-right: 6px; }
.deal-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.deal-now { font: 700 1rem var(--font-head); color: var(--accent); }
.deal-was { font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: line-through; }
.deal-off { font-size: .625rem; font-weight: 900; padding: 0 6px; border-radius: var(--r-full); background: var(--accent-bg); color: var(--on-accent); line-height: 1.6; }
.deal-save { font-size: var(--fs-2xs); font-weight: 700; color: var(--pos); white-space: nowrap; }
.deal-tag { padding: 0 7px; border-radius: var(--r-full); font-size: .6875rem; font-weight: 900; letter-spacing: .04em; line-height: 1.7; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); }
.deal-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--text-sub); font-variant-numeric: tabular-nums; }
.deal-ends { margin-left: auto; color: var(--warn-fg); font-weight: 800; white-space: nowrap; }
.deal-track { height: 3px; border-radius: var(--r-full); background: var(--bg-hover); overflow: hidden; margin-top: 2px; }
.deal-fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); }
.deal-side { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.deal-more, .deal-x, .pend-go, .pend-x {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0 9px;
  font-weight: 800; font-size: var(--fs-2xs); font-family: inherit; cursor: pointer;
  background: var(--bg-float); color: var(--text-sub); border: 1px solid var(--border); border-radius: var(--r-full);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.deal-more:hover { background: var(--blue-dim); color: var(--blue-light); }
.deal-x, .pend-x { width: 28px; padding: 0; color: var(--text-muted); }
.deal-x:hover, .pend-x:hover { color: var(--text); background: var(--bg-hover); }
.deal-more i { font-size: .625rem; transition: transform var(--dur-2) var(--ease-out); }
.deal-bar.open .deal-more i { transform: rotate(180deg); }
/* The other deals open under the card, one line each. */
.deal-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.deal-bar.open .deal-list { grid-template-rows: 1fr; border-top: 1px solid var(--border); }
.deal-list-inner { overflow: hidden auto; max-height: 43vh; overscroll-behavior: contain; }
.deal-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; color: inherit; border-top: 1px solid var(--border); transition: background var(--dur-1); }
.deal-item:first-child { border-top: none; }
.deal-item:hover { background: var(--bg-hover); }
.deal-item img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg-hover); border: 1px solid var(--border); }
.deal-item-t { flex: 1; min-width: 0; }
.deal-item-n { font-size: var(--fs-xs); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-item-s { font-size: var(--fs-2xs); color: var(--text-muted); }
.deal-item-p { font-size: var(--fs-xs); font-weight: 800; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.deal-item-p s { margin-left: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); }
.deal-cta { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; font-size: var(--fs-xs); font-weight: 800; color: var(--blue-light); background: var(--blue-dim); }
.deal-cta i { font-size: .625rem; }
.deal-cta:hover { background: rgb(var(--blue-rgb) / .22); }
@media (max-width: 420px) {
  .deal-shot { width: 44px; height: 44px; }
  .deal-game, .deal-save { display: none; }
}

/* Order or deposit in progress */
.pend-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; }
.pend-ic { background: var(--blue-dim); color: var(--blue-light); }
.pend-ic i { animation: pendTurn 2.4s ease-in-out infinite; }
@keyframes pendTurn { 0%, 70% { transform: none; } 85%, 100% { transform: rotate(180deg); } }
.pend-txt { flex: 1; min-width: 0; }
.pend-title { font-size: var(--fs-sm); font-weight: 800; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-sub { margin-top: 1px; font-size: var(--fs-2xs); color: var(--text-sub); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-side { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pend-go { background: var(--blue); color: #fff; border-color: transparent; padding: 0 12px; }
.pend-go:hover { background: var(--blue-dark); color: #fff; }
.pend-go i { font-size: .625rem; }

/* ── "Viewing as customer" pill for staff (includes/footer.php) ────── */
#imp-pill {
  position: fixed; z-index: 99999;
  left: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  background: rgba(234,88,12,.96); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-full);
  box-shadow: 0 6px 22px rgba(234,88,12,.45);
  font-size: var(--fs-xs); font-weight: 600;
  transition: left var(--dur-2) var(--ease-out), right var(--dur-2) var(--ease-out);
}
@media (min-width: 681px) { #imp-pill { bottom: 16px; } }
#imp-pill.imp-right { left: auto; right: 12px; }
#imp-toggle {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); color: #fff;
  border: none; border-radius: 50%; cursor: pointer; font-size: var(--fs-xs);
}
#imp-body { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 4px; }
#imp-pill[data-collapsed="1"] #imp-body { display: none; }
.imp-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.imp-lbl { font-size: var(--fs-2xs); opacity: .85; }
.imp-txt strong { font-size: var(--fs-xs); color: #f3e8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-exit,
#imp-side {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  min-height: 30px; padding: 0 10px;
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; cursor: pointer;
}
#imp-side { padding: 0 8px; }
.imp-exit:hover,
#imp-side:hover { background: rgba(255,255,255,.3); }

/* ── Touch targets: small icon buttons get a 44px tap area ─────────── */
.nav-toggle::before,
.nav-bell-btn::before,
.nav-search-btn::before,
.adm-bell-btn::before,
.drawer-close::before,
.search-close-btn::before,
.ann-close::before,
.sb-close::before,
.deal-x::before,
.deal-more::before,
.pend-x::before {
  content: ''; position: absolute; inset: -5px -3px;
}
/* The 28px closers still take a 44px tap. */
.ann-close::before, .sb-close::before, .deal-x::before { inset: -8px; }
/* The +N button sits right above the deal's close button: split the gap between them. */
.deal-side .deal-x::before { inset: -2px -8px -8px; }
.deal-more::before { inset: -8px -8px -2px; }
.pend-x::before { inset: -8px -8px -8px -2px; }
.drawer-close,
.search-close-btn,
.ann-close,
.sb-close,
.deal-x,
.deal-more,
.pend-x { position: relative; }

/* ── Phones: 16px fields (iOS zooms the page into anything smaller) ── */
@media (max-width: 680px) {
  .form-control,
  .search-input,
  .sw-email-in { font-size: 1rem; }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 680px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.otp-box),
    select,
    textarea { font-size: 16px !important; }
  }
}

/* ── Reduced motion: nothing slides, fades or bounces ──────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Spinners still say "working". */
  .btn-spinner, .search-spinner, .fa-spin, .sw-send-btn.loading i {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Motion: Less, chosen in Appearance, does what the phone's own setting does. */
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html[data-motion="reduce"] :is(.btn-spinner, .search-spinner, .fa-spin) { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
html[data-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; }

/* ── Print: the page content only ──────────────────────────────────── */
@media print {
  header, .bottom-nav, .side-drawer, .drawer-overlay, #nb-bottom-stack,
  #toast-container, #imp-pill, #chat-launcher, #chat-panel, .footer { display: none !important; }
  body { padding: 0 !important; background: #fff; color: #000; }
  body::before, body::after { display: none !important; }
}

.theme-toggle-wrapper { min-height: 36px; }
@media (pointer: coarse) { .theme-toggle-wrapper { min-height: var(--tap); } }