/* ═══════════════════════════════════════════════════
   CidShop — Premium Adidas-Inspired Design System
   Black / White / Accent Red — Brutally Minimal
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700;1,900&family=Barlow:wght@400;500;600;700&display=swap');

/* ── Remove mobile tap highlight ── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; outline: none; }


/* ── Variables ──────────────────────────────────── */
:root {
  --bg:    #0a0a0a;
  --bg2:   #111111;
  --bg3:   #1a1a1a;
  --card:  #141414;
  --card2: #1e1e1e;

  --p:     #ffffff;
  --acc:   #7c3aed;
  --acc2:  #6d28d9;
  --acc-g: linear-gradient(135deg,#7c3aed,#6d28d9);

  --ok:    #00c45a;
  --okd:   rgba(0,196,90,.12);
  --err:   #ff3366;
  --errd:  rgba(124,58,237,.12);
  --warn:  #ffcc00;
  --warnd: rgba(255,204,0,.12);

  --t:     #ffffff;
  --t2:    #cccccc;
  --mu:    #555555;
  --mu2:   #888888;

  --b:     rgba(255,255,255,.08);
  --b2:    rgba(255,255,255,.14);
  --b3:    rgba(255,255,255,.04);

  --r:     0px;
  --rl:    0px;
  --rxl:   0px;

  --font-head: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;

  --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ── Shared Mini Games UI (used by assets/js/games.js GamesUI) ── */
.gm-toast{
  position:fixed; bottom:90px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#1a1a1a; border:1px solid var(--b2); color:var(--p);
  padding:.65rem 1.1rem; border-radius:50px; font-size:.8rem; font-weight:700;
  opacity:0; transition:.25s; z-index:9999; white-space:nowrap;
  pointer-events:none;
}
.gm-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.gm-toast-error{ border-color:rgba(255,51,102,.4); color:var(--err); }
.gm-toast-info{ border-color:rgba(124,58,237,.4); color:var(--p); }

@keyframes gm-shake-kf{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.gm-shake{ animation: gm-shake-kf .4s; }

.gm-streak-chip{
  display:inline-block; font-size:.65rem; font-weight:800; padding:.2rem .55rem;
  border-radius:50px; margin-right:.3rem; white-space:nowrap;
}
.gm-streak-chip.gm-win{ background:rgba(0,196,90,.12); color:var(--ok); }
.gm-streak-chip.gm-loss{ background:rgba(255,51,102,.1); color:var(--err); }

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--t);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
button { cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent }
input, select, textarea { font-family:inherit }

/* ── Base layout ────────────────────────────────── */
.wrap { width:100%; padding:0 1.25rem; margin:0 auto }
@media(min-width:768px) { .wrap { max-width:1200px; padding:0 2rem } }

.page-body { padding-bottom:80px; min-height:calc(100vh - 64px) }
@media(min-width:768px) { .page-body { padding-bottom:3rem } }

/* ── Header ─────────────────────────────────────── */
.site-header {
  position: sticky; top:0; z-index:500;
  height: 60px;
  background: #0d0c1a;
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: visible;
}
.hdr-inner {
  display: flex; align-items: center;
  height: 60px; padding: 0 1.1rem; gap:.55rem;
  position: relative;
}
@media(min-width:768px) { .hdr-inner { padding: 0 2rem } }

/* CidShop-style logo: purple italic */
.logo {
  font-family: var(--font-head);
  font-size: 1.6rem; font-weight: 900;
  letter-spacing: .01em; color: #7c6ff7;
  text-transform: none;
  position: relative;
  font-style: italic;
  text-decoration: none;
}
.logo::after { display:none }
.logo span { color: #7c6ff7 }

/* Desktop nav */
.desk-nav { display:none }
@media(min-width:768px) {
  .desk-nav {
    display:flex; align-items:center; gap:0;
    margin:0 auto;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50px;
    padding: .25rem;
  }
  .nav-link {
    padding:.38rem 1.1rem;
    font-family: var(--font-head);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .04em; text-transform: none;
    color: rgba(255,255,255,.55); position: relative;
    transition: color var(--transition), background var(--transition);
    border-radius: 50px;
  }
  .nav-link::after { display:none }
  .nav-link:hover { color:#fff; background:rgba(255,255,255,.08) }
  .nav-link.active { color:#fff; background:#7c6ff7 }
}

.hdr-right { display:flex; align-items:center; gap:.5rem; margin-left:auto }

.credit-pill {
  display:flex; align-items:center; gap:.4rem;
  background: #1a1830;
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 50px;
  padding:.36rem 1rem .36rem .75rem;
  font-family: var(--font-head); font-size: .95rem; font-weight: 700;
  letter-spacing: .01em; color: #fff;
  transition: background var(--transition);
  text-decoration: none;
}
.credit-pill:hover { background:#211f3a }
.credit-pill i { color: #f59e0b; font-size: 1.05rem }

.av-btn { width:42px; height:42px; background:none; border:none; padding:0; cursor:pointer }
.av {
  width:42px; height:42px; background: #7c6ff7;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-size:1.05rem; font-weight:900; color:#fff;
  transition: background var(--transition);
}
.av:hover { background: #6357d4 }
.av.lg { width:52px; height:52px; font-size:1.25rem; border-radius:50% }

.btn-hdr {
  padding:.62rem 1.5rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  letter-spacing: normal; text-transform: none;
  border: none; cursor: pointer; transition: all var(--transition);
  border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-hdr.primary {
  background: linear-gradient(135deg,#6d6df7,#9b5cf6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,93,246,.35);
}
.btn-hdr.primary:hover {
  background: linear-gradient(135deg,#7d7df8,#a86bf8);
  box-shadow: 0 6px 18px rgba(124,93,246,.5);
}
.btn-hdr.ghost {
  background: #1c1c22;
  color: #e5e5ea;
  border: 1px solid rgba(255,255,255,.06);
}
.btn-hdr.ghost:hover { background:#23232b; color:#fff }

.ham {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; padding:.4rem; cursor:pointer;
  margin-left:.2rem;
}
.ham span { width:22px; height:2px; background:#fff; border-radius:1px; transition:.25s; display:block }
.ham.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg) }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.ham.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg) }
@media(min-width:768px) { .ham { display:none } }

.u-menu { position:relative }
.u-drop {
  display:none; position:fixed; top:68px; right:0;
  width:min(300px,94vw);
  background: #111827;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; z-index:600;
  animation: fadeDown .18s ease;
}
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.u-drop.open { display:block }
.u-drop-head {
  display:flex; align-items:center; gap:.85rem;
  padding:1.25rem 1.25rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.u-drop-name {
  font-size:1.15rem; font-weight:700; color:#fff;
  text-transform: none; letter-spacing: 0;
}
.u-drop-bal { font-size:.82rem; color:rgba(255,255,255,.45); margin-top:.15rem }
.u-drop a {
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1.25rem;
  font-size:1rem; font-weight:500;
  color: rgba(255,255,255,.5);
  text-transform: none; letter-spacing: 0;
  transition: color .15s, background .15s;
  border-left: none;
}
.u-drop a i {
  width: 20px; text-align:center;
  color: rgba(255,255,255,.35);
  font-size: .95rem;
}
.u-drop a:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85) }
.u-drop a:hover i { color: rgba(255,255,255,.6) }
.u-drop-signout { color: #f87171 !important }
.u-drop-signout i { color: #f87171 !important }
.u-drop-signout:hover { color: #ff6b6b !important; background: rgba(248,113,113,.07) !important }
.drop-sep { height:1px; background:rgba(255,255,255,.07); margin:.15rem 0 }

.mob-nav {
  position:fixed; inset:0;
  z-index:900;
  background: rgba(5,5,12,.82);
  backdrop-filter: blur(1px);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.mob-nav.open {
  opacity:1;
  pointer-events:auto;
}
@media(min-width:768px) { .mob-nav { display:none !important } }

.mob-nav-panel {
  background:#0d0c1a;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  padding-bottom: .5rem;
  transform: translateY(-10px);
  transition: transform .22s ease;
  max-height: 78vh;
  overflow-y: auto;
}
.mob-nav.open .mob-nav-panel { transform: translateY(0); }

/* Nav top bar (logo + X) */
.mob-nav-topbar {
  display:flex; align-items:center; justify-content:space-between;
  height:60px; padding:0 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mob-nav-close {
  width:42px; height:42px;
  background:none; border:none; color:#fff;
  font-size:1.7rem; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .15s;
  flex-shrink:0;
}
.mob-nav-close:hover { background:rgba(255,255,255,.08) }

/* User card — CidShop style: no box, just padding */
.mob-user {
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem 1.25rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mob-user .av {
  width:54px; height:54px;
  border-radius:50% !important;
  font-size:1.3rem; flex-shrink:0;
}
.mob-uname { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-.01em }
.mob-ucred { font-size:.85rem; color:#94a3b8; margin-top:.18rem; display:flex; align-items:center; gap:.3rem }
.mob-ucred i { color:#f59e0b }

/* Nav links — CidShop style: large, spaced, simple */
.mob-links { display:flex; flex-direction:column; padding:.4rem 0 0; }
.mob-link {
  display:flex; align-items:center; gap:1.1rem;
  padding:1rem 1.4rem;
  font-size:1.05rem; font-weight:500; color:#94a3b8;
  text-decoration:none;
  transition:color .15s;
  border-bottom: none;
}
.mob-link i {
  width:22px; text-align:center; font-size:1rem;
  color:#64748b; flex-shrink:0;
}
.mob-link:hover { color:#fff }
.mob-link:hover i { color:#7c6ff7 }
.mob-link.active { color:#fff; font-weight:700 }
.mob-link.active i { color:#7c6ff7 }
.mob-link.signout { color:#f43f5e }
.mob-link.signout i { color:#f43f5e }
.mob-sep { height:1px; background:rgba(255,255,255,.07); margin:.6rem 1.4rem }

/* ── Bottom Tab Bar ──────────────────────────────── */
.tab-bar {
  display:flex; position:fixed; bottom:0; left:0; right:0;
  height:65px; z-index:490;
  background: rgba(13,12,28,.98);
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(24px);
}
@media(min-width:768px) { .tab-bar { display:none } }
.tab {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.25rem;
  font-family:var(--font-head); font-size:.58rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color: rgba(255,255,255,.32);
  transition:color var(--transition);
  text-decoration:none;
}
.tab i { font-size:1.15rem }
.tab.on { color: #7c6ff7 }
.tab-plus { position:relative; overflow:visible }
.tab-plus-btn {
  width:52px; height:52px;
  background: #7c6ff7;
  border-radius: 50%;
  border: 3px solid rgba(13,12,28,.98);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff;
  margin-bottom:.05rem;
  margin-top: -22px;
  box-shadow: 0 4px 20px rgba(124,111,247,.45);
  transition:background var(--transition), transform var(--transition);
}
.tab-plus:hover .tab-plus-btn { background:#9b8ff9 }
.tab-plus-btn:active { transform:scale(.93) }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.2rem;
  font-family: var(--font-head); font-size:.85rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border:none; cursor:pointer; transition:all var(--transition); white-space:nowrap;
}
.btn i { font-size:.78rem }
.btn-p  { background:var(--acc); color:#fff }
.btn-p:hover { background:#fff; color:#000 }
.btn-g  { background:rgba(255,255,255,.08); color:#fff; border:1px solid var(--b2) }
.btn-g:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3) }
.btn-ok { background:var(--ok); color:#000; font-weight:800 }
.btn-ok:hover { background:#fff; color:#000 }
.btn-lg { padding:.75rem 1.75rem; font-size:.95rem }
.btn-sm { padding:.38rem .85rem; font-size:.75rem }
.btn-blk { background:#fff; color:#000 }
.btn-blk:hover { background:var(--acc); color:#fff }

/* ── Flash Messages ──────────────────────────────── */
.flash {
  display:flex; align-items:center; gap:.65rem;
  padding:.75rem 1.25rem; margin:.75rem auto; max-width:1200px;
  font-size:.87rem; font-weight:600; border-left:3px solid;
}
.f-success { background:var(--okd); border-color:var(--ok); color:var(--ok) }
.f-error   { background:var(--errd); border-color:var(--err); color:var(--err) }
.f-info    { background:rgba(255,255,255,.06); border-color:var(--b2); color:var(--t2) }
.flash-x   { margin-left:auto; background:none; border:none; color:inherit; font-size:1rem; opacity:.6 }
.flash-x:hover { opacity:1 }

/* ── Hero ────────────────────────────────────────── */
.hero {
  position:relative; min-height:88vh;
  display:flex; align-items:center; overflow:hidden; background:#0d0b1a;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(124,58,237,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.09) 1px, transparent 1px);
  background-size:64px 64px;
  animation:gridShift 25s linear infinite;
}
@keyframes gridShift { from{background-position:0 0} to{background-position:64px 64px} }
.hero::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 50%, rgba(124,58,237,.22) 0%, transparent 60%),
    linear-gradient(to right, rgba(0,0,0,.2) 0%, rgba(0,0,0,.7) 100%);
}
.hero-c {
  position:relative; z-index:2; width:100%;
  padding:5rem 1.25rem 4rem;
}
@media(min-width:768px) { .hero-c { max-width:1200px; margin:0 auto; padding:7rem 2rem 5rem } }

.hero-badges {
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .75rem; background:rgba(255,255,255,.06); border:1px solid var(--b2);
  font-family:var(--font-head); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mu2);
  animation:fadeUp .6s ease both;
}
.hero-badge:nth-child(2) { animation-delay:.1s }
.hero-badge:nth-child(3) { animation-delay:.2s }
.dot { width:6px; height:6px; background:var(--ok); border-radius:50%; animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(3.8rem, 13vw, 9rem); font-weight: 900;
  line-height: .88; letter-spacing: -.02em; text-transform: uppercase; color: #fff;
  margin-bottom:1.5rem; animation: fadeUp .7s .15s ease both;
}
.hero h1 em { font-style: italic; color: var(--acc); display:block }

.hero-sub {
  font-size: clamp(.95rem, 2.5vw, 1.1rem); color: var(--mu2);
  max-width: 460px; line-height: 1.75; margin-bottom: 2.5rem;
  animation: fadeUp .7s .25s ease both;
}
.hero-cta {
  display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.5rem;
  animation: fadeUp .7s .35s ease both;
}
.hero-trust {
  display:flex; flex-wrap:wrap; gap:1.5rem;
  animation: fadeUp .7s .45s ease both;
}
.hero-trust span {
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-head); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color: var(--mu);
}
.hero-trust span i { color:var(--acc); font-size:.7rem }

/* ── Stats Strip ─────────────────────────────────── */
.stats-strip {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--b); background:var(--card);
}
.ss-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.5rem 1rem; text-align:center; border-right:1px solid var(--b);
  transition:background var(--transition);
}
.ss-item:last-child { border-right:none }
.ss-item:hover { background:rgba(255,255,255,.03) }
.ss-ico {
  width:40px; height:40px; background:var(--acc);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:#fff; margin-bottom:.65rem;
}
.ss-val { font-family:var(--font-head); font-size:2rem; font-weight:900; letter-spacing:-.03em; color:#fff }
.ss-lbl { font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mu); margin-top:.15rem }

/* ── Section Headers ─────────────────────────────── */
.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.2rem .75rem; border:1px solid var(--b2);
  font-family:var(--font-head); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mu2); margin-bottom:.75rem;
}
.section-label i { color:var(--acc); font-size:.65rem }
.section-title {
  font-family:var(--font-head);
  font-size:clamp(1.5rem,5vw,2.25rem); font-weight:900;
  letter-spacing:-.03em; text-transform:uppercase;
}

/* ── Product Grid ────────────────────────────────── */
.g-auto {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap:1px; background: var(--b); border: 1px solid var(--b);
}
@media(min-width:768px) { .g-auto { grid-template-columns: repeat(auto-fill, minmax(250px,1fr)) } }
.g3 { display:grid; grid-template-columns:1fr; gap:1px; background:var(--b); border:1px solid var(--b) }
@media(min-width:600px) { .g3 { grid-template-columns:repeat(3,1fr) } }

/* ── Product Card ────────────────────────────────── */
.prod-card { background: var(--card); transition: background var(--transition); position:relative; overflow:hidden }
.prod-card:hover { background:var(--card2) }

.prod-img { position:relative; aspect-ratio:16/10; overflow:hidden; background: #000 }
.prod-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.4,0,.2,1); filter:grayscale(20%);
}
.prod-card:hover .prod-img img { transform:scale(1.06); filter:grayscale(0%) }
.prod-img-ico {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--mu);
  background:linear-gradient(145deg,#111 0%,#0a0a0a 100%);
}
.prod-img-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%);
}
.prod-badge { position:absolute; top:.6rem; left:.6rem; display:flex; gap:.3rem }
.prod-plat {
  position:absolute; top:.6rem; right:.6rem;
  padding:.18rem .5rem; background:rgba(0,0,0,.8); border:1px solid var(--b2);
  font-family:var(--font-head); font-size:.63rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mu2);
}

.prod-body { padding:1rem 1.1rem 1.1rem }
.prod-cat { font-family:var(--font-head); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); margin-bottom:.2rem }
.prod-name { font-family:var(--font-head); font-size:1.05rem; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; color:#fff; margin-bottom:.5rem; line-height:1.1 }
.prod-price { font-family:var(--font-head); font-size:1.45rem; font-weight:900; color:var(--acc) }
.prod-price span { font-size:.72rem; font-weight:600; color:var(--acc); text-transform:uppercase; letter-spacing:.06em; opacity:.8 }
.prod-foot { margin-top:.85rem }

/* Badges */
.badge {
  display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .5rem;
  font-family:var(--font-head); font-size:.63rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.b-ok  { background:var(--ok); color:#000 }
.b-err { background:var(--err); color:#fff }
.pill {
  display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .65rem;
  border:1px solid var(--b2); font-family:var(--font-head);
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mu2);
}
.pill i { font-size:.65rem }

/* ── Steps ───────────────────────────────────────── */
.step-card { background:var(--card); padding:2rem 1.5rem; position:relative; transition:background var(--transition) }
.step-card:hover { background:var(--card2) }
.step-card[data-step]::before {
  content: attr(data-step); position:absolute; top:1rem; right:1.25rem;
  font-family:var(--font-head); font-size:5rem; font-weight:900; letter-spacing:-.05em;
  color:rgba(255,255,255,.04); line-height:1;
}
.step-ico { width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1.25rem; border-radius:50% }
.step-title { font-family:var(--font-head); font-size:1.25rem; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:.5rem }
.step-desc { font-size:.87rem; color:var(--mu2); line-height:1.65 }

/* ── Referral Banner ─────────────────────────────── */
.ref-banner {
  background: var(--card); border-left: 4px solid var(--ok);
  padding:2.25rem 2rem; position:relative; overflow:hidden; margin-top:2.5rem;
}
.ref-banner::after {
  content:''; position:absolute; right:-2rem; top:-2rem;
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(0,196,90,.07) 0%, transparent 70%);
  pointer-events:none;
}

/* ── Cards ───────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--b); padding:1.25rem; border-radius:14px }

/* ── Form Elements ───────────────────────────────── */
.form-group { margin-bottom:1.25rem }
.form-label {
  display:block; font-family:var(--font-head); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mu2); margin-bottom:.5rem;
}
.form-inp {
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--b2);
  color:#fff; padding:.7rem 1rem; font-size:.9rem;
  transition:border-color var(--transition), background var(--transition); outline:none;
}
.form-inp::placeholder { color:var(--mu) }
.form-inp:focus { border-color:var(--acc); background:rgba(124,58,237,.03) }
select.form-inp { appearance:none; cursor:pointer }
textarea.form-inp { resize:vertical; min-height:100px }

/* ── Tables ──────────────────────────────────────── */
.tbl-wrap { overflow-x:auto }
.tbl { width:100%; border-collapse:collapse; font-size:.85rem }
.tbl th {
  padding:.7rem 1rem; text-align:left;
  font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mu2); background:rgba(255,255,255,.03); border-bottom:1px solid var(--b);
}
.tbl td { padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); color:var(--t2) }
.tbl tr:hover td { background:rgba(255,255,255,.02) }
.tbl tr:last-child td { border-bottom:none }

/* ── Spacing ─────────────────────────────────────── */
.mt2{margin-top:.5rem}.mt3{margin-top:.75rem}.mt4{margin-top:1rem}
.mt5{margin-top:1.5rem}.mt6{margin-top:2rem}.mt8{margin-top:3rem}
.mb2{margin-bottom:.5rem}.mb3{margin-bottom:.75rem}.mb4{margin-bottom:1rem}
.mb5{margin-bottom:1.5rem}.mb6{margin-bottom:2rem}.mb8{margin-bottom:3rem}
.flex{display:flex}.j-between{justify-content:space-between}.items-c{align-items:center}
.text-c{text-align:center}.text-r{text-align:right}

/* ── Empty State ─────────────────────────────────── */
.empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem; padding:4rem 1rem; text-align:center;
  border:1px solid var(--b); color:var(--mu);
}
.empty i { font-size:2.5rem; color:var(--mu) }

/* ── Chips ───────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .85rem; background:rgba(255,255,255,.05); border:1px solid var(--b2);
  font-family:var(--font-head); font-size:.82rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all var(--transition);
}
.chip:hover { border-color:var(--acc); color:var(--acc) }
.chip.on { background:var(--acc); border-color:var(--acc); color:#fff }

/* ── Dashboard Grid ──────────────────────────────── */
.dash-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--b); border:1px solid var(--b) }
@media(min-width:600px) { .dash-grid { grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px) { .dash-grid { grid-template-columns:repeat(4,1fr) } }
.dash-stat { background:var(--card); padding:1.5rem; transition:background var(--transition) }
.dash-stat:hover { background:var(--card2) }
.dash-stat-ico { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:.85rem }
.dash-stat-val { font-family:var(--font-head); font-size:2rem; font-weight:900; letter-spacing:-.03em }
.dash-stat-lbl { font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mu); margin-top:.3rem }

/* ── Accordion ───────────────────────────────────── */
.acc-item { border-bottom:1px solid var(--b) }
.acc-hdr {
  display:flex; align-items:center; justify-content:space-between; padding:1rem; cursor:pointer;
  font-family:var(--font-head); font-size:.95rem; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; transition:color var(--transition);
}
.acc-hdr:hover { color:var(--acc) }
.acc-hdr i { transition:transform .25s; color:var(--mu) }
.acc-item.open .acc-hdr i { transform:rotate(180deg); color:var(--acc) }
.acc-body { display:none; padding:0 1rem 1rem; color:var(--mu2); font-size:.9rem; line-height:1.7 }
.acc-item.open .acc-body { display:block }

/* ── Auth Pages ──────────────────────────────────── */
.auth-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem; background:#000; position:relative; overflow:hidden;
}
.auth-wrap::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(124,58,237,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.06) 1px, transparent 1px);
  background-size:44px 44px; opacity:.5;
}
.auth-wrap::after {
  content:''; position:absolute; top:-20%; left:-10%;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(124,58,237,.08) 0%, transparent 65%);
  pointer-events:none;
}
.auth-card {
  background:var(--card); border:1px solid var(--b2); padding:2.5rem 2rem;
  width:100%; max-width:440px; position:relative; z-index:1;
  box-shadow: 0 0 0 1px rgba(124,58,237,.08), 0 30px 80px rgba(0,0,0,.8);
}
.auth-logo {
  font-family:var(--font-head); font-size:2rem; font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em; margin-bottom:1.75rem; text-align:center;
}
.auth-logo span { color:var(--acc) }
.auth-title { font-family:var(--font-head); font-size:1.5rem; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:.35rem }
.auth-sub { font-size:.87rem; color:var(--mu2); margin-bottom:2rem }
.auth-foot { text-align:center; margin-top:1.5rem; font-size:.85rem; color:var(--mu2) }
.auth-foot a { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px }
.auth-foot a:hover { color:var(--acc) }

/* ── Page Header ─────────────────────────────────── */
.page-head { padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--b); margin-bottom:2rem }
.page-head-label {
  font-family:var(--font-head); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:.4rem;
}
.page-head h1 {
  font-family:var(--font-head); font-size:clamp(1.75rem,5vw,2.75rem); font-weight:900;
  text-transform:uppercase; letter-spacing:-.03em;
}
.page-head p { font-size:.9rem; color:var(--mu2); margin-top:.5rem }

/* ── Footer ──────────────────────────────────────── */
.site-foot { background:#000; border-top:1px solid var(--b); padding:3rem 0 1.5rem }
.foot-grid { display:grid; grid-template-columns:1fr; gap:2rem }
@media(min-width:768px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap:3rem } }
.foot-brand .logo {
  font-family:var(--font-head); font-size:1.5rem; font-weight:900;
  letter-spacing:-.04em; font-style:italic; text-transform:none;
  color:#fff; display:inline-block; margin-bottom:.75rem;
}
.foot-brand p { font-size:.85rem; color:var(--mu); line-height:1.7; max-width:280px }
.foot-trust { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.25rem }
.foot-trust span {
  display:flex; align-items:center; gap:.35rem;
  font-family:var(--font-head); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mu); padding:.22rem .65rem; border:1px solid rgba(255,255,255,.07);
}
.foot-trust span i { color:var(--acc); font-size:.6rem }
.foot-col h4 {
  font-family:var(--font-head); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mu2); margin-bottom:.85rem;
}
.foot-col a {
  display:block; font-size:.87rem; color:var(--mu); padding:.3rem 0;
  transition:color var(--transition), padding-left var(--transition), border-color var(--transition);
  border-left:2px solid transparent; padding-left:.75rem;
}
.foot-col a:hover { color:#fff; border-left-color:var(--acc) }
.foot-btm {
  margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--b);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  font-size:.75rem; color:var(--mu); font-family:var(--font-head); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}

/* ── Keys / Orders ───────────────────────────────── */
.key-box {
  display:flex; align-items:center; gap:.5rem; background:rgba(0,0,0,.4);
  border:1px solid var(--b2); padding:.55rem .85rem;
  font-size:.82rem; font-family:monospace; color:var(--ok); letter-spacing:.04em; overflow-x:auto;
}
.copy-btn {
  background:rgba(255,255,255,.07); border:none; color:var(--mu2); padding:.35rem .6rem;
  cursor:pointer; flex-shrink:0; transition:background var(--transition), color var(--transition);
}
.copy-btn:hover { background:rgba(255,255,255,.12); color:#fff }

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:#000 }
::-webkit-scrollbar-thumb { background:var(--mu) }
::-webkit-scrollbar-thumb:hover { background:var(--acc) }
::selection { background:rgba(124,58,237,.3); color:#fff }

/* ═══════════════════════════════════════════════════
   EXTENDED COMPONENTS — Forms, Auth, Products, Pages
   ═══════════════════════════════════════════════════ */

/* ── Form Groups (used across all pages) ─────────── */
.fgrp { margin-bottom:1.1rem }
.flabel {
  display:block;
  font-family:var(--font-head); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mu2);
  margin-bottom:.45rem;
}
.finput {
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--b2);
  color:#fff; padding:.68rem .95rem; font-size:.88rem; font-family:var(--font-body);
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
  outline:none; appearance:none;
}
.finput::placeholder { color:var(--mu) }
.finput:focus { border-color:var(--acc); background:rgba(124,58,237,.04); box-shadow:0 0 0 3px rgba(124,58,237,.08) }
select.finput { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.2rem }
textarea.finput { resize:vertical; min-height:100px }

/* Input group with icon */
.igroup { position:relative }
.igroup .finput { padding-left:2.5rem }
.iico {
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--mu); font-size:.82rem; pointer-events:none; z-index:1;
}

/* Password eye toggle */
.pw-wrap { position:relative }
.pw-wrap .finput { padding-right:2.8rem }
.pw-eye {
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--mu); cursor:pointer; padding:.25rem;
  -webkit-tap-highlight-color:transparent; transition:color var(--transition);
}
.pw-eye:hover { color:var(--mu2) }

/* Password strength */
.pw-strength { margin-top:.38rem }
.pw-strength-bar { height:2px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:.22rem }
.pw-strength-fill { height:100%; transition:width .3s, background .3s; width:0 }
.pw-strength-label { font-family:var(--font-head); font-size:.65rem; font-weight:700; letter-spacing:.06em; color:var(--mu) }

/* ── Auth Pages (login / register) ───────────────── */
.auth-page {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:1.5rem 1rem 5rem; min-height:100vh;
}
.auth-box { width:100%; max-width:420px }

.auth-brand { text-align:center; margin-bottom:2rem }
.auth-brand-row { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem }
.auth-logo-icon {
  width:56px; height:56px; background:var(--acc);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff; flex-shrink:0;
  box-shadow:0 8px 24px rgba(124,58,237,.3);
}
.auth-logo-icon.sm { width:44px; height:44px; font-size:1.1rem }
.auth-brand-name {
  font-family:var(--font-head); font-size:1.75rem; font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em; color:#fff;
}
.auth-brand-name span { color:var(--acc) }
.auth-brand-sub { font-size:.78rem; color:var(--mu2); margin-top:.2rem }

.auth-card {
  background:var(--card); border:1px solid var(--b2); padding:2rem 1.75rem;
  box-shadow:0 0 0 1px rgba(124,58,237,.07), 0 24px 60px rgba(0,0,0,.75);
  position:relative;
}
.auth-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--acc);
}
.auth-card-title {
  font-family:var(--font-head); font-size:1.5rem; font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em; margin-bottom:.3rem;
}
.auth-card-sub { font-size:.85rem; color:var(--mu2); margin-bottom:1.5rem; line-height:1.6 }

