:root {
  --bg: #090914;
  --panel: rgba(255,255,255,.08);
  --panel-2: rgba(255,255,255,.12);
  --text: #f7f7fb;
  --muted: #a5adc3;
  --border: rgba(255,255,255,.14);
  --primary: #8b5cf6;
  --secondary: #06b6d4;
  --danger: #fb7185;
  --success: #22c55e;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
}
[data-bs-theme="light"] {
  --bg: #f5f7fb;
  --panel: rgba(255,255,255,.78);
  --panel-2: rgba(255,255,255,.95);
  --text: #101828;
  --muted: #667085;
  --border: rgba(16,24,40,.1);
  --shadow: 0 24px 80px rgba(16,24,40,.12);
}
* { box-sizing: border-box; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.app-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 10% 10%, rgba(139,92,246,.32), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(6,182,212,.25), transparent 24%),
    radial-gradient(circle at 48% 88%, rgba(244,63,94,.18), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent);
}
.glass-card {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--shadow);
  border-radius: 28px;
}
.auth-shell {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(139,92,246,.35), transparent 25%),
    radial-gradient(circle at 90% 80%, rgba(6,182,212,.24), transparent 22%),
    #080813;
}
.auth-card { width: min(470px, 100%); padding: 36px; }
.brand-mark, .sidebar-logo { display:flex; align-items:center; gap:14px; }
.brand-orb {
  width:44px; height:44px; display:inline-block; border-radius:16px;
  background: linear-gradient(135deg, #ff4d88, #8b5cf6 48%, #06b6d4);
  box-shadow: 0 15px 40px rgba(139,92,246,.42);
}
.app-frame { padding: 18px; gap: 18px; }
.sidebar {
  position: sticky; top: 18px; height: calc(100vh - 36px); width: 280px; padding: 22px;
  flex: 0 0 280px;
}
.sidebar-logo { font-weight: 900; letter-spacing: -.04em; margin-bottom: 28px; }
.sidebar-logo small { color: var(--muted); font-size: .75rem; letter-spacing: 0; }
.sidebar-nav { gap: 6px; }
.sidebar-nav .nav-link {
  display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 16px;
  color: var(--muted); transition: .22s ease;
}
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active {
  background: var(--panel-2); color: var(--text); transform: translateX(3px);
}
.sidebar-nav i { width:22px; text-align:center; }
.main-panel { flex: 1; min-width:0; }
.topbar {
  min-height: 88px; padding: 18px 22px; display:flex; align-items:center; gap: 18px; margin-bottom: 18px;
}
.topbar h1 { margin: 0; font-size: clamp(1.5rem, 2vw, 2.25rem); font-weight: 900; letter-spacing: -.05em; }
.eyebrow { color: var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.user-pill { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.06); }
.user-pill > span { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary),var(--secondary)); font-weight:800; }
.user-pill small { display:block; color: var(--muted); line-height:1; }
.btn-gradient {
  border:0; color:#fff; font-weight:800;
  background: linear-gradient(135deg, #ec4899, #8b5cf6 55%, #06b6d4);
  box-shadow: 0 18px 38px rgba(139,92,246,.25);
}
.btn-gradient:hover { color:#fff; filter: brightness(1.06); transform: translateY(-1px); }
.btn-soft { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.btn-soft:hover { background: rgba(255,255,255,.18); color: var(--text); }
.form-control, .form-select {
  background: rgba(255,255,255,.08); border: 1px solid var(--border); color: var(--text); border-radius: 16px;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.12); border-color: rgba(139,92,246,.6); box-shadow: 0 0 0 .25rem rgba(139,92,246,.18); color: var(--text);
}
.form-control::placeholder { color: var(--muted); }
.grid-stats { display:grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 16px; }
.metric-card { padding: 20px; position:relative; overflow:hidden; }
.metric-card::after { content:""; position:absolute; width:120px; height:120px; right:-42px; top:-42px; background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(6,182,212,.2)); border-radius:50%; }
.metric-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--panel-2); margin-bottom:12px; }
.metric-label { color: var(--muted); font-size:.82rem; font-weight:700; }
.metric-value { font-size: 2rem; font-weight:900; letter-spacing:-.06em; }
.premium-table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); }
.premium-table thead th { color: var(--muted); border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: .73rem; letter-spacing: .1em; }
.premium-table td { border-color: var(--border); vertical-align: middle; }
.glass-alert { border-radius: 18px; border: 1px solid var(--border); }
.color-dot { width:20px; height:20px; display:inline-block; border-radius:50%; margin-right:6px; border:2px solid rgba(255,255,255,.5); }
.health { padding: 6px 10px; border-radius:999px; font-size:.78rem; font-weight:800; background: var(--panel-2); }
.health.connected { color: var(--success); }
.health.warning { color: #fbbf24; }
.health.expired, .health.disconnected { color: var(--danger); }
.activity-feed { display:grid; gap:14px; }
.activity-item { display:flex; gap:12px; align-items:flex-start; }
.activity-item .dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); margin-top:7px; box-shadow:0 0 0 6px rgba(139,92,246,.12); }
.activity-item small { display:block; color: var(--muted); }
.ai-box, .code-box { background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: 22px; padding: 18px; }
.score-ring { display:inline-grid; place-items:center; width:128px; height:128px; border-radius:50%; margin: 8px; background: conic-gradient(var(--primary) calc(var(--score, 0)*1%), rgba(255,255,255,.12) 0); position:relative; }
.score-ring::before { content:""; position:absolute; inset:12px; background: var(--bg); border-radius:50%; }
.score-ring span, .score-ring small { position:relative; z-index:1; }
.score-ring span { font-size:2rem; font-weight:900; }
.score-ring small { color: var(--muted); grid-row:2; margin-top:-34px; }
.score-ring.alt { background: conic-gradient(var(--secondary) calc(var(--score, 0)*1%), rgba(255,255,255,.12) 0); }
.score { display:inline-grid; place-items:center; min-width:34px; height:28px; padding:0 8px; border-radius:10px; background: var(--panel-2); font-weight:800; }
.skeleton-card { height: 170px; border-radius:24px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.15), rgba(255,255,255,.06)); background-size:200% 100%; animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.dropzone-pro { min-height: 240px; border: 1.5px dashed rgba(139,92,246,.55); border-radius: 28px; display:grid; place-items:center; text-align:center; background: rgba(255,255,255,.05); transition:.2s ease; }
.dropzone-pro.dragover { background: rgba(139,92,246,.15); transform: scale(.995); }
.thumb { width:58px; height:58px; object-fit:cover; border-radius:14px; }
.leader-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.code-box { color: var(--text); white-space: pre-wrap; }
@media (max-width: 1300px) { .grid-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
  .app-frame { padding: 10px; }
  .sidebar { position: fixed; z-index: 100; left: -310px; transition:.25s ease; }
  .sidebar.open { left: 10px; }
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  .user-pill { display:none; }
}
@media (max-width: 575px) { .grid-stats { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; } }