/* exam home + quiz, on the same Electera materials */
.navbar .brand{font-weight:800;font-size:18px;letter-spacing:-.01em;padding:6px 12px;border-radius:999px}
html.scrolled .navbar .brand{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--glass-hi),var(--glass-shadow)}
html.quiz .nav-title{opacity:1;transform:none}
html.home .wrap{max-width:920px}

.exam-grid{display:grid;gap:14px;margin-top:6px}
@media (min-width:720px){.exam-grid{grid-template-columns:1fr 1fr;gap:16px}}

.xbox{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:188px;padding:18px 18px 16px;border-radius:28px;text-align:start;position:relative;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 58%),var(--grouped);
  box-shadow:var(--card-shadow);animation:rise .6s var(--ease) both;
  transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1)}
.xbox:nth-child(2){animation-delay:.04s}.xbox:nth-child(3){animation-delay:.08s}.xbox:nth-child(4){animation-delay:.12s}
.xbox:nth-child(5){animation-delay:.16s}.xbox:nth-child(6){animation-delay:.2s}.xbox:nth-child(7){animation-delay:.24s}
.xbox-ico,.go{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.xbox:active{transform:translateY(-1px) scale(.99);transition-duration:.25s}
@media (hover:hover){
  .exam-grid .xbox:hover{transform:translateY(-8px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 26px 48px -22px color-mix(in srgb,var(--c) 48%,transparent)}
  .exam-grid .xbox:hover .xbox-ico{transform:translateY(-3px)}
  .exam-grid .xbox:hover .go{transform:translateX(-5px)}
}
:root[data-theme=dark] .exam-grid .xbox:hover{box-shadow:0 24px 48px -18px rgba(0,0,0,.72),0 0 0 .5px color-mix(in srgb,var(--c) 34%,transparent)}
.xbox-top{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:10px}
.xbox-ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:none;background:var(--c);color:var(--ink,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(0,0,0,.12),0 12px 20px -12px var(--c)}
.xbox-ico svg{width:28px;height:28px}
.xbox-ico.big{width:84px;height:84px;border-radius:24px}
.xbox-ico.big svg{width:42px;height:42px}
.xbox-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.xbox-body b,.stage-card h1{font-size:20px;font-weight:900;line-height:1.4}
.xbox-body small,.stage-card .tag{color:var(--label2);font-size:14px;line-height:1.6}
.xbox-foot{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.meta{color:var(--label2);font-size:13px;font-weight:600}
.go{height:34px;padding:0 12px 0 8px;border-radius:999px;display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:800;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 72%,#000)}
:root[data-theme=dark] .go{color:var(--c)}
.go svg{width:16px;height:16px}

.gate{border-radius:34px;overflow:hidden;background:var(--grouped);box-shadow:var(--card-shadow);animation:rise .55s var(--ease) both}
.gate-hero{position:relative;overflow:hidden;padding:28px 22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--on,#fff);
  background:linear-gradient(152deg,color-mix(in srgb,var(--c) 68%,#fff),var(--c) 46%,color-mix(in srgb,var(--c) 62%,#111))}
.gate-glow{position:absolute;width:240px;height:240px;border-radius:50%;inset-inline-end:-78px;top:-92px;background:color-mix(in srgb,var(--on,#fff) 20%,transparent);pointer-events:none}
.gate-glow::after{content:"";position:absolute;inset:34px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--on,#fff) 35%,transparent)}
.gate-hero .xbox-ico{position:relative;background:#fff;color:color-mix(in srgb,var(--c) 72%,#000);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.gate-kicker{position:relative;font-size:13px;font-weight:800;opacity:.88}
.gate-hero h1{position:relative;font-size:clamp(28px,6.6vw,40px);font-weight:900;line-height:1.3;color:inherit}
.gate-hero .tag{position:relative;font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--on,#fff) 80%,transparent)}
.gate-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat3 div{background:color-mix(in srgb,var(--c) 10%,var(--bg));border-radius:18px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.stat3 b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.stat3 span{font-size:12px;color:var(--label2);font-weight:600}
.gate-body .row2{display:flex;flex-direction:column;gap:10px}
.gate-body .pill{width:100%}

.segs{display:flex;gap:5px;margin:4px 0 14px}
.segs i{flex:1;height:6px;border-radius:99px;background:var(--fill2);transition:background .25s,transform .35s var(--spring)}
.segs i.on{background:var(--accent)}
.segs i.now:not(.on){background:color-mix(in srgb,var(--accent) 50%,var(--fill2))}
.segs i.now{transform:scaleY(1.35)}

.qcard{background:var(--grouped);border-radius:28px;padding:18px 18px 16px;box-shadow:var(--card-shadow);margin-bottom:12px}
.qmeta{color:var(--label2);font-size:13px;font-weight:700}
.qtitle{font-size:clamp(20px,4.8vw,26px);font-weight:800;line-height:1.65;margin-top:8px;scroll-margin-top:90px}
.qtitle:focus{outline:none}
.stage{animation:rise .35s var(--ease) both}

.opts{display:grid;gap:10px}
.opt{direction:rtl;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px;border-radius:22px;text-align:start;
  background:var(--grouped);box-shadow:var(--card-shadow);transition:transform .35s var(--spring),box-shadow .2s,background .2s}
.opt:active{transform:scale(.98)}
.opt .key{width:34px;height:34px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:14px;font-weight:800;background:var(--fill2);color:var(--label)}
.opt .ot{flex:1;min-width:0;font-size:16.5px;line-height:1.55;font-weight:600}
.opt .ot[dir="ltr"]{text-align:left}
.opt[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--grouped));box-shadow:0 0 0 2.5px var(--accent)}
.opt[aria-checked="true"] .key{background:var(--accent);color:var(--on-accent)}
.opts.shake{animation:qshake .34s var(--ease)}
@keyframes qshake{30%{transform:translateX(5px)}70%{transform:translateX(-5px)}}

.abar .pill{height:44px;padding:0 18px;flex:none}
.abar .pill:disabled{opacity:.35;pointer-events:none}
.abar .pill.ready{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 18px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.toast.glass{color:var(--label)}

.score{text-align:center;padding:8px 8px 18px}
.score-ring{width:156px;height:156px;margin:8px auto 16px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--c,var(--accent)) calc(var(--p)*1%),var(--fill2) 0);position:relative}
.score-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bg)}
.score-ring b,.score-ring span{position:relative;z-index:1}
.score-ring b{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1}
.score-ring span{margin-top:4px;font-size:13px;color:var(--label2);font-weight:600}
.score h1{font-size:28px;font-weight:900}
.score p{color:var(--label2);font-size:15px;line-height:1.8;max-width:460px;margin:6px auto 0}
.score .row2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

.rgrid{display:grid;gap:10px}
.rbox{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:22px;background:var(--grouped);box-shadow:var(--card-shadow)}
.rbox.is-right{background:color-mix(in srgb,var(--green) 14%,var(--grouped))}
.rbox.is-wrong{background:color-mix(in srgb,var(--red) 12%,var(--grouped))}
.rbox .ic{margin-top:2px}
.rbox .t{font-size:15px;line-height:1.55;font-weight:700}
.rbox small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--label2);line-height:1.6}
.empty{text-align:center;padding:28px 12px}
.empty h2{font-size:22px;margin-bottom:6px}