:root{
  --brand:#e31b23;
  --brand2:#ff4d5a;
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --shadow:0 12px 28px rgba(16,24,40,.10);
  --radius:16px;
}
body{ background: var(--bg); }
.navbar{ background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); }
.navbar .navbar-brand, .navbar .nav-link{ color:#fff !important; }
.brand-logo{ width:40px; height:40px; border-radius:12px; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.18); }
.hero{
  background: radial-gradient(1000px 420px at 10% 10%, rgba(227,27,35,.18), transparent 50%),
              radial-gradient(900px 420px at 90% 10%, rgba(255,77,90,.20), transparent 55%),
              linear-gradient(180deg, #fff, #fff);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card{ border:0; border-radius: var(--radius); box-shadow: var(--shadow); }
.btn-primary{ background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); border:0; }
.btn-primary:hover{ filter: brightness(.98); }
.badge-soft{ background: rgba(227,27,35,.10); color: var(--brand); border:1px solid rgba(227,27,35,.18); }
.muted{ color: var(--muted); }
.kpi{
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #fff);
  box-shadow: var(--shadow);
  border:1px solid rgba(16,24,40,.06);
}
.kpi .num{ font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.kpi .label{ color: var(--muted); font-size: 12px; }
.table thead th{ color:#374151; font-weight:700; border-bottom:1px solid rgba(16,24,40,.08) !important; }
.table td{ vertical-align: middle; }
.accordion-button{ font-weight: 600; }
.answer-good{ background: rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.22); color:#065f46; }
.answer-bad{ background: rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.20); color:#7f1d1d; }
.pill{ border-radius: 999px; padding: .25rem .6rem; font-size: 12px; }
.footer{ color: var(--muted); font-size: 12px; }
code{ background: rgba(17,24,39,.06); padding:.15rem .35rem; border-radius:8px; }