:root { --navy:#071a32; --navy2:#10335c; --gold:#e6b448; --paper:#f6f8fc; --ink:#11223b; --muted:#64748b; --line:#dce5f0; --good:#137a52; --bad:#c43d4c; }
* { box-sizing:border-box; }
body { margin:0; background:#eaf0f7; color:var(--ink); font:16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(100%, 820px); min-height:100vh; margin:auto; background:var(--paper); box-shadow:0 0 34px #10204020; }
.hero { min-height:100vh; padding:44px 24px 32px; color:#fff; display:flex; flex-direction:column; background:radial-gradient(circle at 85% 16%,#2c5d91 0,transparent 33%),linear-gradient(152deg,#061426,#113c68); }
.brand { display:flex; gap:13px; align-items:center; color:#d8e7f8; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.brand-logo { display:block; width:min(300px, 78vw); height:auto; max-height:64px; object-fit:contain; object-position:left center; padding:6px 10px; border-radius:10px; background:#fff; }
.mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid #ffffff55; border-radius:14px; font-size:22px; }
.sca-logo { width:54px; height:42px; display:flex; flex-direction:column; justify-content:center; padding:3px 6px 2px; border:1px solid #f3c96a; border-radius:8px; line-height:1; letter-spacing:0; background:#071a3275; }
.sca-logo strong { color:#f3c96a; font-size:21px; font-style:italic; letter-spacing:-.08em; }
.sca-logo em { margin-top:3px; color:#e2edf8; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.09em; white-space:nowrap; }
.hero-body { margin:auto 0; }
.eyebrow { color:#f3c96a; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:12px 0 14px; max-width:600px; font-size:clamp(35px,9vw,58px); line-height:1.03; letter-spacing:-.05em; }
.hero p { max-width:520px; color:#d5e4f3; font-size:18px; }
.stats { display:flex; gap:10px; margin:24px 0 28px; flex-wrap:wrap; }
.stat { border:1px solid #ffffff28; background:#ffffff10; border-radius:14px; padding:10px 13px; min-width:112px; }
.stat b { display:block; font-size:21px; color:#fff; }
.stat span { font-size:12px; color:#bfd0e3; }
.primary, .secondary { border:0; border-radius:14px; padding:15px 18px; font-weight:800; }
.primary { background:var(--gold); color:#1d2a3a; box-shadow:0 8px 20px #0003; }
.primary:disabled { cursor:not-allowed; opacity:.48; box-shadow:none; }
.secondary { background:#fff; color:#173a62; border:1px solid var(--line); }
.page { padding:22px 18px 34px; }
.topbar { position:sticky; top:0; z-index:5; margin:-22px -18px 20px; padding:15px 18px; background:#f6f8fcf4; backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.icon-btn { width:36px; height:36px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--navy2); font-size:19px; }
.topbar b { font-size:15px; }
.kicker { font-size:12px; color:#356995; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h2 { margin:5px 0 6px; font-size:28px; letter-spacing:-.035em; }
.sub { margin:0 0 20px; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:13px; }
.card { padding:18px; text-align:left; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 4px 12px #234b7610; }
.card:hover { border-color:#a7c6e8; transform:translateY(-1px); }
.card .card-icon { font-size:28px; display:block; margin-bottom:11px; }
.card b { display:block; font-size:17px; }
.card p { margin:7px 0 0; font-size:14px; color:var(--muted); }
.badge { display:inline-block; margin-top:13px; padding:4px 8px; border-radius:99px; background:#e9f2fd; color:#285984; font-size:12px; font-weight:700; }
.notice { margin-top:18px; padding:14px; border-radius:14px; color:#54667b; background:#eaf1f8; font-size:13px; }
.account-bar { width:100%; display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 0 20px; padding:12px 14px; border:1px solid #c8dcec; border-radius:14px; background:#eef6ff; color:#285984; text-align:left; font-size:13px; }
.auth-card { max-width:470px; margin:22px auto; padding:22px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 6px 18px #234b7610; }.auth-card h3{margin:18px 0 4px}.auth-card hr{border:0;border-top:1px solid var(--line);margin:20px 0}.auth-form{display:grid;gap:14px}.auth-form label{display:grid;gap:6px;font-size:13px;font-weight:750;color:#314962}.auth-form input{width:100%;padding:13px;border:1px solid #cbd8e5;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-weight:500}.auth-form input:focus{outline:3px solid #dcebf9;border-color:#477ba8}.password-wrap{display:flex;gap:8px;align-items:center}.password-wrap input{min-width:0}.show-password{flex:0 0 auto;border:1px solid #b9cde0;border-radius:10px;background:#f5f9fc;color:#28557d;padding:11px 12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.show-password:hover{background:#e8f2fa}.auth-form .primary{width:100%;margin-top:4px}.form-message{min-height:20px;margin:0;color:#b23a48;font-size:13px}.form-message.success{color:var(--good)}.text-btn{margin-top:18px;border:0;background:transparent;color:#356995;font-weight:750;text-decoration:underline}
.dev-credit { margin:28px 0 2px; text-align:center; color:#718096; font-size:12px; }.dev-credit b{color:#2e5c84}.cover-credit{display:inline-block;margin-top:4px;color:#e3eef9}
.question { padding:22px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.progress { height:7px; margin-bottom:22px; border-radius:99px; background:#e6edf5; overflow:hidden; }
.progress i { display:block; height:100%; background:linear-gradient(90deg,#27679d,var(--gold)); }
.counter { font-size:13px; font-weight:800; color:#3d6c94; }
.prompt { margin:8px 0 20px; font-size:20px; font-weight:750; line-height:1.35; }
.options { display:grid; gap:10px; }
.option { padding:14px; display:flex; gap:11px; align-items:flex-start; text-align:left; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); }
.option span { flex:0 0 26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#315e84; background:#edf4fa; font-size:12px; font-weight:800; }
.option.correct { border-color:#75c8a6; background:#e9f8f0; }.option.correct span{background:#137a52;color:#fff}.option.wrong{border-color:#eca9ad;background:#fff1f1}.option:disabled{cursor:default}
.answer-note { margin:16px 0 0; color:#506278; font-size:13px; }.answer-note b{color:#244c70}
.next-row { display:flex; justify-content:flex-end; margin-top:18px; }
.scenario { margin-bottom:14px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.scenario h3 { margin:0 0 8px; font-size:17px; }.scenario p{margin:0;color:#43576e;white-space:pre-line}.scenario details{margin-top:12px}.scenario summary{font-weight:800;color:#245c8a;cursor:pointer}.scenario ul{padding-left:20px;color:#42566d}.scenario li{margin:8px 0}.legal{margin-top:12px!important;padding-top:11px;border-top:1px dashed var(--line);font-size:13px;color:#65778d!important}
.score { padding:23px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:20px; }.score b{display:block;font-size:52px;line-height:1;color:#174a76}.score p{color:var(--muted)}
@media (max-width:480px){ .hero{padding:30px 20px 24px}.page{padding:18px 14px 28px}.topbar{margin:-18px -14px 18px;padding:12px 14px}.prompt{font-size:18px}.question{padding:17px}.card{padding:16px} }