:root{--bg:#031321;--p:#071d30;--p2:#0a2943;--gold:#e8bd57;--gold2:#ffd777;--text:#f5f7fa;--muted:#9bb1c4;--line:rgba(232,189,87,.22);--green:#52dfc0;--bad:#ff9b9b}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#02111d,#061d31 55%,#031321);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55}.wrap{width:min(1180px,calc(100% - 28px));margin:auto}
.top{min-height:100px;background:#020f19;border-bottom:1px solid rgba(232,189,87,.15);display:flex;align-items:center}.topin{display:flex;justify-content:space-between;align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:16px}.brand img{width:90px}.brand strong{display:block;color:var(--gold2);letter-spacing:1.3px}.brand small{color:#88a3b8}.back{color:var(--gold2);text-decoration:none;border:1px solid var(--line);padding:9px 13px;border-radius:9px;font-weight:800}
.hero{padding:34px 0 18px}.kicker{color:var(--gold);font-size:.76rem;font-weight:900;letter-spacing:1.4px}.hero h1{font-size:clamp(2rem,4vw,3.5rem);margin:6px 0}.hero h1 span{color:var(--gold)}.hero p{color:var(--muted);margin:0}
.modebar,.modnav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.modebar a,.modnav a{color:#c9d8e3;text-decoration:none;border:1px solid var(--line);background:#061a2b;border-radius:9px;padding:9px 12px;font-size:.78rem;font-weight:800}.modebar a.active,.modnav a.active{color:#071522;background:var(--gold);border-color:var(--gold)}
.panel{background:rgba(5,25,42,.94);border:1px solid var(--line);border-radius:16px;padding:20px;margin:14px 0}.panel h2{margin:0 0 6px}.note{color:var(--muted);font-size:.84rem}.score{font-size:1.25rem;color:var(--gold2);font-weight:950}
.q{background:#071d30;border:1px solid rgba(232,189,87,.17);border-radius:14px;padding:20px;margin:13px 0}.qhead{font-size:.72rem;color:var(--green);font-weight:900;letter-spacing:1.2px}.q h3{font-size:1.04rem;margin:8px 0 14px}.opt{display:block;padding:10px 12px;border:1px solid rgba(232,189,87,.12);border-radius:9px;margin:7px 0;color:#d7e3ec;cursor:pointer}.opt:hover{background:#0a2943}.opt input{margin-right:10px}
button{background:var(--gold);color:#071522;border:0;border-radius:9px;padding:11px 17px;font-weight:950;cursor:pointer;margin-top:8px}.feedback{margin-top:10px;padding:12px;border-radius:9px}.good{border:1px solid rgba(82,223,192,.35);background:rgba(82,223,192,.07);color:#bff7e9}.bad{border:1px solid rgba(255,155,155,.35);background:rgba(255,155,155,.06);color:#ffd0d0}.practice-feedback{display:none}.practice-feedback.show{display:block}.submit{position:sticky;bottom:10px;background:#061827;border:1px solid var(--line);padding:12px;border-radius:12px;text-align:right}
@media(max-width:650px){.topin{align-items:flex-start;flex-direction:column;padding:10px 0}.brand img{width:76px}.q{padding:14px}}