/* Reaves Design System v3 */
:root {
  --bg: #080809;
  --bg2: #0a0a0c;
  --bg3: #0d0d10;
  --card: rgba(255,255,255,0.02);
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --accent: #2563eb;
  --accent2: #1d4ed8;
  --text: #ffffff;
  --text2: #94a3b8;
  --text3: #475569;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}
* { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text); padding-top: 80px; min-height: 100vh; }

/* Glass */
.gl { background: rgba(10,10,14,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-hover { transition: all 0.3s; }
.card-hover:hover { border-color: var(--border2); transform: translateY(-3px); }

/* Buttons */
.btn-primary { background: var(--accent); color: white; border: none; border-radius: var(--radius); padding: 12px 24px; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,0.3); }
.btn-ghost { background: var(--card); border: 1px solid var(--border); color: var(--text2); border-radius: var(--radius); padding: 12px 24px; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-ghost:hover { border-color: var(--border2); color: var(--text); }

/* Form inputs */
.form-input { background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 12px 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14px; width: 100%; transition: all 0.2s; }
.form-input:focus { outline: none; border-color: rgba(37,99,235,0.5); background: rgba(37,99,235,0.05); }
.form-input::placeholder { color: var(--text3); }
select.form-input option { background: var(--bg3); color: var(--text); }

/* Pack card */
.pack-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s; }
.pack-card:hover { transform: translateY(-4px); border-color: var(--border2); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }

/* Stat card */
.stat-card { background: var(--card); border: 1px solid rgba(37,99,235,0.1); border-radius: var(--radius-lg); transition: all 0.4s; }
.stat-card:hover { border-color: rgba(37,99,235,0.4); background: rgba(37,99,235,0.05); transform: translateY(-5px); }

/* Section title */
.section-title { font-size: 28px; font-weight: 900; font-style: italic; letter-spacing: -0.03em; color: white; }
.section-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }

/* Dropdown items */
.ddi { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2); text-decoration: none; transition: all 0.15s; cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; }
.ddi:hover { color: #60a5fa; background: rgba(37,99,235,0.1); }
.ddi.red { color: #f87171; }
.ddi.red:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
.ddi.blue { color: #60a5fa; }
.ddi.admin-lnk { color: #fb923c; }
.ddi.admin-lnk:hover { background: rgba(251,146,60,0.1); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }

/* Page header */
.page-hero { border-left: 4px solid var(--accent); padding-left: 20px; margin-bottom: 40px; }
.page-hero h1 { font-size: 2.5rem; font-weight: 900; font-style: italic; letter-spacing: -0.04em; color: white; line-height: 1.1; }
.page-hero p { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-top: 4px; }

/* Badge */
.badge { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.badge-blue { background: rgba(37,99,235,0.15); color: #60a5fa; }
.badge-green { background: rgba(16,185,129,0.15); color: #34d399; }
.badge-red { background: rgba(239,68,68,0.15); color: #f87171; }
.badge-amber { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge-purple { background: rgba(124,58,237,0.15); color: #a78bfa; }

/* ── Mobile responsive ───────────────────────────────── */
@media (max-width: 768px) {
  body { padding-top: 74px; }
  .page-hero h1 { font-size: 1.75rem; }
  .section-title { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  body { padding-top: 68px; }
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }