@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Fredoka:wght@500;600;700&display=swap');
/* ════════════════════════════════════════════════════════
   StashPatrick — Dashboard Design System
   Dark GREEN / GOLD theme (matches the original web app)
   ════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --green:        #2E86FF;
  --green2:       #1C6FE0;
  --green-soft:   rgba(46,134,255,.12);
  --green-soft2:  rgba(46,134,255,.18);
  --gold:         #c8970a;
  --gold2:        #f0c040;
  --gold-soft:    rgba(240,192,64,.12);

  --primary:      var(--green);
  --primary-dark: var(--green2);
  --primary-soft: var(--green-soft);

  --bg:           #060e07;
  --bg2:          #040905;
  --card:         #0c160d;
  --surface:      #111e12;   /* inputs, secondary buttons, chips */
  --hover:        #162018;
  --border:       #1e2c20;
  --line:         rgba(255,255,255,.05);

  --text-strong:  #eafff0;
  --text:         #cfe6cf;
  --muted:        #6f9670;

  --success:      #2E86FF;
  --warning:      #f0c040;
  --error:        #ff5252;
  --danger:       #ff4d8d;
  --navy:         #081109;   /* sidebar */

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 6px rgba(0,0,0,.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);

  --r-sm: 8px; --r: 10px; --r-md: 12px; --r-lg: 16px;
  --sidebar-w: 248px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
::selection { background: var(--green-soft2); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1f3022; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a4030; }

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r);
  padding: 11px 18px; font-weight: 700; font-size: 14px;
  transition: .16s ease; white-space: nowrap; width: 100%;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--green) 0%, var(--green2) 100%); color: #06230f; box-shadow: 0 4px 16px rgba(46,134,255,.25); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 6px 22px rgba(46,134,255,.4); }
.pay-loading { pointer-events: none; display: inline-flex; align-items: center; gap: 8px; }
.pay-spinner { display: inline-block; width: 16px; height: 16px; border: 2.5px solid rgba(6,35,15,.3); border-top-color: #06230f; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-gold { background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%); color: #271c00; box-shadow: 0 4px 16px rgba(200,151,10,.25); }
.btn-gold:hover:not(:disabled) { filter: brightness(1.06); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); border-color: #2a3d2c; }
.btn-success { background: linear-gradient(135deg, var(--green), var(--green2)); color: #06230f; }
.btn-danger { background: var(--error); color: #2a0000; }
.btn-warning { background: #f59e0b; color: #1a1400; }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: 13px; width: auto; }
.btn-block { width: 100%; }

/* ─────────── Cards ─────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm); }
/* Vertical-stack spacing between consecutive cards... */
.card + .card { margin-top: 16px; }
/* ...but when cards sit side-by-side in a row grid, they must not be pushed down — keep tops aligned */
.profile-cols > .card + .card,
.grid2 > .card + .card,
.grid3 > .card + .card { margin-top: 0; }
.card-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 14px; }
.card-sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }

/* ─────────── Inputs ─────────── */
.input-wrap { margin-bottom: 16px; }
.input-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 11px 14px; font-size: 14px; color: var(--text-strong);
  transition: .15s; font-family: inherit;
}
.input::placeholder { color: #4f6a50; }
.input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,134,255,.15); }
textarea.input { min-height: 110px; resize: vertical; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f9670' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* ─────────── Badges ─────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-primary { background: var(--green-soft); color: var(--green); }
.badge-success { background: var(--green-soft); color: var(--green); }
.badge-warning { background: var(--gold-soft); color: var(--gold2); }
.badge-error   { background: rgba(255,82,82,.14); color: #ff7b7b; }
.badge-danger  { background: rgba(255,77,141,.14); color: var(--danger); }
.badge-muted   { background: rgba(255,255,255,.06); color: var(--muted); }
.badge-live { background: var(--green-soft); color: var(--green); }
.badge-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ════════════════════════════════════════════════════════
   AUTH SCREEN
   ════════════════════════════════════════════════════════ */
#auth-screen {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; display: block;
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(46,134,255,.10) 0%, transparent 60%),
    radial-gradient(760px 600px at 92% 96%, rgba(240,192,64,.07) 0%, transparent 60%),
    radial-gradient(1100px 560px at 80% -10%, #0a1f10 0%, var(--bg) 60%);
}
/* Ambient drifting glow orbs */
#auth-screen::before, #auth-screen::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(28px);
}
#auth-screen::before {
  width: 460px; height: 460px; left: -130px; top: -120px;
  background: radial-gradient(circle, rgba(46,134,255,.20), transparent 70%);
  animation: orbDrift 16s ease-in-out infinite;
}
#auth-screen::after {
  width: 520px; height: 520px; right: -150px; bottom: -160px;
  background: radial-gradient(circle, rgba(240,192,64,.14), transparent 70%);
  animation: orbDrift 20s ease-in-out infinite reverse;
}
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,30px) scale(1.12); }
}

/* ── CRDPRO official partner badge (top-left of login) ── */
.partner-badge { position: absolute; top: 18px; left: 24px; z-index: 4; width: 144px; color: #f5a623; pointer-events: none; }
.partner-mark { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 7px rgba(245,166,35,.4)); }
.partner-label { margin-top: 5px; text-align: center; font-size: 8px; font-weight: 700; letter-spacing: 3.5px; color: #f5a623; white-space: nowrap; }
@media (max-width: 600px) { .partner-badge { width: 116px; top: 12px; left: 14px; } .partner-label { font-size: 7px; letter-spacing: 2.5px; } }

/* ── Landing (cashgen-style hero) ── */
.landing { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 30px; padding: 0 48px; }
.landing-left { min-width: 0; }
/* Staggered entrance for every direct child */
.landing-left > * { animation: landingRise .7s cubic-bezier(.16,.84,.44,1) both; }
.landing-left > *:nth-child(1) { animation-delay: .05s; }
.landing-left > *:nth-child(2) { animation-delay: .13s; }
.landing-left > *:nth-child(3) { animation-delay: .21s; }
.landing-left > *:nth-child(4) { animation-delay: .29s; }
.landing-left > *:nth-child(5) { animation-delay: .37s; }
.landing-left > *:nth-child(6) { animation-delay: .45s; }
.landing-left > *:nth-child(7) { animation-delay: .53s; }
.landing-left > *:nth-child(8) { animation-delay: .61s; }
@keyframes landingRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.landing-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.landing-brand img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(46,134,255,.4)); }
.landing-brand span { font-size: 18px; font-weight: 800; color: #fff; }
.landing-brand b { color: var(--green); font-weight: 800; }
/* Live badge pill */
.landing-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: linear-gradient(180deg, rgba(46,134,255,.10), rgba(46,134,255,.04));
  border: 1px solid var(--green-soft2); box-shadow: 0 0 24px rgba(46,134,255,.12) inset;
}
.landing-badge b { color: var(--green); font-weight: 800; }
.landing-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(46,134,255,.6); animation: badgePulse 1.8s infinite; }
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 rgba(46,134,255,.5); } 70% { box-shadow: 0 0 0 7px rgba(46,134,255,0); } 100% { box-shadow: 0 0 0 0 rgba(46,134,255,0); } }
.landing-title { font-size: 44px; line-height: 1.08; font-weight: 800; color: var(--text-strong); letter-spacing: -.6px; }
.landing-title span {
  background: linear-gradient(110deg, var(--green) 0%, #7db8ff 45%, var(--gold2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(46,134,255,.35));
}
.landing-desc { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 18px 0 22px; max-width: 460px; }
/* Feature chips */
.landing-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.landing-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); transition: .18s ease;
}
.landing-chip:hover { border-color: var(--green-soft2); color: var(--text-strong); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.landing-chip-ico { font-size: 14px; line-height: 1; }
.landing-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.landing-actions .btn { width: auto; padding: 12px 22px; }
.landing-actions .btn-primary { position: relative; overflow: hidden; }
.landing-actions .btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); animation: btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine { 0%,55% { left: -120%; } 80%,100% { left: 140%; } }
/* Trust stats */
.landing-stats { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.landing-stat-num { font-size: 22px; font-weight: 800; color: var(--text-strong); letter-spacing: -.4px; }
.landing-stat-lbl { font-size: 11.5px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
.landing-stat-div { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--border), transparent); }
.landing-foot { margin-top: 28px; font-size: 12.5px; color: var(--muted); }
.landing-foot a { color: var(--green); font-weight: 600; }
.landing-right { position: relative; height: 100vh; }

/* ── Tilted scrolling collage ── */
.collage { position: absolute; top: 50%; left: 50%; width: 132%; height: 150%; transform: translate(-50%, -50%) rotate(-18deg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.collage-col { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.collage-col.up { animation-name: collageUp; animation-timing-function: linear; animation-iteration-count: infinite; }
.collage-col.down { animation-name: collageDown; animation-timing-function: linear; animation-iteration-count: infinite; }
.collage-col img { width: 100%; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0,0,0,.55); display: block; }
@keyframes collageUp { from { transform: translateY(0); } to { transform: translateY(-33.34%); } }
@keyframes collageDown { from { transform: translateY(-33.34%); } to { transform: translateY(0); } }

/* ── Login modal ── */
.auth-modal-back { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(120% 130% at 50% 0%, rgba(0,42,20,.55) 0%, rgba(0,0,0,.74) 70%); backdrop-filter: blur(8px); }
.auth-modal-back.show { display: flex; animation: modalBackIn .25s ease; }
@keyframes modalBackIn { from { opacity: 0; } to { opacity: 1; } }
.auth-modal-back .auth-card { position: relative; max-width: 430px; padding-top: 34px; overflow: hidden; animation: modalPop .36s cubic-bezier(.2,.9,.3,1.25); border-color: #243528; box-shadow: 0 30px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(46,134,255,.06), 0 -1px 30px rgba(46,134,255,.10) inset; }
.auth-modal-back .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; pointer-events: none; background: radial-gradient(130% 90px at 50% 0%, rgba(46,134,255,.20), transparent 72%); }
@keyframes modalPop { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
.auth-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 15px; line-height: 1; transition: .16s ease; }
.auth-modal-close:hover { color: var(--text-strong); background: var(--hover); border-color: #2a3d2c; transform: rotate(90deg); }
.auth-toplogo-modal { width: 78px; height: 78px; margin: 0 auto 4px; position: relative; z-index: 1; }
/* Secure-login trust line under the title */
.auth-secure { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-soft2); }
.auth-secure svg { stroke: var(--green); }

@media (max-width: 900px) {
  .landing { grid-template-columns: 1fr; padding: 0 24px; text-align: center; }
  .landing-right { display: none; }
  .landing-brand { justify-content: center; }
  .landing-badge { margin-left: auto; margin-right: auto; }
  .landing-desc { margin-left: auto; margin-right: auto; }
  .landing-chips { justify-content: center; }
  .landing-actions { justify-content: center; }
  .landing-stats { justify-content: center; }
  .landing-title { font-size: 34px; }
}
#auth-snow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.auth-wrap { position: relative; z-index: 2; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; }
.auth-toplogo {
  width: 150px; height: 150px; margin-bottom: 18px; position: relative; z-index: 3;
  animation: authLogoFloat 3.4s ease-in-out infinite;
}
.auth-toplogo img { width: 100%; height: 100%; object-fit: contain; animation: authLogoGlow 2.8s ease-in-out infinite; }
@keyframes authLogoFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-14px) rotate(4deg); }
}
@keyframes authLogoGlow {
  0%,100% { filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(46,134,255,.35)); }
  50%     { filter: drop-shadow(0 10px 20px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(46,134,255,.7)); }
}
.auth-card { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 34px 32px; text-align: center; }
.auth-tagline { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
/* Sliding brand logos */
.auth-marquee { overflow: hidden; margin: 16px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.auth-marquee-track { display: flex; align-items: center; gap: 12px; width: max-content; animation: authMarquee 28s linear infinite; }
.auth-marquee:hover .auth-marquee-track { animation-play-state: paused; }
.auth-shot { flex-shrink: 0; width: 120px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.auth-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes authMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.auth-foot-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.auth-foot-link:hover { filter: brightness(1.15); }
.auth-title { font-size: 22px; font-weight: 800; color: var(--text-strong); }
.auth-title span { color: var(--green); text-shadow: 0 0 18px rgba(46,134,255,.5); }
.auth-sub { color: var(--muted); font-size: 14px; margin: 14px 0 20px; }
/* Connected step timeline */
.auth-steps { position: relative; text-align: left; }
.auth-steps::before { content: ''; position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--green-soft2), var(--border)); z-index: 0; }
.auth-step { display: flex; gap: 13px; align-items: flex-start; text-align: left; padding: 7px 0; position: relative; z-index: 1; }
.auth-step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--card); color: var(--green); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--green-soft2); box-shadow: 0 0 0 4px var(--card), 0 0 16px rgba(46,134,255,.22); }
.auth-step-txt { font-size: 13.5px; color: var(--text); padding-top: 4px; }
.auth-step-txt b { color: var(--text-strong); }
.btn-telegram { background: linear-gradient(135deg, #2aa7e0 0%, #1c8fc9 100%); color: #fff; box-shadow: 0 4px 16px rgba(34,158,217,.32); }
.btn-telegram:hover { filter: brightness(1.06); box-shadow: 0 6px 22px rgba(34,158,217,.45); }
/* Trust footer line */
.auth-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font-size: 11.5px; color: var(--muted); }
.auth-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* Patrick login modal — compact */
.auth-modal-back .auth-card.pat-card { max-width: 360px; padding: 18px 22px 22px; padding-top: 92px; overflow: visible; }
.pat-hero { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; z-index: 2; pointer-events: none; }
.pat-halo { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(46,134,255,.55) 0%, rgba(46,134,255,.18) 45%, transparent 72%); filter: blur(6px); }
.pat-portrait { position: relative; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); animation: patFloat 4.2s ease-in-out infinite; }
@keyframes patFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pat-sparkle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold, #f5c451); box-shadow: 0 0 8px rgba(245,196,81,.9); opacity: .85; animation: patTwinkle 2.4s ease-in-out infinite; }
.pat-sparkle-1 { top: 14px; left: 10px; animation-delay: 0s; }
.pat-sparkle-2 { top: 30px; right: 8px; animation-delay: .6s; }
.pat-sparkle-3 { bottom: 26px; left: 4px; animation-delay: 1.1s; }
.pat-sparkle-4 { bottom: 18px; right: 12px; animation-delay: 1.7s; }
@keyframes patTwinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.pat-ribbon { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; margin: 4px 0 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(245,196,81,.10), rgba(46,134,255,.10), rgba(245,196,81,.10)); border: 1px solid rgba(245,196,81,.28); color: #f5c451; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.pat-ribbon svg { color: #f5c451; }
.pat-title { font-size: 20px; margin-top: 2px; }
.pat-tag { font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; }
.pat-secure { font-size: 10.5px; padding: 4px 10px; }
.pat-sub { font-size: 12.5px; margin: 10px 0 14px; }
.pat-steps { }
.pat-steps .auth-step { padding: 5px 0; gap: 11px; }
.pat-steps .auth-step-num { width: 26px; height: 26px; position: relative; font-size: 12px; }
.pat-num-clover { position: absolute; inset: 4px; color: var(--green); opacity: .35; pointer-events: none; }
.pat-num > span { position: relative; z-index: 1; }
.pat-steps .auth-step-txt { font-size: 12.5px; padding-top: 3px; }
.pat-cta { margin-top: 14px !important; padding: 11px 16px; font-size: 14px; }
.pat-trust { margin-top: 12px; font-size: 10.5px; }
.auth-modal-back .auth-card.pat-card .auth-modal-close { top: 10px; right: 10px; }

/* Verification code field */
.auth-code-wrap { margin: 20px 0 14px; }
.auth-code-input { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 12px; text-indent: 12px; text-transform: uppercase; padding: 16px 12px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--r-md); }
.auth-code-input::placeholder { letter-spacing: 8px; color: #3c5440; font-weight: 700; }
.auth-code-input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(46,134,255,.16); }
.auth-status { margin-top: 18px; font-size: 13px; color: var(--muted); min-height: 20px; }
.auth-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════════════════ */
#app { display: none; min-height: 100vh; }
#app.ready { display: block; }

.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--navy); color: var(--text); display: flex; flex-direction: column; z-index: 60; border-right: 1px solid var(--border); transition: transform .25s ease; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px; }
.sidebar-brand-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.sidebar-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand-name { font-size: 16px; font-weight: 800; color: #fff; line-height: 1; }
.sidebar-brand-name span { color: var(--green); }
.sidebar-brand-sub { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 12px; }
.sidebar-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 14px 12px 6px; font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; margin-bottom: 2px; transition: .14s; }
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.nav-item:hover { background: var(--hover); color: #fff; }
.nav-item.active { background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px rgba(46,134,255,.25); }
.nav-item.active svg { color: var(--green); }
.nav-item .nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.sidebar-foot { padding: 14px; border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; }
.sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; }
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-bal { font-size: 12px; color: var(--green); font-weight: 700; }
.sidebar-logout { background: var(--surface); border: none; color: var(--muted); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.sidebar-logout:hover { background: rgba(255,77,141,.18); color: #ff9ec1; }

.topbar { position: sticky; top: 0; z-index: 40; height: 62px; background: rgba(6,14,7,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; padding: 0 24px; }
.topbar-toggle { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--text); }
.topbar-title { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.topbar-spacer { flex: 1; }
.topbar-balance { display: flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green); padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }

#app-snow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.main { margin-left: 0; min-height: calc(100vh - 60px); position: relative; z-index: 1; }
.content { padding: 24px; max-width: 1240px; margin: 0 auto; }

/* ─────────── Top navbar ─────────── */
.navbar { position: sticky; top: 0; z-index: 60; background: var(--navy); border-bottom: 1px solid var(--border); }
.navbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(46,134,255,.25) 20%, var(--green) 45%, #7CFFB0 50%, var(--green) 55%, rgba(46,134,255,.25) 80%, transparent 100%);
  background-size: 220% 100%;
  box-shadow: 0 0 10px rgba(46,134,255,.55);
  animation: navLed 3.2s linear infinite;
}
@keyframes navLed { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.navbar-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 60px; }
.navbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.navbar-logo { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: navLogoFloat 3.2s ease-in-out infinite; }
.navbar-logo img { width: 100%; height: 100%; object-fit: contain; animation: navLogoGlow 2.8s ease-in-out infinite; }
@keyframes navLogoFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes navLogoGlow {
  0%,100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(46,134,255,.3)); }
  50%     { filter: drop-shadow(0 3px 7px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(46,134,255,.7)); }
}
.navbar-brandname { font-weight: 800; color: #fff; font-size: 15px; white-space: nowrap; }
.navbar-brandname span { color: var(--green); }
.navbar-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--text); padding: 8px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; position: relative; white-space: nowrap; }
.nav-link svg { width: 16px; height: 16px; }
.nav-link:hover { background: var(--hover); color: #fff; }
.nav-link.active { color: var(--green); }
.nav-link.active::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -11px; height: 2px; background: var(--green); border-radius: 2px; }
.nav-link-disabled { color: var(--muted); opacity: .75; }
.nav-link-disabled:hover { background: transparent; color: var(--muted); cursor: not-allowed; }
.nav-indispo { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--error); background: rgba(255,82,82,.14); border: 1px solid rgba(255,82,82,.3); padding: 1px 5px; border-radius: 999px; }
.navbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.navbar-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; }
.navbar-icon:hover { background: var(--hover); color: #fff; }
.navbar-profile { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--text); }
.navbar-profile:hover { border-color: var(--green); }
.navbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 700; flex-shrink: 0; }
.navbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.navbar-profile-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.navbar-profile-name { font-size: 12.5px; font-weight: 700; color: #fff; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar-profile-bal { font-size: 11px; color: var(--green); font-weight: 600; }
.navbar-burger { display: none; width: 38px; height: 38px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text); align-items: center; justify-content: center; }
.navbar-menu-back { display: none; }

