@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ══ THEMES ══════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  --neon: #00ff9d; --neon2: #00cfff;
  --dark: #050a0e; --darker: #030608;
  --panel: #0a1520; --panel2: #0d1e2e;
  --border: rgba(0,255,157,0.2); --border2: rgba(0,207,255,0.2);
  --text: #e8f8f0; --muted: #8abfa8;
  --red: #ff4466; --yellow: #ffcc00;
  --mono: 'Share Tech Mono', monospace; --sans: 'Rajdhani', sans-serif;
  --btn-shadow: 0 4px 15px rgba(0,255,157,0.35), 0 2px 4px rgba(0,0,0,0.4);
  --btn-shadow-h: 0 6px 22px rgba(0,255,157,0.55), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #00ff9d 0%, #00d48a 60%, #00a870 100%);
}
[data-theme="white"] {
  --neon: #00875a; --neon2: #0077b6;
  --dark: #f5f8f6; --darker: #eaf2ee;
  --panel: #ffffff; --panel2: #f0f9f4;
  --border: rgba(0,135,90,0.2); --border2: rgba(0,119,182,0.2);
  --text: #0d2418; --muted: #4a7a60;
  --red: #cc0033; --yellow: #cc7700;
  --mono: 'Share Tech Mono', monospace; --sans: 'Rajdhani', sans-serif;
  --btn-shadow: 0 4px 15px rgba(0,135,90,0.3), 0 2px 4px rgba(0,0,0,0.15);
  --btn-shadow-h: 0 6px 22px rgba(0,135,90,0.5), 0 2px 8px rgba(0,0,0,0.2);
  --btn-grad: linear-gradient(135deg, #00b876 0%, #00875a 60%, #006644 100%);
}
[data-theme="purple"] {
  --neon: #c084fc; --neon2: #f472b6;
  --dark: #0c0514; --darker: #060210;
  --panel: #130a24; --panel2: #1a0f30;
  --border: rgba(192,132,252,0.2); --border2: rgba(244,114,182,0.2);
  --text: #f0e8ff; --muted: #9e7ac2;
  --red: #ff4466; --yellow: #fbbf24;
  --mono: 'Share Tech Mono', monospace; --sans: 'Rajdhani', sans-serif;
  --btn-shadow: 0 4px 15px rgba(192,132,252,0.4), 0 2px 4px rgba(0,0,0,0.5);
  --btn-shadow-h: 0 6px 22px rgba(192,132,252,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #c084fc 0%, #9d4edd 60%, #7b2fbe 100%);
}
[data-theme="blue"] {
  --neon: #38bdf8; --neon2: #34d399;
  --dark: #030d1a; --darker: #010810;
  --panel: #041525; --panel2: #071e35;
  --border: rgba(56,189,248,0.2); --border2: rgba(52,211,153,0.2);
  --text: #e0f4ff; --muted: #5a9fcc;
  --red: #f87171; --yellow: #fbbf24;
  --mono: 'Share Tech Mono', monospace; --sans: 'Rajdhani', sans-serif;
  --btn-shadow: 0 4px 15px rgba(56,189,248,0.4), 0 2px 4px rgba(0,0,0,0.5);
  --btn-shadow-h: 0 6px 22px rgba(56,189,248,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 60%, #0284c7 100%);
}
[data-theme="red"] {
  --neon: #ff6b6b; --neon2: #ffa94d;
  --dark: #0f0505; --darker: #080202;
  --panel: #1a0808; --panel2: #220a0a;
  --border: rgba(255,107,107,0.2); --border2: rgba(255,169,77,0.2);
  --text: #ffe8e8; --muted: #c27a7a;
  --red: #ff4466; --yellow: #ffa94d;
  --mono: 'Share Tech Mono', monospace; --sans: 'Rajdhani', sans-serif;
  --btn-shadow: 0 4px 15px rgba(255,107,107,0.4), 0 2px 4px rgba(0,0,0,0.5);
  --btn-shadow-h: 0 6px 22px rgba(255,107,107,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #ff6b6b 0%, #ee3333 60%, #cc1122 100%);
}

/* ══ BASE ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--dark); color:var(--text); font-family:var(--sans); font-size:15px; min-height:100vh; line-height:1.65; transition:background 0.3s,color 0.3s; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--darker); }
::-webkit-scrollbar-thumb { background:var(--neon); border-radius:4px; }

/* ══ NAVBAR ══════════════════════════════════════════════ */
.navbar { background:var(--darker); border-bottom:1px solid var(--border); padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:60px; position:sticky; top:0; z-index:100; }
.navbar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--neon) 30%,var(--neon2) 70%,transparent); opacity:0.4; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-box { width:34px; height:34px; border:1.5px solid var(--neon); border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:9px; color:var(--neon); letter-spacing:1px; }
.nav-logo-text { font-size:17px; font-weight:700; letter-spacing:2px; color:var(--neon); text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link { color:var(--muted); text-decoration:none; padding:6px 14px; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; border:1px solid transparent; border-radius:8px; transition:all 0.2s; }
.nav-link:hover, .nav-link.active { color:var(--neon); border-color:var(--border); background:rgba(0,255,157,0.05); }
.nav-balance { font-family:var(--mono); font-size:13px; color:var(--neon); padding:6px 12px; border:1px solid var(--border); border-radius:8px; background:rgba(0,255,157,0.05); }
.btn-logout { background:none; border:1px solid var(--border2); border-radius:8px; color:var(--muted); padding:6px 14px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.2s; }
.btn-logout:hover { color:var(--red); border-color:var(--red); }

/* ══ LAYOUT ══════════════════════════════════════════════ */
.container { max-width:1100px; margin:0 auto; padding:32px 24px; }
.page-title { font-family:var(--mono); font-size:10px; color:var(--neon); letter-spacing:4px; text-transform:uppercase; margin-bottom:6px; }
.page-heading { font-size:26px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:24px; color:var(--text); }

/* ══ CARDS ═══════════════════════════════════════════════ */
.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px; margin-bottom:20px; }
.card-header { font-family:var(--mono); font-size:10px; color:var(--neon); letter-spacing:3px; text-transform:uppercase; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:18px; }

/* ══ STATS ═══════════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.stat-box { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px 16px; position:relative; overflow:hidden; }
.stat-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--neon),transparent); }
.stat-num { font-family:var(--mono); font-size:24px; color:var(--neon); display:block; }
.stat-label { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:4px; display:block; }

/* ══ FORMS ═══════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; background:var(--darker); border:1px solid var(--border); border-radius:9px; color:var(--text); padding:10px 14px; font-family:var(--sans); font-size:14px; outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,255,157,0.08); }
.form-group select option { background:var(--darker); }
.form-group input::placeholder { color:var(--muted); }

/* ══ BUTTONS — Rounded 3D ════════════════════════════════ */
.btn { padding:11px 24px; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border:none; border-radius:10px; transition:all 0.2s; display:inline-block; }

.btn-neon {
  background: var(--btn-grad);
  color: #021a0d;
  font-weight: 800;
  box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-neon:hover { transform:translateY(-2px); box-shadow:var(--btn-shadow-h),inset 0 1px 0 rgba(255,255,255,0.25); filter:brightness(1.06); }
.btn-neon:active { transform:translateY(0px); }
.btn-neon:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-outline { background:linear-gradient(135deg,rgba(0,207,255,0.1),rgba(0,150,200,0.06)); color:var(--neon2); border:1px solid var(--neon2); box-shadow:0 3px 10px rgba(0,207,255,0.18),inset 0 1px 0 rgba(255,255,255,0.08); }
.btn-outline:hover { background:linear-gradient(135deg,rgba(0,207,255,0.2),rgba(0,150,200,0.12)); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,207,255,0.32),inset 0 1px 0 rgba(255,255,255,0.08); }
.btn-outline:active { transform:translateY(0); }

.btn-danger { background:linear-gradient(135deg,rgba(255,68,102,0.1),rgba(200,30,60,0.06)); color:var(--red); border:1px solid var(--red); box-shadow:0 3px 10px rgba(255,68,102,0.18),inset 0 1px 0 rgba(255,255,255,0.08); }
.btn-danger:hover { background:linear-gradient(135deg,rgba(255,68,102,0.2),rgba(200,30,60,0.12)); transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,68,102,0.32),inset 0 1px 0 rgba(255,255,255,0.08); }

.btn-sm { padding:6px 14px; font-size:11px; letter-spacing:1px; border-radius:8px; }
.btn-full { width:100%; text-align:center; }

/* ══ TABLE ═══════════════════════════════════════════════ */
.vcc-table { width:100%; border-collapse:collapse; font-size:13px; }
.vcc-table th { padding:10px 12px; text-align:left; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); font-weight:600; }
.vcc-table td { padding:11px 12px; border-bottom:1px solid var(--border); border-bottom-color:rgba(128,128,128,0.1); vertical-align:middle; color:var(--text); }
.vcc-table tr:hover td { background:rgba(0,255,157,0.03); }

