.header{
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px 0 24px;
}

.brand{display:flex;align-items:center;gap:12px}

.brand-mark{
  width:36px;height:36px;border:2px solid var(--primary);border-radius:6px;
  display:grid;place-items:center;color:var(--primary);font-weight:800
}

.brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-tag{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:.6px}

.header-actions{
  display:flex; align-items:center; gap:12px;
}

.wrap{
  display:flex; min-height:calc(100vh - 100px);
}

.sidebar-header {
  position: fixed;
  top: 30px;
  width: 248px;
  flex: 0 0 248px;
  border-right: 1px solid var(--border);
  background: #fff;
  padding: 16px 12px;
  height: calc(100vh - 30px);
  overflow: auto;
}

.sb-section{margin-bottom:14px}

.sb-title{
  font-weight:700; color:var(--text);
  margin:10px 8px;
}

.sb-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--text);
}

.sb-link:hover{background:#f8fafc}

.sb-icon{
  width:18px;height:18px;border:2px solid var(--text);border-radius:4px;opacity:.85
}

details.sb-group{
  border-radius:10px;
  padding:2px 0;
}

details.sb-group > summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; padding:10px 12px; border-radius:10px; font-weight:700;
}

details.sb-group > summary:hover{background:#f8fafc}
details.sb-group > summary::-webkit-details-marker{display:none}

.chev{transition:transform .2s ease}
details[open] .chev{transform:rotate(90deg)}

.sb-children{
  padding:6px 0 8px 6px;
}

.sb-child{
  display:block; padding:8px 12px 8px 30px; color:var(--text); border-radius:8px;
}

.sb-child:hover{background:#f8fafc}

.bullet{
  width:0; height:0;
  border-left:6px solid var(--text);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  margin-right:8px;
}

/* ====== Main content ====== */
.content{flex:1; min-width:0}

/* Hero */
.hero{
  background:var(--primary); color:#fff; padding:28px 20px;
  border-bottom:1px solid var(--border);
}

.container{max-width:1060px;margin:0 auto}

.search-row{
  display:flex; align-items:center; gap:18px;
}

.search{position:relative; flex:1}

.search input{
  width:100%; height:44px;
  border-radius:8px; border:1px solid #cbd5e1;
  padding:0 44px 0 14px; color:#0f172a;
}

.search .magnifier{
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%);
  width:22px;height:22px; opacity:.6;
}

.btn-primary{
  background:#0f2f52; color:#fff; border-color:#0f2f52;
}

.btn-outline{
  border-color:#dbeafe; color:#fff;
}

.pill{
  background:#0f2f52;color:#fff;border-color:#0f2f52
}

.arrow{
  width:16px;height:16px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg)
}

.notice{
  background:#eef2f7; color:#111827;
  border-bottom:1px solid var(--border);
  padding:10px 20px;
}

.notice a{font-weight:700;color:#0e2a45}

.welcome{padding:34px 20px 50px}

.grid{
  display:grid; gap:30px;
  grid-template-columns: 1.2fr 1fr;
}

.welcome h1{
  font-size:34px; margin:0 0 8px;
  color:#12324f; letter-spacing:.2px
}

.kicker{color:var(--muted); font-weight:700; margin-bottom:14px}
.copy{color:#374151; margin:0 0 16px; max-width:64ch}

.cta-row{display:flex; gap:12px; margin-top:18px}

.cta{
  height:42px; padding:0 16px;
  border-radius:8px; font-weight:800;
  letter-spacing:.2px; cursor:pointer;
  border:1.5px solid #0f2f52
}

.cta.primary{background:#0f2f52;color:#fff}
.cta.secondary{background:#fff;color:#0f2f52}

.illustration{
  width:100%; max-width:420px;
  margin-left:auto;
  filter:grayscale(100%) contrast(110%);
}

.illus-frame{
  width:100%; aspect-ratio:4/3;
  border:2px dashed var(--border);
  border-radius:12px;
  display:grid; place-items:center;
  color:#64748b; font-weight:600
}

.menu-btn{display:none}

@media (max-width: 992px){
  .grid{grid-template-columns:1fr}

  .sidebar-header{
    position:fixed;
    inset:72px auto 0 0;
    width:280px;
    transform:translateX(-100%);
    transition:transform .2s ease;
    background:#fff;
    box-shadow:0 8px 30px rgba(2,8,23,.18);
    z-index:50;
  }

  .sidebar-header.open{transform:translateX(0)}

  .backdrop{
    position:fixed;
    inset:72px 0 0 0;
    background:rgba(2,6,23,.35);
    backdrop-filter:saturate(120%) blur(2px);
    display:none;
    z-index:40
  }

  .backdrop.show{display:block}

  .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff
  }
}

.ques-desc h3{
  color:#000 !important;
  margin-block:.5rem;
  font-size:1.2rem !important;
}

.quiz-section h3{
  font-size:1.2rem !important;
}

.sb-home-text{
  font-weight:bold;
}