/* ====================================================================
   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; }

.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: 30px; width: max-content;
  animation: bigWinsScroll var(--ticker-speed) linear infinite;
}
.big-wins-ticker:hover .big-wins-ticker__track { animation-play-state: paused; }
.big-wins-ticker__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; white-space: nowrap; flex-shrink: 0;
  padding: 4px 10px;
}
.big-wins-ticker__icon { font-size: 16px; }
.big-wins-ticker__user { color: var(--fg-muted); font-size: 12px; }
.big-wins-ticker__verb { color: var(--fg-muted); }
.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: .85;
  max-width: 200px; 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--dashboard { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid--2col      { grid-template-columns: 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
   ==================================================================== */

.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: #161c2b;            /* slightly deeper than page bg */
  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;
}
.adminside__link:hover { background: var(--bg-3); color: #fff; text-decoration: none; }
.adminside__link--active {
  background: var(--bg-3);
  color: #fff;
}
.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;
}
.adminside__contact {
  font-size: 11px; color: var(--fg-dim);
  padding: 4px 0;
}
.adminside__contact a { color: #6cc1ff; }
.adminside__copy {
  font-size: 10px; color: var(--fg-dim);
  opacity: .7;
  padding: 2px 0;
}

/* ----- MAIN ----- */
.adminmain {
  padding: 0 24px 32px;
  min-width: 0;
}
.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: 8px;
}
.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;
  position: relative;
  overflow: hidden;
}
.dash-kpi:hover { text-decoration: none; transform: translateY(-1px); }
.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); }

/* ----- Action queue ----- */
.dash-queue {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 24px;
}
.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(280px, 1fr); }
}
.dash-side { display: grid; gap: 16px; align-content: start; }

/* ----- 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; }

.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 CARD  (PGway in bank-accounts page)
   ==================================================================== */
.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); }
.toggle input:checked ~ .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 */
  .usermenu__pop { right: 0; left: 0; min-width: auto; }
}