.auth-err {
  display:flex; align-items:flex-start; gap:.5rem;
  background:var(--errd); border:1px solid rgba(124,58,237,.3); border-left:3px solid var(--acc);
  color:#ff6680; padding:.75rem .9rem;
  font-size:.82rem; font-weight:600; margin-bottom:1rem;
  animation:slideIn .2s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

.auth-divider {
  display:flex; align-items:center; gap:.75rem;
  margin:1.25rem 0; color:var(--mu);
  font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--b) }

.auth-foot { text-align:center; margin-top:1.25rem; font-size:.82rem; color:var(--mu2) }
.auth-foot a { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px }
.auth-foot a:hover { color:var(--acc) }

.auth-features { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top:1.5rem }
.auth-feat {
  display:flex; align-items:center; gap:.3rem;
  font-family:var(--font-head); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mu2); background:rgba(255,255,255,.04); border:1px solid var(--b);
  padding:.28rem .7rem;
}
.auth-feat i { color:var(--acc); font-size:.6rem }

/* Referral applied notice */
.ref-applied {
  display:flex; align-items:center; gap:.5rem;
  background:var(--okd); border:1px solid rgba(0,196,90,.25); border-left:3px solid var(--ok);
  padding:.65rem .9rem; font-size:.82rem; font-weight:600; color:var(--ok); margin-bottom:1rem;
}

