/* ====================================================================
   x2g — main.css   (dark, mobile-first, no framework)
   ==================================================================== */

:root {
  /* Page / surface palette — softer navy-slate (lifted off pure black). */
  --bg:        #1a2030;   /* page background */
  --bg-2:      #232a3b;   /* card / elevated surface */
  --bg-3:      #2a3245;   /* input / sub-card / hover-target */
  --bg-elev:   #343d54;   /* hover / focused elevated */
  --line:      #363e51;   /* subtle border */
  --line-2:    #4a5570;   /* emphasized border */

  --fg:        #e8edf5;
  --fg-muted:  #a3aec0;
  --fg-dim:    #7a8497;

  --accent:    #00d68f;
  --accent-2:  #009f6a;
  --warn:      #f0a020;
  --danger:    #ff5d5d;
  --pos:       #2dd4bf;
  --neg:       #ff7b7b;

  --primary:   #4f8cff;
  --primary-2: #2c6dff;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 4px 14px rgba(0,0,0,.35);

  --font:  'Inter', 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a       { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code    { font-family: var(--mono); font-size: .9em; background: var(--bg-3); padding: 1px 5px; border-radius: 4px; }
.mono   { font-family: var(--mono); }
.muted  { color: var(--fg-muted); }
.small  { font-size: 12px; }
.center { text-align: center; }
.r      { text-align: right; }
.pos    { color: var(--pos); }
.neg    { color: var(--neg); }
hr.sep  { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ====================================================================
   TOPBAR
   ==================================================================== */

.topbar {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.topbar__row { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { font-weight: 800; font-size: 22px; letter-spacing: -.5px; color: var(--accent); display: inline-flex; align-items: center; }
.brand__logo { font-family: var(--mono); }
.brand__img  { height: 36px; max-width: 180px; object-fit: contain; display: block; }

.topbar__nav { display: flex; gap: 4px; margin-left: 24px; flex: 1; }
.navlink {
  color: var(--fg);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.navlink:hover { background: var(--bg-3); text-decoration: none; }
.navlink--admin { color: var(--warn); }

.topbar__user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar__auth { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Mobile hamburger — hidden on desktop, shown by the @media block below */
.topbar__hamburger {
  display: none;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--fg);
  width: 38px; height: 38px;
  border-radius: 8px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topbar__hamburger:active { background: var(--bg-2); }

/* Drawer backdrop — invisible until body.topbar-open kicks it on */
.topbar__backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 90;
  opacity: 0;
  transition: opacity .2s ease;
}

/* ----- Tablet + phone: nav becomes off-canvas drawer ----- */
@media (max-width: 800px) {
  .topbar__row { gap: 10px; padding: 0 12px; }

  .topbar__hamburger { display: inline-flex; }

  /* Brand shrinks but keeps visible */
  .brand { font-size: 18px; }
  .brand__img { height: 28px; max-width: 120px; }

  /* Nav is now a slide-in drawer from the LEFT */
  .topbar__nav {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 280px; max-width: 85vw; height: 100vh;
    margin-left: 0;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 12px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
    overflow-y: auto;
  }
  body.topbar-open .topbar__nav { transform: translateX(0); }
  body.topbar-open .topbar__backdrop { display: block; opacity: 1; }
  body.topbar-open { overflow: hidden; }

  /* Each link a full-width row inside the drawer */
  .topbar__nav .navlink {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
  }
  .topbar__nav .navlink--active { background: var(--bg-3); }

  /* Auth area on mobile — keep buttons visible in the topbar; shrink size */
  .topbar__auth { gap: 6px; margin-left: auto; }
  .topbar__auth .btn { padding: 6px 10px; font-size: 13px; }
  /* Locale switch becomes icon-only — the form button is already small */
  .topbar__auth .locale-switch .iconbtn { padding: 6px 8px; font-size: 12px; }

  /* Logged-in user pill: drop the username text, keep avatar */
  .topbar__user { gap: 8px; margin-left: auto; }
  .topbar__user .balance-pill { padding: 4px 10px; font-size: 12px; }
  .topbar__user .balance-pill__bonus { display: none; }
  .topbar__user .usermenu__name { display: none; }
  .topbar__user .balance-refresh { width: 32px; height: 32px; }
}

/* ----- Phone (≤ 480px): even tighter ----- */
@media (max-width: 480px) {
  .topbar__row { height: 56px; }
  .topbar__user .locale-switch { display: none; } /* Move into drawer? for now hide */
  .topbar__hamburger { width: 36px; height: 36px; font-size: 16px; }
  .balance-pill__amt { font-size: 13px; }
}

.balance-pill {
  display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--accent-2), #007a4f);
  color: #fff; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; line-height: 1;
}
.balance-pill__amt { font-size: 16px; }
.balance-pill__bonus { font-size: 11px; font-weight: 500; opacity: .9; margin-top: 2px; }

/* Big-win ticker — scrolling marquee on landing + dashboard */
.big-wins-ticker {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 14px 0 18px;
  padding: 8px 0;
  position: relative;
  --ticker-speed: 60s;
}
.big-wins-ticker::before, .big-wins-ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2;
  pointer-events: none;
}
.big-wins-ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg-2), transparent); }
.big-wins-ticker::after  { right: 0; background: linear-gradient(90deg, transparent, var(--bg-2)); }
.big-wins-ticker__track {
  display: flex; gap: 14px; width: max-content;
  align-items: center;
  animation: bigWinsScroll var(--ticker-speed) linear infinite;
}
.big-wins-ticker:hover .big-wins-ticker__track { animation-play-state: paused; }

/* Each entry is now a clickable card with a game thumb on the left */
.big-wins-ticker__item {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  padding: 6px 12px 6px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none; color: var(--fg);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.big-wins-ticker__item:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,214,143,.15);
}
.big-wins-ticker__item.is-static {
  pointer-events: none;
  cursor: default;
}

.big-wins-ticker__thumb {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-3);
  display: grid; place-items: center;
}
.big-wins-ticker__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.big-wins-ticker__thumb-placeholder {
  font-size: 16px; font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.big-wins-ticker__thumb-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  font-size: 11px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  line-height: 1;
}

.big-wins-ticker__body {
  display: inline-flex; flex-direction: column;
  align-items: center;          /* center both lines on the cross-axis */
  gap: 1px;
  line-height: 1.2;
  text-align: center;
}
.big-wins-ticker__line {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px;
}
.big-wins-ticker__user { color: var(--fg-muted); font-size: 11px; }
.big-wins-ticker__verb { color: var(--fg-muted); font-size: 11px; }
.big-wins-ticker__amount {
  color: var(--accent); font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.big-wins-ticker__game {
  color: var(--fg); opacity: .8;
  font-size: 11px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
@keyframes bigWinsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .big-wins-ticker { --ticker-speed: 40s; }
  .big-wins-ticker__game { max-width: 130px; }
}

/* Achievement / badge wall (profile.php) */
.achievements-card { margin-top: 18px; }
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px 16px 16px;
}
.achievement {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s ease, border-color .15s ease;
}
.achievement.is-earned {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(0, 214, 143, .14), rgba(0, 145, 234, .04));
  box-shadow: 0 4px 10px rgba(0, 214, 143, .12);
}
.achievement.is-earned:hover { transform: translateY(-2px); border-color: var(--primary); }
.achievement.is-locked      { opacity: .55; filter: grayscale(.6); }
.achievement__icon {
  font-size: 36px; line-height: 1; margin-bottom: 4px;
}
.achievement.is-earned .achievement__icon {
  filter: drop-shadow(0 2px 6px rgba(0, 214, 143, .4));
}
.achievement__name { font-size: 13px; font-weight: 700; }
.achievement__when { font-size: 10px; color: var(--accent); }
.achievement__lock { font-size: 10px; line-height: 1.4; }

/* Risk score chip (admin/users.php list + admin/user-edit.php panel) */
.risk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  border: 1px solid transparent;
  background: var(--bg-3);
  font-variant-numeric: tabular-nums;
}
.risk-chip--green  { color: var(--accent);  border-color: rgba(0,214,143,.4); background: rgba(0,214,143,.1); }
.risk-chip--yellow { color: var(--warn);    border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.risk-chip--orange { color: #f97316;        border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.12); }
.risk-chip--red    { color: var(--danger);  border-color: rgba(255,93,93,.5);  background: rgba(255,93,93,.12); animation: riskPulse 1.6s ease-in-out infinite; }
@keyframes riskPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,93,93,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,93,93,.25); }
}
.risk-chip--lg { font-size: 13px; padding: 4px 12px; }

/* Risk panel inside user-edit profile card */
.ue-risk {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 10px;
}
.ue-risk__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.ue-risk__flags {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.ue-risk__flags li {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px;
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px;
  align-items: center;
}
.ue-risk__flags strong { color: var(--danger); font-variant-numeric: tabular-nums; }
.ue-risk__code {
  font-family: var(--mono); font-size: 11px;
  background: var(--bg-2); padding: 1px 6px; border-radius: 4px;
}

/* Spin CTA card on dashboard */
.spin-cta {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, .15), rgba(236, 72, 153, .08));
  border: 1px solid var(--line);
  border-left: 3px solid #a855f7;
  border-radius: var(--radius-md);
  padding: 14px 18px; margin: 14px 0;
  text-decoration: none; color: var(--fg);
  transition: transform .15s ease, border-color .15s ease;
}
.spin-cta:hover {
  text-decoration: none; transform: translateX(2px);
  border-left-color: #ec4899;
}
.spin-cta__icon { font-size: 28px; line-height: 1; }
.spin-cta__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.spin-cta__title { font-weight: 700; font-size: 15px; }
.spin-cta__arrow { font-size: 22px; color: var(--fg-muted); }

/* ============================================================
   Lucky-draw spin wheel page — casino-style wheel with rim lights
   ============================================================ */
.spin-page {
  max-width: 520px; margin: 0 auto; padding: 8px 12px 32px;
  text-align: center;
}

/* --- Hero strip ----------------------------------------------- */
.spin-hero { margin: 4px 0 18px; }
.spin-hero__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309);
  font-size: 28px; line-height: 1;
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, .25),
    0 8px 24px rgba(245, 158, 11, .35);
  margin-bottom: 8px;
}
.spin-hero__title { font-size: 24px; font-weight: 800; margin: 4px 0 2px; letter-spacing: .3px; }
.spin-hero__sub   { font-size: 13px; margin: 0 0 14px; }

.spin-tokens-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.14));
  border: 1px solid rgba(245, 158, 11, .35);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  font-weight: 700;
}
.spin-tokens-chip__icon  { font-size: 18px; line-height: 1; }
.spin-tokens-chip__count {
  color: #fbbf24; font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(251, 191, 36, .55);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.spin-tokens-chip__unit  { color: var(--fg-muted); font-size: 12px; font-weight: 600; }
.spin-tokens-chip--empty {
  background: rgba(148, 163, 184, .08);
  border-color: var(--line);
}
.spin-tokens-chip--empty .spin-tokens-chip__count {
  color: var(--fg-muted); text-shadow: none;
}

/* --- Wheel stage --------------------------------------------- */
.spin-stage {
  position: relative;
  width: min(380px, 92vw); height: min(380px, 92vw);
  margin: 0 auto 6px;
  isolation: isolate;
}

/* Pointer — pure CSS triangle pointing down at top of wheel */
.spin-stage__pointer {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid #fbbf24;
  z-index: 5;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}
.spin-stage__pointer::after {
  content: ''; position: absolute; top: -28px; left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 55%, #b45309);
  box-shadow: 0 0 8px rgba(251, 191, 36, .8);
}

/* Wheel body — conic-gradient slices, JS sets transform for rotation */
.spin-wheel {
  position: absolute; inset: 0; border-radius: 50%;
  overflow: hidden;
  transform: rotate(0deg);
  transition: transform 4s cubic-bezier(.17, .67, .12, .99);
  /* `background` set inline (PHP-built conic-gradient) */
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, .08),
    inset 0 0 60px rgba(0, 0, 0, .35),
    0 0 0 6px #1e293b,
    0 0 0 8px #0f172a,
    0 18px 48px rgba(0, 0, 0, .6),
    0 0 60px rgba(245, 158, 11, .12);
}
/* Subtle radial highlight on the wheel face for depth */
.spin-wheel::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), transparent 50%);
  pointer-events: none; z-index: 1;
}

/* Each label sits at the center of its slice along the radial line.
   `--angle` is the slice center in degrees clockwise from north. */
.spin-label {
  position: absolute;
  top: 50%; left: 50%;
  width: 110px;
  transform-origin: 50% 0;
  transform: translate(-50%, 0) rotate(var(--angle)) translateY(-138px) translateY(-50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 1px 0 rgba(0, 0, 0, .5);
  pointer-events: none;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.spin-label__icon {
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
.spin-label__text {
  font-size: 12px; font-weight: 800;
  line-height: 1.2; letter-spacing: .2px;
  max-width: 100px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rim lights — alternating LEDs around the wheel rim */
.spin-rim {
  position: absolute; inset: -2px;
  margin: 0; padding: 0; list-style: none;
  pointer-events: none; z-index: 4;
}
.spin-rim__dot {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24, 0 0 12px rgba(251, 191, 36, .55);
  transform: rotate(var(--rot)) translateY(calc(-50% + 2px)) translateY(calc(min(380px, 92vw) / -2));
  /* Alternating LED chase: even and odd dots fade in/out on opposite phases */
  animation: rimChase 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .05s);
}
.spin-rim__dot:nth-child(odd)  { background: #f87171; box-shadow: 0 0 6px #f87171, 0 0 12px rgba(248, 113, 113, .55); }
.spin-rim__dot:nth-child(even) { background: #fbbf24; box-shadow: 0 0 6px #fbbf24, 0 0 12px rgba(251, 191, 36, .55); }
@keyframes rimChase {
  0%, 100% { opacity: .35; transform: rotate(var(--rot)) translateY(calc(min(380px, 92vw) / -2 + 2px)) scale(.9); }
  50%      { opacity: 1;   transform: rotate(var(--rot)) translateY(calc(min(380px, 92vw) / -2 + 2px)) scale(1.15); }
}
.spin-stage[data-spinning="1"] .spin-rim__dot {
  animation-duration: .35s;
}

/* Center hub = the spin button itself. Stays still while wheel rotates. */
.spin-hub {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  border: 0; padding: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 30%, #fde68a 0%, #f59e0b 45%, #b45309 100%);
  color: #1f2937;
  font-weight: 900; font-size: 18px; letter-spacing: 1px;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,.25),
    inset 0 3px 6px rgba(255,255,255,.55),
    0 8px 24px rgba(245, 158, 11, .55),
    0 0 0 6px #0f172a,
    0 0 0 8px rgba(245, 158, 11, .35);
  z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.spin-hub__ring {
  position: absolute; inset: -4px; border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .55);
  animation: hubPulse 1.6s ease-in-out infinite;
}
.spin-hub__text { position: relative; z-index: 1; }
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, .65), 0 0 0 0 rgba(251, 191, 36, .4); }
  50%      { box-shadow: 0 0 0 4px rgba(251, 191, 36, .25), 0 0 0 18px rgba(251, 191, 36, 0); }
}
.spin-hub:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.05);
}
.spin-hub:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(.96);
}
.spin-hub:disabled {
  cursor: not-allowed;
  background: radial-gradient(circle at 30% 30%, #475569, #1e293b 70%);
  color: var(--fg-muted);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.4),
    0 0 0 6px #0f172a,
    0 0 0 8px var(--line);
}
.spin-hub:disabled .spin-hub__ring { display: none; }
.spin-stage[data-spinning="1"] .spin-hub__ring { animation: none; opacity: 0; }

.spin-stage__hint {
  margin: 8px 0 14px;
  font-size: 12px;
}

/* --- Empty / no-tokens CTA card ------------------------------ */
.spin-empty {
  margin: 0 auto 18px; max-width: 320px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(236,72,153,.10));
  border: 1px solid rgba(99, 102, 241, .35);
  text-align: center;
}
.spin-empty__title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.spin-empty__hint  { margin: 0 0 10px; line-height: 1.45; }

/* --- Result reveal toast ------------------------------------- */
.spin-result {
  display: inline-block; padding: 14px 24px; border-radius: 12px;
  margin: 14px auto;
  font-size: 17px; font-weight: 800;
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.06));
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 24px rgba(16, 185, 129, .25);
  animation: spinResultPop .5s cubic-bezier(.34,1.56,.64,1);
}
.spin-result[hidden] { display: none; }
@keyframes spinResultPop {
  0%   { transform: scale(.4) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.08) translateY(0);  opacity: 1; }
  100% { transform: scale(1) translateY(0);     opacity: 1; }
}
.spin-result--miss {
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.04));
  border-color: var(--warn); color: var(--warn);
  box-shadow: none;
}

/* --- Spin history -------------------------------------------- */
.spin-history { margin-top: 28px; text-align: left; }
.spin-history__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 10px;
}
.spin-history__title {
  font-size: 13px; font-weight: 800; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .8px;
  margin: 0;
}
.spin-history__count {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  background: var(--bg-3); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 999px;
}
.spin-history__empty {
  padding: 20px 14px; text-align: center;
  background: var(--bg-3); border: 1px dashed var(--line);
  border-radius: 8px;
}
.spin-history__list { display: flex; flex-direction: column; gap: 6px; }

