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

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Theme Tokens ─────────────────────────────────────────── */
:root {
  --bg-primary:    #06060f;
  --bg-secondary:  #0d0d1a;
  --bg-card:       rgba(255,255,255,0.03);
  --glass-border:  rgba(255,255,255,0.07);
  --glass-hover:   rgba(255,255,255,0.055);

  --accent-red:       #dc2626;
  --accent-red-glow:  rgba(220,38,38,0.35);
  --accent-gold:      #f59e0b;
  --accent-gold-glow: rgba(245,158,11,0.35);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;

  --success: #22c55e;
  --danger:  #ef4444;
  --info:    #3b82f6;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --ease: cubic-bezier(.4,0,.2,1);
  --t:  all 0.3s var(--ease);
  --tf: all 0.15s var(--ease);
}

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Ambient glow background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(220,38,38,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(245,158,11,.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 5px; }
::-webkit-scrollbar-track      { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb      { background: rgba(220,38,38,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-red); }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 68px;
  background: rgba(6,6,15,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}

.nav-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text-primary);
}
.nav-brand-icon { font-size: 1.8rem; filter: drop-shadow(0 0 10px rgba(220,38,38,.6)); }
.nav-brand-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem; font-weight: 700; letter-spacing: 1px;
}
.nav-brand-text span { color: var(--accent-red); }

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-secondary);
  font-size: .9rem; font-weight: 500; transition: var(--t);
}
.nav-link:hover { color: var(--text-primary); background: var(--glass-hover); }
.nav-link.active { color: var(--accent-red); }

.nav-auth { display: flex; align-items: center; gap: 10px; }

.user-nav-info {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 6px 12px;
  border-radius: var(--radius-sm); transition: var(--t);
}
.user-nav-info:hover { background: var(--glass-hover); }

.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--accent-red);
  cursor: pointer; transition: var(--t); object-fit: cover;
}
.user-avatar:hover { box-shadow: 0 0 14px var(--accent-red-glow); }