/* Auth perks grid */
.auth-perks { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1.35rem }
.auth-perk {
  display:flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.03); border:1px solid var(--b);
  padding:.6rem .75rem;
  font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mu2);
}
.auth-perk i { font-size:.82rem }

/* ── Page Header (pg-hdr) ─────────────────────────── */
.pg-hdr { padding:2rem 0 1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--b) }
.pg-hdr h1 {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-size:clamp(1.75rem,5vw,2.5rem); font-weight:900;
  text-transform:uppercase; letter-spacing:-.03em;
}
.pg-hdr h1 i { color:var(--acc) }
.pg-hdr p { font-size:.9rem; color:var(--mu2); margin-top:.5rem }

/* ── Badge variant ────────────────────────────────── */
.b-p { background:rgba(255,255,255,.08); border:1px solid var(--b2); color:var(--mu2) }
.b-warn { background:var(--warnd); color:var(--warn) }

/* ── Pagination ───────────────────────────────────── */
.pages { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap }
.pg {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .4rem;
  background:rgba(255,255,255,.05); border:1px solid var(--b2);
  font-family:var(--font-head); font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--mu2); transition:all var(--transition);
}
.pg:hover { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25) }
.pg.on { background:var(--acc); border-color:var(--acc); color:#fff }

/* ── btn-blk full-width variant ──────────────────── */
.btn-blk { background:#fff; color:#000; border:none }
.btn-blk:hover { background:var(--acc); color:#fff }
.btn-blk.btn-lg { width:100%; justify-content:center; font-size:.9rem; padding:.75rem }

/* ── Product detail page ──────────────────────────── */
.prod-detail-grid { display:grid; grid-template-columns:1fr; gap:2rem }
@media(min-width:768px) { .prod-detail-grid { grid-template-columns:1fr 1fr } }

/* ── Tier/option selector ─────────────────────────── */
.tier-opt {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem; border:1px solid var(--b2);
  background:rgba(255,255,255,.03); cursor:pointer;
  transition:all var(--transition); margin-bottom:.5rem;
}
.tier-opt:hover, .tier-opt.selected { border-color:var(--acc); background:rgba(124,58,237,.06) }
.tier-opt-label { font-family:var(--font-head); font-size:.95rem; font-weight:700; text-transform:uppercase }
.tier-opt-price { font-family:var(--font-head); font-size:1.1rem; font-weight:900 }
.tier-opt-price span { font-size:.65rem; color:var(--mu2); font-weight:600 }

/* ── Dashboard quick stats (override dash-grid with more colors) ─ */
.qstat-red  .dash-stat-ico { background:rgba(124,58,237,.1); color:var(--acc) }
.qstat-grn  .dash-stat-ico { background:var(--okd); color:var(--ok) }
.qstat-yel  .dash-stat-ico { background:var(--warnd); color:var(--warn) }
.qstat-wht  .dash-stat-ico { background:rgba(255,255,255,.07); color:#fff }

/* ── Deposit chips row ────────────────────────────── */
.chips-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem }

/* ── Support / ticket thread ─────────────────────── */
.msg-bubble {
  padding:.85rem 1rem; font-size:.88rem; line-height:1.7;
  border-left:3px solid;
}
.msg-user  { background:rgba(124,58,237,.05); border-color:var(--acc) }
.msg-staff { background:rgba(255,255,255,.04); border-color:var(--b2) }
.msg-meta  { font-family:var(--font-head); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mu); margin-bottom:.4rem }

/* ── Dashboard redesign (CidShop-style) ─────────────────────────── */
.dash-wrap { padding-top: .5rem }

.dash-hdr { padding: 1.5rem 0 1.25rem }
.dash-hdr h1 { font-family:var(--font-head); font-size:2rem; font-weight:900; letter-spacing:-.04em; line-height:1 }
.dash-hdr p  { font-size:.88rem; color:var(--mu2); margin-top:.35rem }
.dash-hdr p strong { color:#fff }

/* Wallet card */
.dash-wallet {
  background: linear-gradient(145deg,#12123a,#1a1040);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 18px;
  padding: 1.5rem 1.25rem 1.25rem;
}
.dw-label { font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mu2); margin-bottom:.5rem }
.dw-amount { font-family:var(--font-head); font-size:3.2rem; font-weight:900; letter-spacing:-.04em; line-height:1; color:#fff }
.dw-sub { font-size:.72rem; color:var(--mu2); margin-top:.2rem; margin-bottom:1.1rem }
.dw-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem }
.dw-btn { font-size:.82rem; padding:.65rem .5rem; border-radius:50px; text-align:center; font-weight:700 }

/* Stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.dash-stat-card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 14px;
  padding: 1rem;
}
.dsc-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .65rem;
  font-size: .95rem;
}
.dsc-val { font-family:var(--font-head); font-size:1.7rem; font-weight:900; letter-spacing:-.04em; line-height:1; color:#fff }
.dsc-lbl { font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--mu); margin-top:.3rem }

/* Quick links grid */
.dash-quicklinks {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .5rem;
}
.ql-item {
  display: flex; flex-direction:column; align-items:center; gap:.38rem;
  padding: .7rem .4rem;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--b);
  text-decoration: none;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.ql-item:active { background: rgba(255,255,255,.07) }
.ql-item i { font-size:1.15rem }
.ql-item span { font-size:.58rem; font-weight:700; color:var(--mu2); text-align:center }

/* ── Section title (used in dashboard cards) ─────── */
.sec-title {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mu2);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.sec-title i { color: var(--acc); font-size: .7rem }

/* ── Withdraw Page ───────────────────────────────── */
.wd-wrap { padding-top: .5rem }

.wd-hdr { padding: 1.5rem 0 1.25rem }
.wd-hdr h1 {
  font-family: var(--font-head);
  font-size: 2rem; font-weight: 900;
  letter-spacing: -.04em; line-height: 1;
  display: flex; align-items: center; gap: .5rem;
}
.wd-hdr p { font-size: .88rem; color: var(--mu2); margin-top: .35rem }

/* Balance card */
.wd-balance-card {
  background: linear-gradient(135deg, rgba(0,196,90,.18), rgba(0,196,90,.06));
  border: 1px solid rgba(0,196,90,.3);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.1rem;
}
.wdb-label {
  font-size: .6rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mu2); margin-bottom: .45rem;
}
.wdb-amount {
  font-family: var(--font-head);
  font-size: 3rem; font-weight: 900;
  letter-spacing: -.04em; line-height: 1;
  color: var(--ok);
}
.wdb-sub { font-size: .72rem; color: var(--mu2); margin-top: .2rem }

/* Card section title bar */
.wd-card-title {
  font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mu2);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--b);
  display: flex; align-items: center; gap: .4rem;
}
.wd-card-title i { color: var(--acc); font-size: .6rem }

