:root {
  --bg: #0a0f1e;
  --sidebar: #0d1424;
  --surface: rgba(15,23,42,0.9);
  --surface2: rgba(30,41,59,0.6);
  --border: rgba(255,255,255,0.08);
  --text: #f1f5f9;
  --text-muted: #64748b;
  --accent: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --strava: #FC4C02;
  --sidebar-w: 220px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

/* ── LAYOUT ── */
#app { display: flex; height: 100vh; }

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sidebar-w); background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
}
.sidebar-logo { padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
.sidebar-logo .mark { font-size: 18px; font-weight: 900; letter-spacing:.1em; color: var(--accent); }
.sidebar-logo .sub  { font-size: 9px; color: var(--text-muted); letter-spacing:.1em; text-transform: uppercase; margin-top:2px; }
.sidebar-logo .badge { font-size:9px; background:rgba(239,68,68,0.2); color:#fca5a5; padding:1px 6px; border-radius:4px; margin-left:6px; }

.nav-section { padding: 12px 10px 4px; font-size: 9px; color: #334155; text-transform: uppercase; letter-spacing:.1em; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 8px; margin: 1px 6px;
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  transition: all .18s; text-decoration: none; border: none; background: none; width: calc(100% - 12px); text-align: left;
}
.nav-item:hover  { background: rgba(255,255,255,0.05); color: var(--text); }
.nav-item.active { background: rgba(34,197,94,0.12); color: var(--accent); }
.nav-item .icon  { width: 16px; text-align: center; flex-shrink: 0; }
.nav-badge { margin-left: auto; font-size: 10px; background: rgba(239,68,68,0.2); color: #fca5a5; padding: 1px 6px; border-radius: 10px; }
.nav-badge.green { background: rgba(34,197,94,0.15); color: #86efac; }

.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
.admin-user { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 8px; }
.admin-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#22c55e,#16a34a); display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700; }
.admin-name { font-size:12px;font-weight:600; }
.admin-role { font-size:10px;color:var(--text-muted); }
.logout-btn { width:100%;margin-top:6px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:var(--danger);border-radius:7px;padding:7px;font-size:12px;cursor:pointer;transition:all .2s; }
.logout-btn:hover { background:rgba(239,68,68,0.15); }

/* ── MAIN ── */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#topbar {
  height:52px; background:rgba(13,20,36,0.97); border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:12px;
  backdrop-filter:blur(10px); flex-shrink:0;
}
#topbar h1 { font-size:15px;font-weight:700; flex:1; }
.topbar-actions { display:flex;gap:8px;align-items:center; }
.topbar-chip { background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:11px;color:var(--text-muted); }

#content { flex:1; overflow-y:auto; padding:20px; }
#content::-webkit-scrollbar { width:6px; }
#content::-webkit-scrollbar-track { background:transparent; }
#content::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08);border-radius:3px; }

/* ── PAGES ── */
.page { display:none; }
.page.active { display:block; }

/* ── CARDS ── */
.card {
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;
  backdrop-filter:blur(12px);
}
.card-title { font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:14px; }

/* ── STAT GRID ── */
.stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px; }
.stat-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px; }
.stat-card .val { font-size:28px;font-weight:800;line-height:1; }
.stat-card .lbl { font-size:11px;color:var(--text-muted);margin-top:4px; }
.stat-card .delta { font-size:11px;margin-top:6px; }
.delta-up   { color:var(--accent); }
.delta-down { color:var(--danger); }

/* ── GRID 2/3 ── */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px; }
.grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px; }

/* ── TABLE ── */
.data-table { width:100%;border-collapse:collapse;font-size:13px; }
.data-table th { padding:8px 10px;text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:600; }
.data-table td { padding:10px 10px;border-bottom:1px solid rgba(255,255,255,0.04); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,0.02); }
.status-chip { display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:600; }
.chip-green  { background:rgba(34,197,94,0.15);color:#86efac; }
.chip-amber  { background:rgba(245,158,11,0.15);color:#fcd34d; }
.chip-red    { background:rgba(239,68,68,0.15); color:#fca5a5; }
.chip-blue   { background:rgba(59,130,246,0.15);color:#93c5fd; }

/* ── FORM ELEMENTS ── */
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px; }
.form-group { margin-bottom:12px; }
label.fl { display:block;font-size:11px;color:var(--text-muted);margin-bottom:5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em; }
input.fi, select.fi, textarea.fi {
  width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:13px;padding:9px 12px;outline:none;transition:border-color .2s;
}
input.fi:focus, select.fi:focus, textarea.fi:focus { border-color:rgba(34,197,94,0.45); }
textarea.fi { resize:vertical;min-height:80px; }
select.fi option { background:#0f172a; }

/* ── BUTTONS ── */
.btn { padding:8px 16px;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s; display:inline-flex;align-items:center;gap:6px; }
.btn-primary { background:var(--accent);color:#fff; }
.btn-primary:hover { background:#16a34a; }
.btn-secondary { background:rgba(255,255,255,0.07);color:var(--text);border:1px solid var(--border); }
.btn-secondary:hover { background:rgba(255,255,255,0.12); }
.btn-danger { background:rgba(239,68,68,0.15);color:var(--danger);border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background:rgba(239,68,68,0.25); }
.btn-strava { background:var(--strava);color:#fff; }
.btn-strava:hover { background:#e04400; }
.btn-sm { padding:5px 10px;font-size:11px; }

/* ── STRAVA CONFIG ── */
.strava-header { display:flex;align-items:center;gap:12px;padding:14px;background:rgba(252,76,2,0.08);border:1px solid rgba(252,76,2,0.25);border-radius:10px;margin-bottom:16px; }
.strava-logo { font-size:26px; }
.strava-scope-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px; }
.scope-item { display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px; }
.scope-item input[type=checkbox] { accent-color:var(--accent);width:14px;height:14px;flex-shrink:0; }
.scope-item .scope-name { font-size:12px;font-weight:600; }
.scope-item .scope-desc { font-size:10px;color:var(--text-muted);margin-top:1px; }
.oauth-flow { display:flex;align-items:center;gap:0;margin:16px 0;overflow-x:auto; }
.flow-step { background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:10px 12px;text-align:center;min-width:110px;flex-shrink:0; }
.flow-step .step-num { font-size:10px;color:var(--text-muted);margin-bottom:4px; }
.flow-step .step-label { font-size:11px;font-weight:600; }
.flow-arrow { font-size:16px;color:var(--text-muted);padding:0 8px;flex-shrink:0; }
.api-key-row { display:flex;align-items:center;gap:8px; }
.api-key-row input { flex:1; font-family: monospace; font-size:12px; }
.copy-btn { flex-shrink:0; }

/* ── NOTIFICATION BANNER ── */
.notif-banner { position:fixed;top:60px;right:20px;z-index:9999;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;font-size:13px;backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.5);display:none;align-items:center;gap:10px;min-width:280px; }
.notif-banner.show { display:flex; }

/* ── CHART WRAP ── */
.chart-wrap { height:200px;position:relative; }

/* ── LIGA TIER ── */
.tier-row { display:grid;grid-template-columns:100px 1fr 80px 80px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04); }
.tier-row:last-child { border-bottom:none; }
.tier-name { font-size:12px;font-weight:600; }
.tier-bar-bg { height:8px;background:rgba(255,255,255,0.07);border-radius:4px;overflow:hidden; }
.tier-bar-fill { height:100%;border-radius:4px; }