/* Dashboard Styles - Externalized from dashboard.html for CSP compliance */

:root{
  --bg:#0b1220; --fg:#e5e7eb;
  --card:rgba(255,255,255,.05); --card-border:rgba(255,255,255,.10);
  --grad1:rgba(59,130,246,.16); --grad2:rgba(34,211,238,.14);
  --brand:#22d3ee; --brand-700:#0891b2; --accent:#60a5fa;
  --warn:#f59e0b; --green:#10b981; --muted:#94a3b8;
}

body{ background:var(--bg) !important; color:var(--fg) !important; }

.surface{ background:var(--card); border:1px solid var(--card-border); border-radius:18px; }

.card{ padding: 1.5rem; }

.lift{ transition:transform .25s, border-color .25s; will-change: transform; }

.lift:hover{ transform:translateY(-2px); border-color:rgba(34,211,238,.35); }

.lift:active{ transform:translateY(0); }

.glass{
  background:
    radial-gradient(900px 320px at 50% -10%, var(--grad1), transparent 40%),
    radial-gradient(700px 300px at 80% 110%, var(--grad2), transparent 45%);
}

.stat{
  background:linear-gradient(135deg, rgba(59,130,246,.10), rgba(34,211,238,.10));
  border:1px solid rgba(59,130,246,.25);
  border-radius:16px; padding:20px;
}

.badge{ padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.8rem; }

.badge-free{ background:rgba(148,163,184,.18); color:var(--muted); }

.badge-pro{ background:rgba(16,185,129,.18); color:var(--green); }

.badge-admin{ background:rgba(245,158,11,.18); color:var(--warn); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      padding:.6rem 1rem; border-radius:.75rem; font-weight:600; cursor:pointer; }

.btn-primary{ background:var(--brand); color:#031018; }

.btn-primary:hover{ background:#3dddf3; }

.btn-ghost{ border:1px solid var(--card-border); background:rgba(255,255,255,.04); }

.btn-ghost:hover{ border-color:rgba(255,255,255,.2); }

.link{ color:var(--brand); }

.link:hover{ color:#7dd3fc; }

.skeleton{ position:relative; overflow:hidden; background:rgba(255,255,255,.06); }

.skeleton::after{
  content:""; position:absolute; inset:0; translate: -100% 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation:shimmer 1.6s infinite;
}

@keyframes shimmer{ 100% { translate: 100% 0; } }

@media (prefers-reduced-motion: reduce){
  .lift,.skeleton::after{ animation:none; transition:none; }
}