:root {
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.65);
  --text-main: #0f172a;
  --text-muted: rgba(15, 23, 42, 0.65);
  --shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
  --g1: #efeaff;
  --g2: #dbeafe;
  --g3: #fce7f3;
  --g4: #e9d5ff;
  --brand1: #6366f1;
  --brand2: #a855f7;
  --brand3: #60a5fa;
  --brand4: #f472b6;
  --success: #16a34a;
  --warning: #ea580c;
  --danger: #dc2626;
  --border-radius: 16px;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(168, 85, 247, .18), transparent 60%),
    radial-gradient(1000px 600px at 85% 15%, rgba(96, 165, 250, .18), transparent 60%),
    radial-gradient(900px 600px at 55% 85%, rgba(244, 114, 182, .16), transparent 60%),
    linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 70%, var(--g4) 100%);
  background-attachment: fixed;
  margin: 0;
}

.glass-card {
  background: var(--glass-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.btn-brand {
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #fff;
  border: none;
}

.btn-brand:hover { opacity: 0.95; color: #fff; }

.text-muted-70 { color: var(--text-muted); }

.nav-link.active { font-weight: 700; color: var(--brand1) !important; }

.table-glass { background: rgba(255, 255, 255, 0.78); border-radius: 14px; overflow: hidden; }

.badge-soft { background: rgba(99, 102, 241, 0.12); color: var(--brand1); }

.section-title { font-size: 1.25rem; font-weight: 700; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.metric-card { padding: 1.25rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.65); box-shadow: var(--shadow); background: rgba(255,255,255,.9); }

.metric-value { font-size: 1.75rem; font-weight: 800; }

.stat-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; background: rgba(99,102,241,.12); color: var(--brand1); border-radius: 999px; font-size: .85rem; }

.form-control, .form-select { border-radius: 12px; /* padding: 0.75rem; */ border-color: rgba(99, 102, 241, 0.35); }

.form-control:focus, .form-select:focus { border-color: var(--brand1); box-shadow: 0 0 0 0.2rem rgba(99,102,241,0.18); }

.layout-shell {margin: 0 auto; padding: 2rem 1rem 3rem; }

.hero { text-align: center; padding: 3rem 1rem; }

.hero h1 { font-weight: 800; margin-bottom: 1rem; }

.hero .lead { color: var(--text-muted); max-width: 760px; margin: 0 auto; }

.navbar.glass-card { backdrop-filter: blur(8px); }

footer { padding: 2rem 0; text-align: center; color: var(--text-muted); }