/* =====================================================
   Player Frontend Theme System - 20 Themes
   ===================================================== */

/* ---------- dark-gold (default) ---------- */
:root[data-theme="dark-gold"] {
  --bg-base:           #0a0a0f;
  --bg-surface:        #111118;
  --bg-elevated:       #1a1a24;
  --bg-overlay:        #22222f;
  --color-primary:     #d4af37;
  --color-primary-hover:#f5d76e;
  --color-primary-dim: rgba(212,175,55,0.15);
  --text-primary:      #ffffff;
  --text-secondary:    #a0a0b0;
  --text-muted:        #505060;
  --text-on-primary:   #0a0a0f;
  --border-color:      rgba(212,175,55,0.2);
  --border-active:     rgba(212,175,55,0.6);
  --gradient-primary:  linear-gradient(135deg,#d4af37,#f5d76e);
  --gradient-card:     linear-gradient(135deg,#111118,#1a1a24);
  --shadow-card:       0 4px 24px rgba(0,0,0,0.4);
  --shadow-primary:    0 4px 20px rgba(212,175,55,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-red ---------- */
:root[data-theme="dark-red"] {
  --bg-base:#0a0a0f; --bg-surface:#130a0a; --bg-elevated:#1e0f0f; --bg-overlay:#260f0f;
  --color-primary:#e63946; --color-primary-hover:#ff6b6b; --color-primary-dim:rgba(230,57,70,0.15);
  --text-primary:#fff; --text-secondary:#b0a0a0; --text-muted:#605050; --text-on-primary:#fff;
  --border-color:rgba(230,57,70,0.2); --border-active:rgba(230,57,70,0.6);
  --gradient-primary:linear-gradient(135deg,#e63946,#ff6b6b); --gradient-card:linear-gradient(135deg,#130a0a,#1e0f0f);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(230,57,70,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-blue ---------- */
:root[data-theme="dark-blue"] {
  --bg-base:#0a0a0f; --bg-surface:#0a0f18; --bg-elevated:#0f1824; --bg-overlay:#14202e;
  --color-primary:#2196f3; --color-primary-hover:#64b5f6; --color-primary-dim:rgba(33,150,243,0.15);
  --text-primary:#fff; --text-secondary:#a0aab0; --text-muted:#505860; --text-on-primary:#fff;
  --border-color:rgba(33,150,243,0.2); --border-active:rgba(33,150,243,0.6);
  --gradient-primary:linear-gradient(135deg,#2196f3,#64b5f6); --gradient-card:linear-gradient(135deg,#0a0f18,#0f1824);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(33,150,243,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-green ---------- */
:root[data-theme="dark-green"] {
  --bg-base:#0a0f0a; --bg-surface:#0a130a; --bg-elevated:#0f1e0f; --bg-overlay:#142614;
  --color-primary:#00c896; --color-primary-hover:#4dffd2; --color-primary-dim:rgba(0,200,150,0.15);
  --text-primary:#fff; --text-secondary:#a0b0a8; --text-muted:#506050; --text-on-primary:#0a0f0a;
  --border-color:rgba(0,200,150,0.2); --border-active:rgba(0,200,150,0.6);
  --gradient-primary:linear-gradient(135deg,#00c896,#4dffd2); --gradient-card:linear-gradient(135deg,#0a130a,#0f1e0f);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(0,200,150,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-purple ---------- */
:root[data-theme="dark-purple"] {
  --bg-base:#0a0a0f; --bg-surface:#0f0a18; --bg-elevated:#170f24; --bg-overlay:#1e142e;
  --color-primary:#9c27b0; --color-primary-hover:#ce93d8; --color-primary-dim:rgba(156,39,176,0.15);
  --text-primary:#fff; --text-secondary:#a8a0b0; --text-muted:#585060; --text-on-primary:#fff;
  --border-color:rgba(156,39,176,0.2); --border-active:rgba(156,39,176,0.6);
  --gradient-primary:linear-gradient(135deg,#9c27b0,#ce93d8); --gradient-card:linear-gradient(135deg,#0f0a18,#170f24);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(156,39,176,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-cyan ---------- */
:root[data-theme="dark-cyan"] {
  --bg-base:#0a0f0f; --bg-surface:#0a1518; --bg-elevated:#0f1e22; --bg-overlay:#14262a;
  --color-primary:#00bcd4; --color-primary-hover:#80deea; --color-primary-dim:rgba(0,188,212,0.15);
  --text-primary:#fff; --text-secondary:#a0b0b4; --text-muted:#506064; --text-on-primary:#0a0f0f;
  --border-color:rgba(0,188,212,0.2); --border-active:rgba(0,188,212,0.6);
  --gradient-primary:linear-gradient(135deg,#00bcd4,#80deea); --gradient-card:linear-gradient(135deg,#0a1518,#0f1e22);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(0,188,212,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-orange ---------- */
:root[data-theme="dark-orange"] {
  --bg-base:#0f0a05; --bg-surface:#180e05; --bg-elevated:#22140a; --bg-overlay:#2a1a0f;
  --color-primary:#ff6d00; --color-primary-hover:#ffab40; --color-primary-dim:rgba(255,109,0,0.15);
  --text-primary:#fff; --text-secondary:#b0a090; --text-muted:#605040; --text-on-primary:#0f0a05;
  --border-color:rgba(255,109,0,0.2); --border-active:rgba(255,109,0,0.6);
  --gradient-primary:linear-gradient(135deg,#ff6d00,#ffab40); --gradient-card:linear-gradient(135deg,#180e05,#22140a);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(255,109,0,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dark-rose ---------- */
:root[data-theme="dark-rose"] {
  --bg-base:#0f0a0d; --bg-surface:#180a12; --bg-elevated:#220f1a; --bg-overlay:#2a1422;
  --color-primary:#e91e8c; --color-primary-hover:#f48fb1; --color-primary-dim:rgba(233,30,140,0.15);
  --text-primary:#fff; --text-secondary:#b0a0a8; --text-muted:#605058; --text-on-primary:#fff;
  --border-color:rgba(233,30,140,0.2); --border-active:rgba(233,30,140,0.6);
  --gradient-primary:linear-gradient(135deg,#e91e8c,#f48fb1); --gradient-card:linear-gradient(135deg,#180a12,#220f1a);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(233,30,140,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- red-gold ---------- */
:root[data-theme="red-gold"] {
  --bg-base:#1a0505; --bg-surface:#220808; --bg-elevated:#2e0e0e; --bg-overlay:#3a1212;
  --color-primary:#d4af37; --color-primary-hover:#f5d76e; --color-primary-dim:rgba(212,175,55,0.15);
  --text-primary:#fff; --text-secondary:#b0a090; --text-muted:#705040; --text-on-primary:#1a0505;
  --border-color:rgba(212,175,55,0.2); --border-active:rgba(212,175,55,0.6);
  --gradient-primary:linear-gradient(135deg,#d4af37,#f5d76e); --gradient-card:linear-gradient(135deg,#220808,#2e0e0e);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(212,175,55,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- red-cyan ---------- */
:root[data-theme="red-cyan"] {
  --bg-base:#1a0505; --bg-surface:#220808; --bg-elevated:#2e0e0e; --bg-overlay:#3a1212;
  --color-primary:#00bcd4; --color-primary-hover:#80deea; --color-primary-dim:rgba(0,188,212,0.15);
  --text-primary:#fff; --text-secondary:#a0b0b0; --text-muted:#506060; --text-on-primary:#1a0505;
  --border-color:rgba(0,188,212,0.2); --border-active:rgba(0,188,212,0.6);
  --gradient-primary:linear-gradient(135deg,#00bcd4,#80deea); --gradient-card:linear-gradient(135deg,#220808,#2e0e0e);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(0,188,212,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- navy-gold ---------- */
:root[data-theme="navy-gold"] {
  --bg-base:#050a1a; --bg-surface:#080e22; --bg-elevated:#0e162e; --bg-overlay:#141e3a;
  --color-primary:#d4af37; --color-primary-hover:#f5d76e; --color-primary-dim:rgba(212,175,55,0.15);
  --text-primary:#fff; --text-secondary:#a0a8b8; --text-muted:#505868; --text-on-primary:#050a1a;
  --border-color:rgba(212,175,55,0.2); --border-active:rgba(212,175,55,0.6);
  --gradient-primary:linear-gradient(135deg,#d4af37,#f5d76e); --gradient-card:linear-gradient(135deg,#080e22,#0e162e);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(212,175,55,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- navy-cyan ---------- */
:root[data-theme="navy-cyan"] {
  --bg-base:#050a1a; --bg-surface:#080e22; --bg-elevated:#0e162e; --bg-overlay:#141e3a;
  --color-primary:#00bcd4; --color-primary-hover:#80deea; --color-primary-dim:rgba(0,188,212,0.15);
  --text-primary:#fff; --text-secondary:#a0b0b8; --text-muted:#506068; --text-on-primary:#050a1a;
  --border-color:rgba(0,188,212,0.2); --border-active:rgba(0,188,212,0.6);
  --gradient-primary:linear-gradient(135deg,#00bcd4,#80deea); --gradient-card:linear-gradient(135deg,#080e22,#0e162e);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(0,188,212,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- navy-red ---------- */
:root[data-theme="navy-red"] {
  --bg-base:#050a1a; --bg-surface:#080e22; --bg-elevated:#0e162e; --bg-overlay:#141e3a;
  --color-primary:#e63946; --color-primary-hover:#ff6b6b; --color-primary-dim:rgba(230,57,70,0.15);
  --text-primary:#fff; --text-secondary:#a8a0b0; --text-muted:#585068; --text-on-primary:#fff;
  --border-color:rgba(230,57,70,0.2); --border-active:rgba(230,57,70,0.6);
  --gradient-primary:linear-gradient(135deg,#e63946,#ff6b6b); --gradient-card:linear-gradient(135deg,#080e22,#0e162e);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(230,57,70,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- amber-white ---------- */
:root[data-theme="amber-white"] {
  --bg-base:#1a1200; --bg-surface:#221800; --bg-elevated:#2e2200; --bg-overlay:#3a2c00;
  --color-primary:#ffffff; --color-primary-hover:#f5f5f5; --color-primary-dim:rgba(255,255,255,0.15);
  --text-primary:#fff; --text-secondary:#c0b090; --text-muted:#706040; --text-on-primary:#1a1200;
  --border-color:rgba(255,255,255,0.2); --border-active:rgba(255,255,255,0.6);
  --gradient-primary:linear-gradient(135deg,#fff,#f5f5f5); --gradient-card:linear-gradient(135deg,#221800,#2e2200);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(255,255,255,0.2);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- amber-blue ---------- */
:root[data-theme="amber-blue"] {
  --bg-base:#1a1200; --bg-surface:#221800; --bg-elevated:#2e2200; --bg-overlay:#3a2c00;
  --color-primary:#2196f3; --color-primary-hover:#64b5f6; --color-primary-dim:rgba(33,150,243,0.15);
  --text-primary:#fff; --text-secondary:#b0a890; --text-muted:#605840; --text-on-primary:#1a1200;
  --border-color:rgba(33,150,243,0.2); --border-active:rgba(33,150,243,0.6);
  --gradient-primary:linear-gradient(135deg,#2196f3,#64b5f6); --gradient-card:linear-gradient(135deg,#221800,#2e2200);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(33,150,243,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- amber-dark ---------- */
:root[data-theme="amber-dark"] {
  --bg-base:#1a1200; --bg-surface:#221800; --bg-elevated:#2e2200; --bg-overlay:#3a2c00;
  --color-primary:#212121; --color-primary-hover:#424242; --color-primary-dim:rgba(33,33,33,0.15);
  --text-primary:#fff; --text-secondary:#b0a880; --text-muted:#605840; --text-on-primary:#fff;
  --border-color:rgba(255,255,255,0.15); --border-active:rgba(255,255,255,0.4);
  --gradient-primary:linear-gradient(135deg,#212121,#424242); --gradient-card:linear-gradient(135deg,#221800,#2e2200);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(0,0,0,0.4);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- midnight ---------- */
:root[data-theme="midnight"] {
  --bg-base:#050507; --bg-surface:#08080c; --bg-elevated:#0d0d14; --bg-overlay:#12121c;
  --color-primary:#7986cb; --color-primary-hover:#9fa8da; --color-primary-dim:rgba(121,134,203,0.1);
  --text-primary:#c8c8d8; --text-secondary:#808090; --text-muted:#404050; --text-on-primary:#050507;
  --border-color:rgba(121,134,203,0.15); --border-active:rgba(121,134,203,0.4);
  --gradient-primary:linear-gradient(135deg,#7986cb,#9fa8da); --gradient-card:linear-gradient(135deg,#08080c,#0d0d14);
  --shadow-card:0 4px 24px rgba(0,0,0,0.6); --shadow-primary:0 4px 20px rgba(121,134,203,0.2);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- dawn ---------- */
:root[data-theme="dawn"] {
  --bg-base:#1a1a2e; --bg-surface:#22223a; --bg-elevated:#2a2a48; --bg-overlay:#323256;
  --color-primary:#e94560; --color-primary-hover:#ff6b85; --color-primary-dim:rgba(233,69,96,0.15);
  --text-primary:#e8e8f0; --text-secondary:#9090a8; --text-muted:#505068; --text-on-primary:#fff;
  --border-color:rgba(233,69,96,0.2); --border-active:rgba(233,69,96,0.6);
  --gradient-primary:linear-gradient(135deg,#e94560,#ff6b85); --gradient-card:linear-gradient(135deg,#22223a,#2a2a48);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(233,69,96,0.3);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}
/* ---------- red-silver ---------- */
:root[data-theme="red-silver"] {
  --bg-base:#1a0505; --bg-surface:#220808; --bg-elevated:#2e0e0e; --bg-overlay:#3a1212;
  --color-primary:#c0c0c0; --color-primary-hover:#e8e8e8; --color-primary-dim:rgba(192,192,192,0.15);
  --text-primary:#fff; --text-secondary:#b0a8a8; --text-muted:#705858; --text-on-primary:#1a0505;
  --border-color:rgba(192,192,192,0.2); --border-active:rgba(192,192,192,0.6);
  --gradient-primary:linear-gradient(135deg,#c0c0c0,#e8e8e8); --gradient-card:linear-gradient(135deg,#220808,#2e0e0e);
  --shadow-card:0 4px 24px rgba(0,0,0,0.4); --shadow-primary:0 4px 20px rgba(192,192,192,0.2);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}

/* =====================================================
   Global Base Styles
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
}

img { max-width: 100%; display: block; }

input, textarea, select {
  font-family: inherit;
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--border-active); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dim); }

/* Utility classes */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-on-primary);
  padding: 12px 24px;
  border-radius: var(--radius-xl);
  font-weight: 600;
  font-size: 14px;
  transition: opacity 0.2s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--border-active);
  padding: 11px 24px;
  border-radius: var(--radius-xl);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}
.btn-outline:hover { background: var(--color-primary-dim); }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-warning  { color: var(--color-warning); }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }

#app { min-height: 100vh; padding-top: var(--top-nav-h, 56px); }

/* =====================================================
   TEMPLATE SYSTEM - 5 Design Templates
   Each template changes: colors + radius + shadows + fonts + spacing
   ===================================================== */

/* ── Template 1: Classic Dark (Default - already in dark-gold) ── */

/* ── Template 2: Desert Gold (Arabic luxury style) ── */
:root[data-theme="tpl-desert"] {
  --bg-base:           #0d0a00;
  --bg-surface:        #1a1400;
  --bg-elevated:       #241c00;
  --bg-overlay:        #2e2400;
  --color-primary:     #c9a227;
  --color-primary-hover:#e8bc2d;
  --color-primary-dim: rgba(201,162,39,0.15);
  --text-primary:      #f5e6c8;
  --text-secondary:    #b8a070;
  --text-muted:        #6b5a30;
  --text-on-primary:   #0d0a00;
  --border-color:      rgba(201,162,39,0.25);
  --border-active:     rgba(201,162,39,0.7);
  --gradient-primary:  linear-gradient(135deg,#c9a227,#e8bc2d,#c9a227);
  --gradient-card:     linear-gradient(135deg,#1a1400,#241c00);
  --shadow-card:       0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(201,162,39,0.1);
  --shadow-primary:    0 4px 24px rgba(201,162,39,0.4);
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --font-family: 'Georgia', 'Times New Roman', serif;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#2196f3;
}

/* ── Template 3: Ocean Blue (Tech/Sports style) ── */
:root[data-theme="tpl-ocean"] {
  --bg-base:           #020d1a;
  --bg-surface:        #041428;
  --bg-elevated:       #071d36;
  --bg-overlay:        #0a2644;
  --color-primary:     #00b4d8;
  --color-primary-hover:#48cae4;
  --color-primary-dim: rgba(0,180,216,0.15);
  --text-primary:      #e0f4ff;
  --text-secondary:    #7ab8d4;
  --text-muted:        #3a6080;
  --text-on-primary:   #020d1a;
  --border-color:      rgba(0,180,216,0.2);
  --border-active:     rgba(0,180,216,0.6);
  --gradient-primary:  linear-gradient(135deg,#0077b6,#00b4d8,#48cae4);
  --gradient-card:     linear-gradient(135deg,#041428,#071d36);
  --shadow-card:       0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,180,216,0.08);
  --shadow-primary:    0 4px 24px rgba(0,180,216,0.35);
  --radius-sm:  0px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --font-family: 'Arial', 'Helvetica Neue', sans-serif;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#00b4d8;
}

/* ── Template 4: Neon Cyber (Cyberpunk style) ── */
:root[data-theme="tpl-neon"] {
  --bg-base:           #060010;
  --bg-surface:        #0e0020;
  --bg-elevated:       #160030;
  --bg-overlay:        #1e0040;
  --color-primary:     #ff00ff;
  --color-primary-hover:#ff44ff;
  --color-primary-dim: rgba(255,0,255,0.12);
  --text-primary:      #ffffff;
  --text-secondary:    #cc88ff;
  --text-muted:        #664488;
  --text-on-primary:   #ffffff;
  --border-color:      rgba(255,0,255,0.2);
  --border-active:     rgba(255,0,255,0.7);
  --gradient-primary:  linear-gradient(135deg,#8800ff,#ff00ff,#00ffff);
  --gradient-card:     linear-gradient(135deg,#0e0020,#160030);
  --shadow-card:       0 4px 32px rgba(0,0,0,0.6), 0 0 16px rgba(255,0,255,0.1);
  --shadow-primary:    0 0 32px rgba(255,0,255,0.5), 0 4px 16px rgba(255,0,255,0.3);
  --radius-sm:  0px;
  --radius-md:  2px;
  --radius-lg:  4px;
  --radius-xl:  8px;
  --font-family: 'Courier New', 'Lucida Console', monospace;
  --color-success:#00ffcc; --color-danger:#ff0055; --color-warning:#ffcc00; --color-info:#00ccff;
}

/* ── Template 5: Minimal White (Clean modern style) ── */
:root[data-theme="tpl-minimal"] {
  --bg-base:           #f8f9fa;
  --bg-surface:        #ffffff;
  --bg-elevated:       #f0f2f5;
  --bg-overlay:        #e8eaed;
  --color-primary:     #1a1a2e;
  --color-primary-hover:#16213e;
  --color-primary-dim: rgba(26,26,46,0.08);
  --text-primary:      #1a1a2e;
  --text-secondary:    #4a4a6a;
  --text-muted:        #9a9ab0;
  --text-on-primary:   #ffffff;
  --border-color:      rgba(0,0,0,0.1);
  --border-active:     rgba(26,26,46,0.4);
  --gradient-primary:  linear-gradient(135deg,#1a1a2e,#16213e);
  --gradient-card:     linear-gradient(135deg,#ffffff,#f0f2f5);
  --shadow-card:       0 2px 12px rgba(0,0,0,0.08);
  --shadow-primary:    0 4px 16px rgba(26,26,46,0.2);
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --color-success:#00a878; --color-danger:#d32f2f; --color-warning:#f57c00; --color-info:#1565c0;
}

/* ── Template 6: Royal Purple (VIP luxury style) ── */
:root[data-theme="tpl-royal"] {
  --bg-base:           #080010;
  --bg-surface:        #110020;
  --bg-elevated:       #1a0030;
  --bg-overlay:        #220040;
  --color-primary:     #9b59b6;
  --color-primary-hover:#b07cc6;
  --color-primary-dim: rgba(155,89,182,0.15);
  --text-primary:      #f0e6ff;
  --text-secondary:    #b08cc0;
  --text-muted:        #604870;
  --text-on-primary:   #ffffff;
  --border-color:      rgba(155,89,182,0.25);
  --border-active:     rgba(155,89,182,0.7);
  --gradient-primary:  linear-gradient(135deg,#6c3483,#9b59b6,#c39bd3);
  --gradient-card:     linear-gradient(135deg,#110020,#1a0030);
  --shadow-card:       0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,89,182,0.1);
  --shadow-primary:    0 4px 24px rgba(155,89,182,0.4);
  --radius-sm:  6px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  30px;
  --font-family: 'Georgia', serif;
  --color-success:#00c896; --color-danger:#e63946; --color-warning:#ff9800; --color-info:#9b59b6;
}

/* Apply font-family from template */
:root[data-theme="tpl-desert"] body,
:root[data-theme="tpl-ocean"] body,
:root[data-theme="tpl-neon"] body,
:root[data-theme="tpl-minimal"] body,
:root[data-theme="tpl-royal"] body {
  font-family: var(--font-family);
}

/* Neon special effects */
:root[data-theme="tpl-neon"] .btn-primary,
:root[data-theme="tpl-neon"] .navbar__theme-trigger:hover {
  text-shadow: 0 0 8px rgba(255,0,255,0.8);
}
:root[data-theme="tpl-neon"] .navbar {
  border-bottom: 1px solid rgba(255,0,255,0.3);
  box-shadow: 0 0 20px rgba(255,0,255,0.1);
}

/* Desert special: ornamental borders */
:root[data-theme="tpl-desert"] .account-panel,
:root[data-theme="tpl-desert"] .cashier-panel {
  border-image: linear-gradient(135deg, rgba(201,162,39,0.4), transparent, rgba(201,162,39,0.4)) 1;
}

/* Ocean: sharp edges */
:root[data-theme="tpl-ocean"] .btn-primary {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  border-radius: 0;
}

/* Minimal: extra spacing */
:root[data-theme="tpl-minimal"] .home-section {
  padding: 48px 0;
}

/* Hide GameNav on mobile - sidebar handles categories */
#gamenav-container { display: none !important; }

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 20px;
  background-image: radial-gradient(ellipse at 20% 50%, rgba(212,175,55,0.05) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.03) 0%, transparent 50%);
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.auth-logo-crown { font-size: 28px; }
.auth-logo-text {
  font-size: 24px;
  font-weight: 900;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 6px;
}
.auth-sub {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
}
.auth-error {
  display: none;
  background: rgba(230,57,70,0.1);
  border: 1px solid rgba(230,57,70,0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--color-danger);
  font-size: 13px;
  margin-bottom: 16px;
}
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  transition: var(--transition-fast);
  box-sizing: border-box;
}
.auth-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-dim);
}
.auth-input::placeholder { color: var(--text-muted); }
.auth-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  color: var(--text-muted);
}
.btn-auth-submit {
  width: 100%;
  padding: 14px;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-xl);
  color: var(--text-on-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  box-shadow: var(--shadow-primary);
  transition: var(--transition-fast);
}
.btn-auth-submit:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-auth-submit:active { transform: scale(0.98); }
.btn-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.auth-divider::before,.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.auth-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 16px;
}
.auth-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover { opacity: 0.8; }
.cashier-page { max-width: 900px; margin: 0 auto; padding: 24px 16px 80px; }
.cashier-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.cashier-balance-card { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 20px; }
.cashier-balance-card.primary { border-color: var(--color-primary); background: rgba(212,175,55,.06); }
.cashier-balance-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.cashier-balance-amount { font-size: 26px; font-weight: 800; color: var(--color-primary); margin-bottom: 4px; }
.cashier-balance-sub { font-size: 12px; color: var(--text-muted); }

.cashier-tabs { display: flex; gap: 4px; background: var(--bg-elevated); border-radius: 12px; padding: 4px; margin-bottom: 24px; border: 1px solid var(--border-color); }
.cashier-tab { flex: 1; padding: 10px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; }
.cashier-tab.active { background: var(--color-primary); color: #000; }

.cashier-section { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.cashier-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }

.cashier-form-group { margin-bottom: 16px; }
.cashier-form-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; display: block; }
.cashier-select, .cashier-input { width: 100%; background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color .2s; }
.cashier-select:focus, .cashier-input:focus { border-color: var(--color-primary); }
.cashier-input-prefix { display: flex; align-items: center; background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.cashier-input-prefix span { padding: 12px 14px; color: var(--text-muted); font-size: 14px; border-right: 1px solid var(--border-color); white-space: nowrap; }
.cashier-input-prefix input { flex: 1; border: none; background: transparent; padding: 12px 14px; color: var(--text-primary); font-size: 14px; outline: none; }

.cashier-quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cashier-quick-btn { background: var(--bg-overlay, rgba(255,255,255,.06)); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 16px; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.cashier-quick-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.cashier-info { display: flex; align-items: center; gap: 8px; background: rgba(99,179,237,.08); border: 1px solid rgba(99,179,237,.2); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; color: #63b3ed; }
.cashier-warn { display: flex; align-items: flex-start; gap: 8px; background: rgba(246,173,85,.08); border: 1px solid rgba(246,173,85,.2); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; color: #f6ad55; }

.cashier-btn { width: 100%; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; transition: all .2s; }
.cashier-btn-primary { background: var(--color-primary); color: #000; }
.cashier-btn-primary:hover { opacity: .88; }
.cashier-btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.cashier-history-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cashier-filter-select { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; color: var(--text-primary); font-size: 13px; outline: none; }
.cashier-tx-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.cashier-tx-row:last-child { border-bottom: none; }
.cashier-tx-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--bg-overlay, rgba(255,255,255,.06)); }
.cashier-tx-info { flex: 1; }
.cashier-tx-type { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; text-transform: capitalize; }
.cashier-tx-date { font-size: 11px; color: var(--text-muted); }
.cashier-tx-amount { font-size: 15px; font-weight: 800; }
.cashier-tx-amount.credit { color: #4ade80; }
.cashier-tx-amount.debit  { color: #f87171; }
.cashier-empty { text-align: center; padding: 40px; color: var(--text-muted); }
.cashier-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 0; }
.cashier-page-btn { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 16px; color: var(--text-primary); cursor: pointer; }
.cashier-page-btn:disabled { opacity: .35; cursor: not-allowed; }

.wc-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s; }
.wc-modal-overlay.open { opacity:1;pointer-events:all; }
.wc-modal { background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:20px;padding:28px;width:100%;max-width:420px;transform:translateY(20px);transition:transform .3s; }
.wc-modal-overlay.open .wc-modal { transform:translateY(0); }
.wc-modal-icon { font-size:48px;text-align:center;margin-bottom:16px; }
.wc-modal-title { font-size:18px;font-weight:800;color:var(--text-primary);text-align:center;margin-bottom:8px; }
.wc-modal-desc { font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:24px; }
.wc-steps { display:flex;flex-direction:column;gap:8px;margin-bottom:24px; }
.wc-step { display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-base); }
.wc-step.done { border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.04); }
.wc-step.current { border-color:var(--color-primary); }
.wc-step-icon { font-size:20px; }
.wc-step-label { flex:1;font-size:13px;font-weight:600;color:var(--text-primary); }
.wc-step-status { font-size:11px;font-weight:700; }
.wc-step.done .wc-step-status { color:#4ade80; }
.wc-step.current .wc-step-status { color:var(--color-primary); }
.wc-modal-btns { display:flex;gap:10px; }
.wc-btn-go { flex:1;background:var(--color-primary);color:#000;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;cursor:pointer; }
.wc-btn-close { flex:1;background:transparent;border:1px solid var(--border-color);border-radius:10px;padding:12px;font-size:14px;color:var(--text-muted);cursor:pointer; }

@media(max-width:640px) {
  .cashier-page { padding: 16px 12px 80px; }
  .cashier-balance-grid { grid-template-columns: 1fr 1fr; }
}
/* Game Wallet */
.cashier-section-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.game-wallet-card { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--bg-elevated); border:1px solid var(--border-color); border-radius:var(--radius-md); margin-bottom:10px; }
.game-wallet-info { display:flex; flex-direction:column; gap:4px; }
.game-wallet-name { font-size:14px; color:var(--text-primary); font-weight:600; }
.game-wallet-balance { font-size:18px; color:var(--color-primary); font-weight:700; }
.game-wallet-actions { display:flex; gap:8px; }
.cashier-btn-sm { padding:6px 14px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; border:none; }
.cashier-btn-gold { background:var(--gradient-primary); color:#000; }
.cashier-btn-outline { background:transparent; border:1px solid var(--color-primary); color:var(--color-primary); }
.cashier-btn-secondary { background:var(--bg-elevated); border:1px solid var(--border-color); color:var(--text-secondary); border-radius:var(--radius-xl); padding:12px 28px; font-weight:700; cursor:pointer; }

/* Deposit Channels */
.dep-channel-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); cursor: pointer;
  transition: all 0.2s; color: var(--text-primary);
}
.dep-channel-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-dim);
}
.dep-channel-icon { font-size: 22px; }
.dep-channel-name { flex: 1; font-size: 14px; font-weight: 600; text-align: left; }
.dep-channel-arrow { color: var(--text-muted); font-size: 18px; }

/* Channel detail card */
.dep-channel-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  padding: 16px; margin-bottom: 16px;
}
.dep-channel-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--color-primary); margin-bottom: 12px;
}
.dep-info-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.dep-info-row:last-child { border-bottom: none; }
.dep-info-row span { color: var(--text-muted); min-width: 50px; }
.dep-info-row strong { flex: 1; color: var(--text-primary); }
.dep-copy-btn {
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  background: var(--color-primary-dim); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); color: var(--color-primary); cursor: pointer;
}
.dep-copy-btn:hover { background: var(--color-primary); color: #000; }
.dep-instructions {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(212,175,55,0.08); border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}

/* Ref input */
.cashier-input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-size: 14px; outline: none;
}
.cashier-input:focus { border-color: var(--color-primary); }
/* QR Pay */
.dep-qr-wrap {
  text-align: center; padding: 16px 0;
}
.dep-qr-img {
  width: 180px; height: 180px; object-fit: contain;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #fff; padding: 8px;
}
.dep-qr-placeholder {
  width: 180px; height: 180px; margin: 0 auto;
  background: var(--bg-overlay);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px;
}
/* Withdraw Accounts */
.wd-account-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s;
}
.wd-account-card:hover { border-color: var(--color-primary); }
.wd-account-card.selected { border-color: var(--color-primary); background: var(--color-primary-dim); }
.wd-account-icon { font-size: 22px; }
.wd-account-info { flex: 1; }
.wd-account-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.wd-account-no { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wd-default-tag {
  font-size: 11px; padding: 2px 8px;
  background: var(--color-primary-dim); color: var(--color-primary);
  border-radius: var(--radius-sm); font-weight: 600;
}
.wd-del-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  transition: color 0.2s;
}
.wd-del-btn:hover { color: var(--color-danger); }
/* History */
.hist-type-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.hist-type-btn {
  flex: 1; padding: 8px; border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.hist-type-btn.active {
  background: var(--color-primary-dim); border-color: var(--color-primary);
  color: var(--color-primary);
}
.hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-color);
}
.hist-row:last-child { border-bottom: none; }
.hist-icon { font-size: 24px; }
.hist-info { flex: 1; }
.hist-type { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hist-no { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.hist-date { font-size: 11px; color: var(--text-muted); }
.hist-right { text-align: right; }
.hist-amount { font-size: 14px; font-weight: 700; color: var(--color-primary); }
.hist-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-sm); margin-top: 4px; display: inline-block;
}
.status-pending { background: rgba(255,165,0,0.15); color: #FFA500; }
.status-success { background: rgba(0,200,150,0.15); color: #00C896; }
.status-danger  { background: rgba(230,57,70,0.15);  color: #E63946; }
/* History */
.hist-type-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.hist-type-btn {
  flex: 1; padding: 8px; border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.hist-type-btn.active {
  background: var(--color-primary-dim); border-color: var(--color-primary);
  color: var(--color-primary);
}
.hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-color);
}
.hist-row:last-child { border-bottom: none; }
.hist-icon { font-size: 24px; }
.hist-info { flex: 1; }
.hist-type { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hist-no { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.hist-date { font-size: 11px; color: var(--text-muted); }
.hist-right { text-align: right; }
.hist-amount { font-size: 14px; font-weight: 700; color: var(--color-primary); }
.hist-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-sm); margin-top: 4px; display: inline-block;
}
.status-pending { background: rgba(255,165,0,0.15); color: #FFA500; }
.status-success { background: rgba(0,200,150,0.15); color: #00C896; }
.status-danger  { background: rgba(230,57,70,0.15);  color: #E63946; }
/* History */
.hist-type-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.hist-type-btn {
  flex: 1; padding: 8px; border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.hist-type-btn.active {
  background: var(--color-primary-dim); border-color: var(--color-primary);
  color: var(--color-primary);
}
.hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-color);
}
.hist-row:last-child { border-bottom: none; }
.hist-icon { font-size: 24px; }
.hist-info { flex: 1; }
.hist-type { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hist-no { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.hist-date { font-size: 11px; color: var(--text-muted); }
.hist-right { text-align: right; }
.hist-amount { font-size: 14px; font-weight: 700; color: var(--color-primary); }
.hist-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-sm); margin-top: 4px; display: inline-block;
}
.status-pending { background: rgba(255,165,0,0.15); color: #FFA500; }
.status-success { background: rgba(0,200,150,0.15); color: #00C896; }
.status-danger  { background: rgba(230,57,70,0.15);  color: #E63946; }.bp-page { min-height: 100vh; background: var(--bg-base); padding-bottom: 80px; }

/* ── Banner ── */
.bp-banner {
  width: 100%; height: 220px; background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; border-bottom: 1px solid var(--border-color);
}
.bp-banner img { width: 100%; height: 100%; object-fit: cover; }
.bp-banner-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted);
}
.bp-banner-placeholder-title {
  font-size: 2rem; font-weight: 800; color: var(--color-primary);
  letter-spacing: 3px; text-transform: uppercase;
}
.bp-banner-placeholder-sub { font-size: 0.85rem; letter-spacing: 1px; }

/* ── Header bar ── */
.bp-header {
  background: var(--bg-surface); border-bottom: 1px solid var(--border-color);
  padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bp-season-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.bp-progress-wrap { flex: 1; max-width: 400px; }
.bp-progress-label {
  font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px; display: flex; justify-content: space-between;
}
.bp-progress-bar {
  height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden;
}
.bp-progress-fill {
  height: 100%; background: var(--color-primary);
  border-radius: 3px; transition: width 0.6s ease;
}
.bp-deposit-total {
  font-size: 0.85rem; color: var(--color-primary); font-weight: 700;
  white-space: nowrap;
}

/* ── Levels grid ── */
.bp-levels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; padding: 24px 40px;
}

/* ── Level card ── */
.bp-level-card {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 16px; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; transition: border-color 0.2s;
}
.bp-level-card.unlocked { border-color: var(--border-active); }
.bp-level-card.claimable {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-surface));
}
.bp-level-card.claimed { opacity: 0.5; }
.bp-level-card.physical {
  border-color: color-mix(in srgb, #ffd700 40%, var(--border-color));
}

/* Level badge */
.bp-level-num {
  position: absolute; top: 8px; left: 10px;
  font-size: 0.65rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Lock icon */
.bp-lock {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--text-muted); margin-top: 8px;
}
.bp-level-card.claimable .bp-lock,
.bp-level-card.unlocked  .bp-lock {
  background: color-mix(in srgb, var(--color-primary) 15%, var(--bg-elevated));
  border-color: var(--color-primary); color: var(--color-primary);
}
.bp-level-card.physical .bp-lock {
  background: color-mix(in srgb, #ffd700 15%, var(--bg-elevated));
  border-color: #ffd700; color: #ffd700;
}

/* Reward */
.bp-reward-label {
  font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; line-height: 1.3;
}
.bp-reward-amount {
  font-size: 1rem; font-weight: 800; color: var(--text-primary);
}
.bp-level-card.claimable .bp-reward-amount { color: var(--color-primary); }
.bp-level-card.physical  .bp-reward-amount { color: #ffd700; font-size: 0.82rem; }

/* Deposit req */
.bp-req {
  font-size: 0.7rem; color: var(--text-muted);
  border-top: 1px solid var(--border-color); padding-top: 8px; width: 100%;
}
.bp-req span { color: var(--text-secondary); font-weight: 600; }

/* Claim button */
.bp-claim-btn {
  width: 100%; padding: 7px;
  background: var(--color-primary); color: var(--text-on-primary);
  border: none; border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s; margin-top: 2px;
}
.bp-claim-btn:hover { opacity: 0.85; }
.bp-claim-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.bp-claimed-badge {
  font-size: 0.72rem; color: var(--color-success); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}

/* Physical milestone highlight */
.bp-milestone-banner {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, color-mix(in srgb, #ffd700 8%, var(--bg-surface)), var(--bg-surface));
  border: 1px solid color-mix(in srgb, #ffd700 30%, var(--border-color));
  border-radius: var(--radius-md); padding: 10px 16px;
  font-size: 0.78rem; color: #ffd700; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}

/* ── Toast ── */
.bp-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 1px solid var(--color-primary);
  color: var(--text-primary); padding: 12px 24px; border-radius: var(--radius-md);
  font-size: 0.85rem; font-weight: 600; z-index: 999;
  animation: bp-toast-in 0.3s ease; white-space: nowrap;
}
@keyframes bp-toast-in { from { opacity:0; transform: translateX(-50%) translateY(10px); } }

/* ── Loading ── */
.bp-loading {
  text-align: center; padding: 80px 24px; color: var(--text-muted);
}
.bp-spinner {
  width: 32px; height: 32px; border: 2px solid var(--border-color);
  border-top-color: var(--color-primary); border-radius: 50%;
  animation: bp-spin 0.7s linear infinite; margin: 0 auto 12px;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* ── Mobile ── */
@media (max-width: 768px) {
  .bp-header { padding: 12px 16px; flex-wrap: wrap; }
  .bp-progress-wrap { order: 3; width: 100%; max-width: 100%; }
  .bp-levels { grid-template-columns: repeat(3, 1fr); padding: 16px; gap: 8px; }
  .bp-level-card { padding: 12px 8px; }
  .bp-banner { height: 150px; }
}
@media (max-width: 480px) {
  .bp-levels { grid-template-columns: repeat(2, 1fr); }
}

/* Betting Pass Theme System */
#bp-page-root {
  --bp-color: #D4AF37;
  --bp-color2: #8C6A15;
  --bp-fw-bg1: #8B0000;
  --bp-fw-bg2: #CC2200;
  --bp-fw-gold: #FFD700;
  --bp-fw-gold-light: #FFE44D;
  --bp-fw-gold-dark: #CC8800;
  --bp-fw-red1: #BB1100;
  --bp-fw-red2: #880000;
  --bp-fw-red-unlocked1: #EE1100;
  --bp-fw-red-unlocked2: #AA0000;
  --bp-fw-orange1: #FF6600;
  --bp-fw-orange2: #CC2200;
  --bp-fw-orange-unlocked1: #FF8800;
  --bp-fw-orange-unlocked2: #FF3300;
  --bp-fw-gray1: #555;
  --bp-fw-gray2: #333;
  --bp-fw-gray-text: #999;
  --bp-fw-btn-text: #5C0000;
}
.bp-banner { width: 100%; aspect-ratio: 16/5; overflow: hidden; }
.bp-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-claim-btn { background: var(--bp-color) !important; }
.bp-claim-btn:hover { background: var(--bp-color2) !important; }
.bp-level-card.unlocked { border-color: var(--bp-color) !important; }
.bp-level-card.claimable .bp-lock { color: var(--bp-color) !important; }
.bp-progress-fill { background: linear-gradient(90deg, var(--bp-color2), var(--bp-color)) !important; }
.bp-season-name { color: var(--bp-color) !important; }
@media (max-width: 768px) { .bp-banner { aspect-ratio: 4/3; } }

/* Betting Pass Seasons Grid */
.bp-seasons-page { padding: 20px; max-width: 1200px; margin: 0 auto; }
.bp-seasons-header { text-align: center; padding: 40px 20px 30px; }
.bp-seasons-title { font-size: 32px; font-weight: 900; color: var(--color-primary, #D4AF37); margin: 0 0 8px; }
.bp-seasons-sub { font-size: 15px; color: var(--text-secondary, #aaa); margin: 0; }
.bp-seasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0 0 60px;
}
.bp-season-card {
  border-radius: 16px;
  border: 2px solid var(--bp-color, #D4AF37);
  overflow: hidden;
  background: var(--bg-elevated, #111);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.bp-season-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.bp-season-card__banner { width: 100%; aspect-ratio: 16/7; overflow: hidden; }
.bp-season-card__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-season-card__body { padding: 16px; }
.bp-season-card__name { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.bp-season-card__type { font-size: 13px; color: var(--text-secondary, #aaa); margin: 0 0 14px; text-transform: capitalize; }
.bp-season-card__btn {
  width: 100%; padding: 10px; border-radius: 20px; border: none;
  font-weight: 700; font-size: 14px; cursor: pointer; transition: opacity 0.2s;
}
.bp-season-card__btn:hover { opacity: 0.85; }
.bp-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; margin: 16px; border-radius: 20px;
  border: 1px solid var(--border-color, #333);
  background: transparent; color: var(--text-secondary, #aaa);
  font-size: 14px; cursor: pointer;
}
.bp-back-btn:hover { background: var(--bg-overlay, #222); color: #fff; }
.bp-lock-badge {
  display: inline-block; padding: 6px 14px; border-radius: 12px;
  background: var(--bg-overlay, #222); color: var(--text-muted, #666);
  font-size: 12px; margin-top: 8px;
}
@media (max-width: 768px) {
  .bp-seasons-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bp-seasons-title { font-size: 24px; }
}
@media (max-width: 480px) {
  .bp-seasons-grid { grid-template-columns: 1fr; }
}




/* Fortune God - Final Design */
.bp-fortune-wall {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  padding: 20px !important;
  background: linear-gradient(135deg, var(--bp-fw-bg1) 0%, var(--bp-fw-bg2) 40%, var(--bp-fw-bg1) 100%);
  border-radius: 16px;
  margin: 16px;
}
.bp-levels:has(.bp-fortune-wall) { display: block !important; padding: 0 !important; }
.bp-hongbao {
  all: unset !important;
  display: block !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 2px solid var(--bp-fw-gold) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  opacity: 0.65 !important;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s !important;
}
.bp-hongbao.unlocked {
  opacity: 1 !important;
  border-color: var(--bp-fw-gold-light) !important;
  box-shadow: 0 0 20px rgba(255,200,0,0.6), 0 4px 16px rgba(0,0,0,0.4) !important;
  cursor: pointer !important;
  transform: scale(1.03) !important;
}
.bp-hongbao.unlocked:hover { transform: scale(1.06) translateY(-4px) !important; }
.bp-hongbao.claimed { opacity: 0.45 !important; border-color: var(--bp-fw-gray1) !important; box-shadow: none !important; filter: grayscale(60%) !important; }

.bp-hb-top {
  padding: 12px 6px 8px !important;
  text-align: center !important;
  border-bottom: 2px solid var(--bp-fw-gold) !important;
  background: linear-gradient(135deg, var(--bp-fw-orange1), var(--bp-fw-orange2)) !important;
  position: relative !important;
}
.bp-hb-top::before { content: '✦'; position: absolute; top: 4px; left: 6px; font-size: 9px; color: rgba(255,215,0,0.5); }
.bp-hb-top::after { content: '✦'; position: absolute; top: 4px; right: 6px; font-size: 9px; color: rgba(255,215,0,0.5); }
.bp-hongbao.unlocked .bp-hb-top { background: linear-gradient(135deg, var(--bp-fw-orange-unlocked1), var(--bp-fw-orange-unlocked2)) !important; border-bottom-color: var(--bp-fw-gold-light) !important; }
.bp-hongbao.claimed .bp-hb-top { background: linear-gradient(135deg, var(--bp-fw-gray1), var(--bp-fw-gray2)) !important; border-bottom-color: #666 !important; }
.bp-hb-top-label { font-size: 9px !important; color: var(--bp-fw-gold) !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
.bp-hongbao.unlocked .bp-hb-top-label { color: var(--bp-fw-gold-light) !important; }
.bp-hongbao.claimed .bp-hb-top-label { color: var(--bp-fw-gray-text) !important; }

.bp-hb-body-inner {
  padding: 12px 6px !important;
  text-align: center !important;
  background: linear-gradient(180deg, var(--bp-fw-red1) 0%, var(--bp-fw-red2) 100%) !important;
}
.bp-hongbao.unlocked .bp-hb-body-inner { background: linear-gradient(180deg, var(--bp-fw-red-unlocked1) 0%, var(--bp-fw-red-unlocked2) 100%) !important; }
.bp-hongbao.claimed .bp-hb-body-inner { background: linear-gradient(180deg, #2a2a2a 0%, #111 100%) !important; }

.bp-hb-circle {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--bp-fw-gold-light), var(--bp-fw-gold-dark)) !important;
  border: 2px solid var(--bp-fw-gold) !important;
  margin: 0 auto 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  font-size: 18px !important;
}
.bp-hongbao.unlocked .bp-hb-circle {
  background: linear-gradient(135deg, #FFEE00, var(--bp-fw-gold)) !important;
  border-color: var(--bp-fw-gold-light) !important;
  box-shadow: 0 0 14px rgba(255,220,0,0.7) !important;
}
.bp-hongbao.claimed .bp-hb-circle { background: linear-gradient(135deg, #888, #555) !important; border-color: #666 !important; }

.bp-hb-amt { font-size: 16px !important; font-weight: 900 !important; color: var(--bp-fw-gold) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }
.bp-hongbao.unlocked .bp-hb-amt { color: var(--bp-fw-gold-light) !important; text-shadow: 0 0 8px rgba(255,220,0,0.5) !important; }
.bp-hongbao.claimed .bp-hb-amt { color: #888 !important; text-shadow: none !important; }
.bp-hb-lv { font-size: 9px !important; color: rgba(255,215,0,0.5) !important; /* keep rgba: needs alpha */ margin: 2px 0 6px !important; }
.bp-hb-req { font-size: 9px !important; color: rgba(255,255,255,0.35) !important; }
.bp-hb-claimed { font-size: 10px !important; color: var(--bp-fw-gold) !important; font-weight: 700 !important; }
.bp-hb-open {
  padding: 5px 18px !important; border-radius: 20px !important; border: none !important;
  background: linear-gradient(135deg, var(--bp-fw-gold-light), var(--bp-fw-orange-unlocked1)) !important;
  color: var(--bp-fw-btn-text) !important; font-weight: 900 !important; font-size: 11px !important;
  cursor: pointer !important; box-shadow: 0 2px 8px rgba(255,150,0,0.5) !important;
}
@media (max-width: 768px) {
  .bp-fortune-wall { grid-template-columns: repeat(3,1fr) !important; padding: 12px !important; margin: 8px !important; }
}
@media (max-width: 480px) {
  .bp-fortune-wall { grid-template-columns: repeat(2,1fr) !important; }
}
/* Fortune wall container fix */
.bp-fortune-wall {
  overflow: visible !important;
}
.bp-hongbao {
  overflow: visible !important;
}
.bp-hb-body-inner {
  border-radius: 0 0 12px 12px !important;
}

/* Fortune wall container fix */
.bp-fortune-wall {
  overflow: visible !important;
}
.bp-hongbao {
  overflow: visible !important;
}
.bp-hb-body-inner {
  border-radius: 0 0 12px 12px !important;
}

/* Ocean Depths - Timeline */
.bp-ocean-timeline {
  background: linear-gradient(180deg, #001a2a 0%, #002a40 50%, #001520 100%);
  border-radius: 16px;
  margin: 16px;
  padding: 24px 20px 16px;
  position: relative;
  overflow: hidden;
}
.bp-ocean-timeline::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent);
}
.bp-ocean-track { position: relative; }
.bp-ocean-line {
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,212,255,0.1), rgba(0,212,255,0.5), rgba(0,212,255,0.1));
}
.bp-ocean-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: relative;
}
.bp-ocean-card { text-align: center; }
.bp-ocean-card-inner {
  background: linear-gradient(180deg, #002233, #001122);
  border: 1px solid rgba(0,150,180,0.3);
  border-radius: 10px;
  padding: 10px 6px;
  opacity: 0.55;
  transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
}
.bp-ocean-card.unlocked .bp-ocean-card-inner {
  opacity: 1;
  border: 2px solid #00EEFF;
  background: linear-gradient(180deg, #006688, #004455);
  box-shadow: 0 0 16px rgba(0,238,255,0.4);
  cursor: pointer;
}
.bp-ocean-card.unlocked:hover .bp-ocean-card-inner {
  transform: translateY(-4px);
  box-shadow: 0 0 24px rgba(0,238,255,0.6);
}
.bp-ocean-card.claimed .bp-ocean-card-inner {
  opacity: 0.45;
  filter: grayscale(50%);
  border-color: rgba(0,212,255,0.2);
}
.bp-ocean-label {
  font-size: 8px;
  color: rgba(0,212,255,0.4);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-ocean-card.unlocked .bp-ocean-label { color: #00EEFF; }
.bp-ocean-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(0,100,130,0.3);
  border: 1px solid rgba(0,150,180,0.3);
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.bp-ocean-card.unlocked .bp-ocean-icon {
  background: linear-gradient(135deg, #00CCDD, #006688);
  border-color: #00EEFF;
  box-shadow: 0 0 10px rgba(0,238,255,0.5);
}
.bp-ocean-amt {
  font-size: 13px; font-weight: 900;
  color: rgba(0,212,255,0.4);
}
.bp-ocean-card.unlocked .bp-ocean-amt { color: #00EEFF; }
.bp-ocean-card.claimed .bp-ocean-amt { color: rgba(0,212,255,0.3); }
.bp-ocean-depth {
  font-size: 8px;
  color: rgba(0,212,255,0.3);
  margin: 2px 0 6px;
}
.bp-ocean-req { font-size: 8px; color: rgba(0,212,255,0.3); }
.bp-ocean-done { font-size: 9px; color: #00D4FF; font-weight: 700; }
.bp-ocean-btn {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #00EEFF;
  background: rgba(0,238,255,0.15);
  color: #00EEFF;
  font-size: 10px; font-weight: 700;
  cursor: pointer;
}
.bp-ocean-btn:hover { background: rgba(0,238,255,0.25); }
.bp-ocean-stem {
  width: 2px; height: 14px;
  background: rgba(0,212,255,0.2);
  margin: 0 auto;
}
.bp-ocean-card.unlocked .bp-ocean-stem { background: #00EEFF; box-shadow: 0 0 6px #00EEFF; }
.bp-ocean-card.claimed .bp-ocean-stem { background: #00D4FF; }
.bp-ocean-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0,212,255,0.2);
  border: 1px solid rgba(0,212,255,0.3);
  margin: 0 auto;
}
.bp-ocean-card.unlocked .bp-ocean-dot {
  background: #00EEFF;
  box-shadow: 0 0 12px #00EEFF;
  border-color: #00EEFF;
}
.bp-ocean-card.claimed .bp-ocean-dot {
  background: #00D4FF;
  box-shadow: 0 0 8px #00D4FF;
}
.bp-levels:has(.bp-ocean-timeline) { display: block !important; padding: 0 !important; }
@media (max-width: 768px) {
  .bp-ocean-cards { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .bp-ocean-cards { grid-template-columns: repeat(2,1fr); }
}

/* Ocean timeline - line on top */
.bp-ocean-track { padding-top: 20px; }
.bp-ocean-line {
  top: 8px !important;
}
.bp-ocean-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.bp-ocean-dot { order: -2; margin-bottom: 0 !important; }
.bp-ocean-stem { order: -1; }
.bp-ocean-card-inner { order: 0; width: 100%; box-sizing: border-box; }

/* Brighter colors */
.bp-ocean-amt { font-size: 14px !important; color: rgba(0,212,255,0.6) !important; }
.bp-ocean-card.unlocked .bp-ocean-amt { color: #00FFFF !important; font-size: 15px !important; }
.bp-ocean-label { color: rgba(0,212,255,0.6) !important; }
.bp-ocean-card.unlocked .bp-ocean-label { color: #00FFFF !important; }

/* Samurai Legacy - 3 column rows */
.bp-samurai-wall {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 20px !important;
  background: linear-gradient(180deg, #1a0000 0%, #2d0505 100%) !important;
  border-radius: 16px !important;
  margin: 16px !important;
  position: relative !important;
}
.bp-samurai-wall::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(192,57,43,0.2), transparent);
  pointer-events: none;
}
.bp-levels:has(.bp-samurai-wall) { display: block !important; padding: 0 !important; }
.bp-sam-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(192,57,43,0.05) !important;
  border: 1px solid rgba(192,57,43,0.2) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  opacity: 0.45 !important;
  transition: opacity 0.2s, box-shadow 0.2s !important;
}
.bp-sam-row.unlocked {
  opacity: 1 !important;
  border: 2px solid var(--rank-color) !important;
  background: rgba(0,0,0,0.3) !important;
  box-shadow: 0 0 14px var(--rank-glow) !important;
}
.bp-sam-row.unlocked:hover { box-shadow: 0 0 24px var(--rank-glow) !important; }
.bp-sam-row.claimed { opacity: 0.4 !important; filter: grayscale(40%) !important; }
.bp-sam-icon {
  font-size: 24px !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  text-align: center !important;
}
.bp-sam-info { flex: 1 !important; min-width: 0 !important; }
.bp-sam-rank {
  font-size: 8px !important;
  color: var(--rank-color, #C0392B) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bp-sam-amt {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--rank-color, #C0392B) !important;
}
.bp-sam-btn {
  padding: 4px 10px !important;
  border-radius: 16px !important;
  border: 1px solid !important;
  background: rgba(0,0,0,0.3) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bp-sam-btn:hover { opacity: 0.8 !important; }
.bp-sam-claimed { font-size: 10px !important; color: #FFD700 !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.bp-sam-lock { font-size: 9px !important; color: rgba(255,255,255,0.25) !important; flex-shrink: 0 !important; text-align: right !important; }
@media (max-width: 768px) {
  .bp-samurai-wall { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .bp-samurai-wall { grid-template-columns: 1fr !important; }
}

/* Galaxy Quest - Star Map */
.bp-galaxy-map {
  background: linear-gradient(135deg, #0d0020 0%, #1a0035 50%, #0d0020 100%);
  border-radius: 16px;
  margin: 16px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}
.bp-galaxy-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(155,89,182,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 70%, rgba(155,89,182,0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 20% 80%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 10%, rgba(155,89,182,0.3) 0%, transparent 100%);
  pointer-events: none;
}
.bp-galaxy-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.bp-levels:has(.bp-galaxy-map) { display: block !important; padding: 0 !important; }
.bp-galaxy-card { text-align: center; opacity: 0.4; }
.bp-galaxy-card.unlocked { opacity: 1; }
.bp-galaxy-card.claimed { opacity: 0.45; filter: grayscale(50%); }
.bp-gal-inner {
  background: radial-gradient(circle at 40% 40%, #0d0020, #0a0018);
  border: 1px solid rgba(155,89,182,0.2);
  border-radius: 12px;
  padding: 12px 6px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.bp-galaxy-card.unlocked .bp-gal-inner {
  background: radial-gradient(circle at 40% 40%, #6C3483, #2d0050);
  border: 2px solid #D7BDE2;
  box-shadow: 0 0 20px rgba(155,89,182,0.5);
}
.bp-galaxy-card.unlocked:hover .bp-gal-inner {
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(155,89,182,0.7);
}
.bp-gal-icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: block;
}
.bp-gal-label {
  font-size: 8px;
  color: rgba(155,89,182,0.4);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-galaxy-card.unlocked .bp-gal-label { color: #D7BDE2; }
.bp-gal-amt {
  font-size: 14px;
  font-weight: 900;
  color: rgba(155,89,182,0.4);
  margin: 4px 0 2px;
}
.bp-galaxy-card.unlocked .bp-gal-amt { color: #D7BDE2; }
.bp-gal-star { font-size: 8px; color: rgba(155,89,182,0.3); margin-bottom: 6px; }
.bp-galaxy-card.unlocked .bp-gal-star { color: rgba(215,189,226,0.6); }
.bp-gal-btn {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #D7BDE2;
  background: rgba(215,189,226,0.1);
  color: #D7BDE2;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.bp-gal-btn:hover { background: rgba(215,189,226,0.2); }
.bp-gal-done { font-size: 9px; color: #9B59B6; font-weight: 700; }
.bp-gal-lock { font-size: 8px; color: rgba(155,89,182,0.25); }
@media (max-width: 768px) {
  .bp-galaxy-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .bp-galaxy-grid { grid-template-columns: repeat(2,1fr); }
}

/* Roman Empire - Arena Grid */
.bp-roman-arena {
  background: linear-gradient(180deg, #1a1400 0%, #2a2000 50%, #1a1400 100%);
  border-radius: 16px;
  margin: 16px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}
.bp-roman-arena::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(240,230,140,0.1);
  border-radius: 12px;
  pointer-events: none;
}
.bp-roman-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.bp-levels:has(.bp-roman-arena) { display: block !important; padding: 0 !important; }
.bp-roman-card {
  text-align: center;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}
.bp-roman-card.unlocked { opacity: 1; cursor: pointer; }
.bp-roman-card.unlocked:hover { transform: translateY(-4px); }
.bp-roman-card.claimed { opacity: 0.4; filter: grayscale(50%); }
.bp-rom-inner {
  background: linear-gradient(180deg, #2a2000, #1a1400);
  border: 1px solid rgba(240,230,140,0.15);
  border-radius: 12px;
  padding: 12px 6px;
}
.bp-roman-card.unlocked .bp-rom-inner {
  border: 2px solid var(--rom-color, #F0E68C);
  background: linear-gradient(180deg, #3a3000, #2a2000);
  box-shadow: 0 0 16px rgba(240,230,140,0.2);
}
.bp-rom-icon { font-size: 28px; margin-bottom: 6px; display: block; }
.bp-rom-label {
  font-size: 8px;
  color: rgba(240,230,140,0.35);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-roman-card.unlocked .bp-rom-label { color: rgba(240,230,140,0.8); }
.bp-rom-amt {
  font-size: 14px;
  font-weight: 900;
  margin: 4px 0 2px;
}
.bp-rom-rank { font-size: 8px; color: rgba(240,230,140,0.3); margin-bottom: 6px; }
.bp-roman-card.unlocked .bp-rom-rank { color: rgba(240,230,140,0.5); }
.bp-rom-btn {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid;
  background: rgba(240,230,140,0.08);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.bp-rom-btn:hover { background: rgba(240,230,140,0.15); }
.bp-rom-done { font-size: 9px; color: #F0E68C; font-weight: 700; }
.bp-rom-lock { font-size: 8px; color: rgba(240,230,140,0.2); }
@media (max-width: 768px) {
  .bp-roman-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .bp-roman-grid { grid-template-columns: repeat(2,1fr); }
}

/* Desert Warriors - default grid */
.bp-levels-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  padding: 20px 40px !important;
}
@media (max-width: 768px) { .bp-levels-grid { grid-template-columns: repeat(3,1fr) !important; padding: 16px !important; } }
@media (max-width: 480px) { .bp-levels-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* Galaxy - brighter text */
.bp-gal-label { color: rgba(155,89,182,0.7) !important; }
.bp-gal-amt { color: rgba(155,89,182,0.7) !important; font-size: 15px !important; }
.bp-gal-star { color: rgba(155,89,182,0.5) !important; }
.bp-gal-lock { color: rgba(155,89,182,0.4) !important; }
.bp-galaxy-card.unlocked .bp-gal-label { color: #D7BDE2 !important; }
.bp-galaxy-card.unlocked .bp-gal-amt { color: #E8DAEF !important; }

/* Roman - brighter text */
.bp-rom-label { color: rgba(240,230,140,0.6) !important; }
.bp-rom-rank { color: rgba(240,230,140,0.45) !important; }
.bp-rom-lock { color: rgba(240,230,140,0.35) !important; }
.bp-roman-card.unlocked .bp-rom-label { color: #F0E68C !important; }

/* Desert - force show bp-levels-grid */
.bp-levels { display: block !important; }
.bp-levels-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  padding: 20px 40px !important;
}

/* Override bp-levels for themed layouts */
.bp-levels:has(.bp-roman-arena),
.bp-levels:has(.bp-galaxy-map),
.bp-levels:has(.bp-samurai-wall),
.bp-levels:has(.bp-ocean-timeline),
.bp-levels:has(.bp-fortune-wall) {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}
.vip-page { min-height:100vh;background:var(--bg-base); }
.vip-inner { max-width:1200px;margin:0 auto;padding:0 20px 60px; }

/* Hero */
.vip-hero { position:relative;padding:80px 20px;text-align:center;overflow:hidden;margin:0 -20px 48px; }
.vip-hero__bg { position:absolute;inset:0;pointer-events:none; }
.vip-hero__orb { position:absolute;border-radius:50%;filter:blur(80px);opacity:.12; }
.vip-hero__orb--1 { width:500px;height:500px;background:var(--color-primary);top:-200px;left:-100px; }
.vip-hero__orb--2 { width:400px;height:400px;background:#9c27b0;bottom:-150px;right:-100px; }
.vip-hero__content { position:relative;z-index:1; }
.vip-hero__badge { display:inline-block;padding:6px 20px;background:var(--color-primary-dim);border:1px solid var(--border-active);border-radius:var(--radius-xl);color:var(--color-primary);font-size:13px;font-weight:600;letter-spacing:1px;margin-bottom:20px; }
.vip-hero__title { font-size:clamp(40px,6vw,72px);font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px; }
.vip-hero__subtitle { font-size:clamp(14px,2vw,18px);color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.7; }

/* Progress Card */
.vip-progress-card { background:var(--bg-surface);border:1px solid var(--border-active);border-radius:var(--radius-lg);padding:28px;margin-bottom:48px;box-shadow:var(--shadow-primary); }
.vip-progress-card__header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px; }
.vip-progress-card__tier { display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800; }
.vip-progress-card__icon { font-size:28px; }
.vip-progress-card__label { font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px; }
.vip-progress-card__stats { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:24px; }
.vip-progress-card__stat { text-align:center;padding:16px;background:var(--bg-elevated);border-radius:var(--radius-md); }
.vip-progress-card__stat-val { font-size:18px;font-weight:700;color:var(--color-primary);margin-bottom:4px; }
.vip-progress-card__stat-label { font-size:12px;color:var(--text-muted); }
.vip-progress-bar-wrap { margin-top:8px; }
.vip-progress-bar-label { display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary);margin-bottom:8px; }
.vip-progress-bar { height:10px;background:var(--bg-elevated);border-radius:5px;overflow:hidden; }
.vip-progress-bar__fill { height:100%;border-radius:5px;transition:width .6s ease; }
.vip-progress-max { text-align:center;padding:16px;color:var(--color-primary);font-weight:600;font-size:16px; }

/* Section */
.vip-section { margin-bottom:48px; }
.vip-section__title { font-size:24px;font-weight:700;margin-bottom:24px; }
.vip-loading { text-align:center;padding:40px;color:var(--text-muted); }

/* Tier Cards */
.vip-tiers { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px; }
.vip-tier-card { background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;position:relative;transition:all .25s;overflow:hidden; }
.vip-tier-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tier-color); }
.vip-tier-card:hover { transform:translateY(-4px);border-color:var(--tier-color);box-shadow:0 8px 24px rgba(0,0,0,.3); }
.vip-tier-card--active { border-color:var(--tier-color);box-shadow:0 0 20px rgba(212,175,55,.15); }
.vip-tier-card__header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.vip-tier-card__icon { font-size:32px; }
.vip-tier-card__level { font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px; }
.vip-tier-card__name { font-size:20px;font-weight:800;margin-bottom:6px; }
.vip-tier-card__req { font-size:12px;color:var(--text-muted);margin-bottom:16px; }
.vip-tier-card__perks { display:flex;flex-direction:column;gap:6px; }
.vip-tier-card__perk { font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px; }
.vip-tier-card__badge { position:absolute;top:12px;right:12px;padding:3px 10px;background:var(--tier-color);color:#000;border-radius:var(--radius-xl);font-size:10px;font-weight:700; }

/* Benefits Table */
.vip-benefits-wrap { overflow-x:auto; }
.vip-table { width:100%;border-collapse:collapse;font-size:14px; }
.vip-table th,.vip-table td { padding:12px 16px;text-align:center;border-bottom:1px solid var(--border-color); }
.vip-table th { background:var(--bg-elevated);font-weight:700;font-size:13px; }
.vip-table td:first-child,.vip-table th:first-child { text-align:left; }
.vip-table__label { font-weight:500;color:var(--text-secondary); }
.vip-table tr:hover td { background:var(--bg-elevated); }

/* FAQ */
.vip-faq { display:flex;flex-direction:column;gap:12px; }
.vip-faq-item { background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px; }
.vip-faq-q { font-size:15px;font-weight:600;margin-bottom:8px;color:var(--color-primary); }
.vip-faq-a { font-size:14px;color:var(--text-secondary);line-height:1.7; }

/* VIP Pools */
.vip-pools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 0 16px; }
.vip-pool-card { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; }
.vip-pool-card__tier { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.vip-pool-card__type { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.vip-pool-card__amount { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.vip-pool-card__cycle { font-size: 11px; color: var(--text-muted); background: var(--bg-overlay); padding: 2px 8px; border-radius: 10px; display: inline-block; }
.vip-table-wrap { overflow-x: auto; padding: 0 16px; }
.vip-progress-bar-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-align: right; }

/* VIP page banner */
.vip-page-banner { width: 100%; overflow: hidden; aspect-ratio: 16/5; }
.vip-page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .vip-page-banner { aspect-ratio: 4/3; } }

/* VIP Theme Selector */
.vip-selector-page { padding: 20px; max-width: 1200px; margin: 0 auto; }
.vip-selector-header { text-align: center; padding: 40px 20px 30px; }
.vip-selector-title { font-size: 32px; font-weight: 900; color: var(--color-primary, #D4AF37); margin: 0 0 8px; }
.vip-selector-sub { font-size: 15px; color: var(--text-secondary, #aaa); margin: 0; }
.vip-selector-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 0 0 60px;
}
.vip-theme-card {
  border-radius: 14px;
  border: 2px solid var(--vt-color, #D4AF37);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.vip-theme-card:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.vip-theme-card__bg { position: absolute; inset: 0; }
.vip-theme-card__body {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}
.vip-theme-card__name { font-size: 14px; font-weight: 700; color: var(--vt-color); text-align: center; margin-bottom: 6px; }
.vip-theme-card__badge {
  font-size: 10px; color: #000; font-weight: 700;
  background: var(--vt-color); padding: 2px 8px; border-radius: 10px; margin-bottom: 6px;
}
.vip-theme-card__btn {
  width: 100%; padding: 8px; border-radius: 20px; border: none;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.vip-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; margin: 16px;
  border-radius: 20px; border: 1px solid var(--border-color, #333);
  background: transparent; color: var(--text-secondary, #aaa);
  font-size: 14px; cursor: pointer;
}
.vip-back-btn:hover { background: var(--bg-overlay, #222); color: #fff; }
.vip-tiers-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 20px 40px;
}
.vip-tier-card {
  border-radius: 14px; border: 1px solid;
  overflow: hidden; background: var(--bg-elevated, #111);
  transition: transform 0.2s;
}
.vip-tier-card.active { transform: scale(1.03); }
.vip-tier-card__header { padding: 16px; text-align: center; position: relative; }
.vip-tier-card__badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700; color: #000;
  padding: 2px 8px; border-radius: 10px;
}
.vip-tier-card__crown { font-size: 28px; margin-bottom: 4px; }
.vip-tier-card__level { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.vip-tier-card__body { padding: 12px 16px; }
.vip-tier-card__name { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.vip-tier-card__req { font-size: 12px; color: var(--text-secondary, #aaa); margin-bottom: 8px; }
.vip-perk { font-size: 12px; color: var(--text-secondary, #aaa); margin-bottom: 3px; }
.vip-stat-val { font-size: 18px; font-weight: 900; }
.vip-stat-lbl { font-size: 11px; color: var(--text-secondary, #aaa); }
@media (max-width: 768px) {
  .vip-selector-grid { grid-template-columns: repeat(2,1fr); }
  .vip-tiers-wrap { grid-template-columns: repeat(2,1fr); }
}

/* VIP theme card image */
.vip-theme-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* VIP Samurai Layout */
.vip-samurai-wall { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 20px; background: linear-gradient(180deg,#1a0000,#2d0505); border-radius: 16px; margin: 16px; }
.vip-sam-row { display: flex; align-items: center; gap: 10px; background: rgba(192,57,43,0.05); border: 1px solid rgba(192,57,43,0.2); border-radius: 10px; padding: 10px 12px; }
.vip-sam-icon { font-size: 24px; flex-shrink: 0; }
.vip-sam-info { flex: 1; }
.vip-sam-rank { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.vip-sam-req { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.vip-sam-benefit { font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* VIP Ocean Layout */
.vip-ocean-timeline { background: linear-gradient(180deg,#001a2a,#002a40); border-radius: 16px; margin: 16px; padding: 20px; }
.vip-ocean-line { height: 2px; background: linear-gradient(90deg,rgba(0,212,255,0.1),rgba(0,212,255,0.4),rgba(0,212,255,0.1)); margin-bottom: 20px; }
.vip-ocean-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.vip-ocean-node { text-align: center; }
.vip-ocean-dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 8px; }
.vip-ocean-card-inner { background: rgba(0,30,50,0.8); border: 1px solid; border-radius: 10px; padding: 10px 6px; }
.vip-ocean-icon { font-size: 24px; margin-bottom: 6px; }
.vip-ocean-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.vip-ocean-req { font-size: 9px; color: rgba(0,212,255,0.5); margin-bottom: 4px; }
.vip-ocean-benefit { font-size: 9px; color: rgba(0,212,255,0.4); }

/* VIP Fortune Layout */
.vip-fortune-wall { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px; background: linear-gradient(135deg,#8B0000,#CC2200,#8B0000); border-radius: 16px; margin: 16px; }
.vip-hb-card { border-radius: 12px; overflow: hidden; border: 2px solid; }
.vip-hb-top { padding: 10px 6px 8px; text-align: center; border-bottom: 1px solid #FFD700; }
.vip-hb-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.vip-hb-body { background: linear-gradient(180deg,#AA1100,#770000); padding: 10px 6px; text-align: center; }
.vip-hb-icon { font-size: 24px; margin-bottom: 6px; }
.vip-hb-cashback { font-size: 14px; font-weight: 900; margin-bottom: 4px; }
.vip-hb-req { font-size: 9px; color: rgba(255,215,0,0.6); }
.vip-hb-streak { font-size: 9px; color: rgba(255,215,0,0.5); margin-top: 2px; }

/* VIP Roman Layout */
.vip-roman-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px; background: linear-gradient(180deg,#1a1400,#2a2000); border-radius: 16px; margin: 16px; }
.vip-rom-card { text-align: center; background: linear-gradient(180deg,#2a2000,#1a1400); border: 1px solid; border-radius: 12px; padding: 14px 8px; }
.vip-rom-icon { font-size: 28px; margin-bottom: 6px; }
.vip-rom-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.vip-rom-rank { font-size: 9px; color: rgba(240,230,140,0.4); margin-bottom: 4px; }
.vip-rom-req { font-size: 10px; color: rgba(240,230,140,0.5); margin-bottom: 4px; }
.vip-rom-benefit { font-size: 9px; color: rgba(240,230,140,0.4); }

/* VIP Galaxy Layout */
.vip-galaxy-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px; background: linear-gradient(135deg,#0d0020,#1a0035); border-radius: 16px; margin: 16px; }
.vip-gal-card { text-align: center; background: radial-gradient(circle,#0d0020,#0a0018); border: 1px solid; border-radius: 12px; padding: 14px 8px; }
.vip-gal-icon { font-size: 28px; margin-bottom: 6px; }
.vip-gal-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.vip-gal-level { font-size: 9px; color: rgba(155,89,182,0.4); margin-bottom: 4px; }
.vip-gal-cashback { font-size: 11px; color: rgba(155,89,182,0.6); margin-bottom: 2px; }
.vip-gal-req { font-size: 9px; color: rgba(155,89,182,0.4); }

/* Default VIP grid fix */
.vip-tiers-wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 0 20px 40px; }
@media (max-width: 768px) {
  .vip-samurai-wall { grid-template-columns: repeat(2,1fr); }
  .vip-ocean-cards { grid-template-columns: repeat(2,1fr); }
  .vip-fortune-wall { grid-template-columns: repeat(2,1fr); }
  .vip-roman-grid { grid-template-columns: repeat(2,1fr); }
  .vip-galaxy-grid { grid-template-columns: repeat(2,1fr); }
  .vip-tiers-wrap { grid-template-columns: repeat(2,1fr); }
}

/* Fix all VIP layouts to full width */
.vip-samurai-wall,
.vip-ocean-timeline,
.vip-fortune-wall,
.vip-roman-grid,
.vip-galaxy-grid { width: 100% !important; box-sizing: border-box !important; }

.vip-ocean-cards { grid-template-columns: repeat(4,1fr) !important; width: 100% !important; }
.vip-fortune-wall { grid-template-columns: repeat(4,1fr) !important; }
.vip-roman-grid { grid-template-columns: repeat(4,1fr) !important; }
.vip-galaxy-grid { grid-template-columns: repeat(4,1fr) !important; }
.vip-samurai-wall { grid-template-columns: repeat(3,1fr) !important; }

/* Fortune card fix */
.vip-hb-card { min-width: 0 !important; }
.vip-hb-label { font-size: 10px !important; white-space: normal !important; line-height: 1.2 !important; }

/* Samurai layout fix */
.vip-sam-row { flex-wrap: nowrap !important; overflow: hidden !important; }
.vip-sam-req { font-size: 9px !important; line-height: 1.3 !important; }
.vip-sam-benefit { font-size: 9px !important; white-space: nowrap !important; }

/* Section wrap override */
.vip-section { padding: 0 !important; }
.vip-tiers-wrap { padding: 0 20px 40px !important; width: 100% !important; box-sizing: border-box !important; }

/* VIP fullwidth container */
.vip-fullwidth { width: 100% !important; padding: 0 !important; }
.vip-fullwidth .vip-samurai-wall,
.vip-fullwidth .vip-ocean-timeline,
.vip-fullwidth .vip-fortune-wall,
.vip-fullwidth .vip-roman-grid,
.vip-fullwidth .vip-galaxy-grid { margin: 0 !important; border-radius: 0 !important; }

/* Samurai - 2 col wider */
.vip-samurai-wall { grid-template-columns: repeat(2,1fr) !important; }
.vip-sam-row { padding: 14px 16px !important; }
.vip-sam-rank { font-size: 10px !important; margin-bottom: 3px !important; }
.vip-sam-req { font-size: 11px !important; }
.vip-sam-benefit { font-size: 11px !important; min-width: 100px !important; text-align: right !important; }

/* Fix dark tier color */
.vip-tier-card__level { min-height: 20px !important; }

/* Samurai row border fix */
.vip-sam-row { border: 1px solid var(--rank-color, rgba(192,57,43,0.3)) !important; }
.lb-page { min-height: 80vh; padding-bottom: 80px; }
.lb-inner { max-width: 600px; margin: 0 auto; padding: 24px 16px; }
.lb-loading, .lb-empty { text-align: center; padding: 60px; color: var(--text-muted); }
.lb-header { text-align: center; margin-bottom: 24px; }
.lb-title { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.lb-subtitle { color: var(--text-secondary); font-size: 14px; }
.lb-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.lb-tab { padding: 8px 20px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-elevated); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.lb-tab.active { background: var(--gradient-primary); border-color: var(--color-primary); color: #000; }
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 32px; height: 220px; }
.lb-podium-slot { display: flex; flex-direction: column; align-items: center; width: 110px; }
.lb-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gradient-primary); color: #000; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.lb-podium-medal { font-size: 24px; margin-bottom: 4px; }
.lb-podium-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; text-align: center; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium-amt { font-size: 12px; color: var(--color-primary); font-weight: 600; margin-bottom: 6px; }
.lb-podium-base { width: 100%; text-align: center; padding: 8px 4px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 700; }
.lb-base-1 { background: var(--gradient-primary); color: #000; min-height: 90px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.lb-base-2 { background: linear-gradient(180deg,#C0C0C0,#A8A8A8); color: #000; min-height: 65px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.lb-base-3 { background: linear-gradient(180deg,#CD7F32,#A0522D); color: #fff; min-height: 48px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.lb-rank-1 { order: 2; }
.lb-rank-2 { order: 1; }
.lb-rank-3 { order: 3; }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.lb-row--me { border-color: var(--color-primary); background: rgba(212,175,55,0.06); }
.lb-rank-num { width: 28px; text-align: center; font-weight: 700; color: var(--text-muted); font-size: 14px; }
.lb-row-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-overlay); color: var(--color-primary); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lb-row-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.lb-row-amt { font-size: 14px; font-weight: 700; color: var(--color-primary); }
.lb-my-rank { margin-top: 16px; padding: 14px; background: rgba(212,175,55,0.08); border: 1px solid var(--color-primary); border-radius: var(--radius-md); text-align: center; color: var(--color-primary); font-size: 14px; font-weight: 600; }
.fw-page { min-height:100vh;background:var(--bg-base);padding-bottom:60px; }
.fw-inner { max-width:960px;margin:0 auto;padding:24px 20px; }

/* Header */
.fw-header { display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap; }
.fw-back { color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:600;transition:color .2s;flex-shrink:0; }
.fw-back:hover { color:var(--color-primary); }
.fw-title { font-size:24px;font-weight:900;flex:1; }
.fw-coin-display { display:flex;align-items:center;gap:6px;padding:8px 18px;background:var(--color-primary-dim);border:1px solid var(--border-active);border-radius:var(--radius-xl);color:var(--color-primary);font-size:15px;font-weight:700;flex-shrink:0; }

/* Main layout */
.fw-main { display:grid;grid-template-columns:420px 1fr;gap:32px;align-items:start;margin-bottom:32px; }

/* Wheel */
.fw-wheel-wrap { position:relative;display:flex;align-items:center;justify-content:center; }
.fw-wheel-wrap canvas { border-radius:50%;box-shadow:0 0 40px rgba(212,175,55,0.3),0 0 80px rgba(212,175,55,0.1); }
.fw-pointer { position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:28px;color:var(--color-primary);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));line-height:1; }

/* Controls */
.fw-controls { display:flex;flex-direction:column;gap:16px;padding-top:20px; }
.fw-cost-info { font-size:14px;color:var(--text-secondary);text-align:center; }
.fw-cost-info strong { color:var(--color-primary); }
.fw-spin-btn { padding:16px 40px;font-size:18px;font-weight:900;border:none;background:var(--gradient-primary);color:var(--text-on-primary);border-radius:var(--radius-xl);cursor:pointer;transition:all .2s;letter-spacing:.5px;box-shadow:var(--shadow-primary); }
.fw-spin-btn:hover:not(:disabled) { transform:scale(1.04);box-shadow:0 6px 32px rgba(212,175,55,0.4); }
.fw-spin-btn:disabled { opacity:.6;cursor:not-allowed;transform:none; }

/* Result */
.fw-result { min-height:40px;padding:10px 16px;border-radius:var(--radius-md);font-size:15px;font-weight:700;text-align:center;transition:all .3s; }
.fw-result--win { background:rgba(0,200,150,.1);border:1px solid rgba(0,200,150,.3);color:var(--color-success); }
.fw-result--miss { background:var(--bg-elevated);color:var(--text-muted); }
.fw-result--error { background:rgba(230,57,70,.1);border:1px solid rgba(230,57,70,.3);color:var(--color-danger); }

/* History */
.fw-history-title { font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:700; }
.fw-history { display:flex;flex-direction:column;gap:6px; }
.fw-history-item { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);padding:6px 10px;background:var(--bg-elevated);border-radius:var(--radius-md); }
.fw-history-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }

/* Prize table */
.fw-prizes { background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px; }
.fw-prizes__title { font-size:16px;font-weight:700;margin-bottom:16px; }
.fw-prizes__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.fw-prize-item { display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-elevated);border-radius:var(--radius-md);font-size:13px;color:var(--text-secondary); }
.fw-prize-dot { width:12px;height:12px;border-radius:50%;flex-shrink:0; }

@media (max-width:860px) {
  .fw-main { grid-template-columns:1fr;justify-items:center; }
  .fw-wheel-wrap canvas { width:320px;height:320px; }
  .fw-prizes__grid { grid-template-columns:repeat(2,1fr); }
}

/* ===== OASIS FLIP ===== */
.of-page { }
.of-ticket-display { border-color:rgba(33,150,243,.4);color:#2196f3;background:rgba(33,150,243,.1); }
.of-main { display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;margin-bottom:28px; }
.of-cards-section { display:flex;flex-direction:column;gap:16px; }
.of-cards-header { }
.of-cards-title { font-size:18px;font-weight:800;margin-bottom:6px; }
.of-cards-sub { font-size:14px;color:var(--text-secondary);line-height:1.5; }
.of-cards-sub strong { color:var(--color-primary); }

/* Card Grid */
.of-cards-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:12px; }
.of-card { aspect-ratio:3/4;cursor:pointer;perspective:600px;transition:transform .15s; }
.of-card:hover:not(.of-card--revealed) { transform:scale(1.04); }
.of-card__inner { width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s ease; }
.of-card--revealed .of-card__inner { transform:rotateY(180deg); }
.of-card__front, .of-card__back { position:absolute;inset:0;border-radius:var(--radius-md);backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; }
.of-card__front { background:linear-gradient(135deg,#1a1a2e,#0d0d1a);border:1px solid rgba(212,175,55,.3);box-shadow:0 2px 12px rgba(0,0,0,.4); }
.of-card__front:hover { border-color:rgba(212,175,55,.6); }
.of-card__front-icon { font-size:24px;opacity:.6; }
.of-card__front-num { font-size:13px;font-weight:700;color:rgba(212,175,55,.5); }
.of-card__back { transform:rotateY(180deg);background:linear-gradient(135deg,#0f0f1a,#1a1a2e);border:1px solid rgba(212,175,55,.4); }
.of-card--empty .of-card__back { border-color:rgba(100,100,100,.3);background:linear-gradient(135deg,#0a0a0a,#111); }
.of-card--bonus .of-card__back { border-color:rgba(212,175,55,.8);background:linear-gradient(135deg,#1a1200,#2a1f00);box-shadow:0 0 16px rgba(212,175,55,.3); }
.of-card--ticket .of-card__back { border-color:rgba(33,150,243,.6);background:linear-gradient(135deg,#001020,#002040); }
.of-card__prize { display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px; }
.of-card__prize-icon { font-size:28px; }
.of-card__prize-label { font-size:11px;font-weight:700;color:var(--color-primary);text-align:center; }
.of-card__prize--empty .of-card__prize-icon { opacity:.3; }
.of-card__prize--empty .of-card__prize-label { color:var(--text-muted); }

/* Controls */
.of-controls { display:flex;flex-direction:column;gap:14px;padding-top:8px; }
.of-play-btn { background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff;box-shadow:0 4px 20px rgba(33,150,243,.3); }
.of-play-btn:hover:not(:disabled) { box-shadow:0 6px 32px rgba(33,150,243,.5); }
.of-result { }
.of-total-wrap { text-align:center;padding:16px;background:var(--color-primary-dim);border:1px solid var(--border-active);border-radius:var(--radius-md); }
.of-total-label { font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px; }
.of-total-val { font-size:20px;font-weight:900;color:var(--color-primary); }

/* Rules */
.of-rules { margin-top:0; }

@media (max-width:768px) {
  .of-main { grid-template-columns:1fr; }
  .of-cards-grid { grid-template-columns:repeat(5,1fr);gap:8px; }
}
@media (max-width:480px) {
  .of-cards-grid { grid-template-columns:repeat(5,1fr);gap:6px; }
}

/* ===== SAHARA TREASURE ===== */
.st-page { }

/* Desert scene */
.st-scene { position:relative;text-align:center;padding:32px 20px 24px;overflow:hidden;margin:0 -20px 28px;background:linear-gradient(180deg,#0a0a0f 0%,#1a0f00 60%,#2a1800 100%); }
.st-scene__dunes { position:absolute;bottom:0;left:0;right:0;height:60px;pointer-events:none; }
.st-dune { position:absolute;bottom:0;border-radius:50% 50% 0 0; }
.st-dune--1 { width:60%;height:50px;left:-5%;background:linear-gradient(180deg,#3d2200,#2a1800); }
.st-dune--2 { width:50%;height:40px;left:30%;background:linear-gradient(180deg,#4a2a00,#3d2200); }
.st-dune--3 { width:40%;height:30px;right:-5%;background:linear-gradient(180deg,#2a1800,#1a0f00); }
.st-scene__title { position:relative;z-index:1;font-size:clamp(20px,4vw,32px);font-weight:900;color:#d4af37;text-shadow:0 2px 12px rgba(212,175,55,0.5);margin-bottom:8px; }
.st-scene__sub { position:relative;z-index:1;font-size:14px;color:rgba(255,255,255,0.6);line-height:1.5; }
.st-scene__sub strong { color:#d4af37; }

/* Main layout */
.st-main { display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:start;margin-bottom:28px; }
.st-chest-section { }

/* Chest Grid */
.st-chests-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.st-chest { display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .2s;position:relative; }
.st-chest:hover:not(.st-chest--opened) .st-chest__body { border-color:#d4af37;box-shadow:0 0 20px rgba(212,175,55,0.3); }
.st-chest--selected .st-chest__body { border-color:#d4af37 !important;box-shadow:0 0 30px rgba(212,175,55,0.5) !important;transform:scale(1.05); }
.st-chest--other { opacity:.35;pointer-events:none; }
.st-chest--opened .st-chest__lid { transform:rotateX(-120deg) translateY(-20px);opacity:.7; }
.st-chest--opened .st-chest__body { border-color:#d4af37;box-shadow:0 0 40px rgba(212,175,55,0.6); }
.st-chest--opening .st-chest__lid { animation:chestOpen .6s ease forwards; }
@keyframes chestOpen { 0%{transform:none} 50%{transform:rotateX(-90deg) translateY(-30px)} 100%{transform:rotateX(-120deg) translateY(-20px)} }

.st-chest__lid { width:100%;height:28px;background:linear-gradient(135deg,#8B5E3C,#5a3a1a);border-radius:8px 8px 0 0;border:1px solid rgba(212,175,55,0.3);transform-origin:bottom;transition:transform .3s;position:relative;z-index:2; }
.st-chest--opened .st-chest__lid::after,.st-chest__lid::after { content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:60%;height:4px;background:rgba(212,175,55,0.3);border-radius:2px; }

.st-chest__body { width:100%;aspect-ratio:1;background:linear-gradient(135deg,#6B4423,#3d2200);border:1px solid rgba(212,175,55,0.2);border-radius:0 0 8px 8px;display:flex;align-items:center;justify-content:center;transition:all .3s;position:relative;overflow:hidden; }
.st-chest__body::before { content:'';position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.03) 50%,transparent 70%); }
.st-chest__lock { font-size:24px;transition:all .3s; }
.st-chest--opened .st-chest__lock { font-size:32px;filter:drop-shadow(0 0 8px rgba(212,175,55,0.8)); }
.st-chest--opened .st-chest__lock::before { content:'\u2728'; }
.st-chest__label { font-size:12px;color:var(--text-muted);font-weight:600; }
.st-chest--selected .st-chest__label { color:#d4af37; }

/* Controls */
.st-controls { display:flex;flex-direction:column;gap:14px; }
.st-pick-btn { background:linear-gradient(135deg,#d4af37,#8B6914);color:#0a0a0f;display:none; }
.st-pick-btn:hover:not(:disabled) { box-shadow:0 6px 24px rgba(212,175,55,0.5); }
.st-start-btn { background:linear-gradient(135deg,#8B5E3C,#5a3a1a);color:#f5d76e;box-shadow:0 4px 16px rgba(139,94,60,0.4); }
.st-start-btn:hover:not(:disabled) { box-shadow:0 6px 24px rgba(139,94,60,0.6); }
.st-result { }

/* Prize reveal */
.st-prize-reveal { padding:20px;border-radius:var(--radius-lg);text-align:center;border:1px solid var(--border-color);background:var(--bg-elevated);animation:prizeReveal .4s ease; }
.st-prize-reveal--bonus { background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.4); }
.st-prize-reveal--coin { background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.2); }
.st-prize-reveal--ticket { background:rgba(33,150,243,.1);border-color:rgba(33,150,243,.3); }
@keyframes prizeReveal { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
.st-prize-reveal__icon { font-size:40px;margin-bottom:8px; }
.st-prize-reveal__label { font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px; }
.st-prize-reveal__amount { font-size:22px;font-weight:900;color:#d4af37; }

/* Rules */
.st-rules { margin-top:0; }

@media (max-width:768px) {
  .st-main { grid-template-columns:1fr; }
  .st-chests-grid { grid-template-columns:repeat(3,1fr);gap:12px; }
}

/* Mini Game List */
.mini-list-page { min-height: 80vh; }
.mini-list-wrap { max-width: 800px; margin: 0 auto; padding: 24px 16px 80px; }
.mini-list-header { text-align: center; margin-bottom: 32px; }
.mini-list-title { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.mini-list-sub { font-size: 14px; color: var(--text-secondary); }
.mini-list-grid { display: flex; flex-direction: column; gap: 16px; }
.mini-game-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--radius-lg); border: 1px solid; cursor: pointer; transition: all 0.3s ease; }
.mini-game-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.mini-game-icon { font-size: 48px; flex-shrink: 0; }
.mini-game-info { flex: 1; }
.mini-game-name { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.mini-game-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.mini-game-meta { display: flex; gap: 12px; }
.mini-game-cost, .mini-game-limit { font-size: 12px; color: var(--text-muted); background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 10px; }
.mini-game-play-btn { flex-shrink: 0; padding: 10px 20px; border: none; border-radius: var(--radius-xl); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.mini-game-play-btn:hover { transform: scale(1.05); }
.mini-balance-bar { display: flex; gap: 24px; justify-content: center; margin-top: 32px; padding: 16px; background: var(--bg-elevated); border-radius: var(--radius-lg); font-size: 15px; color: var(--text-secondary); }
.mini-balance-bar strong { color: var(--color-primary); }
.ref-inner { max-width: 600px; margin: 0 auto; padding: 24px 16px 80px; }
.ref-loading { text-align: center; padding: 60px; color: var(--text-muted); }
.ref-hero { text-align: center; padding: 32px 16px; background: linear-gradient(135deg, #0a0a1a, #1a1200); border-radius: var(--radius-lg); margin-bottom: 24px; }
.ref-hero__title { font-size: 28px; font-weight: 800; color: var(--color-primary); margin-bottom: 8px; }
.ref-hero__sub { font-size: 14px; color: var(--text-secondary); }
.ref-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.ref-stat-card { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; text-align: center; }
.ref-stat-val { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.ref-stat-val--gold { color: var(--color-primary); }
.ref-stat-label { font-size: 12px; color: var(--text-muted); }
.ref-code-card { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; }
.ref-code-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.ref-code-wrap { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ref-code { flex: 1; background: var(--bg-overlay); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 14px; font-size: 16px; font-weight: 700; color: var(--color-primary); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-code--link { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.ref-copy-btn { flex-shrink: 0; padding: 8px 16px; background: var(--bg-overlay); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13px; cursor: pointer; white-space: nowrap; }
.ref-copy-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ref-share-btn { width: 100%; margin-top: 12px; padding: 12px; background: var(--gradient-primary); border: none; border-radius: var(--radius-xl); font-size: 15px; font-weight: 700; color: #000; cursor: pointer; }
.ref-transfer-card { background: var(--bg-elevated); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; }
.ref-transfer-title { font-size: 16px; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.ref-transfer-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.ref-transfer-row { display: flex; gap: 8px; }
.ref-transfer-input { flex: 1; background: var(--bg-overlay); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-primary); font-size: 15px; }
.ref-transfer-btn { flex-shrink: 0; padding: 10px 20px; background: var(--gradient-primary); border: none; border-radius: var(--radius-xl); font-weight: 700; color: #000; cursor: pointer; }
.ref-how { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; }
.ref-how__title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.ref-how__steps { display: flex; flex-direction: column; gap: 12px; }
.ref-how__step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-secondary); }
.ref-how__num { width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-primary); color: #000; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
/* Referral banner */
.referral-banner { width: 100%; overflow: hidden; aspect-ratio: 16/5; }
.referral-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.referral-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .referral-banner { width: 100%; overflow: hidden; aspect-ratio: 16/5; }
.referral-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } }

/* Referral banner - smaller */
.referral-banner { width: 100%; overflow: hidden; aspect-ratio: 16/5; }
.referral-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }



/* Referral banner full width */
.referral-banner {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  aspect-ratio: 16/5;
  overflow: hidden;
}
.referral-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 480px) {
  .referral-banner { aspect-ratio: 16/6; max-height: 150px; }
  .ref-hero { padding: 16px 12px; margin-bottom: 12px; }
  .ref-hero__title { font-size: 20px; margin-bottom: 4px; }
  .ref-hero__sub { font-size: 12px; }
}
.promo-page { min-height: 100vh; background: var(--bg-base); padding-bottom: 80px; }

/* ── Header ── */
.promo-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 28px 40px 20px;
}
.promo-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px;
}
.promo-title { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.promo-subtitle { color: var(--text-muted); font-size: 0.85rem; }

/* ── Filter tabs ── */
.promo-filters {
  display: flex; gap: 8px; padding: 20px 40px 0; flex-wrap: wrap;
}
.promo-filter-btn {
  padding: 6px 18px; border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  background: var(--bg-surface); color: var(--text-muted);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s; letter-spacing: 0.5px; text-transform: uppercase;
}
.promo-filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.promo-filter-btn.active {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--text-on-primary);
}

/* ── Grid ── */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; padding: 24px 40px;
}

/* ── Card ── */
.promo-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
  display: flex; flex-direction: column;
}
.promo-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
}
.promo-card.featured { border-color: var(--color-primary); }

/* Card image area */
.promo-card-img {
  height: 160px;
  background: var(--bg-elevated);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.promo-card-img img { width: 100%; height: 100%; object-fit: cover; }
.promo-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; opacity: 0.15;
}
.promo-card-img-placeholder.deposit  { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 15%, var(--bg-elevated)), var(--bg-elevated)); }
.promo-card-img-placeholder.cashback { background: linear-gradient(135deg, color-mix(in srgb, #2196f3 15%, var(--bg-elevated)), var(--bg-elevated)); }
.promo-card-img-placeholder.vip      { background: linear-gradient(135deg, color-mix(in srgb, #9c27b0 15%, var(--bg-elevated)), var(--bg-elevated)); }
.promo-card-img-placeholder.referral { background: linear-gradient(135deg, color-mix(in srgb, #00c896 15%, var(--bg-elevated)), var(--bg-elevated)); }
.promo-card-img-placeholder.special  { background: linear-gradient(135deg, color-mix(in srgb, #e63946 15%, var(--bg-elevated)), var(--bg-elevated)); }

.promo-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.promo-badge.gold   { background: var(--color-primary); color: var(--bg-base); }
.promo-badge.blue   { background: #2196f3; color: #fff; }
.promo-badge.red    { background: #e63946; color: #fff; }
.promo-badge.purple { background: #9c27b0; color: #fff; }
.promo-badge.green  { background: #00c896; color: #000; }

.promo-provider-chip {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: 0.7rem; color: var(--text-secondary); font-weight: 600;
}

/* Card body */
.promo-card-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.promo-card-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.promo-card-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; }

/* Bonus tiers */
.promo-tiers-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.promo-tiers {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.promo-tier-chip {
  padding: 5px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: all 0.15s; cursor: pointer;
}
.promo-tier-chip:hover,
.promo-tier-chip.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-primary);
}

/* Terms row */
.promo-terms-row {
  display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.promo-term {
  display: flex; flex-direction: column; gap: 2px;
}
.promo-term-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
}
.promo-term-value {
  font-size: 0.82rem; font-weight: 700; color: var(--text-primary);
}
.promo-term-value.highlight { color: var(--color-primary); }

/* CTA */
.promo-card-cta {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
}
.promo-cta-btn {
  padding: 8px 22px;
  background: var(--color-primary); color: var(--text-on-primary);
  border: none; border-radius: var(--radius-md);
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s; letter-spacing: 0.5px;
}
.promo-cta-btn:hover { opacity: 0.85; }
.promo-valid { font-size: 0.72rem; color: var(--text-muted); }

/* ── Modal overlay ── */
.promo-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.promo-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 680px; max-height: 90vh;
  overflow-y: auto; display: flex; flex-direction: column;
}
.promo-modal-img {
  height: 140px; background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; opacity: 0.2; flex-shrink: 0; position: relative;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden;
}
.promo-modal-img img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.promo-modal-img .promo-badge { top: 16px; left: 16px; }
.promo-modal-body { padding: 24px; }
.promo-modal-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.promo-modal-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; }
.promo-modal-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.promo-modal-section-title {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.promo-modal-terms {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px;
}
.promo-modal-term {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 12px;
  text-align: center;
}
.promo-modal-term-val { font-size: 1.1rem; font-weight: 800; color: var(--color-primary); }
.promo-modal-term-lbl { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; }
.promo-modal-actions {
  display: flex; gap: 10px; margin-top: 8px;
}
.promo-modal-btn-primary {
  flex: 1; padding: 12px;
  background: var(--color-primary); color: var(--text-on-primary);
  border: none; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.promo-modal-btn-secondary {
  padding: 12px 20px;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 0.9rem; cursor: pointer;
}

/* ── Loading / Empty ── */
.promo-loading, .promo-empty {
  text-align: center; padding: 80px 24px; color: var(--text-muted);
  grid-column: 1 / -1;
}
.promo-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--border-color); border-top-color: var(--color-primary);
  border-radius: 50%; animation: promo-spin 0.7s linear infinite; margin: 0 auto 12px;
}
@keyframes promo-spin { to { transform: rotate(360deg); } }

/* ── Mobile ── */
@media (max-width: 768px) {
  .promo-header { padding: 20px 16px 16px; }
  .promo-filters { padding: 16px 16px 0; }
  .promo-grid { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 10px; }
  .promo-modal-terms { grid-template-columns: repeat(3,1fr); }
  .promo-modal { max-height: 85vh; }
  .promo-modal-img { height: 120px; }
  .promo-modal-body { padding: 14px; }
  .promo-card-img { height: 110px; }
  .promo-card-body { padding: 12px 14px; }
  .promo-card-title { font-size: 0.88rem; }
  .promo-card-subtitle { font-size: 0.75rem; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .promo-tiers-label, .promo-tiers { display: none; }
  .promo-terms-row { margin-bottom: 8px; gap: 8px; flex-wrap: nowrap; }
  .promo-term-label { display: none; }
  .promo-card-img { height: 100px; }
}

/* TNC */
.promo-modal-tnc {
  margin-bottom: 16px;
}
.promo-modal-tnc-content {
  font-size: 0.78rem; color: var(--text-muted);
  line-height: 1.8; background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.checkin-page { max-width: 760px; margin: 40px auto; padding: 0 20px 80px; }
.checkin-inner { display: flex; flex-direction: column; gap: 24px; }
.checkin-loading { text-align: center; padding: 60px; color: var(--text-muted); font-size: 16px; }

.checkin-hero {
  text-align: center;
  background: var(--bg-elevated, #1a1a2e);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 20px);
  padding: 40px 24px 32px;
  position: relative;
  overflow: hidden;
}
.checkin-hero::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.checkin-hero-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  color: var(--color-primary);
  background: rgba(212,175,55,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.checkin-hero-icon svg { width: 100%; height: 100%; }
.checkin-hero-title { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.checkin-hero-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.checkin-streak {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-overlay, rgba(255,255,255,0.06));
  border: 1px solid var(--color-primary);
  border-radius: 40px; padding: 10px 24px;
}
.checkin-streak-fire { width: 24px; height: 24px; color: #ff6d00; display: flex; align-items: center; }
.checkin-streak-fire svg { width: 100%; height: 100%; }
.checkin-streak-num { font-size: 32px; font-weight: 900; color: var(--color-primary); line-height: 1; }
.checkin-streak-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

.checkin-section-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  border-left: 3px solid var(--color-primary);
  padding-left: 10px;
}

.checkin-rewards-wrap {
  background: var(--bg-elevated, #1a1a2e);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 20px);
  padding: 24px;
}
.checkin-rewards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.checkin-reward-card {
  text-align: center;
  background: var(--bg-overlay, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  padding: 12px 4px;
  transition: all 0.2s;
}
.checkin-reward-card.done {
  border-color: var(--color-success, #00c896);
  background: rgba(0,200,150,0.08);
  opacity: 0.7;
}
.checkin-reward-card.current {
  border-color: var(--color-primary);
  background: rgba(212,175,55,0.1);
  box-shadow: 0 0 16px rgba(212,175,55,0.2);
  transform: translateY(-3px);
}
.checkin-reward-day { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; }
.checkin-reward-icon { width: 28px; height: 28px; margin: 0 auto 6px; color: var(--color-primary); }
.checkin-reward-card.done .checkin-reward-icon { color: var(--color-success, #00c896); }
.checkin-reward-icon svg { width: 100%; height: 100%; }
.checkin-reward-amount { font-size: 14px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.checkin-reward-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.checkin-action { text-align: center; }
.checkin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 360px;
  padding: 16px 32px;
  border-radius: var(--radius-xl, 28px);
  border: none; cursor: pointer;
  font-size: 17px; font-weight: 800;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover, #b8960c));
  color: #000;
  transition: all 0.2s;
  animation: checkin-glow 2s infinite alternate;
}
.checkin-btn-icon { width: 22px; height: 22px; flex-shrink: 0; }
.checkin-btn-icon svg { width: 100%; height: 100%; }
@keyframes checkin-glow {
  from { box-shadow: 0 4px 20px rgba(212,175,55,0.3); }
  to   { box-shadow: 0 8px 32px rgba(212,175,55,0.6); }
}
.checkin-btn:hover:not(:disabled) { transform: scale(1.02); filter: brightness(1.1); }
.checkin-btn--done {
  background: rgba(0,200,150,0.12);
  color: var(--color-success, #00c896);
  border: 1px solid var(--color-success, #00c896);
  animation: none;
  cursor: default;
}
.checkin-next { font-size: 13px; color: var(--text-muted); margin-top: 10px; }
.checkin-msg { min-height: 24px; font-size: 14px; font-weight: 600; margin-top: 12px; }
.checkin-msg--success { color: var(--color-success, #00c896); }
.checkin-msg--error   { color: var(--color-danger, #e63946); }

.checkin-cal-wrap {
  background: var(--bg-elevated, #1a1a2e);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 20px);
  padding: 24px;
}
.checkin-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.checkin-cal-head { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 6px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.checkin-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.checkin-cal-cell {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  position: relative;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.checkin-cal-cell.empty { border: none; }
.checkin-cal-cell.today { border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
.checkin-cal-cell.checked { background: rgba(0,200,150,0.1); border-color: var(--color-success, #00c896); }
.checkin-cal-day { line-height: 1; }
.checkin-cal-mark { width: 12px; height: 12px; position: absolute; bottom: 2px; color: var(--color-success, #00c896); }
.checkin-cal-mark svg { width: 100%; height: 100%; }

@media (max-width: 640px) {
  .checkin-rewards { grid-template-columns: repeat(4, 1fr); }
  .checkin-hero-title { font-size: 22px; }
  .checkin-btn { font-size: 15px; }
}

/* Checkin banner */
.checkin-banner { width: 100%; overflow: hidden; aspect-ratio: 16/5; }
.checkin-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .checkin-banner { aspect-ratio: 4/3; } }

/* Checkin banner full width override */
.checkin-banner {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  aspect-ratio: 16/5;
  overflow: hidden;
}
.checkin-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-page { min-height: 80vh; padding-bottom: 80px; }
.blog-inner, .blog-detail-inner { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.blog-loading, .blog-empty { text-align: center; padding: 60px; color: var(--text-muted); font-size: 16px; }
.blog-header { text-align: center; margin-bottom: 32px; }
.blog-title { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.blog-subtitle { color: var(--text-secondary); font-size: 14px; }
.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
.blog-cat-btn { padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-elevated); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.blog-cat-btn.active, .blog-cat-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(212,175,55,0.08); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.blog-card { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all 0.25s; }
.blog-card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.blog-card.featured { border-color: var(--color-primary); }
.blog-card-img { position: relative; aspect-ratio: 16/9; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-placeholder { font-size: 48px; opacity: 0.3; }
.blog-badge { position: absolute; top: 8px; left: 8px; background: var(--color-primary); color: #000; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.blog-card-body { padding: 16px; }
.blog-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.blog-cat-tag { background: rgba(212,175,55,0.15); color: var(--color-primary); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.blog-date { font-size: 12px; color: var(--text-muted); }
.blog-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; line-height: 1.4; }
.blog-card-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-footer { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
/* Detail */
.blog-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.blog-back-btn { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 13px; }
.blog-back-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-detail-cover { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 24px; }
.blog-detail-title { font-size: 28px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; line-height: 1.3; }
.blog-detail-subtitle { font-size: 16px; color: var(--text-secondary); margin: 0 0 16px; }
.blog-detail-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.blog-detail-content { font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.blog-detail-content h2 { color: var(--text-primary); font-size: 20px; margin: 24px 0 12px; }
.blog-detail-content ul { padding-left: 20px; margin: 12px 0; }
.blog-detail-content li { margin-bottom: 6px; }
.blog-detail-content strong { color: var(--text-primary); }
/* ============================================
   notice-theme.css — 公告页黑金主题令牌
   ============================================ */
:root {
  --nb-page-bg: #0e0d0a;
  --nb-surface: #121008;
  --nb-surface-hover: #1a1710;
  --nb-surface-active: #16130a;

  --nb-border: #35301f;
  --nb-border-subtle: #2a2617;
  --nb-border-strong: #b8963f;

  --nb-text-1: #f0e9d8;
  --nb-text-2: #9a927c;
  --nb-text-3: #6b6552;

  --nb-accent: #d4a843;
  --nb-accent-text: #e8c56a;

  --nb-tag-special-bg: #1a1508;
  --nb-tag-special-text: #e8c56a;
  --nb-tag-special-border: #b8963f;

  --nb-tag-system-bg: #1c0e0c;
  --nb-tag-system-text: #e08a7a;
  --nb-tag-system-border: #8a4436;

  --nb-tag-general-bg: #171712;
  --nb-tag-general-text: #a29a85;
  --nb-tag-general-border: #46412e;

  --nb-radius-card: 12px;
  --nb-radius-pill: 999px;
  --nb-duration: 180ms;
  --nb-ease: cubic-bezier(0.25, 0.8, 0.35, 1);

  --nb-hero-overlay: rgba(14, 13, 10, 0.55);
  --nb-hero-fade: #0e0d0a;
}

.notice-page { padding: 20px; max-width: 900px; margin: 0 auto; }

/* ---------- Hero ---------- */
.notice-hero {
  text-align: center; padding: 48px 16px 40px;
  border-radius: var(--nb-radius-card);
  margin-bottom: 16px;
  background:
    linear-gradient(180deg, var(--nb-hero-overlay) 0%, var(--nb-hero-fade) 96%),
    var(--nb-page-bg) url('/assets/contact/notice-hero.jpg') center/cover no-repeat;
}
.notice-hero-tag {
  display: inline-block; font-size: 12px; letter-spacing: 2px;
  color: var(--nb-accent-text); border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-radius-pill); padding: 3px 14px; margin-bottom: 10px;
}
.notice-hero-title { font-size: 26px; font-weight: 700; color: var(--nb-text-1); margin: 0 0 6px; }
.notice-hero-sub { font-size: 14px; color: var(--nb-text-3); margin: 0; }

/* ---------- Tabs ---------- */
.notice-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.notice-tab {
  border-radius: var(--nb-radius-pill); padding: 7px 22px; font-size: 13px;
  background: transparent; color: var(--nb-text-3);
  border: 1px solid var(--nb-border); cursor: pointer;
  transition: color var(--nb-duration) var(--nb-ease), border-color var(--nb-duration) var(--nb-ease);
}
.notice-tab:hover { color: var(--nb-accent-text); border-color: var(--nb-border-strong); }
.notice-tab.active {
  background: var(--nb-surface-hover); color: var(--nb-accent-text);
  border-color: var(--nb-border-strong); font-weight: 600;
}

/* ---------- 列表容器 ---------- */
.nb-list {
  border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  overflow: hidden; background: var(--nb-surface);
}
.nb-hint { padding: 40px; text-align: center; color: var(--nb-text-3); font-size: 13px; }

/* ---------- 单行 ---------- */
.nb-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--nb-border-subtle);
  cursor: pointer; outline: none;
  transition: background var(--nb-duration) var(--nb-ease);
}
.nb-row:last-child { border-bottom: none; }
.nb-row:hover { background: var(--nb-surface-hover); }
.nb-row:focus-visible { box-shadow: inset 0 0 0 1px var(--nb-border-strong); }
.nb-row.is-open { background: var(--nb-surface-active); }

/* 后台 priority=high 联动:金色左边框强调 */
.nb-row.is-high { border-left: 2px solid var(--nb-accent); padding-left: 16px; }

/* ---------- 类型标签(后台公告类型联动)---------- */
.nb-tag {
  flex-shrink: 0; font-size: 12px; font-weight: 600;
  padding: 4px 14px; border-radius: var(--nb-radius-pill);
  border: 1px solid transparent; margin-top: 1px; white-space: nowrap;
}
.nb-tag--special { background: var(--nb-tag-special-bg); color: var(--nb-tag-special-text); border-color: var(--nb-tag-special-border); }
.nb-tag--system  { background: var(--nb-tag-system-bg);  color: var(--nb-tag-system-text);  border-color: var(--nb-tag-system-border); }
.nb-tag--general { background: var(--nb-tag-general-bg); color: var(--nb-tag-general-text); border-color: var(--nb-tag-general-border); }

/* ---------- 内容区 ---------- */
.nb-main { flex: 1; min-width: 0; }
.nb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nb-title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--nb-text-1);
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.nb-pin {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  background: var(--nb-accent); color: var(--nb-page-bg);
  padding: 2px 8px; border-radius: var(--nb-radius-pill);
}
.nb-time { flex-shrink: 0; font-size: 12px; color: var(--nb-text-3); cursor: help; }

/* 收起时单行截断,展开后显示全文 */
.nb-content {
  margin: 5px 0 0; font-size: 13px; color: var(--nb-text-2); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-row.is-open .nb-content {
  white-space: normal; overflow: visible;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--nb-border);
}

/* ---------- 箭头 ---------- */
.nb-chevron {
  flex-shrink: 0; color: var(--nb-accent); margin-top: 3px;
  transition: transform var(--nb-duration) var(--nb-ease);
}
.nb-row.is-open .nb-chevron { transform: rotate(180deg); }

/* ---------- 移动端 ---------- */
@media (max-width: 480px) {
  .notice-page { padding: 12px; }
  .nb-row { flex-wrap: wrap; }
  .nb-tag { order: -1; }
  .nb-main { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .notice-tab, .nb-row, .nb-chevron { transition: none; }
}
.nb-hint--empty img {
  display: block; width: 120px; height: 120px;
  margin: 0 auto 12px; opacity: 0.85; object-fit: contain;
}
@keyframes rpFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  50%  { transform: translateY(50vh) rotate(180deg) scale(1.1); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg) scale(0.9); opacity: 0.6; }
}

@keyframes rpPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(240,192,64,0.5); }
  50%       { box-shadow: 0 0 25px rgba(240,192,64,0.9); }
}

#rp-counter {
  animation: rpPulse 1.5s ease infinite;
}.account-page { min-height:100vh;background:var(--bg-base);padding-bottom:60px; }
.account-inner { max-width:900px;margin:0 auto;padding:32px 20px 60px; }

/* Header */
.account-header { display:flex;align-items:center;gap:20px;margin-bottom:32px;padding:24px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg); }
.account-avatar { width:72px;height:72px;border-radius:50%;background:var(--gradient-primary);color:var(--text-on-primary);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:3px solid var(--border-active); }
.account-username { font-size:22px;font-weight:800;margin-bottom:6px; }
.account-vip-badge { display:inline-block;padding:3px 12px;background:var(--color-primary-dim);border:1px solid var(--border-active);border-radius:var(--radius-xl);color:var(--color-primary);font-size:12px;font-weight:700;margin-bottom:6px; }
.account-ref-code { font-size:13px;color:var(--text-muted); }
.account-ref-code span { color:var(--color-primary);font-weight:700;letter-spacing:1px; }

/* Tabs */
.account-tabs { display:flex;gap:4px;margin-bottom:24px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:6px;overflow-x:auto;scrollbar-width:none; }
.account-tabs::-webkit-scrollbar { display:none; }
.account-tab { flex-shrink:0;padding:10px 16px;border:none;background:none;color:var(--text-secondary);font-size:13px;font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;white-space:nowrap; }
.account-tab.active { background:var(--gradient-primary);color:var(--text-on-primary);font-weight:600; }
.account-tab:hover:not(.active) { background:var(--bg-elevated);color:var(--text-primary); }

/* Panels */
.account-panel { display:none; }
.account-panel.active { display:block; }
.account-form { background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px; }
.account-section-title { font-size:16px;font-weight:700;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-color); }
.account-row { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px; }
.account-field { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.account-label { font-size:13px;font-weight:500;color:var(--text-secondary); }
.account-input { padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s;width:100%; }
.account-input:focus { border-color:var(--border-active); }
.account-input--readonly { color:var(--text-muted);cursor:not-allowed; }
.account-input-wrap { position:relative; }
.account-input-wrap .account-input { padding-right:44px; }
.account-eye { position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;color:var(--text-muted); }
.account-save-btn { padding:13px 32px;font-size:14px;font-weight:700;margin-top:8px; }
.account-loading,.account-empty { text-align:center;padding:32px;color:var(--text-muted);font-size:14px; }
.account-msg { display:none;padding:10px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:500;margin-bottom:16px; }
.account-msg--success { background:rgba(0,200,150,.1);border:1px solid rgba(0,200,150,.3);color:var(--color-success); }
.account-msg--error { background:rgba(230,57,70,.1);border:1px solid rgba(230,57,70,.3);color:var(--color-danger); }

/* KYC */
.kyc-status-card { display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-elevated);border-radius:var(--radius-md);margin-bottom:24px; }
.kyc-status-icon { font-size:36px; }
.kyc-status-text { font-size:15px;font-weight:500;line-height:1.5; }
.kyc-upload-box { display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-elevated);border:1px dashed var(--border-color);border-radius:var(--radius-md); }
.kyc-upload-btn { padding:8px 16px;background:var(--bg-overlay);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;cursor:pointer;white-space:nowrap;transition:all .2s; }
.kyc-upload-btn:hover { border-color:var(--border-active);color:var(--text-primary); }
.kyc-upload-name { font-size:12px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* Payment accounts */
.payment-item { display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg-elevated);border-radius:var(--radius-md);margin-bottom:10px; }
.payment-item__icon { font-size:28px;flex-shrink:0; }
.payment-item__name { font-size:14px;font-weight:600;margin-bottom:2px; }
.payment-item__detail { font-size:12px;color:var(--text-muted); }
.payment-item__type { margin-left:auto;padding:4px 10px;background:var(--color-primary-dim);border-radius:var(--radius-xl);color:var(--color-primary);font-size:11px;font-weight:700;text-transform:uppercase; }

/* Messages */
.message-item { padding:16px;background:var(--bg-elevated);border-radius:var(--radius-md);margin-bottom:10px;border-left:3px solid transparent;transition:all .2s; }
.message-item--unread { border-left-color:var(--color-primary);background:var(--color-primary-dim); }
.message-item__title { font-size:14px;font-weight:700;margin-bottom:6px; }
.message-item__body { font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:8px; }
.message-item__date { font-size:11px;color:var(--text-muted); }

@media (max-width:600px) {
  .account-row { grid-template-columns:1fr; }
  .account-header { flex-direction:column;text-align:center; }
  .account-tab { padding:10px 12px;font-size:12px; }
}

/* Mobile compact fixes */
@media (max-width: 768px) {
  .account-hero {
    padding: 16px;
    margin-bottom: 12px;
  }
  .account-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  .account-username {
    font-size: 18px;
  }
  .account-vip-badge {
    font-size: 11px;
    padding: 2px 8px;
  }
  .account-ref-code {
    font-size: 11px;
  }
  /* Tab scroll fix */
  .account-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 2px;
  }
  .account-tabs::-webkit-scrollbar {
    display: none;
  }
  .account-tab {
    white-space: nowrap;
    font-size: 11px;
    padding: 8px 10px;
    flex-shrink: 0;
  }
}
.about-page { min-height: 80vh; padding-bottom: 80px; }
.about-hero { position: relative; min-height: 200px; background: var(--bg-elevated); overflow: hidden; }
.about-banner { width: 100%; height: 220px; object-fit: cover; display: block; }
.about-banner-placeholder { width: 100%; height: 220px; background: linear-gradient(135deg, var(--bg-elevated), var(--bg-overlay)); }
.about-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.about-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: contain; margin-bottom: 8px; }
.about-name { font-size: 28px; font-weight: 800; color: var(--text-primary); margin: 0 0 4px; }
.about-slogan { font-size: 14px; color: var(--color-primary); margin: 0; font-weight: 600; }
.about-inner { max-width: 640px; margin: 0 auto; padding: 32px 16px; }
.about-section { margin-bottom: 36px; }
.about-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.about-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.about-info-grid { display: flex; flex-direction: column; gap: 12px; }
.about-info-item { display: flex; gap: 12px; align-items: flex-start; }
.about-info-label { font-size: 13px; color: var(--text-muted); min-width: 80px; padding-top: 2px; }
.about-info-value { font-size: 14px; color: var(--text-primary); font-weight: 600; }
.about-info-value a { color: var(--color-primary); text-decoration: none; }
.about-social { display: flex; gap: 12px; flex-wrap: wrap; }
.about-social-btn { padding: 10px 20px; border-radius: 20px; background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.about-social-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.about-loading { text-align: center; padding: 80px; color: var(--text-muted); }
.chat-page { display:flex; flex-direction:column; height:calc(100vh - 120px); max-width:760px; margin:0 auto; padding:0 var(--spacing-sm); overflow:hidden; }
.chat-header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card-bg,#1a1a24); border-radius:var(--radius-lg,12px) var(--radius-lg,12px) 0 0; border-bottom:1px solid var(--border-color,rgba(255,255,255,0.08)); }
.chat-header-avatar { width:36px; height:36px; border-radius:50%; background:var(--color-primary,#D4AF37); display:flex; align-items:center; justify-content:center; font-weight:700; color:#000; font-size:14px; flex-shrink:0; }
.chat-header-name { font-weight:600; color:var(--text-primary,#fff); font-size:15px; }
.chat-header-status { font-size:12px; color:var(--color-success,#00C896); display:flex; align-items:center; gap:4px; }
.chat-header-status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--color-success,#00C896); display:inline-block; }
.chat-messages { flex:1; overflow-y:auto; min-height:0; padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--bg-base,#0a0a0f); }
.chat-messages::-webkit-scrollbar { width:3px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--border-color,rgba(255,255,255,0.08)); border-radius:3px; }
.chat-sep { text-align:center; font-size:11px; color:var(--text-muted,#888); margin:8px 0; display:flex; align-items:center; gap:8px; }
.chat-sep::before,.chat-sep::after { content:''; flex:1; height:1px; background:var(--border-color,rgba(255,255,255,0.08)); }
.chat-bubble-row { display:flex; }
.chat-bubble-row.is-out { justify-content:flex-end; }
.chat-bubble-row.is-in  { justify-content:flex-start; }
.chat-bubble { max-width:72%; padding:8px 12px 4px; border-radius:12px; font-size:14px; line-height:1.5; word-break:break-word; }
.chat-bubble-row.is-out .chat-bubble { background:var(--color-primary); color:color-mix(in srgb, var(--color-primary) 25%, #000); border-bottom-right-radius:3px; }
.chat-bubble-row.is-in  .chat-bubble { background:var(--card-bg,#1a1a24); color:var(--text-primary,#fff); border:1px solid var(--border-color,rgba(255,255,255,0.08)); border-bottom-left-radius:3px; }
.chat-bubble-sender { font-size:11px; color:var(--color-primary,#D4AF37); margin-bottom:2px; font-weight:600; }
.chat-bubble-text { white-space:pre-wrap; }
.chat-bubble-time { font-size:11px; opacity:0.55; text-align:right; margin-top:3px; }
.chat-deleted { font-style:italic; opacity:0.5; font-size:13px; }
.chat-inputbar { flex-shrink:0; display:flex; align-items:flex-end; gap:8px; padding:10px 12px; background:var(--card-bg,#1a1a24); border-radius:0 0 var(--radius-lg,12px) var(--radius-lg,12px); border-top:1px solid var(--border-color,rgba(255,255,255,0.08)); }
.chat-input { flex:1; background:var(--bg-base,#0a0a0f); border:1px solid var(--border-color,rgba(255,255,255,0.08)); border-radius:8px; padding:8px 12px; color:var(--text-primary,#fff); font-size:14px; resize:none; min-height:38px; max-height:100px; font-family:inherit; line-height:1.4; outline:none; }
.chat-input:focus { border-color:var(--color-primary,#D4AF37); }
.chat-send-btn { width:38px; height:38px; border-radius:8px; background:var(--color-primary,#D4AF37); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity 0.15s; }
.chat-send-btn:disabled { opacity:0.4; cursor:not-allowed; }
.chat-send-btn:hover:not(:disabled) { opacity:0.85; }
.chat-send-btn svg { width:16px; height:16px; stroke:#000; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-muted,#888); }
.chat-empty-icon { font-size:48px; opacity:0.3; }
.chat-closed-bar { padding:10px; text-align:center; background:var(--card-bg,#1a1a24); border-radius:0 0 12px 12px; border-top:1px solid var(--border-color,rgba(255,255,255,0.08)); color:var(--text-muted,#888); font-size:13px; }
.chat-typing { font-size:12px; color:var(--text-muted,#888); padding:0 16px 4px; min-height:18px; }
@media (max-width:600px) { .chat-page { height:calc(100vh - 100px); padding:0; } .chat-bubble { max-width:85%; } }
/* emoji panel */
.chat-emoji-panel {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 8px;
  background: var(--bg-elevated, #1a1a24);
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
  max-height: 140px;
  overflow-y: auto;
  flex-shrink: 0;
}
.chat-emoji-item {
  background: none; border: none; cursor: pointer;
  font-size: 20px; padding: 3px; border-radius: 4px;
  line-height: 1; text-align: center;
}
.chat-emoji-item:hover { background: var(--bg-surface, #111118); }

/* tool buttons in inputbar */
.chat-tool-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #888);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px;
  flex-shrink: 0; font-size: 18px;
  transition: color 0.15s, background 0.15s;
}
.chat-tool-btn:hover { color: var(--color-primary, #D4AF37); background: rgba(212,175,55,0.1); }

/* image message */
.chat-msg-img {
  max-width: 200px; max-height: 200px;
  border-radius: 8px; display: block; cursor: zoom-in;
}

/* hide inner chat header when in widget mode */
/* === widget embed mode (iframe ?widget=1) === */

.chat-page.is-widget .chat-header { display:none !important; }
.chat-page.is-widget .chat-messages { flex:1; min-height:0; padding:8px 12px !important; gap:2px !important; }
.chat-page.is-widget .chat-bubble { font-size:12px !important; padding:5px 9px 3px !important; max-width:80% !important; }
.chat-page.is-widget .chat-bubble-time { font-size:10px !important; }
.chat-page.is-widget .chat-bubble-sender { font-size:10px !important; }
.chat-page.is-widget .chat-sep { font-size:10px !important; margin:6px 0 4px !important; }
.chat-page.is-widget .chat-inputbar { padding:6px 8px !important; }
.chat-page.is-widget .chat-input { font-size:12px !important; }
.chat-page.is-widget .chat-send-btn { width:32px !important; height:32px !important; }
.chat-page.is-widget .chat-tool-btn { width:28px !important; height:28px !important; font-size:15px !important; }
/* when embedded in small iframe -- fix layout */
@media (max-height: 560px) {
  .chat-page {
    height: 100vh !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .chat-page .chat-messages {
    flex: 1 !important;
    min-height: 0 !important;
  }
}




/* ensure #app fills iframe */
.chat-page.is-widget { height: 100% !important; max-width: 100% !important; padding: 0 !important; }

/* mobile chat header buttons */
.chat-header { position: relative; display: flex; align-items: center; gap: 12px; }
.chat-header-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #888);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s;
}
.chat-header-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #fff); }
.chat-header-btn svg { width: 16px; height: 16px; }
/* Desktop chat widget -- zero hardcoded theme colors (color-mix based) */
.chat-widget { display: none; }

@media (min-width: 768px) {
  .chat-widget { display: block; }

  .chat-widget-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--color-primary); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5); transition: transform 0.2s;
  }
  .chat-widget-btn:hover { transform: scale(1.08); }
  .chat-widget-btn svg { width: 26px; height: 26px; stroke: color-mix(in srgb, var(--color-primary) 82%, #000); }

  .chat-widget-badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--color-danger); color: var(--text-on-primary, #fff);
    font-size: 10px; font-weight: 700;
    border-radius: 10px; padding: 1px 5px; min-width: 16px; height: 16px;
    display: none; align-items: center; justify-content: center;
  }
  .chat-widget-badge.visible { display: flex; }

  .chat-widget-panel {
    position: fixed; bottom: 90px; right: 24px; z-index: 9998;
    width: 380px; height: min(540px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    border-radius: var(--radius-lg, 16px); overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7),
                0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
    transform: scale(0.95) translateY(10px); opacity: 0; pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .chat-widget-panel.is-open {
    transform: scale(1) translateY(0); opacity: 1; pointer-events: auto;
  }

  .chat-widget-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color); flex-shrink: 0;
  }
  .chat-widget-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-primary);
    color: color-mix(in srgb, var(--color-primary) 82%, #000);
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .chat-widget-info { flex: 1; min-width: 0; }
  .chat-widget-title { font-weight: 600; color: var(--text-primary); font-size: 13px; }
  .chat-widget-status {
    font-size: 11px; color: var(--color-success);
    display: flex; align-items: center; gap: 4px; margin-top: 1px;
  }
  .chat-widget-status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-success); display: inline-block;
  }
  .chat-widget-status.is-off { color: var(--text-muted) !important; }
  .chat-widget-status.is-off::before { background: var(--text-muted) !important; }

  .cw-reply-time { font-size: 10px; color: var(--text-secondary); margin-left: 4px; opacity: 0.9; }

  .chat-widget-inbox-btn,
  .chat-widget-min,
  .chat-widget-close {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }
  .chat-widget-inbox-btn:hover,
  .chat-widget-min:hover,
  .chat-widget-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
  .chat-widget-min { font-size: 18px; }

  .chat-widget-msgs {
    flex: 1; overflow-y: auto; min-height: 0;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
    background: var(--bg-base);
  }
  .chat-widget-msgs::-webkit-scrollbar { width: 3px; }
  .chat-widget-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
  .cwm-sep { text-align: center; font-size: 10px; color: var(--text-muted); margin: 4px 0; }
  .cwm-row { display: flex; }
  .cwm-row.out { justify-content: flex-end; }
  .cwm-row.in  { justify-content: flex-start; }
  .cwm-bubble {
    max-width: 75%; padding: 6px 10px 3px; border-radius: 10px;
    font-size: 12px; line-height: 1.4; word-break: break-word;
  }
  .cwm-row.out .cwm-bubble {
    background: var(--color-primary);
    color: color-mix(in srgb, var(--color-primary) 25%, #000);
    border-bottom-right-radius: 2px;
  }
  .cwm-row.in .cwm-bubble {
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.08); border-bottom-left-radius: 2px;
  }
  .cwm-sender { font-size: 10px; color: var(--color-primary); margin-bottom: 2px; font-weight: 600; }
  .cwm-time { font-size: 10px; opacity: 0.5; text-align: right; margin-top: 2px; }
  .cwm-empty { color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 20px; }

  .chat-widget-emoji {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    padding: 6px 8px; max-height: 100px; overflow-y: auto;
    background: var(--bg-elevated);
    border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
  }
  .chat-widget-emoji-btn { background: none; border: none; cursor: pointer; font-size: 18px; padding: 2px; border-radius: 4px; }
  .chat-widget-emoji-btn:hover { background: rgba(255,255,255,0.08); }

  .chat-widget-bar {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    background: var(--bg-surface);
    border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
  }
  .chat-widget-tool {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 16px; flex-shrink: 0;
  }
  .chat-widget-tool:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
  .chat-widget-input {
    flex: 1; background: var(--bg-elevated);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    padding: 7px 10px; color: var(--text-primary); font-size: 12px; outline: none; min-width: 0;
  }
  .chat-widget-input:focus { border-color: var(--color-primary); }
  .chat-widget-send {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--color-primary); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .chat-widget-send svg { width: 14px; height: 14px; stroke: color-mix(in srgb, var(--color-primary) 82%, #000); }
  .chat-widget-send:hover { opacity: 0.85; }
}

.chat-widget-panel.is-minimized { height: auto; }

.chat-widget-offline {
  padding: 8px 12px; background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted); font-size: 11px; text-align: center; flex-shrink: 0;
}

.chat-widget-inbox {
  flex: 1; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-base);
}
.cwi-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cwi-input {
  background: var(--bg-elevated); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 9px 12px; color: var(--text-primary);
  font-size: 12px; outline: none; width: 100%; box-sizing: border-box; font-family: inherit;
}
.cwi-input:focus { border-color: var(--color-primary); }
.cwi-textarea { resize: none; min-height: 80px; }
.cwi-submit {
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-primary) 82%, #000);
  border: none; border-radius: 8px; padding: 9px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.cwi-submit:hover { opacity: 0.85; }
.cwi-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.cwi-result { font-size: 11px; text-align: center; }
.cwi-result.ok  { color: var(--color-success); }
.cwi-result.err { color: var(--color-danger); }

#cwChatView  { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
#cwInboxView { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }

.cwm-welcome { font-size: 12px; line-height: 1.5; margin-bottom: 10px; color: var(--text-primary); }
.cw-menu-grid { display: flex; flex-direction: column; gap: 6px; }

.cw-menu-btn {
  background: var(--bg-base);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 8px; padding: 8px 12px; font-size: 12px;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.15s, color 0.15s; width: 100%;
}
.cw-menu-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
.cw-menu-btn.is-priority { background: color-mix(in srgb, var(--color-primary) 10%, transparent); font-weight: 600; }
.cw-menu-btn.is-priority:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.cw-menu-btn.is-selected {
  background: var(--color-primary);
  color: color-mix(in srgb, var(--color-primary) 82%, #000);
  cursor: default;
}
.cw-menu-btn.is-selected .cw-btn-arrow { display: none; }
.cw-menu-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cw-btn-arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.cw-btn-connecting {
  margin-left: auto; font-size: 10px; color: var(--text-muted); flex-shrink: 0;
  animation: cw-pulse 1s infinite;
}
@keyframes cw-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.cw-back-btn {
  display: none; background: none; border: none;
  border-bottom: 1px solid var(--border-color);
  color: var(--color-primary); font-size: 12px;
  padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; flex-shrink: 0;
}
.cw-back-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }/* ============================================
   notice-theme.css — 公告页黑金主题令牌
   ============================================ */
:root {
  --nb-page-bg: #0e0d0a;
  --nb-surface: #121008;
  --nb-surface-hover: #1a1710;
  --nb-surface-active: #16130a;

  --nb-border: #35301f;
  --nb-border-subtle: #2a2617;
  --nb-border-strong: #b8963f;

  --nb-text-1: #f0e9d8;
  --nb-text-2: #9a927c;
  --nb-text-3: #6b6552;

  --nb-accent: #d4a843;
  --nb-accent-text: #e8c56a;

  --nb-tag-special-bg: #1a1508;
  --nb-tag-special-text: #e8c56a;
  --nb-tag-special-border: #b8963f;

  --nb-tag-system-bg: #1c0e0c;
  --nb-tag-system-text: #e08a7a;
  --nb-tag-system-border: #8a4436;

  --nb-tag-general-bg: #171712;
  --nb-tag-general-text: #a29a85;
  --nb-tag-general-border: #46412e;

  --nb-radius-card: 12px;
  --nb-radius-pill: 999px;
  --nb-duration: 180ms;
  --nb-ease: cubic-bezier(0.25, 0.8, 0.35, 1);

  --nb-hero-overlay: rgba(14, 13, 10, 0.55);
  --nb-hero-fade: #0e0d0a;
}

/* ── Contact Page ── */
.ct-page { background: var(--bg-base); min-height: 100vh; }
.ct-hero {
  position: relative; overflow: hidden;
  padding: 60px 40px; text-align: center;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border-color);
}
.ct-hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--color-primary-dim,rgba(212,175,55,0.12)) 0%, transparent 70%);
  pointer-events: none;
}
.ct-hero-content { position: relative; z-index: 1; }
.ct-title { font-size: 36px; font-weight: 900; color: var(--text-primary); margin-bottom: 12px; }
.ct-sub { font-size: 15px; color: var(--text-muted); max-width: 480px; margin: 0 auto; }
.ct-body { max-width: 1100px; margin: 0 auto; padding: 48px 40px 80px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; }
.ct-section-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 20px; }

.ct-channels { display: flex; flex-direction: column; gap: 12px; }
.ct-channel-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--radius-md,12px);
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  text-decoration: none; transition: all .2s;
  border-left: 4px solid var(--ch-color);
}
.ct-channel-card:hover { transform: translateX(4px); border-color: var(--ch-color); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.ct-channel-icon { font-size: 28px; flex-shrink: 0; }
.ct-channel-info { flex: 1; }
.ct-channel-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ct-channel-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ct-channel-action { font-size: 13px; font-weight: 600; color: var(--ch-color); white-space: nowrap; }

.ct-faq-list { display: flex; flex-direction: column; gap: 8px; }
.ct-faq-item { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md,12px); overflow: hidden; }
.ct-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-primary); text-align: left; gap: 12px;
}
.ct-faq-q:hover { background: var(--bg-overlay); }
.ct-faq-arrow { font-size: 20px; color: var(--color-primary); font-weight: 700; flex-shrink: 0; }
.ct-faq-a { padding: 0 20px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ── Help Center ── */
.help-page { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--bg-base); }
.help-sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border-color); padding: 32px 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.help-sidebar-title { font-size: 14px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.help-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }
.help-nav-item {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; transition: all .15s;
}
.help-nav-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.help-nav-item.active { background: var(--color-primary-dim); color: var(--color-primary); font-weight: 700; border-left: 3px solid var(--color-primary); }
.help-contact-box { padding: 16px; background: var(--bg-overlay); border-radius: 10px; font-size: 13px; color: var(--text-muted); }
.help-content { padding: 48px 60px; max-width: 760px; }
.help-breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; }
.help-breadcrumb a { color: var(--color-primary); text-decoration: none; }
.help-article h2 { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 16px; }
.help-article h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 24px 0 10px; }
.help-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 14px; }
.help-article ul, .help-article ol { padding-left: 24px; margin-bottom: 14px; }
.help-article li { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 6px; }
.help-article strong { color: var(--text-primary); }

@media (max-width: 768px) {
  .ct-body { grid-template-columns: 1fr; padding: 32px 16px 60px; }
  .help-page { grid-template-columns: 1fr; }
  .help-sidebar { position: static; height: auto; }
  .help-content { padding: 24px 20px; }
}


/* ============ Contact v2 (token-driven) ============ */
.ct2-page { max-width: 960px; margin: 0 auto; padding: 20px; }

.ct2-hero {
  text-align: center; padding: 48px 16px 40px;
  border-radius: var(--nb-radius-card);
  margin: 16px 0 20px;
  background:
    linear-gradient(180deg, var(--nb-hero-overlay) 0%, var(--nb-hero-fade) 96%),
    var(--nb-page-bg) url('/assets/contact/hero.jpg') center/cover no-repeat;
}
.ct2-title { font-size: 26px; font-weight: 700; color: var(--nb-text-1); margin: 0 0 6px; }
.ct2-sub { font-size: 14px; color: var(--nb-text-3); margin: 0; }

.ct2-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 20px;
  align-items: start;
}
.ct2-section { font-size: 14px; font-weight: 600; color: var(--nb-accent-text); margin: 0 0 10px; letter-spacing: 1px; }

.ct2-list {
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-card);
  background: var(--nb-surface);
  overflow: hidden;
}

/* ---------- 渠道行 ---------- */
.ct2-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; text-decoration: none;
  border-bottom: 1px solid var(--nb-border-subtle);
  transition: background var(--nb-duration) var(--nb-ease);
}
.ct2-row:last-child { border-bottom: none; }
.ct2-row:hover { background: var(--nb-surface-hover); }
.ct2-row:hover .ct2-arrow { transform: translateX(3px); color: var(--nb-accent-text); }

.ct2-mono {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--nb-accent-text);
  border: 1px solid var(--nb-border-strong);
  border-radius: 50%; background: var(--nb-tag-special-bg);
}
.ct2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct2-name { font-size: 14px; font-weight: 600; color: var(--nb-text-1); display: flex; align-items: center; gap: 8px; }
.ct2-hot {
  font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--nb-page-bg); background: var(--nb-accent);
  padding: 1px 8px; border-radius: var(--nb-radius-pill);
}
.ct2-desc { font-size: 12px; color: var(--nb-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct2-arrow { flex-shrink: 0; color: var(--nb-text-3); transition: transform var(--nb-duration) var(--nb-ease), color var(--nb-duration) var(--nb-ease); }

/* ---------- FAQ 手风琴 ---------- */
.ct2-faq { border-bottom: 1px solid var(--nb-border-subtle); cursor: pointer; outline: none; }
.ct2-faq:last-child { border-bottom: none; }
.ct2-faq:hover { background: var(--nb-surface-hover); }
.ct2-faq:focus-visible { box-shadow: inset 0 0 0 1px var(--nb-border-strong); }
.ct2-faq.is-open { background: var(--nb-surface-active); }

.ct2-faq-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px;
}
.ct2-faq-q { font-size: 13px; font-weight: 600; color: var(--nb-text-1); }
.ct2-chev { flex-shrink: 0; color: var(--nb-accent); transition: transform var(--nb-duration) var(--nb-ease); }
.ct2-faq.is-open .ct2-chev { transform: rotate(180deg); }

.ct2-faq-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--nb-duration) var(--nb-ease);
}
.ct2-faq.is-open .ct2-faq-body { grid-template-rows: 1fr; }
.ct2-faq-body > .ct2-faq-a { overflow: hidden; }
.ct2-faq-a { margin: 0; padding: 0 16px; font-size: 13px; color: var(--nb-text-2); line-height: 1.6; }
.ct2-faq.is-open .ct2-faq-a { padding-bottom: 14px; }

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .ct2-cols { grid-template-columns: 1fr; }
  .ct2-page { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct2-row, .ct2-arrow, .ct2-chev, .ct2-faq-body { transition: none; }
}