.spin-hist-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 8px; padding: 10px 12px;
  font-size: 13px;
}
.spin-hist-row__icon  {
  font-size: 22px; line-height: 1; text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.spin-hist-row__main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.spin-hist-row__label {
  font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spin-hist-row__amount {
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.spin-hist-row__amount-tag {
  font-style: normal; font-size: 10px;
  color: var(--fg-muted); font-weight: 600;
  margin-left: 4px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(168, 85, 247, .15);
  border: 1px solid rgba(168, 85, 247, .35);
}
.spin-hist-row__time  { white-space: nowrap; }

.spin-hist-row--cash  {
  border-left-color: #10b981;
  background: linear-gradient(90deg, rgba(16,185,129,.10), var(--bg-3) 35%);
}
.spin-hist-row--cash  .spin-hist-row__amount { color: #34d399; }
.spin-hist-row--bonus {
  border-left-color: #a855f7;
  background: linear-gradient(90deg, rgba(168,85,247,.10), var(--bg-3) 35%);
}
.spin-hist-row--bonus .spin-hist-row__amount { color: #c084fc; }
.spin-hist-row--token {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245,158,11,.10), var(--bg-3) 35%);
}
.spin-hist-row--token .spin-hist-row__amount { color: #fbbf24; }
.spin-hist-row--miss  { border-left-color: var(--line-2); opacity: .65; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .spin-hero__title { font-size: 21px; }
  .spin-hub { width: 84px; height: 84px; font-size: 16px; }
  .spin-stage__pointer { border-top-width: 20px; border-left-width: 12px; border-right-width: 12px; }
}

/* Tier celebration modal — full-page overlay shown once per promotion */
.tier-celebrate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.tier-celebrate.is-open { opacity: 1; pointer-events: auto; }
.tier-celebrate.is-closing { opacity: 0; }
.tier-celebrate__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(4px);
}
.tier-celebrate__card {
  position: relative;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 24px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  transform: scale(.92);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  text-align: center;
}
.tier-celebrate.is-open .tier-celebrate__card { transform: scale(1); }

.tier-celebrate__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 24px; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tier-celebrate__close:hover { background: var(--bg-3); color: var(--fg); }

.tier-celebrate__head { margin-bottom: 18px; }
.tier-celebrate__icon { font-size: 56px; line-height: 1; margin-bottom: 8px; animation: tcBounce .8s ease; }
@keyframes tcBounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-12px); }
  60%      { transform: translateY(-4px); }
}
.tier-celebrate__sub { margin-bottom: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tier-celebrate__name {
  display: inline-block;
  font-size: 28px; font-weight: 800; color: #fff;
  padding: 8px 24px; border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.tier-celebrate__msg { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }

.tier-celebrate__perks {
  margin: 14px 0;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; text-align: left;
}
.tier-celebrate__perks-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-muted); margin-bottom: 8px;
}
.tier-perks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tier-perk {
  display: grid; grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 10px;
  font-size: 13px;
}
.tier-perk__icon { font-size: 16px; text-align: center; }
.tier-perk__label { color: var(--fg); }
.tier-perk__value { color: var(--accent); font-weight: 700; }

.tier-celebrate__actions { display: flex; justify-content: center; }
.tier-celebrate__actions .btn { min-width: 200px; }

/* Confetti */
.tier-celebrate__confetti {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.tier-celebrate__piece {
  position: absolute; top: -10px; left: var(--x);
  width: 8px; height: 14px; background: var(--c);
  border-radius: 2px;
  animation: tcFall calc(2.5s + var(--d) * 1.5s) linear var(--d) infinite;
  opacity: 0;
}
.tier-celebrate.is-open .tier-celebrate__piece { opacity: 1; }
@keyframes tcFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Daily check-in card (dashboard) */
.checkin-card {
  background: linear-gradient(135deg, rgba(0, 145, 234, .08), rgba(0, 214, 143, .04));
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 14px 0;
}
.checkin-card.just-claimed {
  animation: checkinPulse 1.2s ease;
  border-left-color: var(--accent);
  background: linear-gradient(135deg, rgba(0, 214, 143, .12), rgba(0, 214, 143, .04));
}
@keyframes checkinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
  30%      { box-shadow: 0 0 0 8px rgba(0, 214, 143, .25); }
}

.checkin-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.checkin-card__title { display: flex; align-items: center; gap: 10px; }
.checkin-card__emoji { font-size: 22px; }
.checkin-card__heading { margin: 0; font-size: 15px; font-weight: 700; }
.checkin-card__streak {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-3); padding: 4px 10px; border-radius: 999px;
  font-weight: 700;
}
.checkin-card__streak-fire { font-size: 14px; }
.checkin-card__streak-num { font-size: 16px; color: var(--warn); }

.checkin-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .checkin-grid { grid-template-columns: repeat(7, 1fr); }
  .checkin-grid > .checkin-cell:nth-child(-n+7) { display: none; }  /* show last 7 only */
}
.checkin-cell {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  font-size: 11px; gap: 1px;
}
.checkin-cell.is-claimed {
  background: rgba(0, 214, 143, .15);
  border-color: var(--accent);
  color: var(--accent);
}
.checkin-cell.is-today {
  background: rgba(245, 158, 11, .15);
  border-color: var(--warn);
  color: var(--warn);
  animation: checkinTodayBlink 2s ease infinite;
}
@keyframes checkinTodayBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(245, 158, 11, .3); }
}
.checkin-cell.is-pending { color: var(--fg-dim); }
.checkin-cell__icon { font-size: 14px; line-height: 1; }
.checkin-cell__icon--today { font-size: 16px; }
.checkin-cell__streak { font-size: 9px; font-weight: 700; opacity: .8; }

.checkin-card__action { display: flex; justify-content: center; }
.checkin-card__btn { min-width: 240px; }
.checkin-card__btn.is-loading { opacity: .6; pointer-events: none; }
.checkin-card__done {
  font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 10px 16px;
  background: rgba(0, 214, 143, .1);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* ============================================================
   ENGAGEMENT STRIP — compact 3-widget row replacing the
   old check-in card + spin CTA + bonus section. Each card
   is a row of [icon | main | action], with the check-in
   widget exposing the 14-day grid via <details> expand.
   ============================================================ */
.engage-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.engage-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--fg);
  display: block;
  transition: border-color .15s ease, transform .12s ease;
}
.engage-card:hover { border-color: var(--line-2); text-decoration: none; }
a.engage-card:active { transform: scale(.99); }
.engage-card--checkin { border-left: 3px solid var(--warn); }
.engage-card--spin    { border-left: 3px solid var(--primary); }
.engage-card--bonus   { border-left: 3px solid var(--accent); }

.engage-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.engage-card__icon {
  font-size: 26px;
  line-height: 1;
  flex: 0 0 auto;
}
.engage-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.engage-card__label { font-size: 11px; }
.engage-card__value { font-size: 15px; font-weight: 700; line-height: 1.2; }
.engage-card__action { flex: 0 0 auto; }
.engage-card__chevron {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--fg-muted);
  line-height: 1;
}
.engage-card__done {
  font-size: 16px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 214, 143, .1);
  border: 1px solid var(--accent);
}
/* compact button override (the .checkin-card__btn elsewhere has min-width:240px) */
.engage-card .checkin-card__btn { min-width: auto; padding: 6px 12px; font-size: 13px; white-space: nowrap; }

/* Bonus widget extras: thin progress bar + caption */
.engage-card__bonus-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.engage-card__bonus-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6dd3a3);
  transition: width .4s ease;
}
.engage-card__bonus-meta { display: flex; justify-content: space-between; gap: 6px; }

/* Expand toggle for the 14-day grid */
.engage-card__expand { margin-top: 8px; }
.engage-card__expand-toggle {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--fg-muted);
  padding: 4px 0;
  user-select: none;
}
.engage-card__expand-toggle::-webkit-details-marker { display: none; }
.engage-card__expand-toggle::marker { content: ''; }
.engage-card__expand-toggle:hover { color: var(--fg); }
.engage-card__expand[open] .engage-card__expand-toggle { color: var(--fg); }

/* Compact 14-day grid — smaller cells inside the expand panel */
.checkin-grid--compact {
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  margin-bottom: 4px;
  margin-top: 6px;
}
.checkin-grid--compact .checkin-cell {
  aspect-ratio: 1;
  font-size: 9px;
  border-radius: 4px;
}
.checkin-grid--compact .checkin-cell__icon { font-size: 12px; }
.checkin-grid--compact .checkin-cell__streak { font-size: 8px; }
@media (max-width: 600px) {
  .checkin-grid--compact { grid-template-columns: repeat(7, 1fr); }
  .checkin-grid--compact > .checkin-cell:nth-child(-n+7) { display: none; }
}

/* Notification bell (topbar) — <details> dropdown driven by main.js */
.notif { position: relative; }
.notif__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px;
  color: var(--fg-muted); cursor: pointer;
  position: relative; list-style: none; user-select: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.notif__btn::-webkit-details-marker { display: none; }
.notif__btn::marker { content: ''; }
.notif__btn:hover { background: var(--bg-elev); color: var(--fg); border-color: var(--line-2); }
.notif__btn:active { transform: scale(.92); }
.notif[open] .notif__btn { background: var(--bg-elev); color: var(--fg); border-color: var(--line-2); }
.notif__bell { display: block; }
.notif__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.notif__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.notif__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.notif__title { font-weight: 700; font-size: 13px; }
.notif__mark-all {
  background: transparent; border: 0; color: var(--primary);
  font-size: 11px; cursor: pointer; padding: 2px 4px;
}
.notif__mark-all:hover { color: var(--accent); text-decoration: underline; }
.notif__list { max-height: 60vh; overflow-y: auto; }
.notif__empty { padding: 32px 16px; text-align: center; }
.notif__item {
  display: flex; gap: 10px; padding: 10px 14px;
  text-decoration: none; color: var(--fg);
  border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
.notif__item:last-child { border-bottom: 0; }
.notif__item:hover { background: var(--bg-3); text-decoration: none; }
.notif__item--unread { background: rgba(0, 145, 234, .06); }
.notif__item--unread::before {
  content: ''; display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); margin-top: 6px; flex-shrink: 0;
}
.notif__icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif__row-title { font-size: 13px; font-weight: 600; }
.notif__row-body { font-size: 12px; line-height: 1.4; }
.notif__row-time { font-size: 11px; }
.notif__foot {
  border-top: 1px solid var(--line);
  text-align: center;
}
.notif__view-all {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.notif__view-all:hover { background: var(--bg-3); text-decoration: none; }

@media (max-width: 480px) {
  .notif__panel { width: calc(100vw - 24px); right: -8px; }
}

/* Refresh-balance icon button (in topbar, next to balance-pill) */
.balance-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--fg-muted); border-radius: 999px;
  cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.balance-refresh:hover {
  background: var(--bg-elev); color: var(--fg); border-color: var(--line-2);
}
.balance-refresh:active { transform: scale(.92); }
.balance-refresh__icon { display: block; }
.balance-refresh.is-spinning { color: var(--primary); pointer-events: none; }
.balance-refresh.is-spinning .balance-refresh__icon {
  animation: balanceRefreshSpin .9s linear infinite;
}
.balance-refresh.is-flash {
  background: var(--accent); color: #042; border-color: var(--accent);
  animation: balanceRefreshFlash .6s ease;
}
@keyframes balanceRefreshSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes balanceRefreshFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
  30%      { box-shadow: 0 0 0 6px rgba(0, 214, 143, .4); }
}

.iconbtn {
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--fg); border-radius: var(--radius-sm);
  padding: 6px 10px; cursor: pointer; font-weight: 600; font-size: 12px;
}
.iconbtn:hover { background: var(--bg-elev); }

/* Locale toggle button (flag + label) — extends .iconbtn in topbar */
.locale-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  transition: transform .12s ease, border-color .15s ease;
}
.locale-btn:hover { border-color: var(--line-2); }
.locale-btn:active { transform: scale(.94); }
.locale-btn__flag { display: inline-flex; align-items: center; line-height: 1; }
.locale-btn__label { letter-spacing: .04em; }

/* Inline SVG flags (used by flag_svg() helper). Windows fallback for emoji flags. */
.flag-svg {
  width: 18px;
  height: 12px;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  vertical-align: middle;
  flex-shrink: 0;
}

.usermenu { position: relative; }
.usermenu summary {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; list-style: none;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: var(--bg-3); }
.usermenu__avatar {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700;
}
.usermenu__name { font-weight: 600; }
.usermenu__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 220px; padding: 8px; box-shadow: var(--shadow);
}
.usermenu__pop a, .usermenu__pop button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: transparent; border: 0; color: var(--fg); cursor: pointer; font: inherit;
}
.usermenu__pop a:hover, .usermenu__pop button:hover { background: var(--bg-3); text-decoration: none; }
.usermenu__head { padding: 8px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.usermenu__logout { color: var(--danger) !important; }

/* ====================================================================
   MAIN
   ==================================================================== */

.main { padding-top: 24px; padding-bottom: 60px; min-height: calc(100vh - 60px - 60px); }
.page-title { margin: 0 0 24px; font-size: 24px; font-weight: 700; }

/* ====================================================================
   GRID / CARDS
   ==================================================================== */

.grid          { display: grid; gap: 20px; grid-template-columns: 1fr; }
.grid--2col    { grid-template-columns: 1fr; }
.grid--3col    { grid-template-columns: 1fr; }
.grid--dashboard { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid--2col      { grid-template-columns: 1fr 1fr; }
  .grid--3col      { grid-template-columns: 1fr 1fr 1fr; }
  .grid--dashboard { grid-template-columns: 2fr 1fr; }
}
.card--full { grid-column: 1 / -1; }

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card__title { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--fg); }
.card__head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.card--hero {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-elev) 100%);
}
.card--danger { border-color: rgba(255, 93, 93, .35); }

/* Balance grid */
.balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 8px; }
.balance-grid__item {
  background: var(--bg); border-radius: var(--radius-sm); padding: 14px; border: 1px solid var(--line);
}
.balance-grid__label { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .5px; }
.balance-grid__value { font-size: 22px; font-weight: 700; margin-top: 6px; font-family: var(--mono); }
@media (max-width: 600px) {
  .balance-grid { grid-template-columns: 1fr; }
}

/* Tier badge */
.tier-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #000;
  text-transform: uppercase; letter-spacing: .5px;
}
.tier-badge--sm { padding: 2px 8px; font-size: 10px; }

/* Stat tiles (admin) */
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px;
}
.stat__label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .5px; }
.stat__value { font-size: 24px; font-weight: 700; margin-top: 6px; font-family: var(--mono); }

/* ====================================================================
   FORMS
   ==================================================================== */