/* ══ BADGES ══════════════════════════════════════════════ */
.badge { display:inline-block; padding:3px 9px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:6px; }
.badge-pending    { background:rgba(255,204,0,0.15);  color:var(--yellow); border:1px solid rgba(255,204,0,0.3); }
.badge-processing { background:rgba(0,207,255,0.15);  color:var(--neon2);  border:1px solid rgba(0,207,255,0.3); }
.badge-completed  { background:rgba(0,255,157,0.15);  color:var(--neon);   border:1px solid rgba(0,255,157,0.3); }
.badge-cancelled  { background:rgba(255,68,102,0.15); color:var(--red);    border:1px solid rgba(255,68,102,0.3); }
.badge-fb  { background:rgba(24,119,242,0.15);  color:#4a9eff; border:1px solid rgba(74,158,255,0.3); }
.badge-ig  { background:rgba(225,48,108,0.15);  color:#ff6b9d; border:1px solid rgba(255,107,157,0.3); }
.badge-yt  { background:rgba(255,0,0,0.15);     color:#ff6666; border:1px solid rgba(255,102,102,0.3); }
.badge-tk  { background:rgba(105,201,208,0.15); color:#69c9d0; border:1px solid rgba(105,201,208,0.3); }
.badge-tg  { background:rgba(0,136,204,0.15);   color:#4ac8ff; border:1px solid rgba(74,200,255,0.3); }
.badge-tw  { background:rgba(29,161,242,0.15);  color:#4ab8ff; border:1px solid rgba(74,184,255,0.3); }

/* ══ ALERTS ══════════════════════════════════════════════ */
.alert { padding:12px 16px; font-size:13px; border-left:3px solid; border-radius:0 8px 8px 0; margin-bottom:16px; line-height:1.5; }
.alert-success { background:rgba(0,255,157,0.08);  border-color:var(--neon);   color:var(--neon); }
.alert-info    { background:rgba(0,207,255,0.08);  border-color:var(--neon2);  color:var(--neon2); }
.alert-warn    { background:rgba(255,204,0,0.08);  border-color:var(--yellow); color:var(--yellow); }
.alert-error   { background:rgba(255,68,102,0.08); border-color:var(--red);    color:var(--red); }

/* ══ TEXT ════════════════════════════════════════════════ */
.mono { font-family:var(--mono); }
.text-neon   { color:var(--neon); }
.text-neon2  { color:var(--neon2); }
.text-muted  { color:var(--muted); }
.text-red    { color:var(--red); }
.text-yellow { color:var(--yellow); }

/* ══ GRID ════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ══ MISC ════════════════════════════════════════════════ */
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.loader { display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--neon); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ══ DEPOSIT ═════════════════════════════════════════════ */
.deposit-method { background:var(--darker); border:1px solid var(--border); border-left:3px solid var(--neon); border-radius:0 8px 8px 0; padding:16px; margin-bottom:12px; }
.deposit-method .method-name { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.deposit-method .method-num  { font-family:var(--mono); font-size:20px; color:var(--neon); letter-spacing:3px; }

/* ══ THEME SWITCHER ══════════════════════════════════════ */
.theme-switcher { position:fixed; bottom:24px; right:24px; z-index:999; }
.theme-toggle-btn { width:50px; height:50px; border-radius:50%; background:var(--btn-grad); border:none; cursor:pointer; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:var(--btn-shadow); transition:transform 0.2s,box-shadow 0.2s; }
.theme-toggle-btn:hover { transform:scale(1.12) rotate(20deg); box-shadow:var(--btn-shadow-h); }
.theme-panel { display:none; position:absolute; bottom:62px; right:0; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:10px; flex-direction:column; gap:4px; min-width:165px; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.theme-panel.open { display:flex; }
.theme-panel-title { font-size:9px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; padding:2px 6px 8px; border-bottom:1px solid var(--border); margin-bottom:2px; }
.theme-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; border:1px solid transparent; transition:all 0.15s; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--text); background:none; text-align:left; width:100%; }
.theme-opt:hover { background:var(--panel2); border-color:var(--border); }
.theme-opt.active { border-color:var(--neon); background:rgba(0,255,157,0.06); color:var(--neon); }
.theme-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; border:2px solid rgba(255,255,255,0.15); }

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width:768px) {
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .navbar { padding:0 14px; }
  .container { padding:20px 14px; }
  .theme-switcher { bottom:16px; right:16px; }
}