:root{--bg:#0b1118;--panel:#111a24;--line:#273443;--text:#edf3f8;--muted:#9cabb9;--cyan:#36d3d0;--green:#83c9a2;--red:#ee7a7a;--gold:#efbb55}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 75% 5%,#15313b 0,transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;min-height:100vh}
a{color:var(--cyan);text-decoration:none}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 max(24px,5vw);background:#0b1118dd;position:sticky;top:0;z-index:10}
.brand{font-weight:800;color:white;font-size:19px}
.brand span{display:inline-grid;place-items:center;width:37px;height:37px;border:1px solid var(--cyan);color:var(--cyan);margin-right:10px}
.nav nav{display:flex;align-items:center;gap:24px}
.nav form{margin:0}
.link{background:none;border:0;color:var(--cyan);font:inherit;cursor:pointer}
main{width:min(1180px,92vw);margin:auto}
.hero{min-height:620px;display:grid;grid-template-columns:1.5fr .7fr;gap:8vw;align-items:center}
.eyebrow{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.18em}
.hero h1,.auth h1,.dashboard-head h1{font-size:clamp(46px,7vw,86px);line-height:.96;margin:18px 0}
.lede{font-size:21px;color:var(--muted);max-width:650px;line-height:1.6}
.actions{display:flex;align-items:center;gap:24px;margin-top:34px}
.button{border:0;background:var(--cyan);color:#071114!important;padding:15px 22px;font-weight:800;display:inline-block;cursor:pointer;border-radius:3px}
.button.small{padding:10px 15px}
.button:disabled{opacity:.35}
.pass,.checkout,.status{background:linear-gradient(145deg,#152432,#0f171f);border:1px solid #335064;padding:34px;box-shadow:0 20px 80px #0007}
.pass>strong{display:block;font-size:64px;color:var(--gold);margin:10px 0}
.pass li{margin:15px 0;color:var(--muted)}
section{margin:70px 0}
section>h2{font-size:30px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article,.question{background:var(--panel);border:1px solid var(--line);padding:24px}
.cards span{color:var(--cyan);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.cards p{color:var(--muted);line-height:1.5}
.question-preview{margin-top:20px}
.preview-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:28px}
.preview-heading h2{font-size:clamp(32px,5vw,52px);line-height:1.05;margin:12px 0 16px;max-width:720px}
.preview-heading>div>p:last-child{color:var(--muted);font-size:17px;line-height:1.55;max-width:720px;margin-bottom:0}
.preview-toggle{display:flex;align-items:center;gap:12px;flex:0 0 auto;border:1px solid #3d5a50;background:#101f1e;padding:13px 16px;color:var(--green);font-size:14px}
.preview-switch{display:block;position:relative;width:43px;height:24px;border-radius:20px;background:#315f4a;box-shadow:inset 0 0 0 1px #83c9a266}
.preview-switch i{position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #83c9a277}
.preview-stack{display:grid;gap:18px}
.preview-question{position:relative;border:1px solid var(--line);background:linear-gradient(145deg,#121c27,#0e161f);padding:30px;box-shadow:0 18px 50px #0003;overflow:hidden}
.preview-question:after{content:"PREVIEW";position:absolute;right:18px;top:14px;color:#edf3f808;font-size:72px;font-weight:900;letter-spacing:.08em;pointer-events:none}
.preview-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--cyan);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.preview-meta span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #36d3d055}
.preview-question h3{position:relative;max-width:940px;font-size:22px;line-height:1.45;margin:0 0 12px;z-index:1}
.preview-hint{display:flex;align-items:center;gap:10px;color:var(--green);font-size:13px;font-style:italic;margin:0 0 22px}
.preview-dot{display:inline-block;width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #83c9a21f,0 0 13px #83c9a244}
.preview-blurred-line{display:block;max-width:100%;filter:blur(5px);opacity:.7;color:#c7d2dc;white-space:nowrap;overflow:hidden;user-select:none;pointer-events:none}
.preview-blurred-line.long{width:92%}
.preview-blurred-line.medium{width:72%}
.preview-blurred-line.short{width:52%}
.preview-drag-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}
.preview-option-bank,.preview-drop-list{border:1px solid var(--line);background:#09101888;padding:16px}
.preview-option-bank small,.preview-drop-list small{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.13em;margin-bottom:11px}
.preview-option-bank .preview-blurred-line{border:1px solid #35475a;background:#111c27;padding:12px;margin:8px 0}
.preview-drop-row{display:grid;grid-template-columns:70px 1fr 16px;align-items:center;gap:12px;border:1px solid #35475a;background:#111c27;padding:11px 13px;margin:8px 0}
.preview-drop-row b{color:var(--muted);font-size:12px}
.preview-matrix{display:grid;grid-template-columns:minmax(210px,2fr) repeat(4,minmax(62px,1fr));overflow:auto}
.preview-matrix>*{min-height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);margin:-1px 0 0 -1px;padding:10px;text-align:center}
.preview-matrix>strong{background:#1a2734;font-size:13px}
.preview-matrix>span{justify-content:flex-start}
.preview-matrix label{position:relative}
.preview-matrix label>i,.preview-checkbox{display:block;width:22px;height:22px;border:1px solid #607080;background:#091018}
.preview-matrix label .preview-dot{position:absolute;left:calc(50% + 17px);top:50%;transform:translateY(-50%)}
.preview-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.preview-options>div{display:grid;grid-template-columns:24px 1fr 14px;align-items:center;gap:12px;min-height:52px;border:1px solid var(--line);background:#09101888;padding:12px 14px}
.preview-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #335064;border-top:0;background:#101a24;padding:24px 30px}
.preview-cta>div{display:grid;gap:5px}
.preview-cta span{color:var(--muted);font-size:14px}
.auth{min-height:70vh;display:grid;place-items:center}
.auth form{width:min(460px,100%);border:1px solid var(--line);background:var(--panel);padding:42px}
.auth h1{font-size:45px}
.auth label{display:grid;gap:8px;margin:20px 0;color:var(--muted)}
input,select{background:#091018;border:1px solid #405165;color:white;padding:13px;font:inherit}
.auth .button{width:100%}
.flash{padding:15px;text-align:center}
.flash.error{background:#4a2025}
.dashboard-head{display:flex;justify-content:space-between;align-items:center;gap:40px}
.dashboard-head h1{font-size:54px}
.status.active{border-color:var(--green);color:var(--green)}
.checkout{width:min(520px,100%)}
.table>div{display:grid;grid-template-columns:1fr 100px 110px;padding:15px;border-bottom:1px solid var(--line)}
.exam-shell{margin-top:35px}
.exam-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.exam-top h1{font-size:42px}
.toggle{display:block;margin-bottom:18px}
.question{display:grid;grid-template-columns:55px 1fr;margin:14px 0}
.qnum{color:var(--cyan);font-weight:800;font-size:20px}
.question h2{font-size:20px;line-height:1.45;margin-top:0}
.option,.order,.match{display:flex;align-items:center;gap:13px;border:1px solid var(--line);padding:13px;margin:8px 0;cursor:pointer}
.option:hover{border-color:#52708a}
.option input{accent-color:var(--cyan)}
.hint{display:none;color:var(--green);font-style:italic}
.hint-dot{display:none;width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #83c9a21f}
.option .hint-dot{margin-left:auto}
.matrix label{position:relative}
.matrix label>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.matrix label>input:focus-visible+i{outline:2px solid var(--cyan);outline-offset:2px}
.matrix label>input:checked+i{background:var(--cyan);border-color:var(--cyan);box-shadow:inset 0 0 0 4px #091018}
.matrix .hint-dot{position:absolute;left:calc(50% + 16px);top:50%;transform:translateY(-50%)}
.hint-detail{display:none;margin-left:auto;color:var(--green);font-size:12px;font-style:normal;font-weight:700}
.show-hints .hint{display:block}
.show-hints .hint-dot{display:inline-block}
.show-hints .hint-detail:not(:empty){display:inline}
.toggle.disabled{color:var(--muted);opacity:.6}
.question.correct{border-color:var(--green)}
.question.incorrect{border-color:var(--red)}
.matrix{display:grid;grid-template-columns:minmax(240px,2fr) repeat(var(--cols,4),1fr);overflow:auto}
.matrix>*{padding:10px;border:1px solid var(--line);margin:-1px 0 0 -1px;text-align:center}
.matrix span{text-align:left}
.matrix i{display:block;width:22px;height:22px;border:1px solid #607080;margin:auto}
.results{position:sticky;bottom:20px;background:#152432;border:1px solid var(--cyan);padding:22px;display:flex;gap:20px;align-items:center}
.results strong{font-size:38px;color:var(--cyan)}
footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:30px;margin-top:70px;font-size:13px}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding:60px 0}
.cards{grid-template-columns:1fr}
.preview-heading,.preview-cta{display:block}
.preview-toggle{width:max-content;margin-top:22px}
.preview-question{padding:22px}
.preview-question:after{font-size:46px}
.preview-drag-layout,.preview-options{grid-template-columns:1fr}
.preview-matrix{grid-template-columns:minmax(180px,2fr) repeat(4,minmax(58px,1fr))}
.preview-cta .button{margin-top:18px}
.dashboard-head,.exam-top{display:block}
.checkout{margin-top:30px}
.nav nav>a:not(.button){display:none}
.question{grid-template-columns:35px 1fr}
.matrix{font-size:12px}
}