.field        { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field__label { font-size: 13px; font-weight: 500; color: var(--fg-muted); }
.field__input, select.field__input, textarea.field__input {
  width: 100%;
  background-color: var(--bg); color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit; font-size: 14px;
  outline: 0;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.field__input:hover:not(:disabled) { border-color: var(--line-2); }
.field__input:focus { border-color: var(--primary); background-color: var(--bg); box-shadow: 0 0 0 3px rgba(79,140,255,.15); }
.field__input:disabled { opacity: .55; cursor: not-allowed; }

/* Custom select: native arrow off, custom chevron via background SVG */
select.field__input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa6b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
select.field__input:hover:not(:disabled) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23e6edf3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
select.field__input:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234f8cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
select.field__input::-ms-expand { display: none; }
select.field__input option {
  background: var(--bg-2); color: var(--fg);
  padding: 8px 12px;
}
select.field__input option:checked,
select.field__input option:hover { background: var(--bg-elev); }

/* Bank picker: thicker left stripe (color set via JS); inherit field__input look in case it's used standalone */
select.bank-picker {
  border-left-width: 4px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  width: 100%;
  background-color: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 10px 36px 10px 12px;
  font: inherit; font-size: 14px;
  outline: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa6b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
.field__hint { font-size: 11px; color: var(--fg-dim); }
.field-row    { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-inline  { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.form-inline .field { margin-bottom: 0; }

textarea.field__input { font-family: var(--mono); resize: vertical; min-height: 60px; }

.btn {
  display: inline-block;
  padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600;
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--line);
  cursor: pointer; font: inherit; font-size: 14px; transition: background .15s, transform .05s;
  text-align: center;
}
.btn:hover { background: var(--bg-elev); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-2); }
.btn--ghost   { background: transparent; }
.btn--danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn--danger:hover  { background: #e23a3a; }
.btn--sm      { padding: 6px 12px; font-size: 12px; }
.btn--lg      { padding: 14px 24px; font-size: 16px; }
.btn--block   { display: block; width: 100%; }

/* ====================================================================
   AUTH PAGES
   ==================================================================== */

.page--auth .main { display: grid; place-items: center; padding-top: 60px; }
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px;
}
.auth-card__title { margin: 0 0 24px; font-size: 22px; font-weight: 700; text-align: center; }
.auth-card__alt   { text-align: center; margin-top: 20px; color: var(--fg-muted); }

/* ====================================================================
   TABLE
   ==================================================================== */

/* Horizontal-scroll wrapper for tables that exceed the viewport on narrow
   screens. Without this, a long row (e.g. statement page on a 390px phone)
   pushes the whole page wider than the viewport and bleeds past the right
   edge. The wrapper traps the overflow inside the card so only the table
   scrolls. Pair with min-width on the table itself so rows don't compress. */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle fade on the right edge hints there's more to scroll to */
  background:
    linear-gradient(to right, var(--bg-2), var(--bg-2)) left center / 20px 100% no-repeat,
    linear-gradient(to right, transparent, var(--bg-2)) right center / 20px 100% no-repeat,
    radial-gradient(ellipse at left, rgba(0,0,0,.18), transparent 70%) left center / 14px 100% no-repeat,
    radial-gradient(ellipse at right, rgba(0,0,0,.18), transparent 70%) right center / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { font-weight: 600; color: var(--fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; background: var(--bg-3); }
.tbl tbody tr:hover { background: var(--bg-3); }
.tbl--admin th { background: var(--bg-3); }
.tbl--settings tbody tr { display: table-row; }
.tbl--settings td > form { display: contents; }

.kv { width: 100%; }
.kv th { text-align: left; font-weight: 500; color: var(--fg-muted); padding: 6px 0; width: 35%; }
.kv td { padding: 6px 0; }

/* ====================================================================
   BADGES / FLASH / ALERT
   ==================================================================== */

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.badge--active    { background: rgba(45,212,191,.18); color: var(--pos); }
.badge--suspended { background: rgba(240,160,32,.18); color: var(--warn); }
.badge--banned    { background: rgba(255,93,93,.18); color: var(--danger); }
.badge--primary   { background: rgba(79,140,255,.2); color: var(--primary); }

/* Chip — softer than badge, used for inline labels (role tags, status, etc.) */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-3); color: var(--fg-muted);
  border: 1px solid transparent; line-height: 1.2;
}
.chip--muted   { background: var(--bg-3);                 color: var(--fg-muted); }
.chip--success { background: rgba(34,197,94,.14);         color: #4ade80; }
.chip--warn    { background: rgba(240,160,32,.14);        color: var(--warn); }
.chip--danger  { background: rgba(255,93,93,.14);         color: var(--danger); }
.chip--accent  { background: rgba(0,214,143,.14);         color: var(--accent); }
.chip--info    { background: rgba(79,140,255,.14);        color: var(--primary); }

.flash, .alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 500; }
.flash--success, .alert--ok   { background: rgba(45,212,191,.12); border: 1px solid var(--pos); color: var(--pos); }
.flash--warn, .alert--warn    { background: rgba(240,160,32,.12); border: 1px solid var(--warn); color: var(--warn); }
.flash--err, .alert--err      { background: rgba(255,93,93,.12); border: 1px solid var(--danger); color: var(--neg); }

/* ====================================================================
   BANK LOGOS
   ==================================================================== */

.bank-logo {
  display: inline-grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
}
.bank-logo--unknown { background: var(--bg-3); color: var(--fg-muted); }

/* ====================================================================
   HERO / LANDING
   ==================================================================== */

.hero { text-align: center; padding: 80px 16px 40px; }
.hero__title { font-size: 48px; font-weight: 800; margin: 0; color: var(--accent); letter-spacing: -1px; }
.hero__sub   { font-size: 18px; color: var(--fg-muted); margin: 12px 0 32px; }
.hero__cta   { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ====================================================================
   FOOTER
   ==================================================================== */

.footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 20px;
  color: var(--fg-muted);
  margin-top: auto;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer__brand { font-weight: 800; color: var(--accent); }

.footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 28px;
  margin-bottom: 20px;
}
.footer__col-title {
  font-size: 12px; font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer__list a {
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
  transition: color .12s ease;
}
.footer__list a:hover { color: var(--accent); text-decoration: none; }
.footer__list--social a { display: inline-flex; align-items: center; gap: 4px; }

.footer__brand-link { display: inline-block; text-decoration: none; }
.footer__brand-img  { height: 32px; width: auto; display: block; }
.footer__brand-text {
  font-weight: 800; font-size: 24px;
  color: var(--accent); letter-spacing: -.5px;
}
.footer__about { margin: 8px 0 0; line-height: 1.6; max-width: 360px; }

.footer__age {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
}
.footer__age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 24px;
  background: var(--danger);
  color: #fff;
  font-weight: 800; font-size: 12px;
  border-radius: 4px;
  letter-spacing: .5px;
}

.footer__disclaimer {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  font-size: 12px; line-height: 1.6;
  text-align: center;
}

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  border-top: 1px solid var(--line);
  margin-top: 14px; padding-top: 14px;
}
.footer__meta { display: flex; gap: 6px; align-items: center; }

@media (max-width: 720px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer__cols { grid-template-columns: 1fr; }
}

/* ====================================================================
   Guest login modal — shown when an anonymous visitor clicks Play
   ==================================================================== */
.guest-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.guest-modal.is-open { display: flex; }
.guest-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,20,30,.75);
  backdrop-filter: blur(4px);
}
.guest-modal__panel {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 400px; width: 100%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  animation: guestModalIn .25s ease;
}
@keyframes guestModalIn {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.guest-modal__close {
  position: absolute; top: 12px; right: 12px;
  background: var(--bg-3); color: var(--fg-muted);
  border: 0; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
}
.guest-modal__close:hover { background: var(--bg-elev); color: var(--fg); }
.guest-modal__icon  { font-size: 56px; margin-bottom: 8px; }
.guest-modal__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.guest-modal__sub   { margin: 0 0 20px; font-size: 13px; }
.guest-modal__actions { display: flex; flex-direction: column; gap: 8px; }

/* ====================================================================
   ADMIN LAYOUT — minimal modern (OCN-style)
   ==================================================================== */

.page--admin {
  background: var(--bg);          /* softer navy-slate, matches global palette */
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}
@media (max-width: 800px) {
  .page--admin { grid-template-columns: 1fr; }
}

/* ----- SIDEBAR ----- */
.adminside {
  background: var(--bg-2);        /* elevated surface — themes via :root vars */
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 12px 12px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.adminside::-webkit-scrollbar { width: 6px; }
.adminside::-webkit-scrollbar-track { background: transparent; }
.adminside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.adminside::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

.adminside__brand {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none; color: var(--fg);
  margin-bottom: 18px;
}
.adminside__brand:hover { text-decoration: none; background: var(--bg-3); }
.adminside__brand-logo {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6d4dff, #4f8cff);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.adminside__brand-logo-inner { font-size: 18px; line-height: 1; }
.adminside__brand-logo--img {
  background: transparent !important;   /* let the image's own background show */
  border-radius: 8px;
  overflow: hidden;
}
.adminside__brand-logo--img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.adminside__brand-meta { display: flex; flex-direction: column; min-width: 0; }
.adminside__brand-name { font-weight: 700; font-size: 14px; color: var(--fg); line-height: 1.2; }
.adminside__brand-sub { font-size: 11px; color: var(--fg-muted); }

.adminside__nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.adminside__group {
  margin: 14px 0 4px; padding: 0 12px;
  font-size: 10.5px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
}

.adminside__link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--fg);
  font-weight: 500; font-size: 13px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
/* Theme convention: when bg uses var(--bg-*), text MUST use var(--fg)
   (or another --fg-* variant) — never hardcoded #fff. This pair flips
   correctly between light/dark themes. */
.adminside__link:hover { background: var(--bg-3); color: var(--fg); text-decoration: none; }
.adminside__link--active {
  background: var(--bg-3);
  color: var(--fg);
}
.adminside__link--active::before {
  content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #6d4dff, #4f8cff);
}
.adminside__link--disabled { color: var(--fg-dim); opacity: .55; pointer-events: none; }

/* small colored icon squares */
.adminside__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: 12px; line-height: 1;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
}
.adminside__icon[data-c="indigo"]  { background: rgba(99,102,241,.16); }
.adminside__icon[data-c="purple"]  { background: rgba(168,85,247,.16); }
.adminside__icon[data-c="violet"]  { background: rgba(139,92,246,.16); }
.adminside__icon[data-c="blue"]    { background: rgba(59,130,246,.16); }
.adminside__icon[data-c="cyan"]    { background: rgba(6,182,212,.16); }
.adminside__icon[data-c="teal"]    { background: rgba(20,184,166,.16); }
.adminside__icon[data-c="green"]   { background: rgba(34,197,94,.16); }
.adminside__icon[data-c="emerald"] { background: rgba(16,185,129,.16); }
.adminside__icon[data-c="amber"]   { background: rgba(245,158,11,.16); }
.adminside__icon[data-c="orange"]  { background: rgba(249,115,22,.16); }
.adminside__icon[data-c="red"]     { background: rgba(239,68,68,.16); }
.adminside__icon[data-c="rose"]    { background: rgba(244,63,94,.16); }
.adminside__icon[data-c="pink"]    { background: rgba(236,72,153,.16); }
.adminside__icon[data-c="slate"]   { background: rgba(148,163,184,.16); }

/* badge inline w/ link */
.adminside__badge {
  margin-left: auto;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 16px;
  background: var(--line); color: var(--fg-muted);
  font-family: var(--mono);
}
.adminside__badge--warn   { background: rgba(240,160,32,.18); color: var(--warn); }
.adminside__badge--danger { background: rgba(255,93,93,.22); color: #ff8a8a; }

/* footer (lang + contact + copy) */
.adminside__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.adminside__lang { display: flex; gap: 4px; margin-bottom: 8px; }
.adminside__lang-btn {
  flex: 1;
  padding: 5px 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg-muted); border-radius: 6px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.adminside__lang-btn:hover { color: var(--fg); background: var(--bg-3); }
.adminside__lang-btn.is-active {
  background: linear-gradient(135deg, rgba(109,77,255,.2), rgba(79,140,255,.2));
  border-color: rgba(109,77,255,.4); color: #a8b8ff;
}
/* ===== Demo (read-only) banner — fixed at viewport top on demo deployments =====
   Using position:fixed (not sticky) because the admin layout's <body> is a
   CSS Grid with `grid-template-columns: 240px 1fr`. As a sticky element the
   banner became a grid child and got squeezed into the sidebar slot. Fixed
   positioning takes it OUT of the grid entirely so it floats above both the
   sidebar and main content uniformly. */
.demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  color: #1f2937;
  padding: 6px 14px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.demo-bar strong { color: #111827; }
.demo-bar code {
  background: rgba(0,0,0,.12);
  padding: 0 6px; border-radius: 4px;
  font-size: 12px; font-family: var(--mono, ui-monospace, monospace);
  color: #1f2937;
}
.demo-bar .muted { color: #374151; opacity: .85; }
@media (max-width: 600px) {
  .demo-bar { font-size: 12px; padding: 5px 10px; }
  .demo-bar .muted { display: none; }
}
/* Reserve 30px at the top so content isn't covered by the fixed demo-bar.
   Admin layout's sticky sidebar gets a matching `top: 30px` so when scroll
   pushes the sidebar up it stops below the bar instead of sliding under. */
body.is-demo { padding-top: 30px; }
body.is-demo.page--admin .adminside { top: 30px; height: calc(100vh - 30px); }

.adminside__copy {
  font-size: 10px; color: var(--fg-dim);
  opacity: .7;
  padding: 2px 0;
}

/* ----- MAIN ----- */
.adminmain {
  padding: 0 24px 32px;
  min-width: 0;
}
/* Vertical spacing between top-level cards stacked inside the admin main
   content area. Cards on every admin page render inside <main class=
   "adminmain"> > <div class="adminmain__inner"> — the inner wrapper is
   added by _admin_header.php to constrain max-width. Selector targets
   .adminmain__inner > .card so the rule fires regardless of whether
   admin pages use `.adminmain` or `.adminmain__inner` directly.
   When cards are wrapped in `.grid grid--Ncol` the rule doesn't apply
   (cards are no longer direct children) and the grid's `gap` handles
   it. Uses general sibling combinator `~` (not `+`) so an inline <style>
   block, comment, or empty <?php endif ?> between cards doesn't break
   the spacing — any later .card in the same parent still gets
   margin-top. CSS only applies the rule once per element so siblings
   don't compound to 28/42px. Adjacent margin collapsing handles cases
   where a previous element already has margin-bottom (max wins). */
.adminmain__inner > .card ~ .card,
.adminmain__inner > .card ~ details.card,
.adminmain__inner > details.card ~ .card,
.adminmain__inner > details.card ~ details.card,
.adminmain__inner > .card ~ .pager,
.adminmain__inner > .pager ~ .card,
.adminmain > .card ~ .card,
.adminmain > .card ~ details.card,
.adminmain > details.card ~ .card,
.adminmain > details.card ~ details.card,
.adminmain > .card ~ .pager,
.adminmain > .pager ~ .card {
  margin-top: 14px;
}
.adminmain__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.adminmain__title-wrap { flex: 1; min-width: 0; }
.adminmain__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-size: 22px; font-weight: 700;
  color: var(--fg);
}
.adminmain__title-icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(109,77,255,.15);
  color: #a8b8ff;
  font-size: 14px;
}
.adminmain__subtitle {
  margin: 4px 0 0 40px;
  font-size: 13px;
  color: var(--fg-muted);
}
.adminmain__user {
  display: flex; align-items: center;
}

/* user pill (HUAYMAX/OCN style) */
.adminmain__user .usermenu summary {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer; list-style: none;
}
.adminmain__user .usermenu summary::-webkit-details-marker { display: none; }
.adminmain__user .usermenu__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f8cff, #2c6dff);
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.adminmain__user .usermenu__meta { display: flex; flex-direction: column; line-height: 1.1; }
.adminmain__user .usermenu__name { font-size: 13px; font-weight: 600; color: var(--fg); }
.adminmain__user .usermenu__role {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 8px;
  background: rgba(79,140,255,.2);
  color: #8eb1ff;
  font-size: 10px; font-weight: 600;
  border-radius: 999px;
  text-align: center; align-self: flex-start;
}

.adminmain__inner { max-width: none; margin: 0; }
.back { display: inline-block; color: var(--fg-muted); margin-bottom: 12px; font-size: 13px; }

/* Sub-tabs (e.g., Deposits / PG Unknown) */
.subtabs {
  display: flex; gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
  width: fit-content;
}
.subtabs__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 7px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background .15s, color .15s;
}
.subtabs__tab:hover { color: var(--fg); background: var(--bg-3); text-decoration: none; }
.subtabs__tab--active {
  background: linear-gradient(135deg, rgba(109,77,255,.25), rgba(79,140,255,.25));
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(109,77,255,.3);
}
.subtabs__badge {
  padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px;
  background: rgba(255,255,255,.08); color: var(--fg-muted);
  font-family: var(--mono);
}
.subtabs__badge--warn   { background: rgba(240,160,32,.25); color: var(--warn); }
.subtabs__badge--danger { background: rgba(255,93,93,.28); color: #ff8a8a; }

/* ----- ADMIN CARDS — slightly more compact + accent section headers ----- */
.page--admin .card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.page--admin .card__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--fg);
  margin: 0 0 16px;
}
.page--admin .card__title::before {
  content: ''; width: 3px; height: 16px;
  background: linear-gradient(180deg, #6d4dff, #4f8cff);
  border-radius: 2px;
}

/* Section header inside card (cyan/blue label like in screenshot) */
.page--admin .section-header {
  font-size: 12px; font-weight: 700;
  color: #6cc1ff;
  letter-spacing: .3px;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* Compact stat tiles */
.page--admin .stat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.page--admin .stat__label { font-size: 11px; color: var(--fg-muted); }
.page--admin .stat__value { font-size: 20px; margin-top: 4px; color: var(--fg); }

/* Form inputs in admin: slightly tighter */
.page--admin .field__input {
  background-color: var(--bg);
  border-color: var(--line);
  font-size: 13px;
}
.page--admin select.field__input { background-color: var(--bg); }
.page--admin .field__input:focus { border-color: #6d4dff; background-color: var(--bg); }
.page--admin .field__label { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.page--admin .field__hint { color: var(--fg-dim); }

/* Tables */
.page--admin .tbl th {
  background: var(--bg-3);
  color: var(--fg-muted);
  font-size: 11px;
}
.page--admin .tbl td { font-size: 13px; }
.page--admin .tbl tbody tr:hover { background: var(--bg-3); }

/* Legacy mobile block removed — see "ADMIN — MOBILE RESPONSIVE LAYER"
   block at the end of this file for the current off-canvas drawer rules. */

/* ====================================================================
   FILTER BAR / PAGER
   ==================================================================== */

.filterbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filterbar .field__input { width: auto; flex: 1; min-width: 120px; }

/* Grid layout for richer filterbars (deposits, withdrawals) */
.filterbar--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 12px;
  align-items: end;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.filterbar--grid .field__input { min-width: 0; }
.filterbar__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filterbar__field--grow { grid-column: span 2; }
.filterbar__label {
  font-size: 11px; color: var(--fg-muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.filterbar__actions {
  display: flex; gap: 8px; align-items: end; padding-bottom: 1px;
  grid-column: 1 / -1; justify-content: flex-end;
}
@media (max-width: 700px) {
  .filterbar--grid { grid-template-columns: repeat(2, 1fr); }
  .filterbar__field--grow { grid-column: span 2; }
  .filterbar__actions { grid-column: span 2; justify-content: stretch; }
  .filterbar__actions .btn { flex: 1; }
}
.pager {
  display: flex; gap: 4px; justify-content: center; align-items: center;
  margin: 20px 0; flex-wrap: wrap;
}
.pager__info {
  margin-right: auto;
  color: var(--fg-muted); font-size: 12px; font-family: var(--mono);
}
.pager__page {
  padding: 6px 12px; min-width: 36px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--fg-muted);
  font-size: 13px;
}
.pager__page:hover { color: var(--fg); background: var(--bg-3); text-decoration: none; }
.pager__page--active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.pager__page--disabled { opacity: .35; pointer-events: none; }
.pager__gap { padding: 6px 8px; color: var(--fg-dim); }
.pager__ps {
  margin-left: auto;
  display: inline-flex; gap: 2px; align-items: center;
  padding-left: 12px; border-left: 1px solid var(--line);
}
.pager__ps-opt {
  padding: 4px 8px; font-size: 12px; color: var(--fg-muted);
  border-radius: var(--radius-sm);
}
.pager__ps-opt:hover { color: var(--fg); background: var(--bg-3); text-decoration: none; }
.pager__ps-opt--active { color: var(--accent); font-weight: 700; }
@media (max-width: 600px) {
  .pager { gap: 2px; }
  .pager__info { width: 100%; text-align: center; margin-right: 0; margin-bottom: 8px; }
  .pager__ps { width: 100%; justify-content: center; margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
}

/* ====================================================================
   CHECKLIST
   ==================================================================== */

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: 6px 0; }

/* ====================================================================
   GAMES — provider sidebar + games grid (HUAYMAX-style)
   ==================================================================== */

.games-shell {
  display: grid;
  gap: 16px;
  grid-template-columns: 220px 1fr;
  align-items: start;
}
@media (max-width: 800px) {
  .games-shell { grid-template-columns: 1fr; }
}

.prov-sidebar {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
@media (max-width: 800px) {
  .prov-sidebar {
    position: static; max-height: none;
    overflow-x: auto; overflow-y: visible;
  }
}
.prov-sidebar__title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-muted); margin: 4px 6px 10px;
}
.prov-list {
  display: flex; flex-direction: column; gap: 4px;
}
@media (max-width: 800px) {
  .prov-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}

.prov-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .05s;
}
@media (max-width: 800px) {
  .prov-item { flex-shrink: 0; }
}
.prov-item:hover { background: var(--bg-3); border-color: var(--line-2); text-decoration: none; }
.prov-item--active {
  background: linear-gradient(90deg, rgba(0,214,143,.18), rgba(0,214,143,.04));
  border-color: var(--accent); color: var(--accent);
}
.prov-item--muted {
  opacity: .55;
}
.prov-item--muted:hover { opacity: .85; }
.prov-item--muted .prov-logo { filter: grayscale(.4); }
.prov-item--active.prov-item--muted {
  /* user clicked into muted provider — show normal active styling */
  opacity: 1;
}
.prov-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-item__count {
  font-size: 11px; padding: 2px 6px; background: var(--bg-3);
  color: var(--fg-muted); border-radius: 999px; font-family: var(--mono);
}

.prov-logo {
  /* inline-flex centers text more predictably than inline-grid for a
     fixed-size badge; line-height:1 keeps the font's bounding box equal
     to its em-square so we don't fight the ascender/descender area. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff; font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
/* Tiny optical lift so caps (which sit slightly low in Inter's em-box)
   align with the geometric circle center. 1px over-corrected; 0.5px
   sub-pixel lift looks balanced across sizes 22–40. */
.prov-logo__t {
  display: inline-block;
  transform: translateY(-0.5px);
}

.games-main { min-width: 0; }

.games-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.games-toolbar__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 18px; font-weight: 700;
  flex: 1; min-width: 0;
}
/* Wrap text spans inline-block so wrapping behaves nicely.
   Excludes .prov-logo which needs to stay inline-flex for centering. */
.games-toolbar__title > span:not(.prov-logo) { display: inline-block; }
.games-search {
  display: flex; gap: 6px;
}
.games-search .field__input { width: 200px; }

.game-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.game-card {
  position: relative;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.game-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--line-2);
}
.game-card__img-wrap { position: relative; aspect-ratio: 1 / 1; background: var(--bg); overflow: hidden; }
.game-card__img { width: 100%; height: 100%; object-fit: cover; }
.game-card__img--placeholder { display: grid; place-items: center; font-size: 48px; color: var(--fg-dim); }
.game-card__featured {
  position: absolute; top: 6px; left: 6px;
  background: var(--accent); color: #000;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; z-index: 2;
}
.game-card__name {
  padding: 10px 10px 0; font-weight: 600; font-size: 13px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.game-card__provider { padding: 0 10px 10px; font-family: var(--mono); font-size: 11px; }
@media (max-width: 600px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .game-card__name { font-size: 12px; }
}
.game-card__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  color: var(--accent); font-weight: 700; font-size: 16px;
  border: 0; cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  display: grid; place-items: center;
}
.game-card:hover .game-card__overlay { opacity: 1; }
@media (hover: none) {
  .game-card__overlay { opacity: 0; pointer-events: none; }
}
.game-card__overlay:disabled { opacity: 0; }

/* ====================================================================
   USER DROPDOWN (HUAYMAX-style)
   ==================================================================== */

.usermenu summary {
  background: var(--bg-3);
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
}
.usermenu__caret { color: var(--fg-muted); font-size: 10px; margin-left: 2px; }
.usermenu__pop {
  min-width: 260px; padding: 6px;
}
.usermenu__head {
  padding: 12px 12px 14px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-elev));
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.usermenu__head__name { font-weight: 700; font-size: 14px; }
.usermenu__group {
  padding: 8px 12px 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
}
.usermenu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; font-size: 13px;
  background: transparent; border: 0; cursor: pointer; font: inherit;
  width: 100%; text-align: left;
}
.usermenu__item:hover { background: var(--bg-3); text-decoration: none; }
.usermenu__item > span:first-child { font-size: 16px; width: 20px; text-align: center; }
.usermenu__logout-wrap { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.usermenu__logout { color: var(--danger); }
.usermenu__logout:hover { background: rgba(255, 93, 93, .08); }

/* Top nav active state */
.navlink--active {
  color: var(--accent);
  background: rgba(0, 214, 143, .08);
}

/* ====================================================================
   PIN INPUT (6-digit numeric, mobile keypad)
   ==================================================================== */

.pin-input { display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.pin-input__cell {
  width: 44px; height: 56px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  font: 700 24px/1 var(--mono);
  outline: 0;
  transition: border-color .15s, background .15s, transform .05s;
  -webkit-text-security: disc;          /* hide as dots while typing */
  -moz-text-security: disc;
  text-security: disc;
}
.pin-input__cell:focus { border-color: var(--primary); background: var(--bg); }
.pin-input__cell.is-filled { border-color: var(--accent); }
.pin-input__cell.is-error  { border-color: var(--danger); animation: pin-shake .25s; }
@keyframes pin-shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
@media (max-width: 400px) {
  .pin-input__cell { width: 38px; height: 48px; font-size: 20px; }
}

/* ====================================================================
   TOAST NOTIFICATIONS  —  window.notify(msg, type, opts)
   ==================================================================== */
.toasts {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;       /* let clicks pass through gaps */
  max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 260px; max-width: 380px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--fg-muted);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-size: 13px; line-height: 1.4; color: var(--fg);
  cursor: pointer;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s;
}
.toast.is-open    { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(120%); opacity: 0; }
.toast__icon {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: rgba(255,255,255,.06); color: var(--fg-muted);
}
.toast__msg   { flex: 1; min-width: 0; word-wrap: break-word; }
.toast__close {
  flex-shrink: 0;
  width: 22px; height: 22px; padding: 0;
  background: transparent; color: var(--fg-dim); border: 0; border-radius: 4px;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.toast__close:hover { color: var(--fg); background: rgba(255,255,255,.08); }

.toast--success { border-left-color: #22c55e; }
.toast--success .toast__icon { background: rgba(34,197,94,.18);   color: #4ade80; }
.toast--error   { border-left-color: var(--danger); }
.toast--error   .toast__icon { background: rgba(255,93,93,.18);   color: var(--danger); }
.toast--warn    { border-left-color: var(--warn); }
.toast--warn    .toast__icon { background: rgba(240,160,32,.18);  color: var(--warn); }
.toast--info    { border-left-color: var(--primary); }
.toast--info    .toast__icon { background: rgba(79,140,255,.18);  color: var(--primary); }

@media (max-width: 480px) {
  .toasts { left: 16px; right: 16px; }
  .toast  { max-width: none; transform: translateY(-120%); }
  .toast.is-open    { transform: translateY(0); }
  .toast.is-leaving { transform: translateY(-120%); }
}


/* ====================================================================
   CONFIRM DIALOG  —  await confirmDialog(msg, opts)
   Promise-based replacement for native confirm().
   ==================================================================== */
.confirm-dlg {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.confirm-dlg.is-open    { opacity: 1; pointer-events: auto; }
.confirm-dlg.is-leaving { opacity: 0; }
.confirm-dlg__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 22, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.confirm-dlg__card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform: scale(.94);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.confirm-dlg.is-open .confirm-dlg__card { transform: scale(1); }
.confirm-dlg--danger .confirm-dlg__card { border-top: 3px solid var(--danger); }

.confirm-dlg__title {
  font-size: 16px; font-weight: 700; color: var(--fg);
  margin-bottom: 8px;
}
.confirm-dlg__msg {
  color: var(--fg-muted); font-size: 14px; line-height: 1.55;
  margin-bottom: 18px;
  white-space: normal;
}
.confirm-dlg__actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.confirm-dlg__actions .btn { min-width: 90px; }


/* ====================================================================
   GAME LAUNCH LOADING OVERLAY
   Full-screen blocker shown while /api/game-launch.php is in flight.
   Prevents double-clicks and "click another game while waiting".
   ==================================================================== */
.game-loading {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 12, 22, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.game-loading.is-open { display: flex; animation: gl-fade .15s ease-out; }
@keyframes gl-fade { from { opacity: 0; } to { opacity: 1; } }

.game-loading__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px 28px;
  width: min(360px, 100%);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  animation: gl-pop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gl-pop { from { transform: scale(.92); opacity:.6 } to { transform: scale(1); opacity:1 } }

.game-loading__thumb {
  width: 88px; height: 88px; border-radius: 14px; object-fit: cover;
  display: block; margin: 0 auto 14px; border: 1px solid var(--line);
  background: var(--bg-3);
}
.game-loading__thumb[hidden] { display: none; }

.game-loading__spinner {
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 18px;
  border: 3px solid rgba(0, 214, 143, .15);
  border-top-color: var(--accent);
  animation: gl-spin .8s linear infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }

.game-loading__title {
  font-size: 16px; font-weight: 700; color: var(--fg);
  margin-bottom: 6px;
}
.game-loading__sub {
  color: var(--fg-muted); font-size: 13px; line-height: 1.4;
}

/* Error state */
.game-loading.is-error .game-loading__spinner {
  border-color: rgba(255, 93, 93, .15);
  border-top-color: var(--danger);
  animation: none;
  position: relative;
}
.game-loading.is-error .game-loading__spinner::after {
  content: '!'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger); font-weight: 800; font-size: 28px; line-height: 1;
}
.game-loading.is-error .game-loading__title { color: var(--danger); }


/* ====================================================================
   MODAL  (used by admin bank-accounts page)
   ==================================================================== */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.modal__dialog {
  position: relative;
  width: 100%; max-width: 520px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  animation: modal-in .15s ease-out;
}
.modal__dialog--wide { max-width: 920px; }
@keyframes modal-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.modal__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--primary); }
.modal__close {
  background: transparent; border: 0; color: var(--fg-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.modal__close:hover { background: var(--bg-3); color: var(--fg); }
.modal__body {
  padding: 18px;
  overflow-y: auto;
  /* flex: 1 + min-height: 0 lets the body shrink within the column-flex
     dialog and become the scroll container. Without min-height:0 the body
     defaults to min-content and overflow gets clipped instead of scrolled. */
  flex: 1 1 auto;
  min-height: 0;
}

/* ====================================================================
   ADMIN DASHBOARD  (admin/index.php)
   ==================================================================== */

.dash-section-title {
  margin: 22px 0 12px;
  font-size: 13px; font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .8px;
}

/* ----- Hero KPIs ----- */
.dash-hero {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 14px;
}
@media (min-width: 1100px) {
  /* On desktop, lock to 4 even columns so KPIs line up cleanly with the
     queue grid below. The auto-fit fallback handles tablet (≤1100px). */
  .dash-hero { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* ====================================================================
   .kpi-grid + .kpi-card — generic admin KPI strip used by
   /admin/fraud-flags.php, /admin/surprise-drops.php,
   /admin/lotto-subscriptions.php, /admin/slip-scan.php, etc.
   Lighter-weight than .dash-kpi (which is for the live dashboard hero).
   ==================================================================== */
.kpi-grid     { display: grid; gap: 12px; margin: 0 0 16px 0; }
.kpi-grid--2  { grid-template-columns: repeat(2, 1fr); }
.kpi-grid--3  { grid-template-columns: repeat(3, 1fr); }
.kpi-grid--4  { grid-template-columns: repeat(4, 1fr); }
.kpi-grid--5  { grid-template-columns: repeat(5, 1fr); }
.kpi-grid--6  { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 800px) {
  .kpi-grid--3, .kpi-grid--4, .kpi-grid--5, .kpi-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid--2 { grid-template-columns: 1fr; }
}
.kpi-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-card--alert { border-color: var(--err); background: var(--bg-3); }
.kpi-card--warn  { border-color: var(--warn); }
.kpi-card--ok    { border-color: var(--pos); }
.kpi-card__label {
  color: var(--fg-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
}
.kpi-card__value {
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-card__sub { display: inline-block; font-size: 12px; }
a.kpi-card__sub { color: var(--accent); text-decoration: none; }
a.kpi-card__sub:hover { text-decoration: underline; }

.dash-kpi {
  display: block;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none; color: var(--fg);
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
  position: relative;
  overflow: hidden;
}
.dash-kpi:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.dash-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
}
.dash-kpi--green::before  { background: linear-gradient(180deg, #22c55e, #16a34a); }
.dash-kpi--orange::before { background: linear-gradient(180deg, #f97316, #ea580c); }
.dash-kpi--blue::before   { background: linear-gradient(180deg, #4f8cff, #2c6dff); }
.dash-kpi--purple::before { background: linear-gradient(180deg, #a855f7, #7c3aed); }
.dash-kpi--red::before    { background: linear-gradient(180deg, #ff5d5d, #c83232); }

.dash-kpi__label {
  font-size: 11px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.dash-kpi__value {
  font-size: 26px; font-weight: 800;
  font-family: var(--mono);
  margin: 6px 0 4px;
  line-height: 1.1;
  word-break: break-word;
}
.dash-kpi__sub {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-muted);
}
.dash-kpi__delta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px; border-radius: 999px;
  font-weight: 700; font-size: 11px;
  background: var(--bg-3);
}
.dash-kpi__delta.pos { color: var(--pos); background: rgba(45,212,191,.12); }
.dash-kpi__delta.neg { color: var(--neg); background: rgba(255,123,123,.12); }
.dash-kpi__split {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px;
}
.kpi-spark {
  display: block; width: 100%; height: 28px;
  margin: 6px 0 8px;
  pointer-events: none;
}

/* ----- Live status header (pulse + freshness in one strip) ----- */
.dash-status {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
@media (min-width: 1100px) {
  .dash-status { justify-content: space-between; }
}

/* ----- Live pulse bar ----- */
.dash-pulse {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 14px;
  font-size: 12px; color: var(--fg-muted);
  width: max-content; max-width: 100%;
  flex-shrink: 0;
}
.dash-pulse__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: dashPulse 2s ease-out infinite;
}
.dash-pulse.is-paused .dash-pulse__dot {
  background: #94a3b8;
  animation: none;
  box-shadow: none;
}
.dash-pulse.is-error .dash-pulse__dot {
  background: #ef4444;
  animation: none;
}
.dash-pulse__label { font-weight: 600; color: var(--fg); }
.dash-pulse__sep { opacity: .5; }
.dash-pulse__online strong { color: var(--fg); font-family: var(--mono); }
.dash-pulse__refresh {
  margin-left: auto;
  background: transparent; border: 0;
  color: var(--fg-muted);
  cursor: pointer; font-size: 14px;
  padding: 2px 8px; border-radius: 999px;
}
.dash-pulse__refresh:hover { background: var(--bg-3); color: var(--fg); }
@keyframes dashPulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}

/* ----- Webhook freshness ribbon — now sits inline with .dash-pulse ----- */
.dash-fresh {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
}
.dash-fresh__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding-right: 10px;
  border-right: 1px solid var(--line-2);
}
.dash-fresh__item:last-child { border-right: 0; padding-right: 0; }
.dash-fresh__label { color: var(--fg-muted); font-weight: 500; }
.fresh-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.fresh-pill--ok      { background: rgba(34,197,94,.15);  color: #4ade80; }
.fresh-pill--warn    { background: rgba(245,158,11,.15); color: #fbbf24; }
.fresh-pill--bad     { background: rgba(239,68,68,.15);  color: #fca5a5; }
.fresh-pill--unknown { background: var(--bg-3); color: var(--fg-muted); }

/* ----- Risky users panel ----- */
.dash-risky { list-style: none; margin: 0; padding: 0; }
.dash-risky__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.dash-risky__item:last-child { border-bottom: 0; }
.dash-risky__user {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--fg);
  font-size: 13px;
}
.dash-risky__user:hover { color: var(--accent); }
.dash-risky__score {
  font-family: var(--mono);
  font-weight: 800; font-size: 14px;
  padding: 2px 8px; border-radius: 6px;
  flex-shrink: 0;
}
.dash-risky__score.is-yellow { background: rgba(234,179,8,.18);  color: #fde047; }
.dash-risky__score.is-orange { background: rgba(249,115,22,.18); color: #fdba74; }
.dash-risky__score.is-red    { background: rgba(239,68,68,.18);  color: #fca5a5; }

/* ----- Player heatmap (top N provinces, last 5 min) ----- */
.dash-heatmap { list-style: none; margin: 0; padding: 0; }
.dash-heatmap__row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.dash-heatmap__row + .dash-heatmap__row { border-top: 1px solid var(--line); }
.dash-heatmap__name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-heatmap__bar {
  height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden;
}
.dash-heatmap__fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
  transition: width .25s ease;
}
.dash-heatmap__count {
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  min-width: 32px; text-align: right;
}

/* ----- Action queue ----- */
.dash-queue {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 22px;
}
@media (min-width: 1100px) {
  /* Lock to 4-up so queue cards align with the 4 KPI cards above */
  .dash-queue { grid-template-columns: repeat(4, 1fr); }
}
.dash-queue__card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none; color: var(--fg);
  transition: border-color .12s, background .12s;
}
.dash-queue__card:hover { text-decoration: none; background: var(--bg-3); border-color: var(--line-2); }
.dash-queue__card.is-warn   { border-color: rgba(240,160,32,.45); }
.dash-queue__card.is-danger { border-color: rgba(255,93,93,.5);  background: rgba(255,93,93,.04); }
.dash-queue__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 16px; line-height: 1;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
}
.dash-queue__icon[data-c="green"]  { background: rgba(34,197,94,.16); }
.dash-queue__icon[data-c="orange"] { background: rgba(249,115,22,.16); }
.dash-queue__icon[data-c="red"]    { background: rgba(239,68,68,.16); }
.dash-queue__icon[data-c="emerald"]{ background: rgba(16,185,129,.16); }
.dash-queue__body { flex: 1; min-width: 0; }
.dash-queue__count {
  font-size: 22px; font-weight: 800;
  font-family: var(--mono); line-height: 1;
}
.dash-queue__label { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.dash-queue__sub   { font-size: 11px; margin-top: 4px; }
.dash-queue__chev  { color: var(--fg-dim); font-size: 22px; line-height: 1; }

/* ----- 2-col layout ----- */
.dash-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
}
.dash-side { display: grid; gap: 14px; align-content: start; }
.dash-feed-card {
  /* Bigger inner padding on desktop so the feed isn't visually cramped
     against the heavier sidebar cards. */
  padding: 16px 18px;
}
@media (min-width: 1100px) {
  .dash-feed-card { padding: 20px 24px; }
}

/* ----- Activity feed ----- */
.dash-feed { list-style: none; margin: 0; padding: 0; }
.dash-feed__item {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.dash-feed__item:last-child { border-bottom: 0; }
.dash-feed__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800; font-size: 14px; line-height: 1;
}
.dash-feed__icon--dep { background: rgba(34,197,94,.18);  color: #4ade80; }
.dash-feed__icon--wd  { background: rgba(249,115,22,.18); color: #fb923c; }
.dash-feed__body { min-width: 0; }
.dash-feed__line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dash-feed__meta { margin-top: 2px; }
.dash-feed__amt  { font-weight: 700; font-size: 14px; white-space: nowrap; }
.dash-feed__status {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--bg-3); color: var(--fg-muted);
}
.dash-feed__status--pos  { background: rgba(45,212,191,.18); color: var(--pos); }
.dash-feed__status--neg  { background: rgba(255,93,93,.18);  color: var(--danger); }
.dash-feed__status--warn { background: rgba(240,160,32,.18); color: var(--warn); }

/* ----- System health list ----- */
.dash-health { list-style: none; margin: 0; padding: 0; }
.dash-health li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.dash-health li:last-child { border-bottom: 0; }
.dash-health li > .muted { margin-left: auto; }
.dash-health__dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.dash-health__dot--ok   { background: var(--pos);  box-shadow: 0 0 6px rgba(45,212,191,.5); }
.dash-health__dot--warn { background: var(--warn); box-shadow: 0 0 6px rgba(240,160,32,.5); }
.dash-health__dot--err  { background: var(--neg);  box-shadow: 0 0 6px rgba(255,123,123,.5); }

/* ----- Quick links ----- */
.dash-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-links__item {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-decoration: none; color: var(--fg);
  font-size: 13px; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.dash-links__item:hover {
  background: var(--bg-elev); border-color: var(--primary);
  text-decoration: none;
}

/* ====================================================================
   CUSTOMER DASHBOARD  (index.php logged-in)
   ==================================================================== */

.home-section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 22px 0 12px;
}
.home-section__title {
  margin: 22px 0 12px;
  font-size: 13px; font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .8px;
}
.home-section__head .home-section__title { margin: 0; }
.home-section__head a { text-decoration: none; }
.home-section__head a:hover { color: var(--primary); text-decoration: underline; }

/* ----- Hero card ----- */
.home-hero {
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(79,140,255,.08) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 8px;
}
.home-hero__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.home-hero__title {
  margin: 0;
  font-size: 17px; font-weight: 700;
  color: var(--fg);
}

.home-balances {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .home-balances { grid-template-columns: 1fr; }
}
.home-bal {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.home-bal--primary { border-color: var(--primary); background: rgba(79,140,255,.05); }
.home-bal--primary::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
}
.home-bal__label {
  font-size: 11px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.home-bal__value {
  font-size: 19px; font-weight: 800;
  font-family: var(--mono);
  margin-top: 4px;
  color: var(--fg);
}
.home-bal--primary .home-bal__value { color: var(--primary); }

.home-tier-progress { margin: 14px 0 4px; }
.home-tier-progress__bar {
  width: 100%; height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.home-tier-progress__fill {
  height: 100%; border-radius: 999px;
  transition: width .4s ease;
}

.home-hero__actions {
  display: flex; gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.home-hero__actions .btn { flex: 1; min-width: 140px; padding: 12px 18px; font-size: 14px; }

/* ----- Active bonus card ----- */
.home-bonus {
  background: linear-gradient(135deg, rgba(168,85,247,.1), rgba(236,72,153,.06));
  border: 1px solid rgba(168,85,247,.35);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 16px 0 0;
}
.home-bonus__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.home-bonus__name { font-size: 15px; font-weight: 700; color: var(--fg); margin-top: 2px; }
.home-bonus__amt  { font-size: 18px; font-weight: 800; color: var(--accent); }
.home-bonus__bar {
  width: 100%; height: 8px;
  background: var(--bg-3); border-radius: 999px;
  overflow: hidden; margin-bottom: 8px;
}
.home-bonus__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  transition: width .4s ease;
}
.home-bonus__meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.home-bonus__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.home-bonus__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: rgba(0,0,0,.25);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
}
.home-bonus__chip-pct { font-weight: 700; color: var(--fg); }
.home-bonus__chip-done {
  color: #ec4899; font-weight: 600;
  padding-left: 4px; border-left: 1px solid rgba(255,255,255,.15);
  margin-left: 2px;
}
.home-bonus__chip.is-off { opacity: .4; }
.home-bonus__chip.is-off .home-bonus__chip-pct { color: var(--danger); }

.home-bonus__hint {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.home-bonus__hint:hover {
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.5);
  text-decoration: none;
}
.home-bonus__hint strong { color: #ec4899; }

/* ----- Quick actions grid ----- */
.home-quick {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.home-quick__card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: var(--fg);
  font-size: 12px; font-weight: 600;
  transition: transform .12s, border-color .12s, background .12s;
}
.home-quick__card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--bg-3);
}
.home-quick__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: 17px; line-height: 1;
  background: rgba(255,255,255,.05);
}
.home-quick__icon[data-c="violet"]  { background: rgba(139,92,246,.16);  color: #c4b5fd; }
.home-quick__icon[data-c="amber"]   { background: rgba(245,158,11,.16);  color: #fcd34d; }
.home-quick__icon[data-c="red"]     { background: rgba(239,68,68,.16);   color: #fca5a5; }
.home-quick__icon[data-c="green"]   { background: rgba(34,197,94,.16);   color: #86efac; }
.home-quick__icon[data-c="pink"]    { background: rgba(236,72,153,.16);  color: #f9a8d4; }
.home-quick__icon[data-c="emerald"] { background: rgba(16,185,129,.16);  color: #6ee7b7; }
.home-quick__icon[data-c="teal"]    { background: rgba(20,184,166,.16);  color: #5eead4; }
.home-quick__icon[data-c="blue"]    { background: rgba(59,130,246,.16);  color: #93c5fd; }
.home-quick__label { text-align: center; }

/* ----- Bottom 2-col row (games + activity) ----- */
.home-bottom {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}
@media (min-width: 900px) {
  .home-bottom { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.home-bottom__left,
.home-bottom__right { min-width: 0; }

/* ----- Game grid on dashboard — uses the same .game-card markup as
   /games.php so styles stay in sync. .home-games just controls the
   grid layout (4 cols on desktop, auto-fit elsewhere). ----- */
.home-games {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 10px;
}
@media (min-width: 900px) {
  .home-games { grid-template-columns: repeat(4, 1fr); }
}

/* heart toggle button (top-right of img) — used on .game-card */
.game-card__fav {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 0;
  color: rgba(255,255,255,.7);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color .12s, background .12s, transform .12s;
  z-index: 3;
}
.game-card__fav:hover { background: rgba(0,0,0,.8); transform: scale(1.1); color: #ff5d8f; }
.game-card__fav.is-on { color: #ff5d8f; background: rgba(255,93,143,.22); }

/* In the bottom row, recent activity gets a slightly looser margin so
   its title aligns with the games title above it. */
.home-bottom__right .home-feed { margin-top: 4px; }
.home-bottom__right .card { margin-top: 10px; }

/* ----- Recent activity feed ----- */
.home-feed { list-style: none; margin: 0; padding: 0; }
.home-feed__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.home-feed__item:last-child { border-bottom: 0; }
.home-feed__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.home-feed__icon--credit { background: rgba(45,212,191,.18); color: var(--pos); }
.home-feed__icon--debit  { background: rgba(255,123,123,.18); color: var(--danger); }
/* Per-transaction-type icon variants — color-codes the row at a glance */
.home-feed__icon--is-deposit  { background: rgba(45,212,191,.18); color: var(--pos); }
.home-feed__icon--is-withdraw { background: rgba(245,158,11,.18); color: var(--warn); }
.home-feed__icon--is-bet      { background: rgba(168,85,247,.18); color: #c084fc; }
.home-feed__icon--is-win      { background: rgba(0,214,143,.18);  color: var(--accent); }
.home-feed__icon--is-bonus    { background: rgba(245,158,11,.18); color: var(--warn); }
.home-feed__icon--is-cashback { background: rgba(45,212,191,.18); color: var(--pos); }
.home-feed__icon--is-referral { background: rgba(79,140,255,.18); color: var(--primary); }
.home-feed__icon--is-info     { background: rgba(79,140,255,.18); color: var(--primary); }
.home-feed__icon--is-warn     { background: rgba(255,123,123,.18); color: var(--danger); }
.home-feed__icon--is-muted    { background: var(--bg-3); color: var(--fg-muted); }

.home-feed__body { flex: 1; min-width: 0; }
.home-feed__type { font-weight: 600; font-size: 13px; }
.home-feed__time { margin-top: 2px; }
.home-feed__amt-wrap { text-align: right; flex-shrink: 0; }
.home-feed__amt  { font-weight: 700; font-size: 14px; white-space: nowrap; }
.home-feed__bal  { font-size: 11px; margin-top: 1px; opacity: .8; }

/* Empty state for the feed — friendlier than a single line of muted text */
.home-feed-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--fg-muted);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 13px;
}
.home-feed-empty__icon { font-size: 32px; opacity: .6; margin-bottom: 4px; }

/* Card padding tweak so rows don't bump against the rounded edge */
.home-feed-card { padding: 4px 12px; }

/* ============================================================
   PROFILE STATS — at-a-glance KPIs grid above the form cards
   ============================================================ */
.profile-stats { margin: 0 0 16px; }
.profile-stats__heading {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}
.profile-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.pstat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pstat__label { color: var(--fg-muted); font-size: 12px; }
.pstat__value { font-size: 20px; font-weight: 800; line-height: 1.15; }
.pstat__sub   { margin-top: 2px; font-size: 11px; }

.pstat--deposit  { border-left-color: var(--accent); }
.pstat--withdraw { border-left-color: var(--warn); }
.pstat--bet      { border-left-color: #c084fc; }
.pstat--win      { border-left-color: var(--accent); }
.pstat--bonus    { border-left-color: #f472b6; }
.pstat--member   { border-left-color: var(--primary); }
.pstat--fav      { border-left-color: var(--danger); }
.pstat--ach      { border-left-color: #fbbf24; }

@media (max-width: 480px) {
  .profile-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .pstat__value { font-size: 17px; }
}

/* ====================================================================
   REFERRAL PAGE  (referral.php)
   ==================================================================== */

/* Stats row — 4 KPI tiles */
.ref-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 18px;
}
.ref-stat {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
  position: relative; overflow: hidden;
}
.ref-stat--accent {
  background: linear-gradient(135deg, rgba(255,93,143,.12), rgba(168,85,247,.08));
  border-color: rgba(255,93,143,.3);
}
.ref-stat__label {
  font-size: 11px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.ref-stat__value {
  font-size: 22px; font-weight: 800;
  margin-top: 6px; font-family: var(--mono);
  word-break: break-word;
}

/* Hero share card */
.ref-hero {
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(168,85,247,.08) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 8px;
}
.ref-hero__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.ref-hero__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.ref-code {
  background: var(--bg); padding: 2px 8px; border-radius: 4px;
  color: var(--accent); letter-spacing: 1px; font-weight: 700;
}

.ref-link {
  display: flex; gap: 8px;
  margin-bottom: 14px;
}
.ref-link input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 13px; }
.ref-link .btn { padding: 12px 18px; white-space: nowrap; }

.ref-share {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.ref-share .muted { margin-right: 4px; }
.ref-share__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  transition: transform .12s, border-color .12s, background .12s;
}
.ref-share__btn:hover { transform: translateY(-1px); text-decoration: none; }
.ref-share__btn--line:hover { border-color: #06c755; background: rgba(6,199,85,.12); color: #06c755; }
.ref-share__btn--fb:hover   { border-color: #1877f2; background: rgba(24,119,242,.12); color: #1877f2; }
.ref-share__btn--tw:hover   { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.ref-share__btn--wa:hover   { border-color: #25d366; background: rgba(37,211,102,.12); color: #25d366; }
.ref-share__btn--tg:hover   { border-color: #229ed9; background: rgba(34,158,217,.12); color: #229ed9; }

/* "How it works" — 3-step row */
.ref-how {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 12px;
}
.ref-how__step {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  position: relative;
}
.ref-how__num {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #a855f7, #4f8cff);
  color: #fff; font-weight: 800; font-size: 14px;
  border-radius: 50%; margin-bottom: 10px;
}
.ref-how__t {
  font-weight: 700; font-size: 14px; color: var(--fg);
  margin-bottom: 4px;
}
.ref-how__d { color: var(--fg-muted); font-size: 13px; line-height: 1.5; }

.btn--success { background: var(--pos); color: #000; border-color: var(--pos); }

/* ====================================================================
   SITE LOGO UPLOADER  (admin/settings.php → Site tab)
   ==================================================================== */
.logo-uploader {
  display: flex; align-items: center; gap: 16px;
}
.logo-uploader__preview {
  width: 88px; height: 88px;
  display: grid; place-items: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  flex-shrink: 0;
  overflow: hidden;
}
.logo-uploader__preview img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}
.logo-uploader__fallback {
  font-size: 32px; line-height: 1;
  color: var(--fg-dim);
}
.logo-uploader__forms { flex: 1; min-width: 0; }

/* ====================================================================
   AMB PROVIDERS REORDER  (admin/amb-games.php)
   ==================================================================== */
.prov-search-bar {
  position: relative;
  margin: 8px 0 6px;
}
.prov-search {
  width: 100%;
  padding-right: 32px; /* room for the clear ✕ button */
}
.prov-search__clear {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.prov-search__clear:hover { background: var(--bg-3); color: var(--fg); }

.prov-row.is-hidden { display: none; }
.prov-col.is-empty  { display: none; }

.prov-reorder {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 8px;
}
.prov-col {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 8px 10px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.prov-cat-head {
  font-size: 12px; font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: .4px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.prov-reorder__cat {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 40px;        /* allow dropping into empty category */
}
.prov-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: border-color .12s, background .12s, transform .08s, box-shadow .12s;
  user-select: none;
  /* Disable native drag-image side-effects (esp. text selection) */
  -webkit-user-drag: element;
}
.prov-row:hover { border-color: var(--line); background: var(--bg-3); }
.prov-row:active { cursor: grabbing; }
.prov-row.is-dragging {
  /* Keep the row visible during drag so the user sees where it lands.
     A gentle dashed outline communicates "this is the moving item"
     without making it disappear (the old opacity:.5 looked like a bug). */
  background: var(--bg-3);
  border: 1px dashed var(--primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.prov-handle {
  color: var(--fg-dim);
  font-size: 14px; line-height: 1;
  letter-spacing: -2px;
  padding: 2px 4px;
  cursor: grab;
  flex-shrink: 0;
  /* Larger hit area on mobile/touch — easier to grab the handle */
  min-width: 18px; text-align: center;
}
.prov-handle:hover { color: var(--fg); }
.prov-row__name {
  flex: 1; min-width: 0;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Interactive children should not initiate drag */
.prov-row .prov-toggle,
.prov-row input { cursor: pointer; }
.prov-row input[type="number"] { cursor: text; }

/* Vendor share % input — small, right-aligned, follows the row name */
.prov-row .prov-share {
  width: 60px;
  padding: 3px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.prov-row .prov-share:focus {
  border-color: var(--primary);
  outline: none;
}
.prov-row .prov-share__pct { flex-shrink: 0; min-width: 14px; }

.prov-footer { margin-top: 10px; min-height: 20px; }

/* ====================================================================
   ADMIN DEPOSIT REVIEW MODAL  (admin/deposits.php)
   ==================================================================== */
.dep-review {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 20px;
  padding: 0;
  /* Scroll is handled by .modal__body now (overflow-y:auto + flex:1 + min-h:0
     on the dialog flex column). Removing the dual-scroll keeps things simple
     and prevents the "content overflows but nothing scrolls" bug. */
}
.dep-review__left,
.dep-review__right {
  padding: 18px;
  min-width: 0;
}
.dep-review__left {
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.dep-review__slip {
  display: grid; place-items: center;
  min-height: 320px;
  background: #000; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dep-review__slip img { max-width: 100%; max-height: 480px; display: block; }
.dep-review__slip a { display: contents; }
.dep-review__placeholder {
  padding: 60px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-muted);
}
.dep-review__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.dep-review__amount {
  margin: 0;
  font-size: 28px; font-weight: 800;
  font-family: var(--mono);
  color: var(--fg);
}
.dep-review__warnings { margin: 14px 0 0; }
.dep-review__warnings .alert { margin-bottom: 8px; padding: 8px 12px; font-size: 13px; }
.dep-review__warnings .alert:last-child { margin-bottom: 0; }
.dep-review__actions {
  display: flex; gap: 10px; align-items: stretch;
  margin-top: 14px;
}
.dep-review__actions .btn--block { flex: 1; }

/* HippoPay slip-scan verify panel inside the deposit review modal */
.dep-verify {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
}
.dep-verify__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dep-verify__chip { font-size: 11px; padding: 3px 8px; }
.dep-verify__diff { margin-bottom: 6px; }
.dep-verify__tbl  { width: 100%; border-collapse: collapse; }
.dep-verify__tbl th, .dep-verify__tbl td {
  padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
  font-size: 12px;
}
.dep-verify__tbl th:first-child {
  color: var(--fg-muted); font-weight: 500; width: 28%;
}
.dep-verify__tbl thead th, .dep-verify__tbl tr:first-child th {
  text-transform: uppercase; font-size: 10px; letter-spacing: .04em; color: var(--fg-muted);
  border-bottom: 1px solid var(--line-2);
}
.dep-verify__cell--ok  { color: var(--accent); }
.dep-verify__cell--bad { color: var(--danger); }
.dep-verify__reasons-list {
  margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--fg);
}
.dep-verify__reasons-list li { margin: 2px 0; }

/* withdrawal review payout-target block (left column) */
.wd-target {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.wd-target__bank { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.wd-target__name { font-size: 13px; color: var(--fg-muted); margin-bottom: 8px; }
.wd-target__acc  { font-size: 18px; font-weight: 700; color: var(--warn); letter-spacing: .5px; }

/* compact key/value grid (used in review modal) */
.kv-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px 14px;
  font-size: 13px;
}
.kv-grid__label { color: var(--fg-muted); align-self: start; }
.kv-grid__value { color: var(--fg); min-width: 0; word-break: break-word; }

@media (max-width: 760px) {
  .dep-review { grid-template-columns: 1fr; max-height: none; }
  .dep-review__left { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ====================================================================
   PAYMENT-CHANNEL CARDS  (PGway + ThunderPay in bank-accounts page)
   ==================================================================== */
/* Wrapper for the auto-pay channel cards. Two-column on desktop so PG and
   ThunderPay sit side-by-side; collapses to single-column on tablets/phones
   so each card stays readable without horizontal scroll. */
.ba-channels__intro {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 12px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.ba-channels-grid {
  display: grid;
  gap: 14px;
  /* Default = 2 columns (the layout user explicitly requested for PC).
     Phones (<700px) collapse to single column so each card stays readable. */
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
  /* Force grid items to shrink below their content size so a long card
     doesn't blow the column out — without min-width:0 the implicit auto
     min-width = min-content can push grid back to 1-col silently. */
}
.ba-channels-grid > .ba-channel { min-width: 0; }
@media (max-width: 700px) {
  .ba-channels-grid { grid-template-columns: 1fr; }
}
/* When inside the grid, individual cards lose their bottom margin so the
   grid `gap` is the single source of spacing between them. The
   `grid-column: auto` override neutralises `.card--full`'s default
   `grid-column: 1 / -1` (which would force every card to span the full
   row width and silently collapse the grid back to 1 col). */
.ba-channels-grid > .ba-channel {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-column: auto;
}
.ba-channels-grid > .ba-channel > form.ba-channel__body { flex: 1; }

.ba-channel { padding: 0; overflow: hidden; }
.ba-channel__intro {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
  flex-wrap: wrap;
}
.ba-channel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ba-channel__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ba-channel__logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff; font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.ba-channel__name { font-weight: 700; font-size: 15px; color: var(--fg); }
.ba-channel__status { font-size: 13px; margin-top: 2px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ba-channel__refresh {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--fg-muted);
  border: 1px solid var(--line); text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
.ba-channel__refresh:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ============================================================
   ADMIN /deposits.php — KPI bar + PG Unknown section
   ============================================================ */
.dep-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.dep-kpi__tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.dep-kpi__tile--warn  { border-left-color: var(--warn); }
.dep-kpi__tile--ok    { border-left-color: var(--accent); }
.dep-kpi__tile--rej   { border-left-color: var(--danger); }
.dep-kpi__tile--alert {
  border-left-color: var(--danger);
  background: linear-gradient(135deg, rgba(255,123,123,.10), rgba(255,123,123,.02));
}
.dep-kpi__tile--muted { border-left-color: var(--line-2); }
.dep-kpi__label { color: var(--fg-muted); font-size: 12px; margin-bottom: 4px; }
.dep-kpi__value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.dep-kpi__sub   { margin-top: 2px; }

/* PG Unknown alert section */
.dep-pgu {
  border: 1px solid rgba(255,123,123,.4);
  border-left: 3px solid var(--danger);
  background: linear-gradient(135deg, rgba(255,123,123,.06), rgba(255,123,123,.01));
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.dep-pgu__head { margin-bottom: 12px; }
.dep-pgu__title { margin: 0 0 4px; font-size: 15px; color: var(--danger); }
.dep-pgu__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.dep-pgu__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.dep-pgu__top { display: flex; justify-content: space-between; align-items: baseline; }
.dep-pgu__amt { font-size: 20px; font-weight: 800; color: var(--accent); }
.dep-pgu__kv {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px;
  margin: 0; font-size: 12px;
}
.dep-pgu__kv dt { color: var(--fg-muted); }
.dep-pgu__kv dd { margin: 0; word-break: break-word; }
.dep-pgu__action { margin-top: 4px; }
.dep-pgu__action summary { list-style: none; cursor: pointer; }
.dep-pgu__action summary::-webkit-details-marker { display: none; }
.dep-pgu__form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   ADMIN WITHDRAWAL REVIEW MODAL — wd-* components
   Redesign: target-card hero, user-card, amount-hero, timeline,
   pg-card, copy buttons
   ============================================================ */
.wd-review { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 16px; }
@media (max-width: 800px) { .wd-review { grid-template-columns: 1fr; } }
.wd-review__left, .wd-review__right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.wd-card__title { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--fg); }

/* ----- Target bank card ----- */
.wd-target-card {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.wd-target-card__head { display: flex; align-items: center; gap: 12px; }
.wd-target-card__icon { font-size: 28px; width: 40px; height: 40px;
  display: grid; place-items: center; background: var(--bg);
  border-radius: 50%; flex-shrink: 0; }
.wd-target-card__bank { flex: 1; min-width: 0; }
.wd-target-card__bankname { font-weight: 700; font-size: 15px; }
.wd-target-card__acc { font-size: 18px; letter-spacing: .5px; font-weight: 700; }
.wd-target-card__name { font-size: 13px; color: var(--fg); }

/* ----- User card (kv list) ----- */
.wd-user-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.wd-kv {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px;
  margin: 0; align-items: center;
}
.wd-kv dt { color: var(--fg-muted); font-size: 11px; }
.wd-kv dd { margin: 0; font-size: 13px; text-align: right; word-break: break-word; }

/* ----- Hero amount ----- */
.wd-hero {
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.wd-hero__top { display: flex; justify-content: flex-end; width: 100%; }
.wd-hero__amount {
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono);
  font-size: 36px; font-weight: 800; color: var(--accent);
  line-height: 1;
  padding: 4px 10px; border-radius: 8px;
  transition: background .12s ease;
}
.wd-hero__amount:hover { background: rgba(0,214,143,.08); }
.wd-hero__amount-cur { font-size: 22px; opacity: .8; }

/* Compact one-line variant — amount + meta + status badge on a single row.
   nowrap forces meta to shrink (it's the only flex:1 + min-width:0 item) and
   ellipsis when the column is narrow. */
.wd-hero--compact {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  text-align: left;
  padding: 10px 14px;
  gap: 10px;
}
.wd-hero--compact .wd-hero__amount {
  font-size: 22px;
  padding: 2px 8px;
  flex: 0 0 auto;
}
.wd-hero--compact .wd-hero__amount-cur { font-size: 16px; }
.wd-hero--compact .wd-hero__meta {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wd-hero--compact .badge { flex: 0 0 auto; }
@media (max-width: 480px) {
  .wd-hero--compact { flex-wrap: wrap; }
  .wd-hero--compact .wd-hero__meta { white-space: normal; flex-basis: 100%; }
}

/* ----- Timeline strip ----- */
.wd-timeline {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 12px;
  position: relative;
}
.wd-timeline::before {
  content: ''; position: absolute; top: 26px; left: 18%; right: 18%;
  height: 2px; background: var(--line); z-index: 0;
}
.wd-timeline__step {
  text-align: center; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.wd-timeline__dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-3); color: var(--fg-muted);
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  border: 2px solid var(--line);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wd-timeline__step--done .wd-timeline__dot {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}
.wd-timeline__step--fail .wd-timeline__dot {
  background: var(--danger); color: var(--bg); border-color: var(--danger);
}
.wd-timeline__label { font-size: 11px; color: var(--fg-muted); font-weight: 600; }
.wd-timeline__step--done .wd-timeline__label,
.wd-timeline__step--fail .wd-timeline__label { color: var(--fg); }
.wd-timeline__time { font-size: 10px; opacity: .7; }

/* ----- PG card ----- */
.wd-pg-card {
  background: rgba(79,140,255,.06);
  border: 1px solid rgba(79,140,255,.3);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* ----- Copy buttons ----- */
.wd-copy {
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: inherit; line-height: 1.2;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
  text-align: left; word-break: break-all;
}
.wd-copy:hover { border-color: var(--primary); color: var(--primary); }
.wd-copy.is-copied { border-color: var(--accent); background: rgba(0,214,143,.12); color: var(--accent); }
.wd-copy__icon { font-size: 11px; opacity: .55; flex-shrink: 0; }
.wd-copy:hover .wd-copy__icon { opacity: 1; }
.wd-copy.small { font-size: 12px; padding: 3px 7px; }

/* Autocomplete user-search inside the PG-Unknown link form */
.pgu-search { position: relative; }
.pgu-search__input { width: 100%; }
.pgu-search__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  max-height: 280px; overflow-y: auto;
  padding: 4px 0;
}
.pgu-search__item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--fg);
  padding: 8px 12px; cursor: pointer;
}
.pgu-search__item:hover, .pgu-search__item:focus {
  background: var(--bg-3); outline: none;
}
.pgu-search__item-name { font-weight: 600; font-size: 13px; }
.pgu-search__item-meta { font-size: 11px; margin-top: 2px; }
.pgu-search__empty { padding: 12px; text-align: center; }
.pgu-search__picked {
  margin-top: 4px; font-size: 12px;
  background: rgba(0,214,143,.10); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 6px 10px; color: var(--fg);
}

.ba-channel__body { padding: 18px 20px 20px; }
.ba-channel__hours {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ba-channel__actions {
  display: flex; align-items: stretch; gap: 12px; margin-top: 18px;
}
.ba-channel__actions .btn--block { flex: 1; }

/* iOS-style toggle */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__slider {
  width: 44px; height: 24px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--line-2);
  position: relative; transition: background .15s, border-color .15s;
}
.toggle__slider::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg-muted);
  transition: transform .15s, background .15s;
}
.toggle input:checked + .toggle__slider {
  background: var(--primary); border-color: var(--primary);
}
.toggle input:checked + .toggle__slider::after {
  transform: translateX(20px); background: #fff;
}
.toggle__label { font-size: 13px; font-weight: 600; color: var(--fg-muted); cursor: default; }
.toggle input:checked ~ .toggle__label { color: var(--primary); }
/* New 2-tier structure: <span.toggle> wraps a <label.toggle__hit> (the only
   clickable region — input + slider only) plus a sibling <span.toggle__label>
   text. The text is NOT inside a label so clicking it doesn't trigger the
   checkbox. .is-on mirrors `input:checked` for the text color. */
.toggle__hit { display: inline-flex; align-items: center; cursor: pointer; }
.toggle.is-on .toggle__label { color: var(--primary); }

/* tier chips (clickable label wrapping a checkbox + tier-badge) */
.tier-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.tier-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.tier-chip:hover { background: var(--bg-elev); }
.tier-chip input { accent-color: var(--primary); cursor: pointer; }
.tier-chip:has(input:checked) { border-color: var(--primary); background: rgba(79,140,255,.08); }

/* simple "labeled checkbox" used for "Enable close hours" etc. */
.ba-check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--fg);
}
.ba-check input { accent-color: var(--primary); cursor: pointer; }

/* status dot (Active/Inactive) */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.dot--pos   { background: var(--pos); box-shadow: 0 0 6px rgba(45,212,191,.5); }
.dot--muted { background: var(--fg-dim); }
.warn { color: var(--warn); }

/* bank-table cell: logo + name */
.ba-bankcell { display: flex; align-items: center; gap: 10px; }
.ba-bankcell > div { line-height: 1.3; }

/* icon-only square action buttons (table actions) */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--bg-3); color: var(--fg-muted);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.icon-btn:hover { background: var(--bg-elev); color: var(--fg); }
.icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }

/* merchant balance card (inside PG creds modal) */
.ba-balance {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ba-balance__label {
  font-size: 12px; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.ba-balance__value {
  font-family: var(--mono); font-size: 22px; font-weight: 700;
  color: var(--pos);
}

/* ====================================================================
   DEPOSIT PAGE  (deposit.php)
   ==================================================================== */

.dep-head { margin: 8px 0 22px; }
.dep-head__title { margin: 0; font-size: 24px; font-weight: 700; }
.dep-head__sub { margin: 4px 0 0; color: var(--fg-muted); font-size: 14px; }

.dep-layout {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .dep-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.dep-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  min-width: 0;
}
.dep-card__title { margin: 0 0 18px; font-size: 16px; font-weight: 700; color: var(--primary); }

.dep-section { margin-bottom: 18px; }
.dep-section:last-of-type { margin-bottom: 0; }
.dep-section__hint { font-size: 12px; color: var(--fg-dim); margin-top: 8px; }

/* Deposit rules / warnings callout — shown above the form in deposit.php */
.dep-rules {
  background: linear-gradient(135deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, .04));
  border: 1px solid rgba(245, 158, 11, .35);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
}
.dep-rules__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.45; color: var(--fg);
}
.dep-rules__list li {
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.dep-rules__icon {
  flex: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  display: inline-block;
}

/* Customer-side slip preview modal (deposit.php history → 🔍 button) */
.slip-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: 12px;
  background: var(--bg-3);
}
.slip-preview__img {
  max-width: 100%; max-height: 75vh; display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.slip-preview__pdf {
  width: 100%; height: 75vh; border: 0; border-radius: var(--radius-sm);
  background: #fff;
}
.slip-preview__placeholder {
  padding: 32px 16px; font-size: 13px; text-align: center;
}

/* Live pre-submit slip preview (deposit.php manual form) */
.slip-prev {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 13px;
}
.slip-prev--loading { border-left-color: var(--primary); opacity: .7; }
.slip-prev--ok      { border-left-color: var(--accent); background: rgba(0, 214, 143, .04); }
.slip-prev--warn    { border-left-color: var(--warn);   background: rgba(245, 158, 11, .05); }
.slip-prev--err     { border-left-color: var(--danger); background: rgba(255, 93, 93, .05); }
.slip-prev__placeholder { padding: 6px 0; font-size: 13px; }
.slip-prev__amt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.slip-prev__amt {
  font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1;
}
.slip-prev__use-amt { white-space: nowrap; }
.slip-prev__pair { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.slip-prev__party { font-size: 13px; }
.slip-prev__lbl { display: inline-block; width: 18px; }
.slip-prev__meta { padding-top: 4px; border-top: 1px dashed var(--line); margin-top: 6px; }
.slip-prev__warnings {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--fg);
}
.slip-prev__warnings li { padding: 4px 0; }
.slip-prev__ok { margin-top: 8px; color: var(--accent); font-weight: 600; font-size: 12.5px; }

/* Tier withdrawal allowance card (withdraw.php) */
.wd-tier-status {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.wd-tier-status--maxed { border-left-color: var(--warn); background: rgba(245,158,11,.05); }
.wd-tier-status__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.wd-tier-status__lbl {
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.wd-tier-status__row {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.wd-tier-status__cell { min-width: 0; }
.wd-tier-status__cell--r { text-align: right; }
.wd-tier-status__sub { margin-bottom: 2px; }
.wd-tier-status__val { font-size: 16px; font-weight: 700; line-height: 1.2; }
.wd-tier-status__val.pos { color: var(--accent); }
.wd-tier-status__val.neg { color: var(--warn); }
.wd-tier-status__bar {
  background: var(--bg-2); height: 6px; border-radius: 3px;
  overflow: hidden; margin: 6px 0 8px;
}
.wd-tier-status__bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width .3s ease;
}
.wd-tier-status--maxed .wd-tier-status__bar-fill {
  background: linear-gradient(90deg, var(--warn), var(--danger));
}
.wd-tier-status__foot { font-size: 11px; }

/* Auto-picked source bank radio card flash */
.dep-bankcard.is-auto-picked {
  animation: depBankPulse 1.4s ease;
}
@keyframes depBankPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
  30%      { box-shadow: 0 0 0 4px rgba(0, 214, 143, .35); }
}
.dep-label {
  display: block; font-size: 13px; color: var(--fg-muted);
  margin-bottom: 10px; font-weight: 500;
}

/* ----- Channel radio cards ----- */
.dep-channel {
  position: relative;
  display: grid;
  grid-template-columns: 22px 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 10px;
}
.dep-channel:last-child { margin-bottom: 0; }
.dep-channel:hover { border-color: var(--line-2); }
.dep-channel:has(.dep-channel__radio:checked) {
  border-color: var(--primary);
  background: rgba(79,140,255,.08);
}
.dep-channel:has(.dep-channel__radio:disabled) { opacity: .55; cursor: not-allowed; }
.dep-channel__radio { position: absolute; opacity: 0; pointer-events: none; }
.dep-channel__radio-mark {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); background: var(--bg);
  display: inline-block; position: relative;
  transition: border-color .15s;
}
.dep-channel__radio:checked + .dep-channel__radio-mark {
  border-color: var(--primary);
}
.dep-channel__radio:checked + .dep-channel__radio-mark::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--primary);
}
.dep-channel__icon {
  font-size: 18px; line-height: 1;
  color: var(--warn);
}
.dep-channel__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dep-channel__name { font-weight: 700; font-size: 14px; color: var(--fg); }
.dep-channel__desc { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }
.dep-channel__warn { font-size: 12px; color: var(--warn); margin-top: 4px; }

/* ----- Bank card (selected/pickable) ----- */
.dep-bankcard {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.dep-bankcard:last-child { margin-bottom: 0; }
.dep-bankcard--pickable {
  grid-template-columns: 22px auto 1fr auto;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dep-bankcard--pickable:hover { border-color: var(--line-2); }
.dep-bankcard--pickable:has(.dep-bankcard__radio:checked) {
  border-color: var(--primary);
  background: rgba(79,140,255,.08);
}
.dep-bankcard__radio { position: absolute; opacity: 0; pointer-events: none; }
.dep-bankcard__radio-mark {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); background: var(--bg);
  position: relative;
}
.dep-bankcard__radio:checked + .dep-bankcard__radio-mark { border-color: var(--primary); }
.dep-bankcard__radio:checked + .dep-bankcard__radio-mark::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--primary);
}
.dep-bankcard__body { min-width: 0; }
.dep-bankcard__name { font-weight: 600; font-size: 14px; }
.dep-bankcard__code { color: var(--fg-muted); font-size: 12px; font-weight: 500; margin-left: 4px; }
.dep-bankcard__person { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.dep-bankcard__acc { font-size: 16px; font-weight: 700; color: var(--warn); margin-top: 4px; letter-spacing: .5px; }

.dep-copy {
  background: transparent; border: 1px solid var(--line);
  color: var(--fg-muted); border-radius: var(--radius-sm);
  width: 32px; height: 32px;
  cursor: pointer; font-size: 14px; line-height: 1;
  transition: background .12s, color .12s;
}
.dep-copy:hover { background: var(--bg-elev); color: var(--fg); }
.dep-copy.is-ok { color: var(--pos); border-color: var(--pos); }

/* ----- Amount + file inputs ----- */
.dep-amount { font-size: 18px; padding: 14px 16px; }
.dep-file {
  padding: 10px 12px;
  cursor: pointer;
}
.dep-file::file-selector-button {
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px 12px; margin-right: 12px;
  cursor: pointer; font: inherit;
}
.dep-file::file-selector-button:hover { background: var(--bg-3); }

.dep-form-empty {
  padding: 30px 0; font-size: 13px;
}
.dep-form-empty[hidden] { display: none; }

/* ----- History table ----- */
.dep-history { margin: 0; }
.dep-history__tbl {
  font-size: 13px;
  width: 100%;
  table-layout: auto;
  word-break: break-word;
}
.dep-history__tbl th { font-size: 11px; padding: 10px 8px; white-space: nowrap; }
.dep-history__tbl td { padding: 12px 8px; vertical-align: top; }
.dep-history__tbl tbody tr:hover { background: var(--bg-3); }
/* keep default 8px side padding on first/last cells so content breathes */
/* Mobile — drop low-priority bank column to save space (info still in detail page) */
@media (max-width: 600px) {
  .dep-history__tbl th:nth-child(3),
  .dep-history__tbl td:nth-child(3) { display: none; }
  .dep-history__tbl th, .dep-history__tbl td { padding: 10px 6px; font-size: 12px; }
}

.dep-history__amt { font-size: 15px; font-weight: 700; }
.dep-history__bank { font-weight: 600; }
.dep-history__sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.dep-history__acc { color: var(--fg-muted); margin-top: 4px; }

.badge--pg {
  background: rgba(79,140,255,.15); color: var(--primary);
  text-transform: none; letter-spacing: 0;
  font-weight: 600; padding: 3px 8px;
}

.dep-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dep-status__label--pos  { color: var(--pos); }
.dep-status__label--neg  { color: var(--neg); }
.dep-status__label--warn { color: var(--warn); }
.dot--neg  { background: var(--neg);  box-shadow: 0 0 6px rgba(255,123,123,.5); }
.dot--warn { background: var(--warn); box-shadow: 0 0 6px rgba(240,160,32,.5); }

/* ====================================================================
   MY-BANK PAGE  (my-bank.php)
   ==================================================================== */
.mybank-card { max-width: 560px; }
.mybank-empty {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 14px;
  background: var(--bg-3); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 13px;
  margin-bottom: 16px;
}
.mybank-actions {
  display: flex; align-items: stretch; gap: 10px;
  margin-top: 6px;
}
.mybank-actions .btn--block { flex: 1; }

/* ====================================================================
   WITHDRAW PAGE  (withdraw.php)
   ==================================================================== */

/* UID + chip-balance info block (top of New Withdrawal card) */
.wd-info {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.wd-info__row { display: flex; align-items: center; gap: 10px; }
.wd-info__label { color: var(--fg-muted); font-size: 13px; }
.wd-info__uid   { color: var(--fg); font-weight: 600; font-size: 14px; }
.wd-info__chips { color: var(--warn); font-weight: 700; font-size: 16px; margin-top: 6px; }

/* Payout bank card (selected primary bank, with "Edit" link to my-bank) */
.wd-bankcard {
  position: relative;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px 14px;
  margin-bottom: 16px;
}
.wd-bankcard__top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.wd-bankcard__head { min-width: 0; }
.wd-bankcard__name {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
}
.wd-bankcard__person { color: var(--fg-muted); font-size: 13px; margin-top: 4px; }
.wd-bankcard__acc {
  font-size: 16px; font-weight: 700;
  color: var(--warn);
  letter-spacing: .5px;
  padding: 10px 12px;
  background: var(--bg); border-radius: var(--radius-sm);
}
.wd-bankcard__edit {
  position: absolute; right: 14px; bottom: 12px;
  font-size: 12px; color: var(--fg-muted);
  text-decoration: none;
}
.wd-bankcard__edit:hover { color: var(--primary); text-decoration: none; }

/* ====================================================================
   ADMIN SETTINGS TABS  (admin/settings.php)
   ==================================================================== */
.settings-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  margin-bottom: 18px;
}
.settings-tabs__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background .12s, color .12s;
  border: 1px solid transparent;
}
.settings-tabs__tab:hover { color: var(--fg); background: var(--bg-3); text-decoration: none; }
.settings-tabs__tab--active {
  background: var(--bg-3);
  color: var(--fg);
  border-color: rgba(79,140,255,.35);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.settings-tabs__icon { font-size: 14px; line-height: 1; }
.settings-tabs__label { white-space: nowrap; }
.settings-tabs__count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 18px; padding: 0 5px;
  background: var(--bg); color: var(--fg-muted);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 999px; line-height: 1;
}
.settings-tabs__tab--active .settings-tabs__count {
  background: var(--primary); color: #fff;
}

.settings-panel { animation: settings-fade-in .15s ease-out; }
@keyframes settings-fade-in {
  from { opacity: .4; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====================================================================
   ADMIN SETTINGS — BONUS TAB CARDS
   ==================================================================== */
.bonus-master {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  transition: border-color .15s, background .15s;
}
.bonus-master.is-on {
  background: linear-gradient(180deg, rgba(79,140,255,.08), rgba(79,140,255,.02));
  border-color: rgba(79,140,255,.35);
}
.bonus-master__info { flex: 1; min-width: 0; }
.bonus-master__title { font-size: 15px; font-weight: 700; color: var(--fg); }
.bonus-master__sub { margin-top: 2px; }

.bonus-cards { display: flex; flex-direction: column; gap: 12px; }
.bonus-cards--dimmed { opacity: .55; }

.bonus-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s;
}
.bonus-card.is-on { border-color: rgba(79,140,255,.35); }

.bonus-card__head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.bonus-card.is-on .bonus-card__head { background: rgba(79,140,255,.06); }
.bonus-card__head > div:first-child { flex: 1; min-width: 0; }
.bonus-card__title { font-size: 14px; font-weight: 700; color: var(--fg); }
.bonus-card__sub { margin-top: 2px; }

.bonus-card__body { padding: 16px 18px; }
.bonus-card__body[inert] { opacity: .45; }
.bonus-card__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.field-row--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .field-row--3 { grid-template-columns: repeat(3, 1fr); } }

/* number input + unit suffix */
.field__suffix {
  position: relative; display: flex; align-items: center;
}
.field__suffix .field__input { padding-right: 44px; }
.field__unit {
  position: absolute; right: 10px;
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  pointer-events: none;
}

/* large iOS toggle (used for master switch) */
.toggle--lg .toggle__slider { width: 56px; height: 30px; }
.toggle--lg .toggle__slider::after { width: 24px; height: 24px; top: 2px; left: 2px; }
.toggle--lg input:checked + .toggle__slider::after { transform: translateX(26px); }
.toggle--lg .toggle__label { font-size: 14px; }

/* ====================================================================
   PROMOTIONS PAGE  (promotions.php)
   ==================================================================== */
.promo-section__title {
  margin: 0 0 14px;
  font-size: 18px; font-weight: 700;
}

/* --- Active bonus (in-progress turnover) --- */
.promo-active { margin-bottom: 28px; }
.promo-active__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.active-bonus {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.active-bonus__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
}
.active-bonus__title { font-size: 14px; font-weight: 600; }
.active-bonus__amount { font-size: 16px; font-weight: 700; color: var(--primary); }
.active-bonus__bar {
  height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden;
}
.active-bonus__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #6dd3a3);
  transition: width .4s ease;
}
.active-bonus__meta {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px;
}

.active-bonus__table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 12px;
}
.active-bonus__table th,
.active-bonus__table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.active-bonus__table th {
  font-weight: 600; color: var(--fg-muted);
  font-size: 11px;
  background: var(--bg-3);
}
.active-bonus__table td.r,
.active-bonus__table th.r { text-align: right; }
.active-bonus__table tr.is-off { opacity: .45; }
.active-bonus__off {
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(255,93,93,.18); color: var(--danger);
  border-radius: 4px;
  font-weight: 600;
}

.active-bonus__hint {
  margin-top: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--fg);
}
.active-bonus__hint strong { color: var(--primary); }

.active-bonus__forfeit { margin-top: 10px; }
.active-bonus__forfeit-btn {
  width: 100%;
  color: var(--fg-muted);
  border-color: var(--line-2);
}
.active-bonus__forfeit-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(255,93,93,.08);
}

/* my-bank.php: inline real_name form (when missing, blocks bank linking) */
.mybank-realname {
  background: linear-gradient(135deg, rgba(240,160,32,.10), rgba(240,160,32,.02));
  border: 1px solid rgba(240,160,32,.4);
  margin-bottom: 16px;
}
.mybank-realname__head {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px;
}
.mybank-realname__icon { font-size: 22px; line-height: 1; }
.mybank-realname__title { font-size: 14px; font-weight: 700; color: var(--warn); }
.mybank-realname__form { display: flex; flex-direction: column; gap: 12px; }

/* Deposit page: active-bonus warning banner */
.dep-active-bonus {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(240,160,32,.12), rgba(240,160,32,.04));
  border: 1px solid rgba(240,160,32,.4);
  border-radius: var(--radius);
}
.dep-active-bonus__icon { font-size: 22px; line-height: 1; }
.dep-active-bonus__body { flex: 1; min-width: 0; }
.dep-active-bonus__title { font-size: 14px; font-weight: 700; color: var(--warn); }
.dep-active-bonus__list { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.dep-active-bonus__item {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 4px 8px;
  background: rgba(0,0,0,.18);
  border-radius: 4px;
  font-size: 13px;
}
.dep-active-bonus__note { margin: 4px 0 0; line-height: 1.5; }
.dep-active-bonus__note strong { color: var(--warn); }
.dep-active-bonus__note a { color: var(--accent); }

/* --- Empty state --- */
.promo-empty {
  text-align: center;
  padding: 48px 16px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}
.promo-empty__icon { font-size: 48px; opacity: .55; }
.promo-empty__title { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--fg-muted); }
.promo-empty__sub { margin-top: 4px; }

/* --- Promo card grid --- */
.promo-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* type → accent color (used by .is-X classes via --promo-accent var) */
.promo-card.is-welcome  { --promo-accent: #ff9f43; --promo-accent-2: #f7b267; }
.promo-card.is-deposit  { --promo-accent: #4f8cff; --promo-accent-2: #6ea3ff; }
.promo-card.is-cashback { --promo-accent: #2ecc71; --promo-accent-2: #6dd3a3; }
.promo-card.is-referral { --promo-accent: #b86cff; --promo-accent-2: #d28aff; }
.promo-card.is-daily    { --promo-accent: #2ec4d4; --promo-accent-2: #6cdce8; }
.promo-card.is-custom   { --promo-accent: #4f8cff; --promo-accent-2: #6ea3ff; }

.promo-card {
  --promo-accent: var(--primary);
  --promo-accent-2: var(--primary);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, border-color .15s, box-shadow .15s;
}
.promo-card:hover {
  transform: translateY(-2px);
  border-color: var(--promo-accent);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.4);
}

/* --- Hero (rate display) --- */
.promo-card__hero {
  position: relative;
  padding: 22px 18px 18px;
  text-align: center;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--promo-accent) 35%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--promo-accent) 18%, var(--bg-2)), var(--bg-2));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.promo-card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .25; z-index: 0;
}
.promo-card__type-pill {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid color-mix(in srgb, var(--promo-accent) 50%, transparent);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--promo-accent-2);
}
.promo-card__rate {
  position: relative; z-index: 1;
  margin-top: 12px;
  font-weight: 800;
  color: var(--promo-accent-2);
  line-height: 1;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--promo-accent) 50%, transparent);
}
.promo-card__rate-num    { font-size: 56px; }
.promo-card__rate-unit   { font-size: 28px; margin-left: 4px; }
.promo-card__rate-prefix { font-size: 28px; margin-right: 2px; vertical-align: 6px; }
.promo-card__rate-cap {
  position: relative; z-index: 1;
  margin-top: 6px;
  font-size: 11px; color: var(--fg-muted); font-weight: 600;
}

/* --- Body --- */
.promo-card__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.promo-card__title { margin: 0; font-size: 15px; font-weight: 700; }
.promo-card__desc  { margin: 0; line-height: 1.45; }

.promo-card__terms {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.promo-tag {
  display: inline-block;
  padding: 3px 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px; color: var(--fg-muted);
  white-space: nowrap;
}

.promo-card__claim {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto; padding-top: 4px;
}
.promo-card__cta { margin-top: auto; }

.promo-card__auto {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--promo-accent) 8%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--promo-accent) 25%, var(--line));
  border-radius: var(--radius-sm);
  margin-top: auto;
}
.promo-card__auto-icon { font-size: 16px; }

/* Cashback per-category breakdown grid */
.cashback-breakdown {
  display: grid; gap: 4px;
  grid-template-columns: 1fr 1fr;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.cashback-breakdown__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  padding: 2px 0;
}
.cashback-breakdown__row .mono { font-weight: 700; color: var(--promo-accent-2); }
.cashback-breakdown__row.is-zero { opacity: .4; }
.cashback-breakdown__row.is-zero .mono { color: var(--fg-muted); font-weight: 400; }

/* Tier badge inline (small pill with tier color) */
.cashback-tier-badge {
  display: inline-block; padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  color: #000;
  letter-spacing: .5px;
  vertical-align: 1px;
}

/* Next-tier progress widget on cashback card */
.cashback-next {
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.cashback-next__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.cashback-next__head a:hover { color: var(--promo-accent-2); text-decoration: none; }
.cashback-next__bar {
  height: 6px; background: var(--bg-2);
  border-radius: 999px; overflow: hidden;
}
.cashback-next__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--promo-accent), var(--promo-accent-2));
  transition: width .4s ease;
}
.cashback-next__meta {
  display: flex; justify-content: space-between; gap: 8px; font-size: 11px;
}
.cashback-next--max {
  text-align: center; padding: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--promo-accent) 15%, var(--bg-3)), var(--bg-3));
  font-weight: 600; color: var(--promo-accent-2);
}

/* ====================================================================
   ADMIN BONUS CAMPAIGNS  (admin/bonus-campaigns.php)
   ==================================================================== */
.bcamp-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}

.bcamp-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 24px;
}

.bcamp-card.is-inactive { opacity: .55; filter: grayscale(.4); }
.bcamp-card.is-inactive:hover { opacity: 1; filter: none; }

.bcamp-card__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.bcamp-card__title-row {
  display: flex; flex-direction: column; gap: 4px;
}
.bcamp-card__code {
  font-size: 11px; padding: 2px 6px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 4px; color: var(--fg-muted);
  align-self: flex-start;
}
.bcamp-card__title { margin: 0; font-size: 14px; font-weight: 600; }

.bcamp-card__switches {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.bcamp-switch { margin: 0; }
.bcamp-switch .toggle__label { font-size: 12px; }

.bcamp-card__actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
}

/* --- Edit form sections --- */
.bcamp-edit { margin-top: 8px; }
.bcamp-form { display: flex; flex-direction: column; gap: 18px; }

.bcamp-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 4px;
  margin: 0;
  background: var(--bg-2);
}
.bcamp-section > legend {
  padding: 2px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; color: var(--fg-muted);
  letter-spacing: .3px;
}

.bcamp-toggles { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }

.bcamp-form__actions {
  display: flex; gap: 8px;
  padding-top: 4px;
}

/* small-info card variant in settings bonus tab — non-interactive */
.bonus-card--info { border-style: dashed; }
.bonus-card--info .bonus-card__head { background: transparent; }

/* ====================================================================
   DEPOSIT BONUS PICKER  (deposit.php)
   ==================================================================== */
.dep-bonus {
  margin: 16px 0;
  padding: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 8px;
}
.dep-bonus__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.dep-bonus__label { font-size: 13px; font-weight: 600; color: var(--fg); }
.dep-bonus__hint { font-size: 11px; line-height: 1.4; }

.dep-bonus__opt {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dep-bonus__opt:hover { border-color: var(--line-2); }
.dep-bonus__opt:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-2));
}
.dep-bonus__opt--none:has(input:checked) {
  border-color: var(--fg-muted);
  background: var(--bg-2);
}
.dep-bonus__opt.is-ineligible {
  opacity: .35;
  pointer-events: none;
  filter: grayscale(.5);
}
.dep-bonus__radio { position: absolute; opacity: 0; pointer-events: none; }
.dep-bonus__radio-mark {
  flex-shrink: 0; margin-top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  position: relative;
  transition: border-color .15s;
}
.dep-bonus__opt:has(input:checked) .dep-bonus__radio-mark {
  border-color: var(--primary);
}
.dep-bonus__opt:has(input:checked) .dep-bonus__radio-mark::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--primary); border-radius: 50%;
}
.dep-bonus__opt--none:has(input:checked) .dep-bonus__radio-mark { border-color: var(--fg-muted); }
.dep-bonus__opt--none:has(input:checked) .dep-bonus__radio-mark::after { background: var(--fg-muted); }

.dep-bonus__opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dep-bonus__opt-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.dep-bonus__opt-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.dep-bonus__opt-rate {
  font-family: var(--mono); font-weight: 700;
  font-size: 16px; color: var(--primary);
}
.dep-bonus__opt-sub { font-size: 11px; line-height: 1.3; }
.dep-bonus__opt-meta { font-size: 11px; line-height: 1.4; }
.dep-bonus__opt-calc {
  font-size: 11px;
  padding: 4px 8px; margin-top: 4px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--mono);
}

/* ====================================================================
   USER TIERS PAGE  (tiers.php)
   ==================================================================== */
.tiers-intro {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.tiers-intro__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.tiers-intro__current { margin-top: 4px; }
.tiers-intro__lifetime {
  font-size: 22px; font-weight: 700; color: var(--fg);
  margin-top: 2px;
}
.tier-pill {
  display: inline-block; padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--mono); font-size: 14px; font-weight: 800;
  color: #000;
  letter-spacing: .5px;
}

.tier-ladder { display: flex; flex-direction: column; gap: 12px; }

.tier-row {
  --tier-color: #888;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tier-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.tier-row.is-mine {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier-color) 12%, var(--bg-2)), var(--bg-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-color) 50%, transparent);
}
.tier-row.is-past { opacity: .65; }
.tier-row.is-locked { opacity: .85; }

.tier-row__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--tier-color) 8%, var(--bg-3));
  border-bottom: 1px solid var(--line);
}
.tier-row__rank {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tier-color);
  color: #000;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.tier-row__code {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: var(--tier-color);
  letter-spacing: .5px;
}
.tier-row__name { margin-top: 2px; }
.tier-row__badge {
  display: inline-block; padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.tier-row__badge--mine   { background: color-mix(in srgb, var(--tier-color) 35%, transparent); color: var(--fg); }
.tier-row__badge--past   { background: var(--bg-3); color: var(--fg-muted); }
.tier-row__badge--locked { background: var(--bg-3); color: var(--fg-muted); }

.tier-row__body {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.tier-perks { display: flex; flex-direction: column; gap: 6px; }
.tier-perks__label { font-size: 11px; font-weight: 600; }
.tier-perks__line { font-size: 14px; }

.tier-perks__rates {
  display: grid; gap: 6px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 540px) { .tier-perks__rates { grid-template-columns: repeat(4, 1fr); } }
.tier-perk-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.tier-perk-cell__icon { font-size: 16px; }
.tier-perk-cell__label { font-size: 10px; }
.tier-perk-cell__pct { font-size: 14px; font-weight: 700; color: var(--tier-color); }
.tier-perk-cell.is-zero { opacity: .35; }
.tier-perk-cell.is-zero .tier-perk-cell__pct { color: var(--fg-muted); font-weight: 500; }

.tier-row__progress {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.tier-row__progress-meta { display: flex; justify-content: space-between; gap: 8px; }
.tier-row__progress-bar {
  height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden;
}
.tier-row__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 50%, #fff));
  transition: width .4s ease;
}

/* ====================================================================
   ADMIN CUSTOMER TIERS  (admin/tiers.php)
   ==================================================================== */
.tier-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 24px;
}

.tier-card {
  --tier-color: #888;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tier-color);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, border-color .15s, box-shadow .15s;
}
.tier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.4);
}
.tier-card.is-inactive { opacity: .55; filter: grayscale(.4); }
.tier-card.is-inactive:hover { opacity: 1; filter: none; }

.tier-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tier-card__rank {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tier-color);
  color: #000;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.tier-card__code {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  color: var(--tier-color);
  letter-spacing: .5px;
}
.tier-card__name { font-size: 14px; color: var(--fg); }
.tier-card__user-count { text-align: right; }
.tier-card__user-count-num { font-size: 18px; font-weight: 700; color: var(--fg); }

.tier-card__cashback {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.tier-card__cashback-label { font-size: 11px; margin-bottom: 6px; }
.tier-cashback-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(4, 1fr);
}
.tier-cashback-cell {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  background: var(--bg-2);
  border-radius: 4px;
}
.tier-cashback-cell__icon { font-size: 14px; }
.tier-cashback-cell__pct { font-size: 12px; font-weight: 700; color: var(--fg); }

.field-row--4 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .field-row--4 { grid-template-columns: repeat(4, 1fr); } }

.tier-card__metrics {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.tier-metric {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.tier-metric__label { font-size: 11px; color: var(--fg-muted); margin-bottom: 2px; }
.tier-metric__value { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--fg); }
.tier-metric__sub { margin-top: 2px; font-size: 10px; }

.tier-card__actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 6px;
}

/* ====================================================================
   GENERIC SETTINGS SECTION CARDS (Site / AMB / Limits / Anti-fraud / Other)
   Reuses bonus tab's visual language; adapted for arbitrary fields.
   ==================================================================== */
.setting-cards { display: flex; flex-direction: column; gap: 12px; }

.setting-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.setting-card--danger {
  background: linear-gradient(135deg, rgba(255,93,93,.08), rgba(255,93,93,.02));
  border-color: rgba(255,93,93,.4);
}
.setting-card__head {
  padding: 12px 18px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.setting-card--danger .setting-card__head { background: rgba(255,93,93,.10); }
.setting-card__title {
  margin: 0;
  font-size: 14px; font-weight: 700; color: var(--fg);
}
.setting-card__sub {
  margin: 4px 0 0;
  font-size: 12px; line-height: 1.45;
}

/* Sub-feature cards whose first field is a master toggle: when the toggle
   is OFF, dim the body so admins see at-a-glance the section is inactive.
   The toggle itself stays full-opacity so it can still be clicked back on. */
.setting-card--off .setting-card__head {
  background: var(--bg-2);
  opacity: .85;
}
.setting-card--off .setting-card__title::before {
  content: '⏸ ';
  opacity: .55;
  font-weight: 600;
}
.setting-card--off .setting-card__body > .field:not(:first-child) {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.5);
}

.setting-card__body {
  padding: 14px 18px;
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .setting-card__body:has(> .field:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }
  .setting-card__body:has(> .field:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.setting-card__body > .field { margin-bottom: 0; }
/* Fields tagged `field--wide` (json_text / json_ip_list / opt-in toggles)
   span every column in the body grid so big textareas and section-leading
   toggles get their own row instead of getting squished into 1/3. */
.setting-card__body > .field--wide { grid-column: 1 / -1; }
/* When a card has at least one wide field, drop the body to 2 columns
   so any narrow fields after it pair up cleanly (no leftover empty col).
   The `:nth-child(n)` in the :has() argument bumps specificity to match the
   auto-N-col rules above so this one can win via cascade order. */
@media (min-width: 720px) {
  .setting-card__body:has(> .field--wide:nth-child(n)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.setting-card__actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

/* collapsible "Advanced" raw key/value editor */
.bonus-raw { margin-top: 18px; }
.bonus-raw > summary {
  cursor: pointer; padding: 8px 0;
  list-style: none;
}
.bonus-raw > summary::-webkit-details-marker { display: none; }
.bonus-raw > summary:hover { color: var(--fg); }
.bonus-raw[open] > summary { color: var(--fg); margin-bottom: 4px; }

/* Bank-code pill badge (used in bank cards + history "Payout to" cell) */
.badge--bank {
  background: rgba(34,197,94,.18); color: #4ade80;
  text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; font-size: 10px;
  padding: 2px 8px;
}

/* Gate card shown on deposit.php / withdraw.php when user has no bank yet */
.mybank-gate {
  max-width: 520px; margin: 24px auto;
  text-align: center; padding: 36px 28px;
}
.mybank-gate__icon {
  font-size: 48px; line-height: 1; margin-bottom: 12px;
}
.mybank-gate__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--fg); }
.mybank-gate__desc  { margin: 0 0 20px; color: var(--fg-muted); line-height: 1.6; font-size: 14px; }

/* =============================================================================
   ADMIN — MOBILE RESPONSIVE LAYER (≤ 800px = sidebar becomes off-canvas drawer)
   ============================================================================= */

/* Hamburger button (only visible on mobile) */
.adminmain__hamburger {
  display: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  width: 40px; height: 40px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
}
.adminmain__hamburger:active { background: var(--bg-3); }

/* Drawer backdrop (only shown when drawer open on mobile) */
.adminside__backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 90;
  opacity: 0;
  transition: opacity .2s ease;
}

/* ----- Tablet & smaller (≤ 800px) ----- */
@media (max-width: 800px) {
  .page--admin { grid-template-columns: 1fr; }

  /* Sidebar becomes a fixed slide-in drawer */
  .adminside {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .4);
  }
  body.adminside-open .adminside { transform: translateX(0); }
  body.adminside-open .adminside__backdrop {
    display: block;
    opacity: 1;
  }

  /* Main shifts to fill viewport */
  .adminmain { padding: 0 14px 24px; }
  .adminmain__top {
    padding: 14px 0 12px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 50;
  }
  .adminmain__title-wrap { flex: 1; min-width: 0; }
  .adminmain__title { font-size: 18px; }
  .adminmain__subtitle {
    font-size: 12px;
    margin-left: 0;
    margin-top: 2px;
  }
  .adminmain__title-icon { width: 26px; height: 26px; font-size: 12px; }
  .adminmain__hamburger { display: inline-flex; }

  /* User pill: hide name on mobile, keep avatar */
  .adminmain__user .usermenu__meta { display: none; }
  .adminmain__user .usermenu summary { padding: 4px; gap: 0; }

  /* Stat / KPI grids should not break out — auto-fit handles most */
  .stat-grid, .dash-hero { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat, .dash-kpi { padding: 12px; }
  .stat__label, .dash-kpi__label { font-size: 11px; }
  .stat__value, .dash-kpi__value { font-size: 18px; }

  /* Subtabs / filterbars wrap */
  .subtabs { flex-wrap: wrap; }
  .filterbar { gap: 8px; }
  .filterbar .field__input { min-width: 0; flex: 1 1 calc(50% - 4px); }
}

/* ----- Phone (≤ 600px) ----- */
@media (max-width: 600px) {
  .adminmain { padding: 0 10px 16px; }
  .adminmain__top {
    padding: 10px 0 10px;
    margin-bottom: 14px;
  }
  .adminmain__title { font-size: 16px; }
  .adminmain__subtitle { font-size: 11px; }
  .adminmain__title-icon { width: 22px; height: 22px; font-size: 11px; }
  .adminmain__hamburger { width: 36px; height: 36px; font-size: 16px; }

  /* KPI: single column */
  .stat-grid, .dash-hero { grid-template-columns: 1fr; }

  /* Card padding tighter */
  .card { padding: 12px; border-radius: 10px; }
  .card__title { font-size: 14px; padding: 10px 12px; }

  /* Modal: near full-screen */
  .modal__dialog {
    width: 96vw;
    max-width: 96vw;
    max-height: 92vh;
    margin: 4vh auto;
    border-radius: 12px;
  }
  .modal__body { padding: 14px; }

  /* Filter bars: 1 input per row */
  .filterbar .field__input { flex: 1 1 100%; }

  /* Tables — generic overflow-x for any tbl, not just table-wrap */
  .tbl { font-size: 12px; }
  .tbl th, .tbl td { padding: 8px 10px; }

  /* Buttons in admin: tap-friendly */
  .btn { min-height: 38px; }
  .btn--sm { min-height: 32px; }

  /* User menu popup goes full-width — admin-scoped only.
     The front-end .topbar__user .usermenu__pop has its own bottom-sheet
     treatment further down (so the small avatar button doesn't squeeze
     the dropdown to 60-something px wide). */
  .adminmain__user .usermenu__pop { right: 0; left: 0; min-width: auto; }
}

/* =============================================================================
   FRONT-END USERMENU — MOBILE BOTTOM SHEET (≤ 600px)
   On the public site, the usermenu dropdown anchored to a 36px avatar pill
   either gets clipped (when right-aligned and content wider than viewport
   would put it off-screen) or squeezed to a useless 60px column when
   left+right are both pinned to the parent. Convert to a bottom sheet
   that slides up from the bottom edge — full-width, native Thai mobile UX.
   ============================================================================= */
@media (max-width: 600px) {
  .topbar__user .usermenu[open] .usermenu__pop {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; min-width: 0; max-width: none;
    max-height: 80vh; overflow-y: auto;
    border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0;
    padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 12px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .55);
    z-index: 110;
    animation: usermenuSlideUp .22s cubic-bezier(.4, 0, .2, 1);
  }
  /* Drag-handle pill at the top of the sheet — visual cue it's dismissable */
  .topbar__user .usermenu[open] .usermenu__pop::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    margin: 6px auto 10px;
    background: var(--line-2, var(--line));
    border-radius: 2px;
  }
  /* Backdrop — uses ::after on the open <details> to dim the page behind */
  .topbar__user .usermenu[open]::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 109;
    animation: usermenuFadeIn .22s ease;
  }
  /* Tap-friendly menu items — bigger hit areas + clearer hierarchy */
  .topbar__user .usermenu__item {
    padding: 13px 14px;
    font-size: 14px;
    border-radius: 8px;
  }
  .topbar__user .usermenu__head {
    padding: 14px 14px 16px;
    margin: 4px 0 6px;
  }
  .topbar__user .usermenu__head__name { font-size: 15px; }
  .topbar__user .usermenu__group {
    padding: 12px 14px 6px;
    font-size: 11px;
  }
}
@keyframes usermenuSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes usermenuFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}