/* ─────────── Notifications (bell + dropdown) ─────────── */
.navbar-notif { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--navy); pointer-events: none; }
.notif-back { position: fixed; inset: 0; z-index: 65; display: none; }
.notif-back.show { display: block; }
.notif-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 360px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 70; display: none; overflow: hidden; }
.notif-panel.show { display: block; animation: fade .15s ease; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 800; color: var(--text-strong); font-size: 14px; }
.notif-clear { background: none; border: none; color: var(--green); font-size: 12px; font-weight: 600; }
.notif-clear:hover { filter: brightness(1.15); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(46,134,255,.06); }
.notif-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); }
.notif-body { min-width: 0; flex: 1; }
.notif-title { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.notif-text { font-size: 12.5px; color: var(--text); margin-top: 2px; line-height: 1.45; word-break: break-word; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 4px; }
.notif-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ─────────── Dashboard head ─────────── */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.dash-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.dash-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.dash-title { font-size: 26px; font-weight: 800; color: var(--text-strong); letter-spacing: -.4px; }
.dash-head-btn { width: auto; }

/* Staggered entrance for home cards */
.home-top > * { animation: landingRise .6s cubic-bezier(.16,.84,.44,1) both; }
.home-top > *:nth-child(1) { animation-delay: .04s; }
.home-top > *:nth-child(2) { animation-delay: .12s; }
.home-top > *:nth-child(3) { animation-delay: .20s; }

/* ─────────── Home top row ─────────── */
.home-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.welcome-card { background: linear-gradient(100deg, rgba(8,17,9,.95) 0%, rgba(8,17,9,.72) 45%, rgba(6,30,16,.45) 100%), url('/banner-home.png') center/cover no-repeat, var(--card); border: 1px solid #24382a; border-radius: var(--r-md); padding: 24px; display: flex; gap: 16px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.welcome-card::before { content: ''; position: absolute; right: -70px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(46,134,255,.18), transparent 70%); pointer-events: none; animation: orbDrift 13s ease-in-out infinite; }
.welcome-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--green), var(--gold2)); box-shadow: 0 0 16px rgba(46,134,255,.5); }
.welcome-main { flex: 1; min-width: 0; position: relative; z-index: 1; }
.welcome-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-soft2); }
.welcome-greet { font-size: 22px; font-weight: 800; color: var(--text-strong); letter-spacing: -.3px; }
.welcome-greet span { color: var(--green); }
.welcome-sub { color: var(--text); font-size: 13px; margin: 6px 0 18px; max-width: 360px; }
.welcome-bal-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.welcome-bal { font-size: 36px; font-weight: 800; margin: 2px 0 18px; background: linear-gradient(120deg, #7db8ff, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(46,134,255,.3)); }
.welcome-btn { width: auto; }
.welcome-illus { width: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.welcome-illus img { width: 100%; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(46,134,255,.3)); transform: rotate(-8deg); animation: cardFloat 5s ease-in-out infinite; }
@keyframes cardFloat { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-10px); } }
.stat-chart { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: .18s ease; }
.stat-chart:hover { transform: translateY(-3px); border-color: #294a31; box-shadow: var(--shadow-md); }
.stat-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-chart-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--green-soft); border: 1px solid var(--green-soft2); }
.stat-chart-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.stat-chart-val { font-size: 30px; font-weight: 800; color: var(--text-strong); margin-top: 2px; letter-spacing: -.5px; }
.stat-chart-spark { margin-top: auto; padding-top: 10px; position: relative; }
.stat-chart-spark svg { width: 100%; display: block; }
.tc-vline { position: absolute; top: 10px; width: 1px; height: 56px; background: rgba(90,169,255,.45); pointer-events: none; }
.tc-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #5aa9ff; border: 2px solid var(--card); transform: translate(-50%, calc(-50% + 10px)); pointer-events: none; box-shadow: 0 0 8px rgba(90,169,255,.8); }
.tc-tip { position: absolute; top: 4px; transform: translateY(-100%); background: #04130a; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 11px; line-height: 1.35; color: var(--text-strong); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); z-index: 5; }
.tc-tip span { color: var(--muted); }
.stat-chart-btn { margin-top: 14px; }

/* ─────────── Restock tiers / progress (Cashgen style) ─────────── */
.rst-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.rst-card-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--green); flex: 1; min-width: 0; }
.rst-card-title svg { width: 18px; height: 18px; flex-shrink: 0; }
.rst-card-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rst-time { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rst-promo { position: absolute; top: -9px; left: 14px; background: var(--green); color: #06230f; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; box-shadow: 0 3px 8px rgba(46,134,255,.4); }
.rst-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tier { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }
.tier::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.tier.classic::before { background: #6f9670; }
.tier.gold::before { background: var(--gold2); }
.tier.biz::before { background: #5aa9ff; }
.tier.inf::before { background: var(--green); }
.rst-ref-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.rst-ref { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 4px 9px; border-radius: 7px; }
.rst-vendor { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.rst-prog-line { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.rst-prog-line span:first-child { color: var(--muted); }
.rst-prog-line span:last-child { font-weight: 700; }
.rst-prog + .rst-prog { margin-top: 10px; }
.rst-access { margin-top: 14px; }
.page { display: none; animation: fade .25s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 22px; font-weight: 800; color: var(--text-strong); }
.page-head p { color: var(--muted); font-size: 14px; margin-top: 2px; }

/* ─────────── Partners directory ─────────── */
.partner-intro { color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 640px; margin: -6px 0 20px; }
.partner-grid { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px 10px; }
.partner-ad { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; }
.partner-ad:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #34614a; }
.partner-ad.featured { border-color: rgba(240,192,64,.5); box-shadow: 0 0 0 1px rgba(240,192,64,.2), var(--shadow-sm); }
.partner-banner-img { display: block; width: 100%; height: auto; }
.partner-banner-ph { min-height: 96px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(46,134,255,.18), rgba(240,192,64,.07) 70%, transparent), #0e1f15; color: var(--muted); font-weight: 800; font-size: 15px; }

/* Admin — banner reorder list (drag & drop) */
.ptr-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.ptr-hint .ic { width: 15px; height: 15px; }
.ptr-item { touch-action: pan-y; }
.ptr-item.dragging { opacity: .6; box-shadow: var(--shadow-lg); position: relative; z-index: 5; }
.ptr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ptr-handle { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 34px; color: var(--muted); cursor: grab; touch-action: none; border-radius: 7px; }
.ptr-handle:active { cursor: grabbing; background: rgba(255,255,255,.05); }
.ptr-thumb { flex-shrink: 0; width: 84px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: #0e1f15; }
.ptr-thumb-ph { display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.ptr-meta { flex: 1; min-width: 0; }
.ptr-meta .rst-item-name { display: flex; align-items: center; gap: 6px; }
.ptr-link-txt { font-size: 11.5px; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bank Cards promo banner (one partner banner set from admin) */
.sc-shop-banner { display: block; margin: 0 0 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.sc-shop-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sc-shop-banner img { display: block; width: 100%; height: auto; }
.sc-binreq-inline { margin-left: auto; }
@media (max-width: 640px) { .sc-binreq-inline { margin-left: 0; } }
.partner-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); animation: partnerFloat 5s ease-in-out infinite; transition: transform .28s cubic-bezier(.2,.7,.3,1.2), box-shadow .28s ease, border-color .28s ease; }
.partner-card:nth-child(2n) { animation-delay: -1.7s; }
.partner-card:nth-child(3n) { animation-delay: -3.3s; }
.partner-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); border-color: #34614a; animation-play-state: paused; }
.partner-card.featured { border-color: rgba(240,192,64,.5); box-shadow: 0 0 0 1px rgba(240,192,64,.2), var(--shadow-md); }
@keyframes partnerFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.partner-banner { height: 98px; background: linear-gradient(135deg, #123222, #0c2417 60%, #0a1a12); background-size: cover; background-position: center; background-repeat: no-repeat; }
.partner-banner.no-img { background: linear-gradient(135deg, rgba(46,134,255,.20), rgba(240,192,64,.07) 70%, transparent), #0e1f15; }
.partner-card.featured .partner-banner.no-img { background: linear-gradient(135deg, rgba(240,192,64,.24), rgba(46,134,255,.10) 70%, transparent), #14170f; }
.partner-inner { position: relative; padding: 0 18px 18px; display: flex; flex-direction: column; flex: 1; }
.partner-logo { width: 64px; height: 64px; border-radius: 16px; background: var(--surface); border: 3px solid var(--card); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 25px; font-weight: 800; color: var(--muted); margin-top: -32px; box-shadow: var(--shadow-md); }
.partner-logo img { width: 100%; height: 100%; object-fit: cover; }
.partner-name { font-size: 16.5px; font-weight: 800; color: var(--text-strong); margin-top: 12px; }
.partner-cat { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: 6px; margin-top: 8px; }
.partner-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 11px 0 16px; word-break: break-word; flex: 1; }
.partner-btn { width: 100%; }
.partner-featured { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #271c00; background: linear-gradient(135deg, var(--gold2), var(--gold)); padding: 3px 9px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.partner-featured svg { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) { .partner-card { animation: none; } }

/* ─────────── Announcements board (Home) ─────────── */
.ann-board { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.ann-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.ann-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ann-ic svg { width: 19px; height: 19px; }
.ann-main { min-width: 0; flex: 1 1 auto; }
.ann-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ann-title { font-size: 15px; font-weight: 800; color: var(--text-strong); }
.ann-body { font-size: 13.5px; color: var(--text); margin-top: 6px; line-height: 1.6; word-break: break-word; }
.ann-body a { color: var(--green); text-decoration: underline; word-break: break-all; }
.ann-btn { width: auto; margin-top: 12px; }
.ann-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gold2); }
.ann-pin svg { width: 12px; height: 12px; }
.ann-t-info    { border-left-color: var(--green); }
.ann-t-info    .ann-ic { background: var(--green-soft); color: var(--green); }
.ann-t-warning { border-left-color: var(--gold2); }
.ann-t-warning .ann-ic { background: var(--gold-soft); color: var(--gold2); }
.ann-t-link    { border-left-color: #4aa3ff; }
.ann-t-link    .ann-ic { background: rgba(74,163,255,.14); color: #6fb7ff; }
.ann-t-restock { border-left-color: var(--green); }
.ann-t-restock .ann-ic { background: var(--green-soft); color: var(--green); }
.ann-pinned { border-color: rgba(240,192,64,.4); box-shadow: 0 0 0 1px rgba(240,192,64,.14), var(--shadow-sm); }

/* ─────────── Hero ─────────── */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 30px 28px; color: #fff;
  background: linear-gradient(120deg, rgba(3,20,10,.92) 0%, rgba(4,40,20,.78) 55%, rgba(0,90,40,.55) 100%), url('/banner-home.png') center/cover no-repeat, #04130a;
  border: 1px solid var(--border); box-shadow: var(--shadow-md); margin-bottom: 22px;
}
.hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(46,134,255,.1); }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(46,134,255,.16); padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 14px; color: var(--green); }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.hero h2 { font-size: 26px; font-weight: 800; position: relative; }
.hero p { opacity: .85; margin-top: 6px; position: relative; }
.hero-actions { display: flex; gap: 10px; margin-top: 20px; position: relative; flex-wrap: wrap; }
.hero .btn { width: auto; }
.hero .btn-white { background: linear-gradient(135deg, var(--green), var(--green2)); color: #06230f; }
.hero .btn-glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }

/* ─────────── Stat cards ─────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-sm); }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; }
.stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.stat-icon.blue { background: var(--green-soft); }
.stat-icon.green { background: var(--green-soft); }
.stat-icon.orange { background: var(--gold-soft); }
.stat-icon.pink { background: rgba(255,77,141,.14); }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 14px; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--text-strong); margin-top: 2px; }
.stat-sub { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 6px; opacity: .7; letter-spacing: .3px; }

.section-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: .5px; margin: 26px 0 14px; }
.section-title::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--green), var(--green2)); box-shadow: 0 0 10px rgba(46,134,255,.5); }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

/* ─────────── Restock cards ─────────── */
.restock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rst-card { position: relative; background: linear-gradient(180deg, rgba(8,17,9,.93) 0%, rgba(8,17,9,.88) 60%, rgba(8,17,9,.95) 100%), url('/CARDBACKGROUND.png') center/cover no-repeat, var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: .18s; }
.rst-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #294a31; }
.rst-card-banner { background: linear-gradient(120deg, #07140b, #0e2614); padding: 16px 18px; color: #fff; position: relative; border-bottom: 1px solid var(--border); }
.rst-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--green); margin-bottom: 8px; }
.rst-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.rst-name { font-size: 17px; font-weight: 800; }
.rst-sub { font-size: 12px; opacity: .75; margin-top: 3px; }
.rst-body { padding: 16px 18px; }
.rst-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rst-stock-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.rst-stock-nums { font-weight: 700; }
.rst-stock-sold { color: var(--muted); margin-left: 8px; }
.rst-bar { height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.rst-bar-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.rst-bar-fill.high { background: var(--green); }
.rst-bar-fill.medium { background: var(--gold2); }
.rst-bar-fill.low { background: var(--error); }
.rst-urgency { font-size: 12px; font-weight: 600; margin: 8px 0 14px; }
.rst-countries { font-size: 16px; line-height: 1.5; margin-bottom: 14px; word-break: break-word; }

/* ─────────── Steps ─────────── */
.steps { display: flex; gap: 8px; margin-bottom: 18px; max-width: 520px; }
.step { flex: 1; height: 4px; border-radius: 999px; background: var(--surface); }
.step.active { background: var(--green); }
.step.done { background: var(--green2); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.info-k { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.info-v { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-top: 3px; word-break: break-word; }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.order-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.order-row:last-child { border-bottom: none; }
.order-key { color: var(--muted); }
.order-val { font-weight: 700; color: var(--text-strong); }
.alert { padding: 12px 14px; border-radius: var(--r); font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.alert-warn { background: var(--gold-soft); color: #f3d27a; border: 1px solid rgba(240,192,64,.25); }
.alert-info { background: var(--green-soft); color: #8fc4ff; border: 1px solid rgba(46,134,255,.25); }
.alert-error { background: rgba(255,82,82,.12); color: #ff9b9b; border: 1px solid rgba(255,82,82,.25); }
.alert-success { background: var(--green-soft); color: #8fc4ff; border: 1px solid rgba(46,134,255,.25); }

/* ─────────── Shop / Bank Cards — card browser ─────────── */
.sc-filters { padding: 20px; margin-bottom: 16px; }
.sc-filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.sc-filter { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; position: relative; }
.sc-filter-price { min-width: 170px; }
.sc-filter-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.sc-input-sm { height: 40px; font-size: 13px; padding: 0 12px; }
.sc-input-xs { height: 40px; font-size: 13px; padding: 0 10px; width: 70px; flex: 1; }
.sc-price-range { display: flex; align-items: center; gap: 6px; }
.sc-price-sep { color: var(--muted); font-size: 14px; }
.sc-filter-actions { display: flex; gap: 8px; margin-top: 14px; }
.sc-filter-btn { height: 40px; white-space: nowrap; flex: 0 0 auto; padding: 0 22px; width: auto; }

/* Custom dropdown buttons */
.sc-dd-wrap { position: relative; }
.sc-dd-btn { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s; text-align: left; white-space: nowrap; overflow: hidden; }
.sc-dd-btn:hover, .sc-dd-btn.sc-dd-active { border-color: var(--green); }
.sc-dd-btn span { overflow: hidden; text-overflow: ellipsis; }
.sc-dd-caret { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; transition: transform .2s; }
.sc-dd-panel.open ~ .sc-dd-btn .sc-dd-caret,
.sc-dd-wrap:has(.sc-dd-panel.open) .sc-dd-caret { transform: rotate(180deg); }
.sc-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; min-width: 220px; max-height: 320px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; }
.sc-dd-panel.open { display: flex; }
.sc-dd-panel-sm { min-width: 140px; }
.sc-dd-search { margin: 8px 8px 4px; height: 34px; font-size: 12px; border-radius: 6px; flex: 0 0 auto; }
.sc-dd-list { overflow-y: auto; max-height: 260px; padding: 4px; }
.sc-dd-item { padding: 9px 12px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .1s; }
.sc-dd-item:hover { background: var(--green-soft); }
.sc-dd-item-active { background: var(--green-soft); color: var(--green); font-weight: 700; }
.sc-dd-item .cc-flag { flex: 0 0 auto; }

/* Results bar */
.sc-results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 0 2px; }
.sc-results-bar #sc-results-text { font-size: 13px; color: var(--muted); }
.sc-results-bar .sc-pageinfo { font-size: 12px; color: var(--muted); background: var(--surface); padding: 4px 10px; border-radius: 6px; }

/* Card grid */
.sc-grid { display: flex; flex-direction: column; gap: 6px; }
.sc-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--muted); font-size: 14px; }
.sc-empty { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column; }
.sc-empty .ic { width: 32px; height: 32px; }

/* Row layout */
.sc-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); display: flex; align-items: center; gap: 16px; padding: 10px 16px; transition: border-color .15s, background .15s; }
.sc-row:hover { border-color: #294a31; background: var(--surface); }
.sc-row-sel { border-color: var(--green); background: rgba(46,134,255,.04); }

.sc-row-img { width: 64px; height: 40px; object-fit: contain; border-radius: 6px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

.sc-row-bin { flex: 0 0 140px; display: flex; flex-direction: column; gap: 3px; }
.sc-row-bin-num { font-family: ui-monospace, monospace; font-weight: 800; font-size: 15px; color: var(--text-strong); letter-spacing: 1.2px; }
.sc-row-bin-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.sc-type-pill { font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; }
.sc-type-credit { background: rgba(46,134,255,.15); color: var(--green); }
.sc-type-debit { background: rgba(200,151,10,.15); color: var(--gold); }

.sc-row-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-row-k { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.sc-row-v { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-row-cc { display: flex; align-items: center; gap: 6px; }
.sc-row-cc .cc-flag { flex-shrink: 0; }
.sc-row-bank { flex: 1.3; }
.sc-row-country { flex: 1; }
.sc-row-refund { flex: 0 0 130px; }
.sc-row-fields { flex: 1 1 auto; min-width: 0; }
.sc-fields { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.sc-fd { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.sc-fd .ic { width: 11px; height: 11px; }
.sc-fd-y { color: var(--green); }
.sc-fd-n { color: #ff5252; opacity: .7; }

.sc-ref { font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.sc-ref .ic { width: 12px; height: 12px; }
.sc-ref-yes { background: rgba(46,134,255,.15); color: var(--green); }
.sc-ref-no { background: rgba(255,82,82,.12); color: #ff5252; }
.sc-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-meta-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; letter-spacing: .2px; }
.sc-meta-tag .ic { width: 11px; height: 11px; }
.sc-meta-seller { background: rgba(99,102,241,.15); color: #818cf8; }
.sc-meta-listed { background: rgba(251,191,36,.12); color: #fbbf24; }
.sc-meta-exp { background: rgba(46,134,255,.12); color: #2E86FF; }
.sc-row-seller { border-left: 2px solid rgba(99,102,241,.5); }

.sc-row-price { flex: 0 0 80px; font-size: 18px; font-weight: 800; color: var(--primary); text-align: right; }
.sc-row-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.sc-row-actions .btn { width: auto; white-space: nowrap; }

.sc-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 0 6px; }
.sc-pager .btn { width: auto; display: flex; align-items: center; gap: 4px; }
.sc-pageinfo-bottom { font-size: 13px; color: var(--muted); }

@media (max-width: 780px) {
  /* Filters — 2-col grid instead of one huge stack */
  .sc-filters { padding: 14px; }
  .sc-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-filter { min-width: 0; }
  .sc-filter-price { grid-column: 1 / -1; }
  .sc-dd-panel { min-width: 0; }
  .sc-filter-actions { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .sc-filter-btn { flex: 1 1 auto; text-align: center; justify-content: center; padding: 0 12px; font-size: 12px; height: 36px; }
  .sc-binreq-inline { font-size: 11px; }
  /* Card rows */
  .sc-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .sc-row-img { width: 52px; height: 33px; }
  .sc-row-bin { flex: 0 0 auto; }
  .sc-row-cell { flex: 1 1 40%; }
  .sc-row-refund { flex: 0 0 auto; }
  .sc-row-price { flex: 0 0 auto; }
}

/* Phone — clean stacked card */
@media (max-width: 600px) {
  .sc-grid { gap: 10px; }
  .sc-filter-row { grid-template-columns: 1fr 1fr; }
  .sc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "img bin price"
      "stat stat stat"
      "fields fields fields"
      "add add add";
    column-gap: 12px; row-gap: 0;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .sc-row-img { grid-area: img; width: 42px; height: 27px; }
  .sc-row-bin { grid-area: bin; flex: initial; gap: 2px; }
  .sc-row-bin-num { font-size: 15px; letter-spacing: .5px; }
  .sc-row-bin-sub { font-size: 10px; }
  .sc-row-price { grid-area: price; flex: initial; font-size: 18px; text-align: right; }
  .sc-row-bank, .sc-row-country { display: none; }
  .sc-row-refund { grid-area: stat; flex: initial; }
  .sc-row-fields { grid-area: fields; flex: initial; }
  .sc-row-cell {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 8px 0; border-top: 1px solid var(--border); gap: 10px; flex: initial;
  }
  .sc-row-k { font-size: 10px; }
  .sc-row-v { font-size: 12px; text-align: right; flex: 1; min-width: 0; }
  .sc-row-cc { justify-content: flex-end; }
  .sc-row-actions { grid-area: add; flex: initial; margin-top: 10px; display: flex; gap: 6px; }
  .sc-row-actions .btn { flex: 1; padding: 10px; font-size: 13px; }
  .sc-buy-wrap { flex: 1; }
  .sc-buy-wrap .btn { width: 100%; }
  .sc-buy-menu { left: 0; right: 0; min-width: auto; }
  .sc-fd { font-size: 9px; }
  .sc-ref { font-size: 9px; padding: 2px 6px; }
}

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.pill { flex: 1; min-width: 70px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px; font-weight: 700; color: var(--text); transition: .14s; }
.pill:hover { border-color: var(--green); }
.pill.sel { background: var(--green-soft); border-color: var(--green); color: var(--green); }
/* "HOT" badge on the most-used amount */
.pill-hot { position: relative; overflow: visible; }
.pill-badge { position: absolute; top: -8px; right: -6px; font-size: 9px; font-weight: 800; letter-spacing: .5px; color: #271c00; background: linear-gradient(135deg, var(--gold2), var(--gold)); padding: 2px 6px; border-radius: 999px; box-shadow: 0 3px 8px rgba(200,151,10,.4); animation: pillHotPulse 1.8s ease-in-out infinite; }
@keyframes pillHotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .pill-badge { animation: none; } }

.crypto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.crypto-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); transition: .14s; color: var(--text); }
.crypto-btn:hover { border-color: var(--green); }
.crypto-btn.selected { border-color: var(--green); background: var(--green-soft); }
.crypto-ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 16px; }
.crypto-ico.btc { background: #f7931a; } .crypto-ico.ltc { background: #345d9d; } .crypto-ico.eth { background: #627eea; }
.crypto-ico-img { width: 36px; height: 36px; object-fit: contain; }
.crypto-name { font-size: 13px; font-weight: 600; }

/* Deposit — crypto cards (Cashgen style) */
.dep-crypto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* ─── Floating leprechaun mascot + orbiting crypto coins (Deposit page) ─── */
/* Absolutely anchored to the RIGHT side — out of flow so content stays at the top */
#page-deposit { position: relative; }
.dep-mascot { display: none; position: fixed; right: 34px; bottom: 40px; top: auto; margin: 0; z-index: 3; pointer-events: none; }
.dep-mascot.show { display: block; }
/* The empty right margin only exists on wide screens — hide the mascot when content fills the width */
@media (max-width: 1500px) { .dep-mascot.show { display: none; } }

/* Speech bubble above the leprechaun */
.dep-bubble {
  position: absolute; bottom: 100%; right: 6px; margin-bottom: 14px;
  width: 250px; max-width: 250px;
  background: #12281d; border: 1px solid rgba(46,134,255,.28);
  border-radius: 14px 14px 4px 14px; padding: 12px 15px;
  color: var(--text-strong); font-size: 13px; line-height: 1.55; font-weight: 500;
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(10px) scale(.95); transform-origin: bottom right;
  transition: opacity .28s ease, transform .28s ease; pointer-events: none;
}
.dep-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.dep-bubble::after {
  content: ''; position: absolute; top: 100%; right: 34px;
  border: 9px solid transparent; border-top-color: #12281d;
  filter: drop-shadow(0 1px 0 rgba(46,134,255,.28));
}
.dep-bubble b { color: var(--green); }
.dep-caret { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: text-bottom; background: var(--green); border-radius: 1px; animation: depCaretBlink .7s steps(1) infinite; }
@keyframes depCaretBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ─── Post-login clover loading transition ─── */
#enter-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  pointer-events: none; /* purely decorative — must NEVER intercept clicks, even if it lingers */
}
/* Booting with a stored session: hide the login flash, show the loader instantly */
html.booting #auth-screen { display: none !important; }
html.booting #enter-loader { opacity: 1; visibility: visible; background: var(--bg); }
/* Instant cover — no fade-in, so it hides the app switch happening behind it */
#enter-loader.show { opacity: 1; visibility: visible; }
/* Only the exit fades out, revealing the site */
#enter-loader.done { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease; }
.enter-loader-inner { transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease; }
#enter-loader.done .enter-loader-inner { transform: scale(1.35); opacity: 0; }
.clover-svg { width: 78px; height: auto; transform: rotate(-26deg); }
/* Loading: the whole clover + stem drawn as ONE continuous pen stroke */
.clover-stroke path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cloverDraw 1.8s ease forwards; }
/* Quicker draw when navigating between pages */
#enter-loader.fast .clover-stroke path { animation-duration: .9s; }
@keyframes cloverDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .clover-stroke path { animation: none; stroke-dashoffset: 0; }
}

/* ─────────── Micro-interactions ─────────── */
/* Balance count-up green flash */
@keyframes balFlash { 0% { color: var(--green); text-shadow: 0 0 14px rgba(46,134,255,.5); } 100% { text-shadow: none; } }
.bal-flash { animation: balFlash 1.1s ease; }

/* ── Admin Balance: user search (typeahead) ── */
.bal-search-card { max-width: 640px; position: relative; overflow: visible; }
.bal-search-wrap { position: relative; margin-top: 6px; }
.bal-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.35); pointer-events: none; }
.bal-search-ico svg { width: 16px; height: 16px; }
.bal-search-input { padding-left: 40px !important; padding-right: 40px !important; font-size: 14px; height: 46px; }
.bal-search-input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(46,134,255,.14); }
.bal-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255,255,255,.35); cursor: pointer; border-radius: 50%; transition: background .15s; }
.bal-search-clear:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }
.bal-search-clear svg { width: 14px; height: 14px; }
.bal-search-hint { font-size: 11.5px; color: rgba(255,255,255,.35); margin-top: 8px; }
.bal-search-hint b { color: rgba(255,255,255,.6); font-weight: 700; }

.bal-search-dd { position: absolute; top: calc(100% - 12px); left: 20px; right: 20px; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 20px 40px rgba(0,0,0,.55); max-height: 420px; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s; margin-top: 8px; }
.bal-search-dd.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bal-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; transition: background .12s; border-bottom: 1px solid rgba(255,255,255,.04); }
.bal-search-item:last-child { border-bottom: none; }
.bal-search-item:hover, .bal-search-item.active { background: rgba(46,134,255,.06); }
.bal-search-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(46,134,255,.22); background: var(--bg2); }
.bal-search-av-fb { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--green); background: rgba(46,134,255,.10); border-color: rgba(46,134,255,.35); }
.bal-search-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bal-search-name { font-weight: 700; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-search-sub { font-size: 11.5px; color: rgba(255,255,255,.4); font-family: ui-monospace, monospace; }
.bal-search-bal { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; font-weight: 800; color: var(--green); white-space: nowrap; }
.bal-search-dep { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.35); }
.bal-search-empty { padding: 16px; text-align: center; color: rgba(255,255,255,.4); font-size: 13px; }
.bal-search-more { padding: 8px 14px; text-align: center; color: rgba(255,255,255,.35); font-size: 11px; border-top: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02); }

/* ── Selected user card ── */
.bal-selected-card { margin-top: 16px; max-width: 640px; }
.bal-selected-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bal-selected-title { font-size: 15px; font-weight: 700; color: var(--text-strong); display: inline-flex; align-items: center; gap: 8px; }
.bal-selected-uid { font-family: ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,.35); font-weight: 600; margin-left: 8px; padding: 3px 8px; background: rgba(255,255,255,.04); border-radius: 999px; }
.bal-selected-close { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: rgba(255,255,255,.45); cursor: pointer; border-radius: 50%; transition: all .15s; }
.bal-selected-close:hover { background: rgba(255,77,141,.10); color: #ff4d8d; border-color: rgba(255,77,141,.4); }
.bal-selected-close svg { width: 12px; height: 12px; }
.bal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bal-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.bal-stat-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; color: rgba(255,255,255,.4); }
.bal-stat-val { font-size: 18px; font-weight: 800; color: var(--text-strong); }
.bal-stat-green { color: var(--green); }
.bal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.bal-actions .btn.btn-primary { grid-column: 1 / -1; }

/* ── Balance page: fixed 2-column layout ── */
.bal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 960px) { .bal-layout { grid-template-columns: 1fr; } }
.bal-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bal-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bal-main .card, .bal-side .card { max-width: none; margin: 0; }
.bal-search-card { position: relative; overflow: visible; }
.bal-selected-slot { display: block; }
.bal-selected-card { margin-top: 0 !important; max-width: none !important; }

/* placeholder shown before any user is picked */
.bal-selected-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 24px !important; border-style: dashed !important; }
.bal-placeholder-ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(46,134,255,.08); border: 1.5px solid rgba(46,134,255,.28); color: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.bal-placeholder-ico svg { width: 22px; height: 22px; }
.bal-placeholder-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.bal-placeholder-sub { font-size: 12.5px; color: rgba(255,255,255,.4); max-width: 340px; }

/* ── Quick lists (recent deposits + top holders) ── */
.bal-quick-card { padding: 16px 18px; }
.bal-quick-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s, transform .12s; border-radius: 8px; }
.bal-quick-row:last-child { border-bottom: none; }
.bal-quick-row:hover { background: rgba(46,134,255,.05); transform: translateX(2px); }
.bal-quick-ico { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.bal-quick-rank { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--green); background: rgba(46,134,255,.10); border: 1px solid rgba(46,134,255,.25); flex-shrink: 0; }
.bal-quick-row:nth-child(1) .bal-quick-rank { color: #f0c040; background: rgba(240,192,64,.10); border-color: rgba(240,192,64,.35); }
.bal-quick-row:nth-child(2) .bal-quick-rank { color: #cbd5e1; background: rgba(203,213,225,.08); border-color: rgba(203,213,225,.28); }
.bal-quick-row:nth-child(3) .bal-quick-rank { color: #d8954f; background: rgba(216,149,79,.08); border-color: rgba(216,149,79,.28); }
.bal-quick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bal-quick-name { font-weight: 700; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-quick-sub { font-size: 11px; color: rgba(255,255,255,.35); font-family: ui-monospace, monospace; }
.bal-quick-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); text-transform: uppercase; flex-shrink: 0; }
.bal-quick-bal { font-size: 14px; font-weight: 800; color: var(--green); white-space: nowrap; flex-shrink: 0; }

/* Copy button success state */
.btn.copied { background: var(--green-soft) !important; color: var(--green) !important; border-color: rgba(46,134,255,.4) !important; }

/* Skeleton shimmer */
.skel { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation: skelShimmer 1.3s infinite; }
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
.skel-restock { height: 232px; }
.skel-order { height: 74px; }

/* Falling gold-coin / clover confetti */
.confetti-piece { position: fixed; top: -26px; z-index: 9998; pointer-events: none; will-change: transform; }
@keyframes confettiFall { to { transform: translateY(106vh) rotate(var(--spin, 360deg)); opacity: .85; } }

/* "NEW" pulsing badge on today's restocks */
.rst-card { position: relative; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.rst-new { position: absolute; top: -9px; right: 14px; left: auto; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--green); background: #0c1f13; border: 1px solid rgba(46,134,255,.35); padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.rst-new::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: newPulse 1.4s ease-in-out infinite; }
@keyframes newPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,134,255,.55); } 50% { box-shadow: 0 0 0 5px rgba(46,134,255,0); } }

/* Card hover lift + glow */
.rst-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.45); border-color: rgba(46,134,255,.3); }
.dep-crypto { transition: transform .16s ease, box-shadow .16s ease, border-color .14s ease, background .14s ease; }
.dep-crypto:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { display: none; }
  .rst-card:hover, .dep-crypto:hover { transform: none; }
}
.dep-mascot-inner {
  position: relative; width: 232px; height: 168px;
  animation: mascotFloat 5.5s ease-in-out infinite;
}
/* Leprechaun anchored RIGHT — inner div crops the PNG's transparent padding tight */
.dep-mascot-lutin {
  position: absolute; right: 0; top: 4px; width: 200px; height: 160px;
  overflow: hidden; filter: drop-shadow(0 14px 22px rgba(0,0,0,.4));
}
.dep-mascot-lutin img { position: absolute; width: 230px; height: 345px; left: -19px; top: -73px; }
/* Coins float to the LEFT of the leprechaun (toward the page content) */
.dep-coin {
  position: absolute; width: 58px; height: 58px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.dep-coin-btc { top: 2px;  left: 18px; width: 62px; height: 62px; animation: coinBob 3.4s ease-in-out infinite; }
.dep-coin-eth { top: 86px; left: 2px;              animation: coinBob 3.9s ease-in-out infinite .5s; }
.dep-coin-ltc { top: 40px; left: 76px; width: 50px; height: 50px; animation: coinBob 3.1s ease-in-out infinite .9s; }
@keyframes mascotFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes coinBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 620px) {
  .dep-mascot { justify-content: center; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dep-mascot-inner, .dep-coin { animation: none; }
}

.dep-crypto { position: relative; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 14px; transition: .14s; color: var(--text); }
.dep-crypto:hover { border-color: var(--green); }
.dep-crypto.selected { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 3px rgba(46,134,255,.12); }
.dep-crypto-reco { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; }
.dep-crypto-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dep-crypto-ico { width: 34px; height: 34px; object-fit: contain; }
.dep-crypto-name { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.dep-crypto-tick { font-size: 11px; color: var(--muted); font-weight: 600; }
.dep-crypto-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.dep-crypto-cell { display: flex; flex-direction: column; gap: 3px; }
.dep-crypto-cell span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.dep-crypto-cell b { font-size: 13px; color: var(--text-strong); }
.dep-crypto-cell.right { align-items: flex-end; }
.dep-amount-field { position: relative; }
.dep-amount-field .input { font-size: 20px; font-weight: 700; padding-right: 34px; }
.dep-amount-cur { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }

/* Deposit — bonus tiers table */
.bonus-card { border-color: rgba(46,134,255,.25); }
.tier-table-head { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 10px; padding: 0 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
.tier-table-head span:last-child { text-align: right; }
.tier-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 10px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); transition: .14s; border-radius: 8px; }
.tier-row:last-child { border-bottom: none; }
.tier-row.active { background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(46,134,255,.3); padding: 12px 10px; }
.tier-row-left { display: flex; align-items: center; gap: 10px; }
.tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tier-name { font-weight: 700; color: var(--text-strong); font-size: 13px; }
.tier-sub { font-size: 11px; color: var(--muted); }
.tier-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tier-ex { text-align: right; }
.tier-ex-calc { font-size: 11px; color: var(--muted); }
.tier-ex-cred { font-size: 13px; font-weight: 800; color: var(--green); }

.profile-rank { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin-top: 4px; }

/* Mes achats */
/* Order rows — horizontal like Bank Cards */
.ord-list { display: flex; flex-direction: column; gap: 6px; }
/* ── Order rows v2 ── */
.ord-list { display: flex; flex-direction: column; gap: 8px; }
.ord-row { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 20px; padding: 14px 24px; transition: border-color .2s, box-shadow .2s; }
.ord-row:hover { border-color: rgba(255,255,255,.08); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.ord-row.sel { border-color: var(--green); box-shadow: 0 0 16px rgba(46,134,255,.06); }

/* Custom checkbox */
.ord-check { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.ord-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ord-check-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.ord-check-box .ic, .ord-check-box svg { width: 11px; height: 11px; opacity: 0; color: #fff; transition: opacity .15s; }
.ord-check input:checked + .ord-check-box { background: var(--green); border-color: var(--green); }
.ord-check input:checked + .ord-check-box .ic, .ord-check input:checked + .ord-check-box svg { opacity: 1; }
.ord-check:hover .ord-check-box { border-color: rgba(255,255,255,.25); }

/* Card image wrap */
.ord-card-wrap { position: relative; flex-shrink: 0; width: 72px; height: 46px; }
.ord-row-img { width: 72px; height: 46px; object-fit: cover; border-radius: 7px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.ord-scheme { position: absolute; bottom: -4px; right: -4px; font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 4px; letter-spacing: .5px; line-height: 14px; }
.ord-scheme-visa { background: linear-gradient(135deg, #1a1f71, #2a3fb5); color: #fff; }
.ord-scheme-mc { background: linear-gradient(135deg, #eb001b, #f79e1b); color: #fff; }
.ord-scheme-amex { background: linear-gradient(135deg, #006fcf, #00aeef); color: #fff; }
.ord-scheme-disc { background: linear-gradient(135deg, #ff6600, #ffaa00); color: #fff; }

/* Main info */
.ord-row-main { flex: 0 0 120px; display: flex; flex-direction: column; gap: 2px; }
.ord-row-bin-num { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace; font-weight: 700; font-size: 15px; color: #fff; letter-spacing: 1.5px; }
.ord-row-sub { font-size: 11px; color: rgba(255,255,255,.4); font-weight: 500; }

/* Status badges */
.ord-row-badges { flex: 0 0 auto; display: flex; gap: 5px; flex-wrap: wrap; }
.ord-st { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 4px; }
.ord-st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ord-st-live { background: rgba(46,134,255,.1); color: #7eb8ff; border: 1px solid rgba(46,134,255,.15); }
.ord-st-live::before { background: #2E86FF; box-shadow: 0 0 6px rgba(46,134,255,.5); }
.ord-st-dead { background: rgba(255,82,82,.08); color: #ff8a8a; border: 1px solid rgba(255,82,82,.12); }
.ord-st-dead::before { background: #ff5252; box-shadow: 0 0 6px rgba(255,82,82,.4); }
.ord-st-pending { background: rgba(255,193,7,.08); color: #ffc107; border: 1px solid rgba(255,193,7,.12); }
.ord-st-pending::before { background: #ffc107; box-shadow: 0 0 6px rgba(255,193,7,.4); }

/* Date */
.ord-row-date { flex: 0 0 auto; font-size: 12.5px; color: rgba(255,255,255,.35); font-weight: 500; white-space: nowrap; }

/* Price */
.ord-row-price { flex: 0 0 auto; min-width: 56px; font-size: 16px; font-weight: 800; color: #fff; text-align: right; letter-spacing: .3px; }

/* Action buttons */
.ord-row-actions { margin-left: auto; flex: 0 0 auto; display: flex; gap: 6px; align-items: center; opacity: .4; transition: opacity .2s; }
.ord-row:hover .ord-row-actions { opacity: 1; }
.ord-btn-view { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; cursor: pointer; transition: all .15s; letter-spacing: .2px; }
.ord-btn-view:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.ord-btn-view .ic, .ord-btn-view svg { width: 12px; height: 12px; }
.ord-btn-rm { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; font-size: 0; background: transparent; border: 1px solid transparent; border-radius: 7px; color: rgba(255,255,255,.3); cursor: pointer; transition: all .15s; }
.ord-btn-rm:hover { background: rgba(255,82,82,.1); border-color: rgba(255,82,82,.25); color: var(--error); }
.ord-btn-rm .ic, .ord-btn-rm svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .ord-row { flex-wrap: wrap; gap: 8px 10px; padding: 12px 12px 12px 10px; }
  .ord-row-main { flex: 1 1 auto; }
  .ord-row-date { display: none; }
  .ord-row-actions { opacity: 1; }
}
/* ── Top Balances table ── */
.topb-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.topb-head .card-title { margin: 0; }
.topb-filters { display: flex; gap: 6px; }
.topb-filter { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: rgba(255,255,255,.45); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .18s; }
.topb-filter .ic, .topb-filter svg { width: 13px; height: 13px; }
.topb-filter:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }
.topb-filter-active { background: rgba(46,134,255,.1); border-color: rgba(46,134,255,.3); color: var(--green); }
.topb-filter-active:hover { background: rgba(46,134,255,.15); color: var(--green); }
.topb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.topb-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.35); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.topb-row td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.topb-row:last-child td { border-bottom: none; }
.topb-row:hover td { background: rgba(255,255,255,.02); }
.topb-rank { width: 36px; font-weight: 800; color: rgba(255,255,255,.3); text-align: center; }
.topb-row:nth-child(1) .topb-rank { color: #f0c040; }
.topb-row:nth-child(2) .topb-rank { color: #b0b8c0; }
.topb-row:nth-child(3) .topb-rank { color: #cd7f32; }
.topb-user { padding: 8px 12px !important; }
.topb-user-cell { display: flex; align-items: center; gap: 10px; }
.topb-user-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.topb-name { font-weight: 700; color: #fff; }
.topb-uid { font-size: 11px; color: rgba(255,255,255,.3); font-family: ui-monospace, monospace; }
.topb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(46,134,255,.25); background: var(--bg2); }
.topb-avatar-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--green); background: rgba(46,134,255,.10); border-color: rgba(46,134,255,.35); }
.topb-bal { font-weight: 800; color: var(--green); white-space: nowrap; }
.topb-dep { color: rgba(255,255,255,.5); white-space: nowrap; }
.topb-ord { color: rgba(255,255,255,.5); text-align: center; }
.topb-bar { position: relative; width: 120px; }
.topb-fill { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green2), var(--green)); transition: width .3s; }
.topb-pct { position: absolute; right: 0; top: -1px; font-size: 10px; color: rgba(255,255,255,.3); font-weight: 600; }

/* ── Top Balances drawer + profile button ── */
.topb-action { width: 40px; text-align: center; }
.topb-profile-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: rgba(255,255,255,.4); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.topb-profile-btn:hover { background: rgba(46,134,255,.1); border-color: rgba(46,134,255,.25); color: var(--green); }
.topb-profile-btn .ic, .topb-profile-btn svg { width: 14px; height: 14px; }
.topb-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 899; opacity: 0; pointer-events: none; transition: opacity .25s; }
.topb-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.topb-drawer { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; background: var(--bg); border-left: 1px solid var(--border); z-index: 900; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: -4px 0 24px rgba(0,0,0,.25); }
.topb-drawer.open { transform: translateX(0); }
.topb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.topb-drawer-title { font-weight: 700; font-size: 14px; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.topb-drawer-title .ic, .topb-drawer-title svg { width: 16px; height: 16px; }
.topb-drawer-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.topb-drawer-close:hover { background: rgba(255,82,82,.1); color: var(--error); }
.topb-drawer-close .ic, .topb-drawer-close svg { width: 16px; height: 16px; }
.topb-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
@media (max-width: 640px) { .topb-drawer { width: 100%; } }

/* ── Cart summary ── */
.cart-summary { display: flex; flex-direction: column; gap: 6px; }
.cart-sum-row { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.45); }
.cart-sum-row .ic, .cart-sum-row svg { width: 14px; height: 14px; vertical-align: -2px; }
.cart-sum-fee { color: var(--gold2); }
.cart-sum-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 800; color: #fff; border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; padding-top: 10px; }

/* ── Buy direct button / menu ── */
.sc-buy-wrap { position: relative; display: inline-block; }
.sc-buy-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; z-index: 50; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; }
.sc-buy-wrap.open .sc-buy-menu { display: flex; flex-direction: column; }
.sc-buy-opt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; color: var(--text-strong); background: none; border: none; cursor: pointer; transition: background .15s; text-align: left; white-space: nowrap; }
.sc-buy-opt:hover { background: rgba(255,255,255,.06); }
.sc-buy-opt .ic, .sc-buy-opt svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
.sc-buy-opt span { margin-left: auto; font-weight: 600; color: var(--green); }
.sc-buy-opt:first-child { border-bottom: 1px solid var(--border); }
.sc-buying { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gold2); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Referral program ── */
.ref-link-box { margin: 16px 0 18px; }
.ref-link-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.ref-link-row { display: flex; gap: 8px; }
.ref-link-input { flex: 1; font-size: 13px; font-family: monospace; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--green); cursor: text; }
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.ref-stat { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-align: center; }
.ref-stat-val { display: block; font-size: 22px; font-weight: 700; color: var(--green); }
.ref-stat-label { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ref-how { border-top: 1px solid var(--border); padding-top: 14px; }
.ref-how-title { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 10px; }
.ref-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--muted); }
.ref-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #000; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ─── Reseller API access ─── */
.api-access-card { position: relative; }
.api-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.api-head > div:first-child { flex: 1; min-width: 220px; }
.api-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.api-tab { background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 600; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; transition: color .15s, border-color .15s; }
.api-tab:hover { color: var(--text-strong); }
.api-tab-active { color: var(--green); border-bottom-color: var(--green); }
.api-panel { animation: fadeIn .18s ease-out; }
.api-key-row { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.api-key-row.revoked { opacity: .5; }
.api-key-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.api-key-name { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.api-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: 6px; letter-spacing: .5px; vertical-align: middle; }
.api-badge.active { background: rgba(46,134,255,.15); color: var(--green); }
.api-badge.revoked { background: rgba(255,82,82,.15); color: #ff5252; }
.api-key-str { margin: 6px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.api-key-str code { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; background: rgba(0,0,0,.3); padding: 4px 8px; border-radius: 4px; color: var(--text-strong); word-break: break-all; flex: 1; min-width: 200px; }
.api-key-meta { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.api-note { font-size: 11px; color: var(--muted); margin-top: 10px; font-style: italic; }
.api-doc-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.api-doc-section:last-child { border-bottom: none; }
.api-doc-section h3 { font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 0 0 8px 0; }
.api-doc-section h4 { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px 0; text-transform: uppercase; letter-spacing: .5px; }
.api-doc-section p { font-size: 13px; color: var(--text); line-height: 1.5; margin: 6px 0; }
.api-doc-section code { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; background: rgba(0,0,0,.3); padding: 2px 6px; border-radius: 3px; color: var(--green); }
.api-code { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; background: rgba(0,0,0,.4); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; color: var(--text-strong); overflow-x: auto; white-space: pre; line-height: 1.5; margin: 8px 0; }
.api-endpoint { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.api-endpoint code { font-size: 13px; background: none; padding: 0; color: var(--text-strong); font-weight: 600; }
.api-method { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; letter-spacing: .5px; }
.api-method.get { background: rgba(66,165,245,.15); color: #42a5f5; }
.api-method.post { background: rgba(46,134,255,.15); color: var(--green); }
.api-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.api-table th, .api-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.api-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }
.api-table code { font-size: 11px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Hero banner at top of docs/quickstart */
.api-hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(46,134,255,.08), rgba(66,165,245,.06)); border: 1px solid rgba(46,134,255,.15); border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
.api-hero-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(46,134,255,.15); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.api-hero-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 2px; }
.api-hero-sub { font-size: 12px; color: var(--muted); }
.api-hero-sub code { background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 3px; color: var(--green); font-size: 11px; }

/* 3-step flow at top of docs */
.api-flow { display: flex; align-items: stretch; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.api-flow-step { flex: 1; min-width: 180px; display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.api-flow-num { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #06230f; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.api-flow-t { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-bottom: 3px; }
.api-flow-s { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.api-flow-arrow { display: flex; align-items: center; color: var(--muted); font-size: 22px; flex-shrink: 0; }
@media (max-width: 700px) { .api-flow-arrow { display: none; } }

/* Quickstart step cards */
.api-qs-step { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--border); }
.api-qs-step:first-child { padding-top: 0; }
.api-qs-step:last-child { border-bottom: none; padding-bottom: 8px; }
.api-qs-num { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--green) 0%, var(--green2) 100%); color: #06230f; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; box-shadow: 0 3px 10px rgba(46,134,255,.25); }
.api-qs-body { flex: 1; min-width: 0; }
.api-qs-title { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.api-qs-desc { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.api-qs-desc code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 3px; color: var(--green); font-size: 11px; }

/* Tips + callouts inside docs */
.api-tip { font-size: 12px; color: var(--muted); margin-top: 8px; padding: 8px 12px; background: rgba(66,165,245,.06); border-left: 3px solid #42a5f5; border-radius: 4px; }
.api-tip code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 3px; color: #42a5f5; font-size: 11px; }
.api-callout { font-size: 12px; color: var(--text); margin-top: 12px; padding: 10px 14px; background: rgba(255,193,7,.06); border-left: 3px solid #ffc107; border-radius: 4px; }
.api-callout strong { color: #ffc107; }

/* Copy button on code blocks */
.api-code-wrap { position: relative; margin: 8px 0; }
.api-code-copy { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.5); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; font-family: inherit; z-index: 2; }
.api-code-wrap:hover .api-code-copy { opacity: 1; }
.api-code-copy:hover { color: var(--green); border-color: rgba(46,134,255,.35); }
.api-code-copy.copied { color: var(--green); border-color: var(--green); opacity: 1; }
.api-code-wrap .api-code { margin: 0; padding-right: 90px; }

/* Admin API panel */
.apiadm-user { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: rgba(255,255,255,.02); overflow: hidden; }
.apiadm-user summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; font-size: 12px; color: var(--text); }
.apiadm-user summary::-webkit-details-marker { display: none; }
.apiadm-user summary::before { content: '▸'; color: var(--muted); transition: transform .15s; display: inline-block; margin-right: -6px; }
.apiadm-user[open] summary::before { transform: rotate(90deg); }
.apiadm-user summary:hover { background: rgba(255,255,255,.03); }
.apiadm-user-name { font-weight: 700; color: var(--text-strong); font-size: 13px; min-width: 140px; }
.apiadm-user-id { color: var(--muted); font-family: monospace; font-size: 11px; }
.apiadm-user-stat { color: var(--muted); font-size: 12px; margin-left: auto; }
.apiadm-user-stat b { color: var(--text-strong); font-weight: 700; }
.apiadm-user-last { color: var(--muted); font-size: 11px; }
.apiadm-keys { padding: 4px 14px 12px; border-top: 1px solid var(--border); background: rgba(0,0,0,.15); }
.apiadm-key-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.05); font-size: 12px; }
.apiadm-key-row:last-child { border-bottom: none; }
.apiadm-key-row.revoked { opacity: .5; }
.apiadm-key { font-family: monospace; font-size: 11px; background: rgba(0,0,0,.4); padding: 3px 8px; border-radius: 3px; color: var(--text-strong); }
.apiadm-kname { font-weight: 600; color: var(--text-strong); }
.apiadm-kstat { color: var(--muted); font-size: 11px; }
.apiadm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.apiadm-table th, .apiadm-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.apiadm-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; background: rgba(255,255,255,.02); }
.apiadm-table code { font-family: monospace; font-size: 10px; background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 3px; color: var(--text-strong); }
.apiadm-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.apiadm-status.ok { background: rgba(46,134,255,.15); color: var(--green); }
.apiadm-status.dead { background: rgba(255,82,82,.15); color: #ff5252; }
.apiadm-status.pending { background: rgba(255,193,7,.15); color: #ffc107; }

/* Legacy grid fallback */
.orders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.order-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }

.pay-hero { text-align: center; padding: 22px; background: var(--green-soft); border: 1px solid rgba(46,134,255,.2); border-radius: var(--r-md); margin-bottom: 16px; }
.pay-amount { font-size: 30px; font-weight: 800; color: var(--text-strong); }
.pay-usd { color: var(--muted); margin-top: 4px; }
/* Center the payment / QR step */
#dep-address { max-width: 640px; margin: 0 auto; }
#dep-address .steps { max-width: none; }

.qr-frame { position: relative; background: #fff; border-radius: var(--r-md); padding: 14px; width: fit-content; margin: 0 auto 16px; overflow: hidden; animation: qrGlow 2.4s ease-in-out infinite; }
.qr-frame img { display: block; width: 200px; height: 200px; position: relative; z-index: 1; }
/* Animated green corner-scanner line over the QR */
.qr-frame::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: 10px; height: 26px; z-index: 2;
  background: linear-gradient(180deg, rgba(46,134,255,0) 0%, rgba(46,134,255,.45) 100%);
  border-bottom: 2px solid var(--green); border-radius: 4px;
  animation: qrScan 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes qrGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(46,134,255,.45), 0 0 18px rgba(46,134,255,.25); }
  50%     { box-shadow: 0 0 0 1px rgba(46,134,255,.8), 0 0 36px rgba(46,134,255,.6); }
}
@keyframes qrScan {
  0%   { top: 10px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: calc(100% - 36px); opacity: 0; }
}
.addr-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.addr-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.addr-box-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.addr-text { font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; color: var(--green); }

/* ─────────── Leaderboard — intro + podium ─────────── */
.lb-intro { text-align: center; margin-bottom: 22px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, rgba(200,151,10,.08), rgba(200,151,10,.03)); border: 1px solid rgba(200,151,10,.15); }
.lb-intro-main { font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.6; margin: 0 0 6px; }
.lb-intro-sub { font-size: 12.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-bottom: 22px; padding-top: 26px; }
.pod { display: flex; flex-direction: column; align-items: center; width: 130px; position: relative; }
.pod-crown { position: absolute; top: -26px; font-size: 22px; animation: authLogoFloat 3s ease-in-out infinite; }
.pod-ava { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #06230f; box-shadow: var(--shadow-md); overflow: hidden; }
.pod-ava.r1 { background: linear-gradient(135deg, #ffe27a, var(--gold2)); width: 64px; height: 64px; font-size: 24px; box-shadow: 0 0 24px rgba(240,192,64,.5); }
.pod-ava.r2 { background: linear-gradient(135deg, #e6edf3, #aeb8c2); }
.pod-ava.r3 { background: linear-gradient(135deg, #e0a36a, #c67f3d); }
.pod-name { font-weight: 800; color: var(--text-strong); font-size: 13px; margin-top: 8px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-pts { font-size: 11px; color: var(--muted); }
.pod-prize { font-size: 12px; font-weight: 800; color: var(--gold2); background: var(--gold-soft); border-radius: 999px; padding: 2px 10px; margin-top: 6px; }
.pod-block { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; }
.pod-1 .pod-block { height: 96px; background: linear-gradient(180deg, rgba(240,192,64,.18), rgba(240,192,64,.04)); border-color: rgba(240,192,64,.35); color: var(--gold2); }
.pod-2 .pod-block { height: 70px; }
.pod-3 .pod-block { height: 56px; background: linear-gradient(180deg, rgba(200,120,40,.16), transparent); border-color: rgba(200,120,40,.3); color: #d8954f; }

/* Leaderboard — full list */
.lb-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: none; }
.lb-rank { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--surface); color: var(--muted); flex-shrink: 0; }
.lb-rank.gold { background: rgba(240,192,64,.18); color: var(--gold2); } .lb-rank.silver { background: rgba(255,255,255,.08); color: #cdd6cd; } .lb-rank.bronze { background: rgba(200,120,40,.18); color: #d8954f; }
img.lb-ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lb-ava-letter { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.lb-id { width: 170px; min-width: 0; flex-shrink: 0; }
.lb-handle { font-weight: 700; color: var(--text-strong); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { font-size: 12px; color: #5aa9ff; filter: blur(3px); user-select: none; -webkit-user-select: none; pointer-events: none; letter-spacing: 1px; }
.lb-bar-wrap { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-bar { flex: 1; height: 7px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.lb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 999px; }
.lb-pts { font-weight: 800; color: var(--gold2); font-size: 13px; white-space: nowrap; }

/* ─────────── NO VBV ─────────── */
.vbv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.vbv-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; position: relative; box-shadow: var(--shadow-sm); transition: .16s; display: flex; flex-direction: column; }
.vbv-card:hover { box-shadow: var(--shadow-md); border-color: #294a31; }
.vbv-badge { position: absolute; top: 12px; right: 12px; }
.vbv-logo { width: 54px; height: 54px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--green); margin-bottom: 12px; overflow: hidden; }
.vbv-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.vbv-name { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.vbv-bin { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; letter-spacing: 1px; color: var(--green); background: var(--green-soft); border: 1px solid rgba(46,134,255,.25); padding: 4px 10px; border-radius: 6px; align-self: flex-start; }
.vbv-bin svg { width: 14px; height: 14px; }
.vbv-desc { font-size: 12.5px; color: var(--muted); margin: 10px 0 12px; flex: 1; }
.vbv-meta { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--line); }
.vbv-price { color: var(--gold2); font-weight: 800; }

/* Orders — CARDS toolbar + selection + export modal */
.ord-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ord-selall { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ord-selall input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
.ord-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ord-toolbar-actions .btn { width: auto; }
.ord-check { display: flex; align-items: center; flex: 0 0 auto; }
.ord-check input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; }
.ord-selectable { transition: border-color .14s, background .14s; }
.ord-selectable.sel { border-color: var(--green); background: var(--green-soft); }
/* Selected cards — slide-in side panel (graphite, matches the dashboard) */
.ord-view-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 335; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.ord-view-back.show { opacity: 1; pointer-events: auto; }
.ord-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; z-index: 340; display: flex; flex-direction: column; background: #15181b; border-left: 1px solid #2a3035; box-shadow: -24px 0 60px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.75,.24,1); }
.ord-panel.show { transform: translateX(0); }
.ord-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #2a3035; }
.ord-panel-headmain { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ord-panel-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; }
.ord-panel-ico svg { width: 20px; height: 20px; }
.ord-panel-title { font-weight: 800; color: #f2f5f7; font-size: 15.5px; }
.ord-panel-sub { font-size: 12px; color: #828b93; margin-top: 2px; }
.ord-panel-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #1c2024; border: 1px solid #2a3035; color: #828b93; display: flex; align-items: center; justify-content: center; }
.ord-panel-close:hover { color: #fff; background: #232930; }
.ord-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: #0d0f11; }
.ord-panel-body::-webkit-scrollbar { width: 10px; }
.ord-panel-body::-webkit-scrollbar-thumb { background: #2a3035; border-radius: 999px; border: 3px solid #0d0f11; background-clip: padding-box; }
.ord-panel-body::-webkit-scrollbar-thumb:hover { background: #3a424a; border: 3px solid #0d0f11; background-clip: padding-box; }
.ord-panel-foot { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid #2a3035; background: #15181b; }
.ord-panel-foot .btn { flex: 1; }

/* Fullz item */
.fz-item { opacity: 0; transform: translateY(10px); animation: fzIn .34s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fzIn { to { opacity: 1; transform: translateY(0); } }

/* Credit-card visual */
.fz-visual { position: relative; overflow: hidden; border-radius: 16px; padding: 16px 18px; color: #fff; border: 1px solid #2c3d33; background: linear-gradient(135deg, #1a2620 0%, #16221b 45%, #10402a 100%); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.fz-visual::after { content: ''; position: absolute; right: -50px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(46,134,255,.20), transparent 70%); }
.fz-visual.fz-brand-mastercard { background: linear-gradient(135deg, #26201a 0%, #221b16 45%, #3d2810 100%); border-color: #3d332a; }
.fz-visual.fz-brand-mastercard::after { background: radial-gradient(circle, rgba(240,192,64,.20), transparent 70%); }
.fz-visual.fz-brand-amex { background: linear-gradient(135deg, #16232a 0%, #142029 45%, #103244 100%); border-color: #29404d; }
.fz-visual.fz-brand-amex::after { background: radial-gradient(circle, rgba(74,163,255,.20), transparent 70%); }
.fz-visual-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.fz-brand { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.fz-visual .fz-price { font-size: 15px; font-weight: 800; color: #8fc4ff; }
.fz-chip { width: 40px; height: 29px; border-radius: 6px; margin: 16px 0 14px; background: linear-gradient(135deg, #f4cf6a, #c8970a); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); position: relative; z-index: 1; }
.fz-chip::before { content: ''; position: absolute; inset: 6px 5px; border: 1px solid rgba(0,0,0,.28); border-radius: 3px; }
.fz-num { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.fz-num code { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 18px; font-weight: 700; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); overflow-wrap: anywhere; }
.fz-copy { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; }
.fz-copy:hover { background: rgba(255,255,255,.2); }
.fz-copy svg { width: 15px; height: 15px; }
.fz-bankline { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 12px; position: relative; z-index: 1; }
.fz-bankline svg { width: 13px; height: 13px; opacity: .85; }
.fz-visual-bot { display: flex; gap: 18px; margin-top: 14px; position: relative; z-index: 1; }
.fz-vcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fz-vcell:first-child { flex: 1; }
.fz-vk { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); }
.fz-vv { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.fz-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.fz-tag svg { width: 12px; height: 12px; }
.fz-ok { color: #8fc4ff; background: rgba(46,134,255,.12); border: 1px solid rgba(46,134,255,.25); }
.fz-no { color: #ff9b9b; background: rgba(255,82,82,.12); border: 1px solid rgba(255,82,82,.25); }
.fz-live { color: #c4ccd2; background: #1c2024; border: 1px solid #2a3035; }
.fz-live .fz-dot, .fz-status-tag .fz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); animation: pulse 1.6s infinite; }
.fz-dot-checking { background: var(--gold) !important; box-shadow: 0 0 7px var(--gold) !important; }
.fz-status-tag { transition: all .3s ease; }

/* Checking card — animated pulse overlay */
.fz-visual-checking { animation: fzCheckPulse 2.4s ease-in-out infinite; }
@keyframes fzCheckPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.4); } 50% { box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 2px rgba(200,151,10,.25); } }
.fz-check-pulse { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(200,151,10,.06) 50%, transparent 100%); animation: fzScanLine 2s ease-in-out infinite; z-index: 3; pointer-events: none; }
@keyframes fzScanLine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Step-by-step check progress */
.fz-check-steps { display: flex; flex-direction: column; gap: 0; margin: 12px 0 0; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 12px; }
.fz-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); transition: all .4s ease; opacity: .45; }
.fz-step:last-child { border-bottom: none; }
.fz-step .ic, .fz-step svg { width: 14px; height: 14px; flex-shrink: 0; }
.fz-step.done { opacity: 1; color: #8fc4ff; }
.fz-step.done .ic, .fz-step.done svg { stroke: #8fc4ff; }
.fz-step.active { opacity: 1; color: var(--gold); }

/* Notice bar under steps */
.fz-check-notice { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 10px 0 0; padding: 10px 14px; background: rgba(200,151,10,.06); border: 1px solid rgba(200,151,10,.15); border-radius: 10px; transition: all .5s ease; }
.fz-check-notice .ic, .fz-check-notice svg { width: 14px; height: 14px; flex-shrink: 0; }
.fz-check-notice-done { background: rgba(46,134,255,.08); border-color: rgba(46,134,255,.2); color: #8fc4ff; }
.fz-check-notice-live { background: rgba(46,134,255,.08); border-color: rgba(46,134,255,.2); color: #8fc4ff; }

/* Resolving transition */
.fz-resolving .fz-visual-checking { animation: none; }
.fz-resolving .fz-check-pulse { animation: fzPulseFade .6s ease forwards; }
@keyframes fzPulseFade { to { opacity: 0; } }
.fz-dead-resolved .fz-visual { transition: all .8s ease; }

/* Dead / refunded card visual */
.fz-visual.fz-visual-dead { background: linear-gradient(135deg, #1a1215 0%, #201418 45%, #2d1218 100%); border-color: #3d2028; }
.fz-visual.fz-visual-dead::after { background: radial-gradient(circle, rgba(255,82,82,.12), transparent 70%); }
.fz-visual.fz-visual-dead .fz-price { color: #ff9b9b; text-decoration: line-through; opacity: .7; }
.fz-visual-dead .fz-num code { opacity: .35; }
.fz-visual-dead .fz-bankline { opacity: .3; }
.fz-chip-dead { opacity: .25; }
.fz-dead-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 38px; font-weight: 900; letter-spacing: 8px; color: rgba(255,82,82,.18); text-transform: uppercase; z-index: 2; pointer-events: none; text-shadow: 0 0 20px rgba(255,82,82,.1); }
.fz-dead-brand { position: absolute; bottom: 14px; right: 18px; font-size: 11px; font-weight: 800; letter-spacing: 2px; opacity: .15; z-index: 1; }
.fz-contactless-dead { position: absolute; top: 16px; right: 18px; width: 22px; height: 22px; opacity: .2; color: #fff; z-index: 1; }
.fz-contactless-dead svg { width: 100%; height: 100%; }

/* Dead card info rows (replaces old tags) */
.fz-dead-info { display: flex; flex-direction: column; gap: 0; margin: 12px 0 0; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.fz-dead-info-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.04); }
.fz-dead-info-row:last-child { border-bottom: none; }
.fz-dead-info-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.fz-dead-info-ico .ic, .fz-dead-info-ico svg { width: 14px; height: 14px; }
.fz-dead-info-red { background: rgba(255,82,82,.12); color: #ff5252; }
.fz-dead-info-red .ic { stroke: #ff5252; }
.fz-dead-info-green { background: rgba(46,134,255,.12); color: #8fc4ff; }
.fz-dead-info-green .ic { stroke: #8fc4ff; }
.fz-dead-info-txt { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.fz-dead-info-txt strong { color: var(--text-strong); font-weight: 700; }
.fz-refunded { cursor: pointer; position: relative; transition: transform .3s, opacity .3s; }
.fz-refunded .fz-visual { position: relative; }
.fz-dead-trash { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); border-radius: inherit; opacity: 0; transition: opacity .25s; pointer-events: none; }
.fz-refunded:hover .fz-dead-trash { opacity: 1; }
.fz-dead-trash svg { width: 38px; height: 38px; stroke: #ff5252; filter: drop-shadow(0 0 12px rgba(255,82,82,.5)); transition: transform .2s; }
.fz-refunded:hover .fz-dead-trash svg { transform: scale(1.1); }
.fz-refunded:active .fz-dead-trash svg { transform: scale(.92); }
.fz-dismiss-bar { display: flex; justify-content: flex-end; padding: 0 0 12px; }
.fz-dismiss-all { background: rgba(255,82,82,.08); color: #ff5252; border-color: rgba(255,82,82,.2); }
.fz-dismiss-all:hover { background: rgba(255,82,82,.15); border-color: rgba(255,82,82,.4); }
.fz-dismiss-all .ic { width: 13px; height: 13px; stroke: #ff5252; }

.ord-retention-notice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 0 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--gold); background: rgba(200,151,10,.08); border: 1px solid rgba(200,151,10,.2); line-height: 1.5; }
.ord-retention-notice .ic { flex-shrink: 0; width: 16px; height: 16px; stroke: var(--gold); }

/* Special BIN request notice (Bank Cards) */
.sc-binreq { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 0 0 16px; border-radius: var(--r-md); background: var(--green-soft); border: 1px solid var(--green-soft2); }
.sc-binreq-ico { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--green-soft2); }
.sc-binreq-ico .ic { width: 20px; height: 20px; stroke: var(--green); }
.sc-binreq-txt { flex: 1; min-width: 0; line-height: 1.45; }
.sc-binreq-txt b { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.sc-binreq-txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.sc-binreq-btn { flex-shrink: 0; width: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .sc-binreq { flex-wrap: wrap; }
  .sc-binreq-btn { width: 100%; }
}

/* Admin — per-client activity timeline */
.act-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.act-summary span { display: inline-flex; align-items: center; gap: 6px; }
.act-summary .ic { width: 15px; height: 15px; }
.act-timeline { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.act-row:last-child { border-bottom: none; }
.act-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.05); display: grid; place-items: center; }
.act-ico .ic { width: 16px; height: 16px; }
.act-body { flex: 1; min-width: 0; }
.act-text { font-size: 13px; color: var(--text-strong); font-weight: 600; }
.act-when { font-size: 11px; color: var(--muted); margin-top: 1px; }
.act-amt { flex-shrink: 0; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.act-order { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.act-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.act-order-head b { color: var(--text-strong); font-size: 13.5px; }
.act-order-head span { font-size: 11.5px; color: var(--muted); }
.act-cards { display: flex; flex-direction: column; gap: 4px; }
.act-card { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 5px 8px; background: rgba(255,255,255,.04); border-radius: 7px; font-variant-numeric: tabular-nums; }
.act-card.dead { opacity: .55; }
.act-card-bin { font-weight: 800; color: var(--green); letter-spacing: .5px; }
.act-card.dead .act-card-bin { color: var(--muted); }
.act-card-oid { color: var(--muted); font-size: 11px; }
.act-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; background: var(--green-soft); color: var(--green); }
.act-tag.dead { background: rgba(217,69,69,.15); color: #ff6b6b; }

.fz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2a3035; border: 1px solid #2a3035; border-radius: 12px; overflow: hidden; }
.fz-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: #15181b; min-width: 0; }
.fz-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #828b93; }
.fz-v { font-size: 12.5px; font-weight: 600; color: #eaf0ee; word-break: break-word; }
.fz-actions { display: flex; gap: 8px; margin-top: 12px; }
.fz-actions .btn { flex: 1; }
.fz-actions svg { width: 15px; height: 15px; }
.ord-panel-foot .btn svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .ord-panel { width: 100%; } }

/* ── NO VBV order card ── */
.nvo-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); transition: border-color .2s, box-shadow .2s; }
.nvo-card:hover { border-color: rgba(255,255,255,.1); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.nvo-tier-world { border-left: 3px solid #ff6b35; }
.nvo-tier-infinite { border-left: 3px solid #1e88e5; }
.nvo-tier-sig { border-left: 3px solid #ab47bc; }
.nvo-left { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.nvo-logo-wrap { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nvo-logo { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.nvo-logo-fallback { display: flex; align-items: center; justify-content: center; color: var(--green); }
.nvo-logo-fallback svg { width: 22px; height: 22px; }
.nvo-info { min-width: 0; }
.nvo-brand { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.nvo-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.nvo-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 4px; line-height: 1; }
.nvo-tag-novbv { background: rgba(46,134,255,.12); color: #2E86FF; }
.nvo-tag-tier { background: rgba(255,255,255,.07); color: var(--text-strong); }
.nvo-tier-world .nvo-tag-tier { background: rgba(255,107,53,.12); color: #ff6b35; }
.nvo-tier-infinite .nvo-tag-tier { background: rgba(30,136,229,.12); color: #42a5f5; }
.nvo-tier-sig .nvo-tag-tier { background: rgba(171,71,188,.12); color: #ce93d8; }
.nvo-bin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.nvo-bin-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.nvo-bin-value { font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-weight: 800; font-size: 17px; letter-spacing: 2.5px; color: var(--green); }
.nvo-copy { width: auto; padding: 3px 10px; font-size: 12px; }
.nvo-copy svg { width: 13px; height: 13px; }
.nvo-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.nvo-meta strong { color: var(--text-strong); }
.nvo-date { font-size: 11px; color: var(--muted); opacity: .7; }
.nvo-price { font-size: 17px; font-weight: 800; color: var(--text-strong); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
@media (max-width: 480px) {
  .nvo-card { flex-direction: column; gap: 10px; }
  .nvo-price { align-self: flex-end; }
}

/* ─────────── Profile ─────────── */
.profile-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(8,17,9,.92) 0%, rgba(8,17,9,.72) 50%, rgba(8,17,9,.4) 100%), url('/banner-home.png') center/cover no-repeat, var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.profile-hero-top { display: flex; align-items: center; gap: 18px; }
.profile-avatar { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green2)); color: #06230f; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(46,134,255,.25), 0 0 22px rgba(46,134,255,.3); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-info { min-width: 0; }
.profile-name { font-size: 22px; font-weight: 800; color: #fff; }
.profile-username { color: #b9d6bb; font-size: 14px; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.profile-rank-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--border); }
.profile-since-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(46,134,255,.14); color: var(--green); }
.profile-rankbar { margin-top: 20px; }
.profile-rankbar-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--text-strong); }
.profile-rankbar-next { color: var(--muted); font-weight: 600; }
.profile-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 20px; }
/* Both cards fill equal height; their content stretches so the last row / last button line up */
.profile-cols > .card { display: flex; flex-direction: column; }
.profile-info-rows { flex: 1; display: flex; flex-direction: column; }
.profile-info-rows .order-row { flex: 1 1 0; align-items: center; }
.profile-actions { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.profile-actions .btn { flex: 1 1 0; }
.profile-actions .btn { width: 100%; justify-content: flex-start; gap: 10px; }
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* Numbered pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pager-btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; transition: .14s; }
.pager-btn:hover:not(:disabled) { border-color: var(--green); color: var(--text-strong); }
.pager-btn.active { background: var(--green-soft); border-color: rgba(46,134,255,.4); color: var(--green); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn .ic { width: 15px; height: 15px; }
.pager-ellipsis { color: var(--muted); padding: 0 2px; }
@media (max-width: 720px) { .profile-cols { grid-template-columns: 1fr; } }

/* ─────────── Admin ─────────── */
.adm-topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; background: linear-gradient(120deg, rgba(8,17,9,.92), rgba(8,17,9,.6)), url('/CARDBACKGROUND.png') center/cover no-repeat, var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.adm-topbar-left { display: flex; align-items: center; gap: 14px; }
.adm-topbar-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 0 20px rgba(46,134,255,.25); }
.adm-topbar-actions { display: flex; align-items: center; gap: 12px; }
.adm-topbar-actions .btn { width: auto; }
.adm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 4px 10px; border-radius: 999px; }
.adm-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.adm-updated { font-size: 12px; color: var(--muted); }
.adm-tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 18px; background: var(--card); padding: 6px; border: 1px solid var(--border); border-radius: var(--r-md); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.adm-tabs::-webkit-scrollbar { height: 6px; }
.adm-tabs::-webkit-scrollbar-track { background: transparent; }
.adm-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.adm-tabs::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.adm-kpis .stat { position: relative; overflow: hidden; }
.adm-kpis .stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--green); opacity: .6; }
.adm-kpis .stat .stat-icon.green ~ .stat-label, .adm-kpis .stat .stat-value { color: var(--text-strong); }
.adm-tab { background: transparent; border: none; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.adm-tab:hover { background: var(--hover); color: var(--text); }
.adm-tab.active { background: var(--green-soft); color: var(--green); }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.adm-pnl .pnl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.adm-pnl .pnl-big { display: flex; flex-direction: column; gap: 2px; }
.adm-pnl .pnl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); }
.adm-pnl .pnl-val { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.adm-pnl .pnl-pos { color: var(--green); }
.adm-pnl .pnl-neg { color: var(--danger); }
.adm-pnl .pnl-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: rgba(200,151,10,.12); color: var(--gold); }
.adm-pnl .pnl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; }
.adm-pnl .pnl-cell { background: var(--surface); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.adm-pnl .pnl-cell-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--muted); }
.adm-pnl .pnl-cell-val { font-size: 16px; font-weight: 800; color: var(--text-strong); }
.adm-pnl .pnl-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.adm-pnl .pnl-period { background: var(--surface); border-radius: 10px; padding: 14px; }
.adm-pnl .pnl-period-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.adm-pnl .pnl-period .kv { padding: 6px 0; font-size: 13px; }
@media (max-width:600px) { .adm-pnl .pnl-periods { grid-template-columns: 1fr; } .adm-pnl .pnl-grid { grid-template-columns: repeat(2, 1fr); } }
.progress { height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; background: var(--green); border-radius: 999px; }
.progress-fill.green { background: var(--green); }
.kv { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--muted); }
.kv-v { font-weight: 700; color: var(--text-strong); }
.recent { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.recent:last-child { border-bottom: none; }
.recent-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.recent-name { font-weight: 600; color: var(--text-strong); font-size: 13px; }
.recent-sub { font-size: 12px; color: var(--muted); }
.recent-badge { margin-left: auto; }

/* ── Deposit chart ── */
.dep-card { padding: 22px 22px 18px; }
.dep-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dep-chart-title { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.dep-chart-toggles { display: flex; gap: 2px; }
.dep-chart-toggles button { border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all .15s; font-family: inherit; }
.dep-chart-toggles button:hover { color: var(--text-strong); background: rgba(255,255,255,.04); }
.dep-chart-toggles button.active { background: rgba(46,134,255,.12); color: var(--green); }
.dep-chart-stats { display: flex; gap: 28px; margin-bottom: 18px; }
.dep-chart-stat-main { font-size: 26px; font-weight: 800; color: var(--text-strong); line-height: 1; }
.dep-chart-stat-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dep-chart-stat-item .dep-chart-stat-val { font-size: 15px; font-weight: 700; color: var(--text-strong); line-height: 1; }
.dep-chart-stat-item .dep-chart-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.dep-chart-wrap { position: relative; user-select: none; }
.dep-chart-canvas { width: 100%; height: 180px; display: block; cursor: crosshair; }
.dep-tt { position: absolute; pointer-events: none; background: rgba(12,20,14,.95); border: 1px solid rgba(46,134,255,.2); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-strong); white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.dep-tt.show { opacity: 1; }
.dep-tt-date { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.dep-tt-val { font-weight: 700; font-size: 14px; color: var(--green); }
.dep-tt-cnt { color: var(--muted); font-size: 11px; margin-top: 1px; }

/* ── Forecast chart ── */
.adm-channel .ch-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.adm-channel .ch-count { font-size: 32px; font-weight: 700; color: var(--text-strong); line-height: 1; }
.adm-channel .ch-label { font-size: 14px; color: var(--muted); }
.adm-channel .ch-delta { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 20px; margin-left: auto; }
.adm-channel .ch-up { color: #2E86FF; background: rgba(46,134,255,.1); }
.adm-channel .ch-down { color: #ff5252; background: rgba(255,82,82,.1); }
.adm-channel .ch-neutral { color: var(--muted); background: rgba(255,255,255,.04); }
.adm-channel .ch-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; margin-bottom: 14px; padding: 0 4px; }
.adm-channel .ch-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.adm-channel .ch-bar { width: 100%; max-width: 32px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #29b6f6 0%, #0288d1 100%); transition: height .3s ease; min-height: 4px; }
.adm-channel .ch-bar-label { font-size: 10px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.adm-channel .ch-stats { margin-top: 4px; }

.adm-forecast { overflow: hidden; }
.fc-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.fc-tabs { display: flex; gap: 2px; }
.fc-tab { border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 6px; cursor: pointer; transition: all .15s; font-family: inherit; }
.fc-tab:hover { color: var(--text-strong); background: rgba(255,255,255,.04); }
.fc-tab-active { background: rgba(46,134,255,.12); color: var(--green); }
.fc-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.fc-leg { display: flex; align-items: center; gap: 5px; }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fc-dot-dash { width: 14px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #ff5252 0 4px, transparent 4px 7px); }
.fc-dot-dash-green { width: 14px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #2E86FF 0 4px, transparent 4px 7px); }
.fc-dot-dash-blue { width: 14px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #42a5f5 0 4px, transparent 4px 7px); }
.fc-chart-wrap { position: relative; user-select: none; width: 100%; height: 100%; }
#fc-canvas { cursor: crosshair; display: block; }
.fc-tt { position: absolute; pointer-events: none; background: rgba(12,20,14,.95); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-strong); white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.fc-tt.show { opacity: 1; }
.fc-tt-date { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.fc-status { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; min-height: 16px; }
.fc-totals { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.1); }
.fc-totals-head { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; text-align: center; }
.fc-totals-hint { font-size: 12px; color: var(--muted); text-align: center; font-style: italic; }
.fc-totals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fc-total-cell { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 14px 16px; text-align: center; position: relative; overflow: hidden; }
.fc-total-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .7; }
.fc-total-users { border-color: rgba(46,134,255,.25); }
.fc-total-users::before { background: linear-gradient(90deg, transparent, #2E86FF, transparent); }
.fc-total-deps { border-color: rgba(66,165,245,.25); }
.fc-total-deps::before { background: linear-gradient(90deg, transparent, #42a5f5, transparent); }
.fc-total-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.fc-total-val { font-size: 24px; font-weight: 800; color: var(--text-strong); line-height: 1; margin-bottom: 4px; }
.fc-total-users .fc-total-val { color: #2E86FF; }
.fc-total-deps .fc-total-val { color: #42a5f5; }
.fc-total-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (max-width: 480px) { .fc-totals-grid { grid-template-columns: 1fr; } }

.tkt-filter { display: flex; gap: 8px; margin-bottom: 12px; }
.tkt-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 15px; margin-bottom: 8px; cursor: pointer; transition: .14s; }
.tkt-card:hover { border-color: var(--green); }
.tkt-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.tkt-dot.open { background: var(--green); } .tkt-dot.closed { background: var(--muted); }
.tkt-dot.needs { background: #f59e0b; box-shadow: 0 0 6px #f59e0b88; }
.tkt-dot.answered { background: #3b82f6; }
.tkt-new { font-size: 9px; font-weight: 800; color: #f59e0b; background: #f59e0b1a; padding: 1px 5px; border-radius: 4px; margin-left: 6px; letter-spacing: .5px; vertical-align: middle; }
.tkt-badge { font-size: 10px; font-weight: 700; background: #f59e0b; color: #000; padding: 1px 6px; border-radius: 8px; margin-left: 5px; vertical-align: middle; }
.tkt-badge-muted { background: var(--border); color: var(--muted); }
.tkt-card-user { font-weight: 700; color: var(--text-strong); font-size: 13px; }
.tkt-card-prev { color: var(--muted); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 460px; }
.tkt-meta { margin-left: auto; text-align: right; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.tkt-chat-col { display: flex; flex-direction: column; height: min(64vh, 560px); min-height: 380px; }
.tkt-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-shrink: 0; }
.tkt-chat-head > div { min-width: 0; flex: 1; }
.tkt-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.tkt-bubble { max-width: 75%; padding: 10px 13px; border-radius: 12px; font-size: 13px; }
.tkt-bubble-row { display: flex; }
.tkt-bubble-row.user { justify-content: flex-start; }
.tkt-bubble-row.admin { justify-content: flex-end; }
.tkt-bubble-row.user .tkt-bubble { background: var(--surface); color: var(--text); border-bottom-left-radius: 4px; }
.tkt-bubble-row.admin .tkt-bubble { background: linear-gradient(135deg, var(--green), var(--green2)); color: #06230f; border-bottom-right-radius: 4px; }
.tkt-bubble-time { display: block; font-size: 10px; opacity: .7; margin-top: 4px; }
.tkt-tr-btn { background: none; border: none; cursor: pointer; opacity: .35; padding: 2px; margin-left: 4px; transition: .15s; vertical-align: middle; }
.tkt-tr-btn:hover { opacity: .8; }
.tkt-tr-btn.active { opacity: 1; color: var(--green); }
.tkt-tr-btn .ic { width: 13px; height: 13px; }
.tkt-inputbar { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }

/* Ticket workspace (chat + drawer side-by-side) */
.tkt-workspace { display: none; gap: 0; position: relative; }
.tkt-chat-col { flex: 1; min-width: 0; transition: margin-right .28s ease; }
.tkt-drawer.open ~ .tkt-chat-col { margin-right: 0; }
.tkt-workspace:has(.tkt-drawer.open) .tkt-chat-col { margin-right: 0; }

/* Drawer */
.tkt-drawer { position: fixed; top: 0; right: 0; width: 380px; height: 100vh; background: var(--bg); border-left: 1px solid var(--border); z-index: 900; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: -4px 0 24px rgba(0,0,0,.25); }
.tkt-drawer.open { transform: translateX(0); }
.tkt-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tkt-drawer-title { font-weight: 700; font-size: 14px; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.tkt-drawer-title .ic { width: 16px; height: 16px; }
.tkt-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }

/* Info cards grid */
.tkt-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tkt-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; }
.tkt-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.tkt-info-label .ic { width: 12px; height: 12px; }
.tkt-info-val { font-size: 17px; font-weight: 800; color: var(--text-strong); }
.tkt-info-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Sections */
.tkt-info-section { margin-bottom: 16px; }
.tkt-info-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.tkt-info-title .ic { width: 13px; height: 13px; }

/* Deposits table */
.tkt-info-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tkt-info-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.tkt-info-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.tkt-st-ok { color: var(--green); font-weight: 600; font-size: 11px; }
.tkt-st-pending { color: #f59e0b; font-weight: 600; font-size: 11px; }
.tkt-st-fail { color: var(--red, #ef4444); font-weight: 600; font-size: 11px; }

/* Orders accordion */
.tkt-info-orders { display: flex; flex-direction: column; gap: 6px; }
.tkt-info-order { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: .14s; }
.tkt-info-order:hover { border-color: var(--green); }
.tkt-info-order-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12px; color: var(--text); cursor: pointer; }
.tkt-info-order-head .ic { width: 13px; height: 13px; vertical-align: -2px; }
.tkt-info-order-right { font-size: 11px; color: var(--muted); }
.tkt-info-order-cards { display: none; padding: 0 12px 10px; }
.tkt-info-order-cards.open { display: flex; flex-direction: column; gap: 6px; }

/* Card detail visual inside order */
.tkt-card-detail { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.tkt-card-dead { border-color: #3d2028; }
.tkt-cd-visual { position: relative; background: linear-gradient(135deg, #1a2620 0%, #16221b 45%, #10402a 100%); padding: 18px 20px 14px; color: #fff; aspect-ratio: 1.58; max-height: 210px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background-size: cover; background-position: center; }
.tkt-cd-visual::after { content: ''; position: absolute; right: -50px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(46,134,255,.15), transparent 70%); pointer-events: none; }
.tkt-card-dead .tkt-cd-visual::after { background: radial-gradient(circle, rgba(255,82,82,.10), transparent 70%); }
.tkt-cd-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.tkt-cd-chip { width: 36px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, #c9a94e 0%, #f0d878 30%, #c9a94e 50%, #a88832 70%, #f0d878 100%); position: relative; overflow: hidden; }
.tkt-cd-chip::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(0,0,0,.15); border-radius: 3px; }
.tkt-cd-chip::after { content: ''; position: absolute; top: 50%; left: 3px; right: 3px; height: 1px; background: rgba(0,0,0,.12); }
.tkt-cd-chip-dead { opacity: .25; }
.tkt-cd-contactless { width: 20px; height: 20px; opacity: .45; }
.tkt-cd-number { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; letter-spacing: 2.5px; text-shadow: 0 1px 3px rgba(0,0,0,.5); position: relative; z-index: 1; }
.tkt-card-dead .tkt-cd-number { opacity: .35; }
.tkt-cd-bottom { display: flex; align-items: flex-end; justify-content: space-between; position: relative; z-index: 1; }
.tkt-cd-holder { flex: 1; min-width: 0; }
.tkt-cd-holder-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.tkt-cd-exp-cvv { display: flex; gap: 14px; flex-shrink: 0; }
.tkt-cd-field {}
.tkt-cd-lbl { font-size: 7px; text-transform: uppercase; letter-spacing: 1px; opacity: .45; margin-bottom: 2px; }
.tkt-cd-v { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.tkt-cd-brand-row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; margin-top: 6px; }
.tkt-cd-price { font-size: 14px; font-weight: 800; color: #8fc4ff; }
.tkt-card-dead .tkt-cd-price { color: #ff9b9b; text-decoration: line-through; opacity: .6; }
.tkt-cd-brand { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .3; }
.tkt-cd-dead-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 32px; font-weight: 900; letter-spacing: 8px; color: rgba(255,82,82,.18); z-index: 3; pointer-events: none; text-shadow: 0 0 20px rgba(255,82,82,.08); }
.tkt-cd-status { position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; z-index: 4; backdrop-filter: blur(4px); }
.tkt-cd-status.live { background: rgba(46,134,255,.18); color: #2E86FF; border: 1px solid rgba(46,134,255,.3); }
.tkt-cd-status.dead { background: rgba(255,82,82,.18); color: #ff5252; border: 1px solid rgba(255,82,82,.3); }
.tkt-cd-status.pending { background: rgba(255,193,7,.15); color: #ffc107; border: 1px solid rgba(255,193,7,.25); }
.tkt-cd-fullz { padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg); }
.tkt-cd-fullz .tkt-fr { grid-column: span 1; }
.tkt-cd-fullz .tkt-fr.wide { grid-column: span 2; }
.tkt-fr { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.tkt-fr:last-child { border-bottom: none; }
.tkt-fr-lbl { width: 50px; flex-shrink: 0; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 500; }
.tkt-fr-val { color: var(--text-strong); word-break: break-all; font-size: 11px; }
.tkt-fr-empty { color: var(--muted); opacity: .4; }

@media (max-width: 700px) {
  .tkt-drawer { width: 100%; }
  .tkt-info-grid { grid-template-columns: 1fr 1fr; }
}
.tkt-inputbar textarea { flex: 1; min-height: 44px; }

/* Refund modal */
.tkt-refund-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tkt-refund-modal { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; max-width: 420px; width: 100%; }
.tkt-refund-head { font-size: 16px; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tkt-refund-head .ic { width: 18px; height: 18px; color: #f59e0b; }
.tkt-refund-bal { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.tkt-refund-section { margin-bottom: 14px; }
.tkt-refund-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.tkt-refund-order { font-size: 12px; color: var(--text); margin-bottom: 8px; line-height: 1.5; }
.tkt-refund-btns { display: flex; flex-direction: column; gap: 6px; }

/* Support chat (client) */
.sup-chat { max-width: 680px; padding: 0; display: flex; flex-direction: column; height: 560px; overflow: hidden; }
.sup-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(120deg, rgba(46,134,255,.08), transparent); }
.sup-agent { display: flex; align-items: center; gap: 11px; }
.sup-agent-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--green-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.sup-agent-name { font-weight: 800; color: var(--text-strong); font-size: 14px; }
.sup-agent-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green); }
.sup-agent-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.sup-chat-head .btn { width: auto; }
.sup-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.sup-row { display: flex; align-items: flex-end; gap: 8px; max-width: 80%; }
.sup-row.me { align-self: flex-end; flex-direction: row-reverse; }
.sup-row.them { align-self: flex-start; align-items: flex-start; }
.sup-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sup-bubble { padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.sup-row.them .sup-bubble { background: var(--surface); color: var(--text); border-bottom-left-radius: 4px; }
.sup-row.me .sup-bubble { background: linear-gradient(135deg, var(--green), var(--green2)); color: #06230f; border-bottom-right-radius: 4px; }
.sup-time { display: block; font-size: 10px; opacity: .65; margin-top: 4px; }
.sup-inputbar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.sup-inputbar .input { min-height: 44px; max-height: 120px; resize: none; }
.sup-send { width: 48px; flex-shrink: 0; padding: 0; }
.sup-empty { margin: auto; text-align: center; padding: 30px; }

/* ─────────── Support — Help center (ticket + FAQ) ─────────── */
.sup-sla { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sup-sla svg { color: var(--green); }
.sup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sup-col { display: flex; flex-direction: column; gap: 16px; }
.sup-col .card + .card { margin-top: 0; }
.req { color: var(--error); font-weight: 700; }

/* Notice box */
.sup-notice { align-items: flex-start; }
.sup-notice-ico { font-size: 16px; line-height: 1.4; }
.sup-notice b { color: var(--text-strong); font-weight: 700; display: block; }
.sup-notice p { color: var(--muted); font-size: 12.5px; font-weight: 500; margin-top: 7px; line-height: 1.55; }
.sup-notice p b { display: inline; color: var(--warning); }
.sup-notice a { color: var(--green); font-weight: 700; }
.sup-notice a:hover { text-decoration: underline; }

/* My open tickets table */
.sup-tickets-head, .sup-tickets-row { display: grid; grid-template-columns: 1.8fr 1fr auto; gap: 10px; align-items: center; }
.sup-tickets-head { padding: 0 2px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.sup-tickets-row { padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sup-tickets-row:last-child { border-bottom: none; }
.sup-t-subj { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-t-date { color: var(--muted); font-size: 12.5px; }
.sup-t-status { text-align: right; }
.sup-tickets-empty { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 13px; }
.sup-tickets-row { cursor: pointer; transition: background .14s; border-radius: 6px; }
.sup-tickets-row:hover { background: var(--surface); }
.sup-tickets-row.unread { background: rgba(255,77,141,.06); }
.sup-tickets-row.unread .sup-t-subj { color: var(--text-strong); font-weight: 700; }
.sup-t-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); margin-right: 7px; vertical-align: middle; animation: pulse 1.6s infinite; }
/* Notification dot on the Support nav link */
.nav-dot { position: absolute; top: 3px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: pulse 1.6s infinite; }

/* Ticket conversation modal (client reads admin replies) */
#sup-ticket-modal { --card: #15181b; --surface: #1c2024; --hover: #232930; --border: #2a3035; --line: rgba(255,255,255,.06); --text-strong: #f2f5f7; --text: #c4ccd2; --muted: #828b93; }
.sup-thread { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 85vh; overflow: hidden; animation: fade .2s ease; }
.sup-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sup-thread-title { font-weight: 800; color: var(--text-strong); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-thread-status { margin-top: 5px; }
.sup-thread-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.sup-thread-close:hover { color: var(--text-strong); background: var(--hover); }
.sup-thread-body { flex: 1; min-height: 340px; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#sup-ticket-modal .sup-inputbar { border-top: 1px solid var(--border); }

/* ── Support tickets list (pro) ── */
.sup-tickets-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sup-filter { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.sup-filter-btn { border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; transition: .14s; }
.sup-filter-btn.active { background: var(--green-soft); color: var(--green); }
.sup-ticket-list { display: flex; flex-direction: column; gap: 8px; }
.sup-ticket { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: .15s; }
.sup-ticket:hover { border-color: #34414a; background: var(--hover); }
.sup-ticket.unread { border-color: rgba(255,77,141,.4); background: rgba(255,77,141,.05); }
.sup-ticket-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.sup-ticket-dot.open { background: var(--green); box-shadow: 0 0 8px rgba(46,134,255,.5); }
.sup-ticket-dot.resolved { background: var(--muted); }
.sup-ticket-main { flex: 1 1 auto; min-width: 0; }
.sup-ticket-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sup-ticket-cat { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--green); background: var(--green-soft); padding: 2px 7px; border-radius: 5px; }
.sup-ticket-subj { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-ticket-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.sup-ticket-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-ticket-meta svg { width: 12px; height: 12px; }
.sup-ticket-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sup-ticket-chev { width: 16px; height: 16px; color: var(--muted); }
.sup-tickets-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; text-align: center; color: var(--muted); font-size: 13px; }
.sup-tickets-empty svg { width: 26px; height: 26px; opacity: .55; }

/* ── Chat thread (pro) ── */
.sup-daysep { align-self: center; margin: 4px 0; }
.sup-daysep span { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 3px 11px; border-radius: 999px; }
.sup-bubble-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sup-sender { font-size: 10.5px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 6px; }
.sup-staff-tag { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #06230f; background: var(--green); padding: 1px 5px; border-radius: 4px; }
.sup-resolved-note { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 10px; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.sup-resolved-note svg { width: 15px; height: 15px; color: var(--green); flex: 0 0 auto; }

/* FAQ accordion */
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: none; padding: 14px 2px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text-strong); transition: color .15s; }
.faq-q:hover { color: var(--green); }
.faq-item.open .faq-q { color: var(--green); }
.faq-ico { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
.faq-ico::before, .faq-ico::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--green); border-radius: 2px; transition: .2s ease; }
.faq-ico::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-ico::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq-item.open .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 220px; }
.faq-a p { color: var(--muted); font-size: 13px; line-height: 1.6; padding: 0 2px 16px; margin: 0; }

/* Documentation button */
.sup-doc-btn { width: 100%; margin-top: 16px; color: var(--green); background: var(--green-soft); border-color: rgba(46,134,255,.32); }
.sup-doc-btn:hover { background: var(--green-soft2); border-color: var(--green); }

@media (max-width: 860px) { .sup-layout { grid-template-columns: 1fr; } }

.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; padding: 4px; }
.country-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; cursor: pointer; transition: .12s; background: var(--surface); }
.country-chip span { color: var(--muted); font-weight: 600; }
.country-chip:hover { border-color: var(--green); }
.country-chip.sel { background: var(--green-soft); border-color: var(--green); }
.country-chip.sel span { color: var(--green); }

.rst-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; }
.rst-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rst-item-name { font-weight: 700; color: var(--text-strong); }
.rst-item-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.rst-item-actions { display: flex; gap: 8px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { display: none; }
.switch-slider { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; transition: .2s; }
.switch-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: .2s; }
.switch input:checked + .switch-slider { background: var(--green-soft); border-color: var(--green); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); background: var(--green); }

/* ─────────── Modal / DB overlay ─────────── */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-back.show { display: flex; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); max-width: 420px; width: 100%; padding: 26px; box-shadow: var(--shadow-lg); text-align: center; }
.modal-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--gold-soft); color: var(--gold2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 24px; }
.modal-title { font-size: 18px; font-weight: 800; color: var(--text-strong); margin-bottom: 8px; }
.modal-text { color: var(--muted); font-size: 14px; white-space: pre-line; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.modal-actions .btn { flex: 1; min-width: 0; justify-content: center; padding: 12px 16px; font-size: 13px; }
.modal-body { text-align: left; margin: 4px 0 20px; }
.modal-body .api-key-str { margin: 0 0 12px; }
.modal-body .api-key-str code { width: 100%; font-size: 12px; padding: 10px 12px; word-break: break-all; display: block; }

.db-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 300; display: none; flex-direction: column; }
.db-overlay.show { display: flex; }
.db-top { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--card); border-bottom: 1px solid var(--border); }
.db-back { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-title { font-size: 16px; font-weight: 800; color: var(--text-strong); }
.db-sub { font-size: 12px; color: var(--muted); }
.db-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--border); }
.db-controls .input { width: auto; min-width: 150px; }
.db-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.db-scroll { flex: 1; overflow-y: auto; padding: 18px 24px; }
/* Restock base — one card per row, info laid out horizontally, full-width for PC */
.db-grid { display: flex; flex-direction: column; gap: 11px; }
.db-card { display: flex; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 15px 22px; box-shadow: var(--shadow-sm); transition: .15s; }
.db-card:hover { border-color: #294a31; box-shadow: var(--shadow-md); }
.db-card-img { width: 66px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; }
.db-card-bin { flex: 0 1 190px; min-width: 96px; }
.db-bin { display: block; font-family: ui-monospace, monospace; font-weight: 700; font-size: 15px; color: var(--text-strong); white-space: nowrap; }
.db-card-sub { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cell { flex: 0 1 104px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.db-cell-bank { flex: 1 1 160px; }
.db-cell-k { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.db-cell-v { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cell-cc { display: flex; align-items: center; gap: 7px; }
.db-cell-cc > span { font-size: 12.5px; font-weight: 700; color: var(--text); }
.cc-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.cc-flag-sm { width: 18px; height: 13px; border-radius: 2px; margin-right: 5px; }
.db-card-price { flex: 0 0 80px; text-align: right; font-size: 20px; font-weight: 800; color: var(--primary); }
.db-card-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.db-card-actions .btn { width: auto; }
@media (max-width: 760px) {
  .db-card { flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; }
  .db-card-bin { flex: 1 1 auto; }
  .db-cell { flex: 0 0 74px; }
  .db-cell-bank { flex: 1 1 100%; }
  .db-card-price { flex: 0 0 auto; margin-left: auto; }
  .db-card-actions { flex: 1 1 100%; }
  .db-card-actions .btn { flex: 1; }
}
.db-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0 4px; }
.db-pager .btn { width: auto; }

/* Restock base embedded in the Bank Cards page */
#shop-base { scroll-margin-top: 76px; }
.shop-base-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.shop-base-head .db-back { flex: 0 0 auto; }
.shop-base-lookup { flex: 0 0 auto; }
.shop-base-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.shop-base-controls .input { width: auto; min-width: 160px; }
.db-country-wrap { position: relative; }
.db-country-field { padding-right: 34px; }
.db-country-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.db-country-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 240px; max-height: 280px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; display: none; }
.db-country-menu.open { display: block; }
.db-country-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.db-country-opt:hover, .db-country-opt.active { background: var(--green-soft); }
.db-country-opt .cc-code { flex: 0 0 30px; font-family: ui-monospace, monospace; font-weight: 700; color: var(--text-strong); }
.db-country-opt.active .cc-code, .db-country-opt:hover .cc-code { color: var(--green); }
.db-country-opt .cc-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-country-empty { padding: 10px 11px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) {
  .shop-base-lookup { display: none; }
  .shop-base-controls .input { flex: 1; min-width: 0; }
}
.db-pageinfo { font-size: 13px; color: var(--muted); }
.db-cart-fab { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green2)); color: #06230f; border: none; font-size: 22px; box-shadow: var(--shadow-lg); z-index: 320; display: none; align-items: center; justify-content: center; }
.db-cart-badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.db-cart-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); z-index: 330; display: none; }
.db-cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: #1a1d21; border-left: 1px solid rgba(255,255,255,.06); z-index: 340; display: none; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.5); }
.db-cart-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; background: #15171a; border-bottom: 1px solid rgba(255,255,255,.06); }
.db-cart-head-left { display: flex; align-items: center; gap: 10px; }
.db-cart-head-title { font-weight: 800; font-size: 17px; color: #fff; }
.db-cart-head-count { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); padding: 2px 8px; border-radius: 999px; }
.db-cart-head button { background: rgba(255,255,255,.06); border: none; color: rgba(255,255,255,.4); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.db-cart-head button:hover { background: rgba(255,255,255,.1); color: #fff; }
.db-cart-lines { flex: 1; overflow-y: auto; padding: 16px 18px; }
.db-cart-lines::-webkit-scrollbar { width: 4px; }
.db-cart-lines::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
.db-cart-line { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.03); margin-bottom: 8px; transition: background .15s; }
.db-cart-line:hover { background: rgba(255,255,255,.05); }
.db-cart-line-img { width: 52px; height: 33px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,.08); background: #111; flex: 0 0 auto; }
.db-cart-line-info { flex: 1 1 auto; min-width: 0; }
.db-cart-line-bin { font-family: ui-monospace, monospace; font-weight: 700; color: #fff; font-size: 13px; letter-spacing: .5px; }
.db-cart-line-meta { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cart-line-warn { margin-top: 5px; font-size: 10.5px; color: #e6a817; background: rgba(230,168,23,.1); border-radius: 5px; padding: 4px 8px; display: flex; align-items: center; gap: 4px; line-height: 1.4; }
.db-cart-line-warn .ic { width: 12px; height: 12px; flex-shrink: 0; }
.db-cart-line-warn b { color: #f0b429; }
.db-cart-line-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.db-cart-line-price { color: var(--green); font-size: 15px; font-weight: 800; }
.db-cart-line-rm { background: none; border: none; color: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 6px; transition: all .15s; }
.db-cart-line-rm:hover { color: #ff5252; background: rgba(255,82,82,.1); }
.db-cart-line-rm svg { width: 16px; height: 16px; }
.db-cart-foot { padding: 20px 22px; background: #15171a; border-top: 1px solid rgba(255,255,255,.06); }
.db-cart-total { margin-bottom: 14px; }

#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: #04130a; border: 1px solid var(--green); color: var(--text-strong); padding: 12px 20px; border-radius: var(--r); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: .25s; z-index: 500; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.empty { text-align: center; padding: 30px; color: var(--muted); font-weight: 600; font-size: 13px; }
.spinner-lg { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; margin: 30px auto; }

@media (max-width: 1080px) {
  .home-top { grid-template-columns: 1fr 1fr; }
  .welcome-card { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .navbar-burger { display: flex; }
  .navbar-burger { order: -1; }
  .navbar-links {
    position: absolute; top: 60px; left: 0; right: 0; z-index: 61;
    background: var(--navy); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; display: none;
  }
  .navbar-links.open { display: flex; }
  .nav-link { padding: 11px 12px; }
  .nav-link.active::after { display: none; }
  .nav-link.active { background: var(--green-soft); }
  .navbar-links.open ~ .navbar-menu-back,
  .navbar-menu-back.open { display: block; position: fixed; inset: 60px 0 0 0; background: rgba(0,0,0,.5); z-index: 59; }
  .navbar-profile-info { display: none; }
  .navbar-right { margin-left: auto; }
}
@media (max-width: 640px) {
  .home-top { grid-template-columns: 1fr; }
  .navbar-brandname { display: none; }
  .dep-crypto-grid { grid-template-columns: 1fr; }
  .dep-network-grid { grid-template-columns: 1fr; }
  .tier-table-head { display: none; }
  .tier-row { grid-template-columns: 1fr auto; }
  .tier-ex { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 560px) {
  .content { padding: 12px; }
  .info-grid, .grid2, .grid3 { grid-template-columns: 1fr; }
  .db-cart-panel { width: 100%; }

  /* ── Home ── */
  .welcome-card { padding: 16px; gap: 12px; }
  .welcome-illus { display: none; }
  .welcome-name { font-size: 20px; }
  .welcome-sub { font-size: 12px; margin: 4px 0 12px; }
  .welcome-bal { font-size: 28px; margin: 2px 0 12px; }
  .welcome-bal-label { font-size: 10px; }
  .home-top { gap: 10px; }

  /* ── Top buyers ── */
  .lb-podium { gap: 4px; padding-top: 16px; margin-bottom: 14px; }
  .pod { width: 90px; }
  .pod-ava { width: 40px; height: 40px; font-size: 15px; }
  .pod-ava.r1 { width: 50px; height: 50px; font-size: 18px; }
  .pod-name { font-size: 10px; max-width: 85px; }
  .pod-pts { font-size: 9px; }
  .pod-prize { font-size: 10px; padding: 2px 7px; }
  .pod-block { font-size: 14px; }
  .pod-1 .pod-block { height: 70px; }
  .pod-2 .pod-block { height: 52px; }
  .pod-3 .pod-block { height: 38px; }
  .pod-crown { top: -22px; font-size: 18px; }
  .lb-row { gap: 8px; padding: 10px 0; }
  .lb-id { width: 90px; }
  .lb-handle { font-size: 12px; }
  .lb-sub { font-size: 10px; }
  .lb-pts { font-size: 11px; }
  img.lb-ava { width: 24px; height: 24px; }
  .lb-ava-letter { width: 24px; height: 24px; font-size: 10px; }
  .lb-rank { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }

  /* ── Orders ── */
  .ord-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ord-toolbar-actions { flex-wrap: wrap; }
  .ord-toolbar-actions .btn { flex: 1 1 45%; justify-content: center; font-size: 11px; padding: 8px 6px; }
  .ord-row { gap: 10px; padding: 10px 12px; }
  .ord-row-main { min-width: 0; }

  /* ── Referral ── */
  .ref-link-row { flex-direction: column; }
  .ref-link-row .btn { width: 100%; }
  .ref-link-input { font-size: 11px; }
  .ref-stats { gap: 8px; }
  .ref-stat { padding: 10px 12px; }
  .ref-stat-val { font-size: 18px; }
  .ref-step { font-size: 12px; }

  /* ── Support ── */
  .sup-notice { font-size: 12px; padding: 12px; }
  .sup-notice p { font-size: 11px; }
  .sup-notice b { font-size: 12px; }
  .sup-chat { height: 480px; }
  .sup-msgs { padding: 12px; }
  .sup-row { max-width: 88%; }

  /* ── Deposit ── */
  .dep-amount-field .input { font-size: 17px; }
  .dep-crypto { padding: 12px; }
  .dep-crypto-head { margin-bottom: 10px; }
  .dep-crypto-ico { width: 28px; height: 28px; }
  .dep-crypto-name { font-size: 13px; }

  /* ── Profile ── */
  .profile-cols { gap: 12px; }

  /* ── Filters (Bank Cards) ── */
  .sc-filters { padding: 12px; margin-bottom: 10px; }
  .sc-filter-row { gap: 8px; }
  .sc-filter-label { font-size: 9px; }
  .sc-dd-btn { height: 36px; font-size: 12px; }
  .sc-input-sm { height: 36px; font-size: 12px; }
  .sc-input-xs { height: 36px; font-size: 12px; }
  .sc-filter-actions { margin-top: 8px; gap: 6px; }
  .sc-filter-btn { height: 34px; font-size: 11px; padding: 0 10px; }
  .sc-binreq-inline { display: none; }

  /* ── Navbar ── */
  .navbar-inner { padding: 0 10px; gap: 8px; height: 48px; }
  .navbar-logo { width: 32px; height: 32px; }
  .navbar-right { gap: 8px; }
  .navbar-icon { width: 34px; height: 34px; border-radius: 8px; }
  .navbar-icon svg { width: 16px; height: 16px; }
  .navbar-profile { padding: 3px; border-radius: 50%; }
  .navbar-avatar { width: 28px; height: 28px; }
  .navbar-burger { width: 34px; height: 34px; border-radius: 8px; }
  .navbar-links { top: 48px; }
  .navbar-menu-back.open { inset: 48px 0 0 0; }
  .navbar-right > a.navbar-icon:first-child { display: none; }
  .navbar-right > button.navbar-icon:last-child { display: none; }

  /* ── Page titles ── */
  .page-head h1 { font-size: 20px; }
  .page-head p { font-size: 12px; }
  .dash-title { font-size: 18px; }

  /* ── Cards results bar ── */
  .sc-results-bar { font-size: 12px; flex-wrap: wrap; gap: 6px; }

  /* ── Toast ── */
  #toast { font-size: 12px; padding: 10px 16px; bottom: 20px; }
}

/* ════════════════════════════════════════════════════════
   NEUTRAL-DARK DASHBOARD  (logged-in app only)
   Graphite base — NOT green. Green & gold only as accents,
   so colours pop without the page feeling "all green".
   Login (#auth-screen) keeps its own dark-green palette.
   ════════════════════════════════════════════════════════ */
#app {
  --bg:          #0d0f11;
  --bg2:         #090b0c;
  --card:        #15181b;
  --surface:     #1c2024;
  --hover:       #232930;
  --border:      #2a3035;
  --line:        rgba(255,255,255,.06);
  --text-strong: #f2f5f7;
  --text:        #c4ccd2;
  --muted:       #828b93;
  --navy:        #0f1214;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 2px 6px rgba(0,0,0,.5);
  --shadow-md: 0 8px 22px rgba(0,0,0,.55);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.62);
  /* faint green brand glow in one corner — just a hint */
  background: radial-gradient(1100px 620px at 100% -12%, #122019 0%, var(--bg) 55%);
}

/* Hero cards → neutral graphite (their green/gold accents stay on top) */
#app .welcome-card { background: linear-gradient(120deg, #1a2024 0%, #15191c 55%, #141b18 100%); border-color: #283036; }
#app .profile-hero { background: linear-gradient(120deg, #1a2024 0%, #14191c 100%); border-color: #283036; }
#app .adm-topbar   { background: linear-gradient(120deg, #1a2024 0%, #14191c 100%); border-color: #283036; }

/* Restock cards → neutral graphite body + neutral header (no green mass) */
#app .rst-card { background: linear-gradient(180deg, #16191c, #131619); border-color: var(--border); }
#app .rst-card:hover { border-color: #34414a; }
#app .rst-card-banner { background: linear-gradient(120deg, #1a2024, #141a1d); border-bottom-color: var(--border); }

/* ══════════════════════════════════════════
   SVG ICONS — replaces every emoji site-wide
   ══════════════════════════════════════════ */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
.btn .ic, button .ic { vertical-align: -0.16em; }
.ic-green { color: var(--green); }
.ic-gold  { color: var(--gold2); }

/* Icon tiles: give the monochrome SVG an on-brand color (emoji used to carry their own) */
.stat-chart-ico, .order-ico, .recent-ava, .sup-ava, .adm-topbar-logo, .notif-ico { color: var(--green); }
.stat-icon.blue, .stat-icon.green { color: var(--green); }
.stat-icon.orange { color: var(--gold2); }
.stat-icon.pink   { color: #ff4d8d; }
.pod-crown        { color: var(--gold2); }
.landing-chip-ico { color: var(--green); }
.rst-vendor .ic, .rst-item-stats .ic { color: var(--muted); }

/* Notification icon tints by type */
.notif-ico.notif-deposit  { color: var(--green); }
.notif-ico.notif-purchase { color: var(--gold2); }
.notif-ico.notif-support  { color: #ff4d8d; }
.notif-ico.notif-restock  { color: var(--green); }
.notif-ico.notif-admin    { color: var(--muted); }

/* Admin tabs: keep icon + label aligned */
.adm-tab { display: inline-flex; align-items: center; gap: 6px; }

/* Toast: icon sits inline with the message */
#toast { display: inline-flex; align-items: center; gap: 8px; }
#toast .ic { width: 16px; height: 16px; }

/* ── Thin bottom banner ─────────────────────────────────────────
   Not a fixed overlay — it lives at the END of the page. On short
   sections it rests at the bottom (sticky-footer); on tall/scrollable
   sections (e.g. Home) it only appears once you scroll all the way down. */
.sitebar {
  width: 100%; pointer-events: none;
  padding: 9px 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--muted);
  background: rgba(5, 9, 7, .5); border-top: 1px solid rgba(255, 255, 255, .06);
}
.sitebar b { color: var(--gold2); font-weight: 800; letter-spacing: 1px; }
.sitebar .sep { opacity: .5; margin: 0 7px; }

/* Dashboard (#app): flex column so the banner is pushed to the bottom of
   the content — fills the viewport when short, scrolls into view when tall. */
#app.ready { display: flex; flex-direction: column; }
#app .main { flex: 1 0 auto; min-height: 0; }

/* Landing (#auth-screen never scrolls): pin the banner to the bottom. */
#auth-screen .sitebar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }

/* ── Network picker (USDT/USDC multi-network) ── */
.dep-network-picker { margin-top: 12px; padding: 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); animation: fadeSlide .2s ease; }
.dep-network-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.dep-network-label span { color: var(--text-strong); font-weight: 700; }
.dep-network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.dep-network-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .15s; font-size: 13px; color: var(--text); }
.dep-network-btn:hover { border-color: var(--green); background: var(--green-soft); }
.dep-network-btn .net-name { font-weight: 700; font-size: 14px; }
.dep-network-btn .net-info { font-size: 11px; color: var(--muted); }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* === MOD CENTER === */
.mod-hero {
  background: linear-gradient(135deg, rgba(46,134,255, 0.14), rgba(51, 122, 183, 0.06));
  border: 1px solid rgba(46,134,255, 0.28);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.mod-hero::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(46,134,255,0.18), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.mod-hero-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.mod-hero-sub { color: var(--text-muted, #8a8f98); font-size: 14px; }
.mod-hero-sub b { color: var(--success, #2E86FF); font-weight: 700; }
.mod-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.mod-qa-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card, #1a1d24);
  border: 1px solid var(--border, #2a2e37);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text, #e6e6e6);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.mod-qa-btn:hover {
  border-color: rgba(46,134,255, 0.5);
  transform: translateY(-2px);
  background: rgba(46,134,255, 0.04);
}
.mod-qa-btn:active { transform: translateY(0); }
.mod-qa-ico {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46,134,255, 0.13);
  color: var(--success, #2E86FF);
  border-radius: 10px;
  flex-shrink: 0;
}
.mod-qa-ico svg { width: 20px; height: 20px; }
.mod-qa-text { min-width: 0; }
.mod-qa-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.mod-qa-sub { font-size: 12px; color: var(--text-muted, #8a8f98); }
.mod-ticket-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 6px;
  border: 1px solid transparent;
}
.mod-ticket-row:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(46,134,255, 0.2);
}
.mod-ticket-ava {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success, #2E86FF), #337ab7);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.mod-ticket-body { flex: 1; min-width: 0; }
.mod-ticket-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 3px; }
.mod-ticket-name { font-weight: 700; font-size: 14px; }
.mod-ticket-time { font-size: 11px; color: var(--text-muted, #8a8f98); flex-shrink: 0; }
.mod-ticket-msg {
  color: var(--text-muted, #8a8f98);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod-ticket-btn { flex-shrink: 0; }
.mod-empty-good {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted, #8a8f98);
}
.mod-empty-good .big { font-size: 42px; margin-bottom: 8px; }
.mod-empty-good .msg { font-weight: 600; color: var(--success, #2E86FF); }
.mod-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}
.mod-section-title .lhs { display: flex; align-items: center; gap: 8px; }
.mod-section-title .lhs svg { width: 18px; height: 18px; color: var(--success, #2E86FF); }
.nav-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 18px;
  margin-left: 6px;
  vertical-align: middle;
  animation: mod-pulse 2s infinite;
}
@keyframes mod-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
@media (max-width: 640px) {
  .mod-ticket-row { flex-wrap: wrap; }
  .mod-ticket-btn { width: 100%; margin-top: 8px; }
  .mod-hero { padding: 18px; }
  .mod-hero-title { font-size: 18px; }
}
/* === END MOD CENTER === */

/* === MOD PERMS V2 === */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.modal.show { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }

.mp-card {
  position: relative;
  background: linear-gradient(180deg, #1c2028, #16191f);
  border: 1px solid rgba(46,134,255, 0.2);
  border-radius: 20px;
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(46,134,255,0.05);
  animation: mp-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}
@keyframes mp-in {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.mp-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(46,134,255,0.06), transparent);
}
.mp-hd-ic {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(46,134,255,0.2), rgba(51,122,183,0.1));
  border-radius: 12px;
  color: #2E86FF;
  flex-shrink: 0;
}
.mp-hd-ic svg { width: 22px; height: 22px; }
.mp-hd-txt { flex: 1; min-width: 0; }
.mp-hd-title {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #f0f2f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-hd-sub {
  font-size: 12px;
  color: #8a8f98;
  margin-top: 2px;
}
.mp-x {
  background: transparent; border: none;
  color: #8a8f98;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.mp-x:hover { background: rgba(255,255,255,0.06); color: #f0f2f5; }

.mp-list {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.mp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.mp-row:hover {
  border-color: rgba(46,134,255, 0.3);
  background: rgba(46,134,255, 0.04);
}
.mp-ico {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46,134,255, 0.1);
  color: #2E86FF;
  border-radius: 10px;
  flex-shrink: 0;
}
.mp-ico svg { width: 18px; height: 18px; }
.mp-info { flex: 1; min-width: 0; }
.mp-name {
  font-weight: 700; font-size: 14px;
  color: #f0f2f5;
  margin-bottom: 2px;
}
.mp-desc {
  font-size: 12px;
  color: #8a8f98;
  line-height: 1.35;
}
.mp-switch {
  position: relative;
  width: 46px; height: 26px;
  background: #3a3e47;
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mp-switch.on { background: #2E86FF; }
.mp-knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.mp-switch.on .mp-knob { transform: translateX(20px); }

.mp-ft {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}
.mp-ft .btn { min-width: 100px; }

@media (max-width: 500px) {
  .mp-card { width: 100%; max-height: 92vh; }
  .mp-hd { padding: 18px 16px 14px; }
  .mp-list { padding: 12px 14px; }
  .mp-ft { padding: 14px 16px 16px; }
  .mp-ft .btn { flex: 1; }
}
/* === END MOD PERMS V2 === */



/* Admin toolbox ticket bar */
.tkt-tools-bar { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.tkt-tools-bar .btn { padding: 6px 8px; font-size: 11px; }
.tkt-dep-acts { text-align: right; white-space: nowrap; }
.tkt-dep-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 6px; border-radius: 4px; cursor: pointer; margin-left: 3px; transition: .15s; }
.tkt-dep-btn:hover { background: var(--card); color: var(--green); border-color: var(--green); }

/* Tool forms in modals */
.tkt-tool-form { text-align: left; }
.tkt-tool-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.tkt-tool-ok { padding: 8px 12px; background: rgba(46,134,255,.08); border: 1px solid rgba(46,134,255,.35); border-radius: 6px; color: var(--green); font-size: 13px; font-weight: 600; }
.tkt-tool-err { padding: 8px 12px; background: rgba(255,80,80,.08); border: 1px solid rgba(255,80,80,.4); border-radius: 6px; color: #ff8080; font-size: 13px; font-weight: 600; }
.tkt-tool-warn { padding: 8px 12px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.4); border-radius: 6px; color: #f59e0b; font-size: 13px; font-weight: 600; }
.tkt-tv-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.tkt-tv-row span { color: var(--muted); }
.tkt-tv-out { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.tkt-tv-out code { font-family: ui-monospace, monospace; background: var(--card); padding: 2px 6px; border-radius: 4px; }
.tkt-tv-match { padding: 10px; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.tkt-tv-match.mismatch { border-color: #ff5050; background: rgba(255,80,80,.05); }
.tkt-note { padding: 10px; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.tkt-note-txt { font-size: 13px; white-space: pre-wrap; }
.tkt-note-meta { font-size: 11px; color: var(--muted); margin-top: 6px; }
.tkt-note-meta a { color: #ff8080; text-decoration: none; }
.tkt-flag-line { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; }
.tkt-flag-line:hover { background: var(--card); }
.tkt-flag-line input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.tkt-badge-danger { background: #7a1f1f; color: #ffbdbd; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.tkt-badge-ok { background: #1f5a2f; color: #b0d4ff; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }

/* Fix: MOD PERMS V2 declares a global .modal { display: none; position: fixed } that broke
   the small appConfirm/appModal popups. Re-apply the popup styles with higher specificity. */
.modal-back .modal {
  position: static !important;
  inset: auto !important;
  display: block !important;
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 420px;
  width: 100%;
  padding: 26px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  z-index: auto;
}

/* Admin ticket tools — compact dropdown */
.tkt-tools-wrap { position: relative; display: inline-block; }
.tkt-tools-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .15s, transform .15s;
  z-index: 250;
}
.tkt-tools-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.tkt-tools-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 6px;
  font-size: 13px; color: var(--text-strong);
  cursor: pointer; transition: background .12s, color .12s;
}
.tkt-tools-item:hover { background: rgba(46,134,255,.08); color: var(--green); }
.tkt-tools-item .ic { width: 15px; height: 15px; flex-shrink: 0; }
.tkt-tools-item span { flex: 1; white-space: nowrap; }

/* Blurred placeholder for admin stat KPIs when value is unavailable */
.stat-blur {
  display: inline-block;
  filter: blur(5px);
  user-select: none;
  opacity: 0.55;
  letter-spacing: -0.5px;
}

/* Client activity — clickable filter chips */
.act-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.act-summary .act-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.act-summary .act-filter:hover { border-color: var(--green); color: var(--text-strong); }
.act-summary .act-filter.active { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.act-summary .act-filter .ic { width: 13px; height: 13px; }

/* ===================== MOBILE / RESPONSIVE — Admin panel ===================== */
@media (max-width: 780px) {
  /* Admin tabs — horizontal scroll */
  .adm-tabs { padding: 4px; gap: 2px; font-size: 12px; }
  .adm-tabs .btn { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .adm-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
  .adm-kpis .stat { padding: 12px 10px; }
  .adm-kpis .stat-value { font-size: 18px; }
  .adm-kpis .stat-label { font-size: 11px; }

  /* Balance Pepe bar — stack vertically on very small screens */
  .adm-pepe-bal { flex-wrap: wrap; padding: 10px 12px !important; font-size: 13px !important; }
  .adm-pepe-bal > div[style*=margin-left:auto] { margin-left: 0 !important; width: 100%; margin-top: 8px; justify-content: flex-end; }
  .adm-pepe-bal img[alt=pepe] { height: 18px !important; }

  /* Ticket workspace — stack chat + drawer, drawer becomes full-screen when open */
  .tkt-workspace { display: block !important; }
  .tkt-chat-col { height: calc(100vh - 200px); min-height: 300px; margin-right: 0 !important; }
  .tkt-drawer { width: 100%; max-width: none; }
  .tkt-chat-head { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .tkt-chat-head .btn { padding: 6px 10px; font-size: 11px; }
  #tkt-chat-name { font-size: 13px; }
  .tkt-inputbar { flex-wrap: wrap; padding: 8px; gap: 6px; }
  .tkt-inputbar textarea { flex: 1 1 100%; min-height: 60px; }
  .tkt-inputbar .btn { flex: 1; padding: 8px 6px; font-size: 12px; }

  /* Ticket filter buttons — wrap */
  .tkt-filter { flex-wrap: wrap; gap: 6px; }
  .tkt-filter .btn { flex: 1; min-width: 90px; font-size: 11px; padding: 8px 6px; }

  /* Tools dropdown menu — fill screen width, position under button */
  .tkt-tools-menu { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; min-width: 0; z-index: 500; }
  .tkt-tools-item { padding: 12px 14px; font-size: 14px; }

  /* Modal — smaller padding, taller allowed */
  .modal-back { padding: 12px; }
  .modal-back .modal { padding: 18px !important; max-width: 100% !important; max-height: calc(100vh - 24px); overflow-y: auto; }
  .modal-title { font-size: 16px !important; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { min-width: 100px; }

  /* Refund overlay + confirm modal — normalize on mobile */
  .tkt-refund-overlay { padding: 12px; }
  .tkt-refund-modal { max-width: 100%; padding: 16px !important; max-height: calc(100vh - 24px); overflow-y: auto; }

  /* Client activity — chips wrap comfortably */
  .act-summary { gap: 4px; }
  .act-summary .act-filter { padding: 5px 10px; font-size: 11px; }

  /* Balance layout — already stacks at 960px via existing rule, tighten spacing */
  .bal-layout { gap: 12px; }
  .bal-side { display: grid; grid-template-columns: 1fr; gap: 10px; }

  /* Search dropdown — full width, no overflow */
  .bal-search-dd { position: static; margin-top: 6px; }
  .bal-search-item { padding: 10px 12px; }
  .bal-search-name { font-size: 13px; }
  .bal-search-sub { font-size: 11px; }

  /* Admin data tables inside tickets info */
  .tkt-info-table { font-size: 11px; }
  .tkt-info-table th, .tkt-info-table td { padding: 6px 4px; }
  .tkt-dep-acts { text-align: center; }
  .tkt-dep-btn { padding: 6px 8px; }

  /* Card grid inside ticket info (bought cards) — 1 per row */
  .tkt-info-orders .tkt-info-order { padding: 8px 10px; }
  .tkt-info-order-cards { grid-template-columns: 1fr !important; }
  .tkt-card-detail { flex-direction: column; }
  .tkt-cd-visual { width: 100% !important; max-width: 320px; margin: 0 auto; }

  /* TXID verifier — outputs wrap */
  .tkt-tv-row, .tkt-tv-out { flex-wrap: wrap; gap: 4px; }
  .tkt-tv-out code { font-size: 10px; word-break: break-all; }

  /* Balance action buttons — stack */
  .bal-actions { flex-direction: column; gap: 8px; }
  .bal-actions .btn { width: 100%; }
  .bal-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Very small phones — extra tight */
@media (max-width: 400px) {
  .adm-kpis { grid-template-columns: 1fr; }
  .adm-kpis .stat-value { font-size: 20px; }
  .adm-pepe-bal { font-size: 12px !important; }
  .adm-pepe-bal b { font-size: 14px !important; }
  .modal-title { font-size: 15px !important; }
  .tkt-chat-col { height: calc(100vh - 160px); min-height: 260px; }
}

/* Reply templates */
.tkt-tmpl-wrap { text-align: left; max-height: 60vh; overflow-y: auto; }
.tkt-tmpl-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tkt-tmpl-item { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tkt-tmpl-title { font-weight: 700; font-size: 13px; color: var(--text-strong); margin-bottom: 4px; }
.tkt-tmpl-preview { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; }
.tkt-tmpl-actions { display: flex; gap: 6px; }
.tkt-tmpl-actions .btn { padding: 5px 10px; font-size: 11px; }
.tkt-tmpl-add { border-top: 1px dashed var(--border); padding-top: 8px; }

/* TXID auto-scan display */
.tkt-tv-header { padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.tkt-tool-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tkt-tv-summary { font-size: 13px; color: var(--muted); margin-bottom: 10px; padding: 8px 12px; background: var(--surface); border-radius: 6px; }
.tkt-tv-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.tkt-tv-scan-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; background: var(--surface); }
.tkt-tv-scan-row.tkt-flag-ok { border-color: rgba(46,134,255,.4); background: rgba(46,134,255,.04); }
.tkt-tv-scan-row.tkt-flag-err { border-color: #ff5050; background: rgba(255,80,80,.06); }
.tkt-tv-scan-row.tkt-flag-warn { border-color: #f59e0b; background: rgba(245,158,11,.06); }
.tkt-tv-scan-row.tkt-flag-neutral { opacity: .7; }
.tkt-tv-scan-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tkt-tv-scan-flag { font-weight: 700; font-size: 11px; }
.tkt-tv-scan-desc { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.tkt-tv-scan-meta { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.tkt-tv-scan-actions { display: flex; gap: 6px; }

.adm-scope-badge {
  padding: 10px 14px;
  background: rgba(46,134,255,.08);
  border: 1px solid rgba(46,134,255,.3);
  border-radius: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Mobile ticket header — clean 2-row grid layout */
@media (max-width: 780px) {
  .tkt-chat-head {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px !important;
  }
  /* Row 1: back button — user name — close button */
  .tkt-chat-head > button:first-child { grid-column: 1; grid-row: 1; }
  .tkt-chat-head > div:first-of-type {
    grid-column: 2; grid-row: 1;
    min-width: 0; overflow: hidden;
  }
  .tkt-chat-head > div:first-of-type #tkt-chat-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 14px !important;
  }
  .tkt-chat-head > div:first-of-type #tkt-chat-uid {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 11px;
  }
  #tkt-toggle {
    grid-column: 3; grid-row: 1;
    justify-self: end;
  }
  /* Row 2: Info + Refund + Tools spread evenly */
  #tkt-info-btn {
    grid-column: 1; grid-row: 2;
    margin-left: 0 !important;
    justify-self: start;
  }
  .tkt-chat-head > button.btn-warning {
    grid-column: 2; grid-row: 2;
    justify-self: center;
  }
  .tkt-tools-wrap {
    grid-column: 3; grid-row: 2;
    justify-self: end;
  }
  .tkt-chat-head #tkt-info-btn,
  .tkt-chat-head > button.btn-warning,
  .tkt-tools-wrap > button {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }
}

/* Provider page */
.prov-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.prov-status {
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  flex-shrink: 0;
}
.prov-status.on { background: rgba(46,134,255,.15); color: var(--green); border: 1px solid rgba(46,134,255,.4); }
.prov-status.off { background: rgba(150,150,150,.1); color: var(--muted); border: 1px solid var(--border); }
.prov-info { flex: 1; min-width: 0; }
.prov-label { font-weight: 700; font-size: 14px; }
.prov-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.prov-sub code { background: var(--card); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
.prov-actions { display: flex; gap: 6px; flex-shrink: 0; }
.prov-actions .btn { padding: 6px 10px; font-size: 12px; }

/* Network picker — selected state */
.dep-network-btn.selected {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--text-strong);
  box-shadow: 0 0 0 2px rgba(46,134,255,.25), 0 6px 20px rgba(46,134,255,.15);
  position: relative;
}
.dep-network-btn.selected::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 12px;
  color: var(--green);
  font-weight: 800;
  font-size: 14px;
}
.dep-network-btn.selected .net-name { color: var(--green); }

/* MARIO WIDE RECT */
/* scene */
body{background:linear-gradient(180deg,#7FB0FF 0%,#9CC4FF 60%,#C3DBFF 100%) fixed!important;min-height:100vh}
body::before{content:'';position:fixed;left:0;right:0;top:34px;height:90px;z-index:0;pointer-events:none;background:url('/mario/cloudband.png?v=mariou7') repeat-x center top/700px 90px;opacity:.95}
body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:200px;z-index:0;pointer-events:none;background:url('/mario/overworld_wide.png') repeat-x center bottom/auto 200px}
#auth-snow,#app-snow{z-index:1!important;opacity:.6!important}
#auth-screen{background:transparent!important;z-index:1!important;display:flex!important;align-items:center;justify-content:center}
#auth-screen::before,#auth-screen::after{display:none!important}
.landing{grid-template-columns:1fr!important;max-width:none!important;height:auto!important;min-height:100vh;padding:120px 20px 210px!important;place-items:center}
.landing-right{display:none!important}
.landing-left>*{animation:none!important;opacity:1!important;transform:none!important}
.mc-hero{width:100%;display:flex;justify-content:center}

/* panel — LANDSCAPE rectangle */
.mc-panel{display:flex;flex-direction:row;width:100%;max-width:1000px;min-height:460px;opacity:.92;background:#fff;border:4px solid #0b1a3d;border-radius:22px;box-shadow:8px 8px 0 #0b1a3d,0 20px 48px rgba(11,26,61,.28);overflow:hidden;position:relative;z-index:3}

/* left visual stage */
.mc-stage{flex:0 0 44%;position:relative;overflow:hidden;background:linear-gradient(180deg,#ff4d4d 0%,#E60012 55%,#B8000F 100%);display:flex;flex-direction:column;align-items:center}
.mc-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.09) 2px,transparent 2px),linear-gradient(180deg,rgba(0,0,0,.09) 2px,transparent 2px);background-size:44px 44px;opacity:.5}
.mc-stage-welcome{position:relative;z-index:2;margin-top:34px;font-family:'Bungee','Fredoka',sans-serif;font-size:40px;letter-spacing:3px;color:#fff;text-shadow:3px 3px 0 #0b1a3d,0 0 18px rgba(0,0,0,.3)}
.mc-stage-stars{position:absolute;left:14px;top:0;bottom:0;z-index:1;display:flex;flex-direction:column;justify-content:space-around;padding:30px 0}
.mc-stage-stars img{width:30px;height:30px;opacity:.85;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3));animation:mcTwinkle 2.4s ease-in-out infinite}
.mc-stage-stars img:nth-child(2){animation-delay:-.6s}
.mc-stage-stars img:nth-child(3){animation-delay:-1.2s}
.mc-stage-stars img:nth-child(4){animation-delay:-1.8s}
@keyframes mcTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:.7}50%{transform:scale(1.2) rotate(180deg);opacity:1}}
.mc-stage-mario{position:relative;z-index:2;margin-top:auto;width:84%;max-width:280px;margin-bottom:46px;filter:drop-shadow(4px 8px 0 rgba(0,0,0,.28));animation:mcBob 4.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mcBob{0%{transform:translateY(0) rotate(0deg)}20%{transform:translateY(-5px) rotate(-1.3deg)}50%{transform:translateY(-11px) rotate(0deg)}80%{transform:translateY(-5px) rotate(1.3deg)}100%{transform:translateY(0) rotate(0deg)}}
.mc-stage-ground{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:1;background:linear-gradient(180deg,#2ECB52 0 11px,#8a4a1a 11px 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.mc-stage-ground::after{content:'';position:absolute;left:0;right:0;bottom:0;height:41px;background-image:linear-gradient(90deg,rgba(0,0,0,.22) 2px,transparent 2px),linear-gradient(180deg,rgba(0,0,0,.22) 2px,transparent 2px);background-size:33px 14px}

/* right content */
.mc-content{flex:1;background:#fff;padding:34px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:14px}
.mc-brand{font-family:'Bungee','Fredoka',sans-serif;font-size:30px;letter-spacing:1px;color:#0b1a3d;line-height:1}
.mc-brand span{color:#E60012}
.mc-tag{font-family:'Bungee','Fredoka',sans-serif;font-size:11px;letter-spacing:1px;color:#fff;background:#0b1a3d;padding:7px 14px;border-radius:999px}
.mc-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:3px solid #0b1a3d;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:800;color:#0b1a3d;box-shadow:0 3px 0 #0b1a3d}
.mc-badge b{color:#E60012;font-weight:900}
.mc-badge-dot{width:9px;height:9px;border-radius:50%;background:#E60012;animation:mcPulse 1.6s infinite}
@keyframes mcPulse{0%{box-shadow:0 0 0 0 rgba(230,0,18,.55)}70%{box-shadow:0 0 0 9px rgba(230,0,18,0)}100%{box-shadow:0 0 0 0 rgba(230,0,18,0)}}
.mc-desc{font-size:14px;line-height:1.55;color:#44516b;max-width:400px;margin:0}
.mc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.mc-chip{display:inline-flex;align-items:center;gap:8px;background:#f5f8ff;border:2px solid #0b1a3d;border-radius:999px;padding:7px 14px 7px 9px;font-size:12.5px;font-weight:800;color:#0b1a3d;box-shadow:0 2px 0 #0b1a3d}
.mc-chip img{width:20px;height:20px}
.mc-actions{display:flex;gap:16px;margin-top:4px}
.mc-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:150px;padding:13px 18px;border:3px solid #0b1a3d;border-radius:14px;color:#fff;cursor:pointer;font-family:'Bungee','Fredoka',sans-serif;font-size:17px;letter-spacing:.5px;transition:transform .08s,box-shadow .08s;box-shadow:0 5px 0 #0b1a3d,0 9px 16px rgba(0,0,0,.2)}
.mc-btn:hover{transform:translateY(-2px)}
.mc-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0b1a3d}
.mc-btn-ico{font-size:15px}
.mc-btn-play{background:linear-gradient(180deg,#ff5a5a,#E60012 55%,#B8000F);text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.mc-btn-start{background:linear-gradient(180deg,#45adff,#0066CC 55%,#0053A6);text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.mc-foot{font-family:'Bungee','Fredoka',sans-serif;font-size:8px;color:#64748b;margin-top:4px;letter-spacing:.5px}
.mc-foot a{color:#E60012;text-decoration:none}
.mc-foot-jp{color:#D4A017}

/* promo starburst seal */
.mc-promo{position:fixed;top:22px;right:30px;z-index:60;pointer-events:none;transform:rotate(-10deg);animation:promoPop 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.mc-promo-burst{width:150px;height:150px;background:#fff;clip-path:polygon(50% 0%,58% 9%,69% 3%,73% 15%,86% 12%,85% 25%,97% 27%,90% 38%,100% 48%,89% 56%,96% 68%,83% 69%,84% 82%,72% 77%,69% 90%,58% 83%,50% 95%,42% 83%,31% 90%,28% 77%,16% 82%,17% 69%,4% 68%,11% 56%,0% 48%,10% 38%,3% 27%,15% 25%,14% 12%,27% 15%,31% 3%,42% 9%);display:flex;align-items:center;justify-content:center}
.mc-promo-face{width:128px;height:128px;background:linear-gradient(150deg,#ff5050,#E60012 55%,#bf0010);clip-path:polygon(50% 0%,58% 9%,69% 3%,73% 15%,86% 12%,85% 25%,97% 27%,90% 38%,100% 48%,89% 56%,96% 68%,83% 69%,84% 82%,72% 77%,69% 90%,58% 83%,50% 95%,42% 83%,31% 90%,28% 77%,16% 82%,17% 69%,4% 68%,11% 56%,0% 48%,10% 38%,3% 27%,15% 25%,14% 12%,27% 15%,31% 3%,42% 9%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff;text-align:center}
.mc-promo-promo{font-family:'Bungee',sans-serif;font-size:15px;letter-spacing:1px;transform:rotate(-2deg);text-shadow:1px 1px 0 rgba(0,0,0,.3)}
.mc-promo-from{font-size:9px;font-weight:700;letter-spacing:3px;opacity:.92;margin-top:3px}
.mc-promo-price{font-family:'Bungee',sans-serif;font-size:30px;line-height:.9;margin-top:1px;text-shadow:2px 2px 0 rgba(0,0,0,.28)}
.mc-promo-price sup{font-size:13px;top:-10px;position:relative}
@keyframes promoPop{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(-7deg) scale(1.06)}}

/* responsive: stack to portrait on small screens */
@media (max-width:820px){.mc-panel{flex-direction:column;min-height:auto}.mc-stage{flex:0 0 300px;min-height:300px}.mc-stage-mario{max-width:200px;margin-bottom:46px}body::after{height:150px;background-size:auto 150px}.landing{padding-bottom:160px!important}}
@media (max-width:640px){.mc-promo{top:12px;right:12px}.mc-promo-block{width:94px;height:94px}.mc-promo-price{font-size:18px}.mc-content{padding:26px 20px}.mc-brand{font-size:19px}.mc-actions{flex-direction:column;width:100%}.mc-btn{width:100%}}
/* MARIO WIDE RECT END */

/* Logged-in: keep the dark dashboard + falling objects, hide the Mario sky/overworld scenery */
body:has(#app.ready){background:radial-gradient(1100px 620px at 100% -12%, #122019 0%, #0d0f11 55%) !important}
body:has(#app.ready)::before,
body:has(#app.ready)::after{display:none !important}
body:has(#app.ready) #app{background:transparent !important}
body:has(#app.ready) #app-snow{display:block !important;z-index:0 !important;opacity:.5 !important}

/* Once logged in, force the login landing to hide (my display:flex!important was blocking it) */
body:has(#app.ready) #auth-screen{display:none !important}
body:has(#app.ready) .mc-promo{display:none !important}

/* Remove the floating leprechaun mascot + its bubble entirely */
#dep-mascot{display:none !important}

/* (superseded by balanced palette below) */

/* ===================== MARIO RETRO DASHBOARD (subtle) ===================== */
/* Arcade signage font on the main headings only — keeps body text clean */
#app .dash-title,
#app .card-title,
#app .rst-card-title,
#app .mod-section-title,
#app .page-head h1,
#app .stat-value {
  font-family: 'Bungee', 'Inter', sans-serif;
  letter-spacing: .5px;
}
#app .dash-title { text-shadow: 2px 2px 0 rgba(0,0,0,.4); }

/* Cards get a subtle chunky block shadow (retro sticker depth) */
#app .card,
#app .welcome-card,
#app .rst-card {
  border-width: 2px;
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.4) !important;
}

/* Primary buttons: chunky NES-style block that presses down */
#app .btn-primary,
#app .btn-success {
  border-radius: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.3) !important;
  transition: transform .08s, box-shadow .08s;
}
#app .btn-primary:hover,
#app .btn-success:hover { transform: translateY(-1px); }
#app .btn-primary:active,
#app .btn-success:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,.45) !important;
}

/* Badges a touch chunkier/arcade */
#app .badge {
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Progress/validity bars: subtle inset so they read like a retro gauge */
#app .rst-bar,
#app .rst-progress,
#app .progress {
  border-radius: 6px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
}
/* ===================== END MARIO RETRO DASHBOARD ===================== */

/* === BALANCED MARIO PALETTE (dashboard) === */
#app{
  --green:#2E86FF; --green2:#1C6FE0;                 /* main accent -> Mario blue */
  --green-soft:rgba(46,134,255,.14); --green-soft2:rgba(46,134,255,.20);
  --primary:#E60012; --primary-dark:#B8000F; --primary-soft:rgba(230,0,18,.14); /* CTAs -> Mario red */
  --success:#43B04A;                                  /* valid/active -> Mario green */
  --gold:#E0A91B; --gold2:#FFCD00;                    /* coins / highlights */
  background: radial-gradient(1100px 620px at 100% -12%, #16223a 0%, #0f141c 55%); /* lighter navy glow, less black */
}
/* Primary CTA buttons stay Mario red so they pop */
#app .btn-primary, #app .btn-success{
  background:linear-gradient(180deg,#ff5a5a,#E60012 55%,#B8000F) !important;
  color:#fff !important;
}
/* Balance figure in coin gold (very Mario) */
#app .welcome-card .wc-balance, #app .wc-balance, #app .balance-amt{ color:#FFCD00 !important; }
/* === END BALANCED MARIO PALETTE === */

/* === AUTHENTIC MARIO PALETTE (coin-gold accent, red CTAs, pipe-green valid, blue touches) === */
#app{
  --green:#E8B21E; --green2:#FFCD00;                 /* coin gold = dominant accent */
  --green-soft:rgba(255,205,0,.12); --green-soft2:rgba(255,205,0,.20);
  --primary:#E60012; --primary-dark:#B8000F; --primary-soft:rgba(230,0,18,.14); /* red = CTAs */
  --success:#43B047;                                  /* pipe green = valid/active */
  --gold:#E8B21E; --gold2:#FFCD00;
  --info:#2E86FF;                                     /* overalls blue = secondary touch */
}
/* Primary action buttons in Mario red */
#app .btn-primary, #app .btn-success{
  background:linear-gradient(180deg,#ff5a5a,#E60012 55%,#B8000F)!important;
  color:#fff!important;
}
/* Secondary / ghost buttons get the overalls blue for variety */
#app .btn-secondary{
  background:linear-gradient(180deg,#3aa0ff,#0066CC)!important; color:#fff!important;
}
/* Balance figure in coin gold */
#app .welcome-card .wc-balance, #app .wc-balance, #app .balance-amt{ color:#FFCD00!important; }
/* === END AUTHENTIC MARIO PALETTE === */

/* ===================== PAGE BACKGROUND = LOGIN BACKGROUND ===================== */
#app{
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(46,134,255,.10) 0%, transparent 60%),
    radial-gradient(760px 600px at 92% 96%, rgba(240,192,64,.07) 0%, transparent 60%),
    radial-gradient(1100px 560px at 80% -10%, #0a1f10 0%, #060e07 60%) !important;
  background-attachment: fixed !important;
}
/* ===================== END PAGE BACKGROUND ===================== */

/* ===================== BUTTON HOVER POLISH (Mario arcade feel) ===================== */
#app .btn{ transition: transform .1s cubic-bezier(.2,.7,.3,1.4), box-shadow .14s ease, filter .14s ease; }
#app .btn:hover{ transform: translateY(-2px); filter: brightness(1.07) saturate(1.05); }

#app .btn-primary:hover, #app .btn-success:hover{
  box-shadow: 0 6px 0 rgba(0,0,0,.45), 0 12px 22px rgba(230,0,18,.42) !important;
}
#app .btn-secondary{
  box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.3) !important;
}
#app .btn-secondary:hover{
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 12px 22px rgba(46,134,255,.42) !important;
}
#app .btn-gold:hover, #app .welcome-btn:hover{
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 12px 22px rgba(255,205,0,.45) !important;
}

/* Press-down must win over hover-lift on click (declared last) */
#app .btn-primary:active, #app .btn-success:active,
#app .btn-secondary:active, #app .btn-gold:active, #app .welcome-btn:active{
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.45) !important;
}
/* ===================== END BUTTON HOVER POLISH ===================== */

/* ===================== MARIO LOGIN — MOBILE RESPONSIVE FIX ===================== */
@media (max-width: 640px){
  /* let the login scroll + top-align so WELCOME is never clipped */
  #auth-screen{ overflow-y:auto!important; -webkit-overflow-scrolling:touch; }
  .landing{ place-items:start center!important; padding:80px 14px 36px!important; min-height:100vh; }

  /* panel */
  .mc-panel{ max-width:420px; min-height:auto; opacity:1; box-shadow:6px 6px 0 #0b1a3d,0 14px 32px rgba(11,26,61,.3); }
  .mc-stage{ flex:0 0 auto; min-height:238px; }
  .mc-stage-welcome{ font-size:30px; letter-spacing:2px; margin-top:16px; }
  .mc-stage-mario{ max-width:166px; margin-bottom:32px; }
  .mc-stage-stars{ left:10px; }
  .mc-stage-stars img{ width:22px; height:22px; }

  /* content */
  .mc-content{ padding:22px 18px; gap:12px; }
  .mc-brand{ font-size:24px; }
  .mc-tag{ font-size:10px; padding:6px 12px; }
  .mc-badge{ font-size:12px; padding:7px 14px; }
  .mc-desc{ font-size:13px; line-height:1.5; }
  .mc-chip{ font-size:12px; }
  .mc-actions{ flex-direction:column; width:100%; gap:12px; margin-top:6px; }
  .mc-btn{ width:100%; font-size:16px; }
  .mc-foot{ font-size:8px; }

  /* PROMO seal — correct classes (old rule targeted .mc-promo-block which does not exist) */
  .mc-promo{ top:90px; right:6px; }
  .mc-promo-burst{ width:82px; height:82px; }
  .mc-promo-face{ width:70px; height:70px; gap:3px; padding:0 2px; line-height:1; }
  .mc-promo-promo{ font-size:9px; letter-spacing:.3px; }
  .mc-promo-from{ font-size:6px; letter-spacing:1.4px; margin-top:0; opacity:.92; }
  .mc-promo-price{ font-size:15px; margin-top:1px; }
  .mc-promo-price sup{ font-size:7px; top:-2px; left:1px; }

  /* partner badge — small corner accent */
  .partner-badge{ width:90px; top:8px; left:8px; }
  .partner-label{ font-size:6px; letter-spacing:2px; margin-top:3px; }

  /* single footer on mobile login (keep .mc-foot inside the card) */
  #auth-screen .sitebar{ display:none!important; }
}
@media (max-width: 380px){
  .landing{ padding-top:74px!important; }
  .mc-stage-welcome{ font-size:26px; letter-spacing:1.5px; }
  .mc-brand{ font-size:21px; }
  .mc-content{ padding:20px 15px; }
  .mc-promo{ top:84px; }
  .mc-promo-burst{ width:74px; height:74px; }
  .mc-promo-face{ width:63px; height:63px; }
  .mc-promo-price{ font-size:15px; }
}
/* ===================== END MARIO LOGIN MOBILE FIX ===================== */

/* ===================== MARIOCARD COMPONENTS - ARCADE BLOCKS ===================== */
#app .card, #app .welcome-card, #app .stat-chart, #app .rst-card, #app .profile-hero{
  background:#151a22 !important; border:2px solid #29323f !important; border-top:3px solid rgba(255,205,0,.55) !important;
  border-radius:10px !important; box-shadow:0 5px 0 rgba(0,0,0,.5), 0 12px 22px rgba(0,0,0,.4) !important;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
#app .welcome-card{ background:linear-gradient(135deg,#1c232d,#141922) !important; }
#app .welcome-card::before{ background:radial-gradient(circle, rgba(255,205,0,.15), transparent 70%) !important; }
#app .stat-chart:hover, #app .rst-card:hover{ transform:translateY(-3px);
  border-color:#3a4656 !important; border-top-color:#FFCD00 !important;
  box-shadow:0 8px 0 rgba(0,0,0,.5), 0 18px 30px rgba(0,0,0,.5) !important; }
#app .welcome-bal{ background:linear-gradient(120deg,#FFE486,#E8B21E) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; filter:drop-shadow(0 0 12px rgba(255,205,0,.25)) !important; }
#app .btn{ border-radius:8px !important; text-transform:uppercase; letter-spacing:.5px; font-weight:800 !important; border:2px solid rgba(0,0,0,.45) !important; transition:transform .08s, box-shadow .08s, filter .1s; }
#app .btn-primary, #app .btn-success{ box-shadow:0 4px 0 #8c0009, 0 7px 12px rgba(0,0,0,.3) !important; }
#app .btn-secondary{ box-shadow:0 4px 0 #0a3f82, 0 7px 12px rgba(0,0,0,.3) !important; }
#app .btn-gold, #app .welcome-btn{ border-color:#6b5200 !important; box-shadow:0 4px 0 #6b5200, 0 7px 12px rgba(0,0,0,.3) !important; }
#app .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
#app .btn-primary:active,#app .btn-success:active,#app .btn-secondary:active,#app .btn-gold:active,#app .welcome-btn:active{ transform:translateY(3px) !important; box-shadow:0 1px 0 rgba(0,0,0,.5) !important; }
#app .badge{ border-radius:5px !important; text-transform:uppercase; font-weight:800 !important; letter-spacing:.4px; border-width:2px !important; border-style:solid !important; padding:4px 9px !important; }
#app .tier{ border-radius:5px !important; border-width:2px !important; font-weight:700; }
#app .tier::before{ border-radius:2px !important; }
#app .stat-chart-ico{ border-radius:8px !important; background:linear-gradient(180deg,rgba(255,205,0,.18),rgba(255,205,0,.06)) !important; border:2px solid rgba(255,205,0,.35) !important; color:#FFCD00 !important; }
#app .input{ border-radius:7px !important; border-width:2px !important; }
#app .input:focus{ border-color:#FFCD00 !important; box-shadow:0 0 0 3px rgba(255,205,0,.14) !important; }
#app .section-title{ display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.5px; }
#app .section-title::after{ content:''; flex:1; height:2px; background:linear-gradient(90deg, rgba(255,205,0,.3), transparent); }
#app .rst-bar{ border-radius:4px !important; }
#app .rst-bar-fill{ border-radius:3px !important; }
/* ===================== END MARIOCARD COMPONENTS ===================== */

/* ===================== MARIOCARD COLOURFUL WORDMARK ===================== */
.navbar-brandname.mc-wm{ display:inline-flex!important; align-items:center; gap:0;
  font-family:'Bungee',sans-serif!important; font-weight:400!important; line-height:1; letter-spacing:.5px; font-size:21px; }
.navbar-brandname.mc-wm > span{ color:var(--c); -webkit-text-stroke:2.5px #0b1a3d; paint-order:stroke fill;
  text-shadow:0 2px 0 #0b1a3d, 0 3px 5px rgba(0,0,0,.4); }
@media (max-width:640px){
  #app .navbar-inner{ position:relative; }
  #app .navbar-logo{ display:none!important; }
  #app .navbar-brandname.mc-wm{ display:inline-flex!important; font-size:18px;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; }
}
/* ===================== END WORDMARK ===================== */

/* ===================== RESTOCK PROMO / NEW BADGES (Style A) ===================== */
#app .rst-promo{
  background:linear-gradient(180deg,#ff5a5a,#E60012 60%,#B8000F)!important;
  color:#fff!important; border:2px solid rgba(0,0,0,.4)!important; border-radius:5px!important;
  font-weight:800!important; text-transform:uppercase; letter-spacing:.4px;
  box-shadow:0 3px 0 rgba(0,0,0,.4)!important; padding:4px 9px!important; top:-10px!important;
}
#app .rst-new{
  color:#8affa0!important; background:#0e2016!important; border:2px solid rgba(67,176,71,.5)!important;
  border-radius:5px!important; font-weight:800!important; text-transform:uppercase; letter-spacing:.4px;
  box-shadow:0 3px 0 rgba(0,0,0,.35)!important; padding:4px 9px!important; top:-10px!important;
}
#app .rst-new::before{ background:#43B047!important; border-radius:2px!important; }
/* ===================== END PROMO/NEW BADGES ===================== */