.user-nav-name { font-size: .9rem; font-weight: 500; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: .9rem;
  font-weight: 600; cursor: pointer; border: none;
  transition: var(--t); text-decoration: none;
  letter-spacing: .3px; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-red), #b91c1c);
  color: white; box-shadow: 0 4px 15px var(--accent-red-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-red-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-google {
  background: white; color: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
}
.btn-google:hover { background: #f8f8f8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,255,255,.08); }

.btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}
.btn-ghost:hover { background: var(--glass-hover); color: var(--text-primary); border-color: rgba(255,255,255,.15); }

.btn-gold {
  background: linear-gradient(135deg, var(--accent-gold), #d97706);
  color: #1a1a1a; font-weight: 700;
  box-shadow: 0 4px 15px var(--accent-gold-glow);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-gold-glow); }

.btn-success { background: linear-gradient(135deg,#16a34a,#15803d); color: white; }
.btn-danger  { background: linear-gradient(135deg,#dc2626,#991b1b); color: white; }

.btn-lg  { padding: 13px 28px; font-size: 1rem; border-radius: var(--radius-md); }
.btn-sm  { padding: 6px 14px; font-size: .8rem; }

/* ── Card / Glass ─────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: var(--t);
}
.card:hover { border-color: rgba(255,255,255,.12); }

/* ── Belt Badge ───────────────────────────────────────────── */
.belt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 100px;
  font-size: .77rem; font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.belt-badge.white  { background:#fff;      color:#1a1a1a; box-shadow:0 0 10px rgba(255,255,255,.25); }
.belt-badge.yellow { background:#eab308;   color:#1a1a1a; box-shadow:0 0 10px rgba(234,179,8,.4);   }
.belt-badge.green  { background:#22c55e;   color:#1a1a1a; box-shadow:0 0 10px rgba(34,197,94,.4);   }
.belt-badge.blue   { background:#3b82f6;   color:#fff;    box-shadow:0 0 10px rgba(59,130,246,.4);  }
.belt-badge.red    { background:#ef4444;   color:#fff;    box-shadow:0 0 10px rgba(239,68,68,.4);   }
.belt-badge.black  { background:#1a1a2e;   color:#f59e0b; border:1px solid #f59e0b; box-shadow:0 0 10px rgba(245,158,11,.4); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }

.form-label {
  font-size:.83rem; font-weight:600; color:var(--text-secondary);
  letter-spacing:.3px; text-transform:uppercase;
}

.form-input {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size:.95rem;
  padding: 12px 16px; transition: var(--t); outline: none; width:100%;
}
.form-input:focus {
  border-color: var(--accent-red);
  background: rgba(220,38,38,.05);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.form-input::placeholder { color: var(--text-muted); }
textarea.form-input { resize: vertical; min-height: 100px; }

/* ── Rank Numbers ─────────────────────────────────────────── */
.rank-number {
  font-family: 'Rajdhani', sans-serif; font-size:1.1rem; font-weight:700;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.rank-1     { background:linear-gradient(135deg,#f59e0b,#d97706); color:#1a1a1a; box-shadow:0 0 14px rgba(245,158,11,.5); }
.rank-2     { background:linear-gradient(135deg,#94a3b8,#64748b); color:#fff;    box-shadow:0 0 10px rgba(148,163,184,.3); }
.rank-3     { background:linear-gradient(135deg,#cd7c2f,#92400e); color:#fff;    box-shadow:0 0 10px rgba(205,124,47,.3); }
.rank-other { background:rgba(255,255,255,.06); color:var(--text-secondary); }

/* ── Toast ────────────────────────────────────────────────── */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
}
.toast {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:var(--radius-md);
  background:rgba(12,12,28,.96);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  min-width:270px; animation:slideInRight .3s ease;
  font-size:.88rem;
}
.toast.success { border-left:3px solid var(--success); }
.toast.error   { border-left:3px solid var(--danger); }
.toast.info    { border-left:3px solid var(--info); }

/* ── Context Menu ─────────────────────────────────────────── */
#context-menu {
  position:fixed; z-index:9999; min-width:230px;
  background:rgba(8,8,22,.97);
  border:1px solid rgba(245,158,11,.35);
  border-radius:var(--radius-md);
  backdrop-filter:blur(24px);
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(245,158,11,.08);
  padding:10px; display:none;
  animation:fadeScaleIn .15s ease;
  transform-origin: top left;
}
.ctx-header {
  padding:10px 12px 8px;
  border-bottom:1px solid var(--glass-border);
  margin-bottom:6px;
}
.ctx-eyebrow {
  font-size:.68rem; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1px;
  font-weight:600; margin-bottom:6px;
}
.ctx-name {
  font-family:'Rajdhani',sans-serif;
  font-size:1.4rem; font-weight:700; color:var(--accent-gold);
  display:flex; align-items:center; gap:8px;
}
.ctx-belt { padding:6px 12px 2px; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .2s ease;
}
.modal {
  background:var(--bg-secondary);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:32px; width:90%; max-width:480px;
  max-height:90vh; overflow-y:auto;
  animation:slideUp .3s ease;
}

/* ── Loading Spinner ──────────────────────────────────────── */
.spinner {
  width:38px; height:38px;
  border:3px solid rgba(220,38,38,.2);
  border-top-color:var(--accent-red);
  border-radius:50%;
  animation:spin .75s linear infinite;
}

/* ── Divider ──────────────────────────────────────────────── */
.divider { height:1px; background:var(--glass-border); margin:24px 0; }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state-icon { font-size:3.5rem; margin-bottom:14px; opacity:.5; display:block; }
.empty-state h3 {
  font-family:'Rajdhani',sans-serif; font-size:1.4rem;
  color:var(--text-secondary); margin-bottom:8px;
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes fadeScaleIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes slideInRight { from{transform:translateX(90px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOutRight{ from{transform:translateX(0);opacity:1} to{transform:translateX(90px);opacity:0} }

.afu { animation: fadeInUp .45s ease both; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:768px) {
  .navbar { padding:0 1rem; }
  .nav-links { display:none; }
}