/* Auto-payout notice */
.wd-autopay-notice {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(0,196,90,.07);
  border: 1px solid rgba(0,196,90,.2);
  border-radius: 10px;
  padding: .8rem;
  margin-bottom: 1rem;
}
.wd-autopay-title { font-size: .78rem; font-weight: 700; color: var(--ok) }
.wd-autopay-sub   { font-size: .68rem; color: var(--mu2); margin-top: .06rem }

/* Input suffix label */
.wd-input-suffix {
  position: absolute; right: .9rem; top: 50%;
  transform: translateY(-50%);
  font-size: .72rem; font-weight: 700;
  color: var(--mu2); pointer-events: none;
}
.wd-hint { font-size: .7rem; color: var(--mu2); margin-top: .3rem }

/* Important notice */
.wd-important {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 10px;
  padding: .85rem;
  margin-bottom: 1.1rem;
}
.wd-important-title {
  font-size: .72rem; font-weight: 800;
  color: var(--warn); margin-bottom: .25rem;
  display: flex; align-items: center; gap: .35rem;
}
.wd-important-body {
  font-size: .73rem; color: var(--mu2); line-height: 1.55;
}

/* Submit button */
.wd-submit-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem;
  background: var(--ok);
  color: #000;
  font-family: var(--font-head);
  font-size: .95rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border: none; border-radius: 50px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.wd-submit-btn:hover  { background: #00e668 }
.wd-submit-btn:active { transform: scale(.97) }

/* ── Empty state browse button (orders page, matches screenshot) ── */
.empty-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 2.2rem;
  background: rgba(124,111,247,.55);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 50px;
  margin-top: 1rem;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.empty-browse-btn:hover  { background: #7c6ff7 }
.empty-browse-btn:active { transform: scale(.96) }
.empty-browse-btn i {
  font-size: 1.1rem;
  opacity: .8;
}

/* ── Footer mobile layout override (matches screenshot 1) ── */
@media(max-width:767px) {
  .site-foot { padding: 2.5rem 0 2rem }
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .foot-brand {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--b);
    margin-bottom: 1.75rem;
  }
  .foot-brand .logo {
    font-size: 2.2rem !important;
    color: var(--acc) !important;
    margin-bottom: .5rem;
  }
  .foot-brand p {
    font-size: .95rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 1.2rem;
  }
  .foot-trust {
    gap: 1.2rem !important;
    margin-top: 0 !important;
  }
  .foot-trust span {
    font-size: .82rem !important;
    color: rgba(255,255,255,.65) !important;
    border: none !important;
    padding: 0 !important;
    letter-spacing: .04em;
    font-weight: 700;
  }
  .foot-trust span i { font-size: .85rem !important }

  /* Two-column nav layout */
  .foot-cols-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .foot-col h4 {
    font-size: .72rem;
    letter-spacing: .14em;
    color: rgba(255,255,255,.35);
    margin-bottom: 1.1rem;
  }
  .foot-col a {
    font-size: 1.05rem !important;
    color: rgba(255,255,255,.75) !important;
    padding: .45rem 0 .45rem .75rem !important;
    border-left: none !important;
    font-weight: 500;
  }
  .foot-col a:hover { color: #fff !important }
}


/* ── Mini Games Tabs (mobile drawer) ── */
.mob-games-label {
  padding: .55rem 1.1rem .3rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mu2);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.mob-games-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .4rem 1rem .6rem;
}
.mob-game-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .65rem .5rem;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t2);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
.mob-game-tab i {
  font-size: 1.25rem;
  color: var(--mu2);
  transition: color .15s;
}
.mob-game-tab:hover,
.mob-game-tab.active {
  background: rgba(212,168,67,.12);
  border-color: rgba(212,168,67,.35);
  color: #d4a843;
}
.mob-game-tab.active i,
.mob-game-tab:hover i {
  color: #d4a843;
}