@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════════════════ */
:root {
  --bg:          #08080F;
  --bg2:         #0C0A18;
  --card:        #0F0D1A;
  --card2:       #141228;
  --border:      #1E1B2E;
  --border2:     rgba(255,255,255,0.06);
  --purple:      #7C3AED;
  --purple-h:    #6D28D9;
  --purple-l:    #A78BFA;
  --purple-dim:  rgba(124,58,237,0.1);
  --purple-glow: rgba(124,58,237,0.2);
  --text:        #F8F8FF;
  --muted:       #6B7280;
  --muted2:      #9CA3AF;
  --green:       #10B981;
  --green-dim:   rgba(16,185,129,0.1);
  --red:         #EF4444;
  --red-dim:     rgba(239,68,68,0.1);
  --gold:        #A78BFA; /* alias for any legacy gold references → purple-l */
  --gold-dim:    rgba(124,58,237,0.1);
  --radius:      12px;
  --radius-lg:   16px;
  --shadow:      0 8px 40px rgba(0,0,0,0.6);
}

/* ══════════════════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none }
button { font-family: 'Inter', sans-serif; cursor: pointer; border: none; background: none }
input, select, textarea { font-family: 'Inter', sans-serif; outline: none }
img { display: block; max-width: 100% }
ul { list-style: none }

::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 2px }

/* Typography */
h1,h2,h3,h4,h5 { font-family: 'Inter', sans-serif; line-height: 1.15; font-weight: 700; color: var(--text) }
.green { color: var(--green) }
.red   { color: var(--red) }
.muted { color: var(--muted2) }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  transition: all 0.2s ease; cursor: pointer;
  white-space: nowrap; border: none;
}
.btn-gold, .btn-purple {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.btn-gold:hover, .btn-purple:hover {
  background: var(--purple-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124,58,237,0.45);
}
.btn-gold:active, .btn-purple:active { transform: translateY(0) }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted2);
}
.btn-ghost:hover { border-color: var(--purple-l); color: var(--purple-l) }
.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(124,58,237,0.5);
  color: var(--purple-l);
}
.btn-outline:hover { background: var(--purple-dim); border-color: var(--purple) }
.btn-dark {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-dark:hover { border-color: var(--purple-l); color: var(--purple-l) }
.btn-lg { padding: 14px 32px; font-size: 15px }
.btn-sm { padding: 8px 18px; font-size: 13px; border-radius: 6px }
.btn-full { width: 100% }
.btn[disabled], button[disabled] { opacity: 0.5; pointer-events: none }

/* ══════════════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 18px }
.form-label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted2);
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  background: #1A1728;
  border: 1px solid #2D2640;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}
.form-control:focus { border-color: var(--purple); outline: none }
.form-control::placeholder { color: var(--muted) }
.form-control.error { border-color: var(--red) }
select.form-control { cursor: pointer }
select.form-control option { background: #1A1728; color: var(--text) }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media(max-width:540px) { .form-row { grid-template-columns: 1fr } }

.checkbox-group {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--muted2); cursor: pointer;
  line-height: 1.5;
}
.checkbox-group input[type=checkbox] {
  width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--purple); flex-shrink: 0;
}
.checkbox-group a { color: var(--purple-l) }

/* ══════════════════════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════════════════════ */
.alert {
  padding: 12px 16px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  display: none; margin-bottom: 16px;
}
.alert-error  { background: var(--red-dim);   border: 1px solid rgba(239,68,68,0.3);   color: #FCA5A5 }
.alert-success { background: var(--green-dim); border: 1px solid rgba(16,185,129,0.3);  color: #6EE7B7 }

/* ══════════════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif;
}
.badge-active  { background: rgba(16,185,129,0.12);   color: var(--green); border: 1px solid rgba(16,185,129,0.25) }
.badge-pending { background: var(--purple-dim);        color: var(--purple-l); border: 1px solid rgba(124,58,237,0.3) }
.badge-failed  { background: var(--red-dim);           color: var(--red);   border: 1px solid rgba(239,68,68,0.25) }
.badge-funded  { background: rgba(167,139,250,0.12);   color: var(--purple-l); border: 1px solid rgba(167,139,250,0.3) }
.badge-paid    { background: rgba(16,185,129,0.12);    color: var(--green); border: 1px solid rgba(16,185,129,0.25) }

/* ══════════════════════════════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.auth-bg-glow {
  position: fixed; top: -150px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow);
  position: relative; z-index: 1;
}
.auth-logo {
  font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 800;
  text-align: center; margin-bottom: 32px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -0.5px;
}
.auth-logo-hex { color: var(--purple-l); font-size: 22px }
.auth-logo span { color: var(--purple-l) }
.auth-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.5px }
.auth-sub { font-size: 14px; color: var(--muted2); margin-bottom: 28px; font-weight: 400 }
.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted) }
.auth-footer a { color: var(--purple-l); font-weight: 500 }
.auth-footer a:hover { text-decoration: underline }
.auth-link { color: var(--purple-l); font-size: 13px; font-weight: 500; cursor: pointer }
.auth-link:hover { text-decoration: underline }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--muted); font-size: 12px;
}
.auth-divider::before,.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border) }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════════════════════════════════ */
.dash-layout { display: flex; min-height: 100vh }

/* ── Sidebar ── */
.sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100; transition: transform 0.3s ease;
}
.sidebar-logo {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.5px; flex-shrink: 0;
}
.sidebar-logo-hex { color: var(--purple-l); font-size: 20px; line-height: 1 }
.sidebar-logo-text { color: var(--text) }
.sidebar-logo-text span { color: var(--purple-l) }

.sidebar-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto }
.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--muted2);
  transition: all 0.15s; cursor: pointer; text-decoration: none;
}
.sidebar-link:hover { background: rgba(124,58,237,0.06); color: var(--text) }
.sidebar-link.active {
  background: var(--purple-dim);
  color: var(--purple-l);
  border: 1px solid rgba(124,58,237,0.2);
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8 }
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 4px }
.sidebar-bottom { padding: 12px 12px 20px; flex-shrink: 0 }
.sidebar-logout {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: all 0.15s; cursor: pointer; width: 100%;
  background: none; border: none; font-family: 'Inter', sans-serif;
}
.sidebar-logout:hover { background: rgba(239,68,68,0.08); color: var(--red) }
.sidebar-logout svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8 }

