:root{
  --brand:#07143d;
  --brand-2:#0b5ed7;
  --accent:#17a2b8;
  --ink:#182033;
  --muted:#687083;
  --surface:#ffffff;
  --soft:#f4f7fb;
  --line:#e6edf5;
  --success:#198754;
  --danger:#dc3545;
  --warning:#ffc107;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);
  min-height:100vh;
}
a{color:var(--brand-2);}
.site-navbar{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(10,32,72,.07);
  backdrop-filter:blur(12px);
}
.navbar-brand.brand-pill{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--brand)!important;
  background:transparent!important;
  font-weight:800;
  letter-spacing:.02em;
}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 18px rgba(11,94,215,.25);
}
.navbar .nav-link,.navbar .btn{
  border:0!important;border-radius:999px!important;margin:.15rem .2rem;padding:.55rem .9rem!important;
  font-weight:650;color:#26344d!important;background:transparent!important;
}
.navbar .nav-link:hover,.navbar .btn:hover{background:#eef4ff!important;color:var(--brand-2)!important;}
.nav-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2))!important;color:#fff!important;box-shadow:0 10px 22px rgba(11,94,215,.23);}
.nav-cta:hover{color:#fff!important;transform:translateY(-1px);}
.page-shell{padding:2rem 0 3rem;}
.hero-card,.content-card,.question-card,.auth-card{
  background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:24px!important;
  box-shadow:0 18px 45px rgba(18,38,63,.08);overflow:hidden;
}
.hero-card{padding:0;}
.hero-media{background:linear-gradient(135deg,#07143d,#0b5ed7);padding:1rem;}
.hero-card img{border-radius:20px;object-fit:cover;max-height:420px;width:100%;}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;background:#eaf3ff;color:var(--brand-2);border:1px solid #d3e7ff;border-radius:999px;padding:.35rem .75rem;font-weight:750;font-size:.82rem;}
.hero-title{font-size:clamp(1.9rem,4vw,3.25rem);line-height:1.04;font-weight:850;letter-spacing:-.04em;color:var(--brand);}
.hero-copy{color:var(--muted);font-size:1.05rem;line-height:1.75;}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.2rem;}
.stat-box{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:1rem;}
.stat-box strong{display:block;font-size:1.35rem;color:var(--brand);}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.85rem;}
.topic-item{background:#f8fbff!important;color:#26344d!important;border:1px solid var(--line)!important;border-radius:16px!important;padding:.9rem 1rem!important;font-weight:650;}
.action-panel{background:linear-gradient(135deg,var(--brand),#102b67)!important;color:#fff!important;border:0!important;border-radius:24px!important;padding:1.5rem!important;margin-top:1.5rem;box-shadow:0 18px 45px rgba(7,20,61,.20);}
.action-panel a{color:#fff;text-decoration:none;font-weight:750;}
.action-panel .btn{border-radius:999px;padding:.7rem 1.1rem;font-weight:750;}
.page-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:850;color:var(--brand);letter-spacing:-.03em;}
.category-card{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;text-decoration:none;color:var(--ink);height:100%;box-shadow:0 12px 24px rgba(18,38,63,.05);transition:.2s ease;}
.category-card:hover{transform:translateY(-3px);box-shadow:0 18px 35px rgba(18,38,63,.10);color:var(--brand-2);}
.question-card{padding:1.25rem!important;margin:1rem 0 2rem;}
.question-text{font-size:1.05rem;line-height:1.75;}
.option-row{display:block;background:#f8fbff;border:1px solid var(--line);border-radius:16px;padding:.85rem 1rem;margin:.75rem 0;color:var(--ink);cursor:pointer;}
.option-row:hover{border-color:#b9d9ff;background:#f1f7ff;}
.option-row .form-check-input{margin-right:.65rem;}
.primary-btn,.btn-warning,.btn-success,.btn-outline-info{border:0!important;border-radius:999px!important;padding:.75rem 1.25rem!important;font-weight:800!important;box-shadow:0 12px 24px rgba(11,94,215,.18);}
.primary-btn,.btn-success{background:linear-gradient(135deg,var(--brand),var(--brand-2))!important;color:#fff!important;}
.btn-warning{background:linear-gradient(135deg,#ffc107,#ff9800)!important;color:#1d2536!important;}
.answer-correct{background:#eaf8ef;border:1px solid #c9ecd6;color:#0f5132;border-radius:18px;padding:1rem;font-weight:800;}
.answer-wrong{background:#fff1f2;border:1px solid #ffd0d6;color:#842029;border-radius:18px;padding:1rem;font-weight:800;}
.answer-neutral{background:#fff9e6;border:1px solid #ffe49b;color:#664d03;border-radius:18px;padding:1rem;font-weight:800;}
.explanation-box{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:24px!important;padding:1.35rem!important;box-shadow:0 18px 45px rgba(18,38,63,.08);}
.explanation-answer{background:#eaf3ff;color:var(--brand);border-radius:16px;padding:1rem;font-weight:850;margin-bottom:1rem;}
.auth-wrap{max-width:760px;margin:2rem auto;}
.auth-card{padding:2rem!important;}
.auth-card form, form.auth-card{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:24px!important;padding:2rem!important;box-shadow:0 18px 45px rgba(18,38,63,.08);}
.form-control{border-radius:14px!important;border-color:#d8e4f0!important;padding:.75rem 1rem!important;}
.pagination{gap:.25rem;flex-wrap:wrap;}
.page-link{border-radius:12px!important;border:1px solid var(--line)!important;color:var(--brand-2)!important;font-weight:700;}
.page-item.active .page-link,.page-link.active{background:var(--brand-2)!important;color:#fff!important;border-color:var(--brand-2)!important;}
img{max-width:100%;height:auto;}
.question-card img,.explanation-box img{border-radius:16px;border:1px solid var(--line);margin:.5rem 0 1rem;}
.site-footer{color:var(--muted);text-align:center;padding:1.5rem 0;}
@media(max-width:768px){.stat-row{grid-template-columns:1fr}.hero-card,.content-card,.question-card,.auth-card{border-radius:18px!important}.navbar .btn,.navbar .nav-link{text-align:left;width:100%}.page-shell{padding:1rem 0 2rem}}