/* ── Main area ── */
.dash-main { margin-left: 260px; flex: 1; display: flex; flex-direction: column; min-width: 0 }
.dash-topbar {
  height: 64px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
  flex-shrink: 0;
}
.dash-topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px }
.user-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 50px; padding: 6px 16px 6px 8px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-l));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.user-name { font-size: 13.5px; font-weight: 600 }
.dash-content { padding: 32px; flex: 1 }

/* Mobile sidebar toggle */
.sidebar-toggle {
  display: none; position: fixed; top: 15px; left: 15px; z-index: 200;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--text);
}
@media(max-width:900px) {
  .sidebar { transform: translateX(-100%) }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,0.5) }
  .sidebar-toggle { display: flex }
  .dash-main { margin-left: 0 }
  .dash-topbar { padding: 0 20px 0 64px }
  .dash-content { padding: 20px }
}

/* ══════════════════════════════════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--purple-l));
  opacity: 0;
  transition: opacity 0.2s;
}
.stat-card:hover::before { opacity: 1 }
.stat-card.gold-border { border-color: rgba(124,58,237,0.4) }
.stat-card-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--purple-dim); border: 1px solid rgba(124,58,237,0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; font-size: 16px;
}
.stat-card-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px }
.stat-card-value { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px }
.stat-card-sub { font-size: 12px; color: var(--muted2) }

/* ══════════════════════════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════════════════════════ */
.progress-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 24px;
}
.progress-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.progress-title { font-size: 14px; font-weight: 600 }
.progress-pct { font-size: 20px; font-weight: 800; color: var(--purple-l) }
.progress-bar-track {
  height: 8px; background: rgba(255,255,255,0.06);
  border-radius: 4px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--purple-l));
  border-radius: 4px; transition: width 0.8s ease;
}
.progress-labels {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 12px; color: var(--muted2);
}

/* ══════════════════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 0; margin-bottom: 0;
}
.table-title { font-size: 15px; font-weight: 700 }
table { width: 100%; border-collapse: collapse }
thead tr { background: rgba(255,255,255,0.02) }
th {
  padding: 14px 22px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 16px 22px; font-size: 14px; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
tr:last-child td { border-bottom: none }
tr:hover td { background: rgba(124,58,237,0.03) }
.empty-state { text-align: center; color: var(--muted); padding: 40px 0 !important; font-size: 14px }
.font-bold { font-weight: 700 }

/* ══════════════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  padding: 24px;
}
.modal-overlay.open { opacity: 1; pointer-events: all }
.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  transform: translateY(20px); transition: transform 0.25s ease;
}
.modal-overlay.open .modal { transform: translateY(0) }
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.3px }
.modal-sub { font-size: 13.5px; color: var(--muted2); margin-bottom: 22px; font-weight: 400 }
.modal-actions { display: flex; gap: 10px; margin-top: 20px }
.modal-actions .btn { flex: 1 }

/* ══════════════════════════════════════════════════════════════════════
   CHALLENGE PLAN CARDS (inside dashboard)
══════════════════════════════════════════════════════════════════════ */
.challenge-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.plan-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; position: relative;
  transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.plan-card:hover {
  border-color: rgba(124,58,237,0.45);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.plan-card.popular {
  border-color: var(--purple);
  background: linear-gradient(160deg, rgba(124,58,237,0.08) 0%, var(--card) 55%);
  box-shadow: 0 0 40px rgba(124,58,237,0.1);
}
.plan-popular-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--purple); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 16px; border-radius: 100px; white-space: nowrap;
}
.plan-size { font-size: 40px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; letter-spacing: -0.03em }
.plan-name { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.5px }
.plan-price { font-size: 28px; font-weight: 800; color: var(--purple-l); line-height: 1; margin-bottom: 4px }
.plan-price-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px }
.plan-features { display: flex; flex-direction: column; gap: 9px; flex: 1; margin-bottom: 20px }
.plan-feature { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted2) }
.plan-feature-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--green); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   PROFILE
══════════════════════════════════════════════════════════════════════ */
.profile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media(max-width:800px) { .profile-grid { grid-template-columns: 1fr } }

/* Loader */
.loader { display: flex; justify-content: center; padding: 60px 0 }
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }