@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#082f49;--navy2:#0c4a6e;--cyan:#06b6d4;--cyan-light:#cffafe;--ink:#142331;--muted:#637381;--line:#dce7ed;--paper:#f3f8fb;--white:#fff;--green:#15803d;--green-bg:#dcfce7;--red:#b91c1c;--red-bg:#fee2e2;--shadow:0 18px 50px rgba(8,47,73,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.55}.topline{height:5px;background:linear-gradient(90deg,var(--cyan),#38bdf8,var(--navy2))}.site-header{max-width:1180px;margin:auto;padding:22px 28px;display:flex;align-items:center;gap:13px}.brand-mark{width:44px;height:44px;border-radius:13px;background:var(--navy);color:white;display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-1px}.eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--navy)}.brand-sub{margin:2px 0 0;font-size:12px;color:var(--muted)}.header-chip{margin-left:auto;border:1px solid #b6e7f0;background:#e7fbff;color:#087b91;border-radius:30px;padding:8px 13px;font-size:10px;font-weight:800;letter-spacing:.8px}main{max-width:1180px;margin:10px auto 70px;padding:0 28px}.screen{display:none}.screen.active{display:block}.hero{background:linear-gradient(120deg,#082f49 0%,#0c4a6e 65%,#087e9a 100%);border-radius:25px;color:white;padding:50px 54px;display:grid;grid-template-columns:1.2fr .8fr;min-height:330px;overflow:hidden;position:relative;box-shadow:var(--shadow)}.hero-copy{position:relative;z-index:2}.kicker{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#0891b2}.hero .kicker{color:#67e8f9}.hero h1,.results-heading h1,.feedback-heading h1,.review-panel h1,.exam-top h1{font-family:Manrope,sans-serif;letter-spacing:-1.7px;line-height:1.08;font-size:clamp(34px,4.5vw,54px);margin:17px 0 12px;font-weight:800}.hero h1 span{color:#67e8f9}.lead{font-size:19px;font-weight:700;margin:0 0 10px}.intro{max-width:490px;color:#d7eaf3;margin:0}.hero-stats{display:flex;gap:28px;margin-top:29px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font:800 21px Manrope,sans-serif}.hero-stats span{font-size:11px;color:#c5e4ee}.hero-art{position:relative;min-height:220px;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:240px;height:240px;background:radial-gradient(circle at 35% 30%,#67e8f9aa,#22d3ee11 65%);right:12px;top:0}.orb-two{width:150px;height:150px;background:radial-gradient(circle,#a5f3fc66,transparent 70%);left:0;bottom:0}.film-card{position:relative;width:190px;height:190px;border:1px solid #a5f3fc88;border-radius:25px;background:linear-gradient(145deg,#0e7490dd,#164e63aa);box-shadow:0 25px 60px #001e2c77;transform:rotate(7deg);display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.film-card span{display:grid;place-items:center;width:75px;height:75px;border-radius:22px;background:#cffafe;color:#0e7490;font-size:29px;box-shadow:0 0 0 9px #67e8f922}.film-card i{position:absolute;width:9px;height:9px;border-radius:2px;background:#67e8f9;top:18px}.film-card i:nth-of-type(1){left:20px}.film-card i:nth-of-type(2){right:20px}.film-card i:nth-of-type(3){bottom:18px;left:20px}.film-card b{font-size:11px;letter-spacing:2px}.floating-tag{position:absolute;bottom:8px;right:0;background:#ecfeff;color:#075985;padding:9px 13px;border-radius:11px;font-size:11px;font-weight:800;box-shadow:var(--shadow)}.welcome-grid{display:grid;grid-template-columns:1fr .92fr;gap:22px;margin-top:22px}.panel{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:27px;box-shadow:var(--shadow)}.panel h2{font:800 20px Manrope,sans-serif;margin:0 0 7px;letter-spacing:-.4px}.panel>p{color:var(--muted);font-size:13px;margin:0 0 20px}.instructions ul{padding-left:20px;margin:20px 0;color:#344b5b;font-size:13px}.instructions li{padding-left:5px;margin:12px 0}.privacy-note{border-radius:12px;padding:12px 14px;background:#effcff;color:#176579;font-size:11px;line-height:1.6}.student-form label{display:block;font-size:12px;font-weight:700;margin:16px 0 7px}.student-form label span{color:#dc2626}.student-form input{width:100%;border:1px solid #cbd9e2;border-radius:10px;padding:12px 13px;font:inherit;font-size:13px;outline:none;background:#fbfdfe}.student-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #06b6d422}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.btn{border:0;border-radius:11px;padding:12px 17px;font:700 12px 'DM Sans',sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}.btn:hover{transform:translateY(-1px)}.btn:focus-visible,.text-button:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}.btn-primary{background:var(--navy);color:white;box-shadow:0 7px 16px #082f4920}.btn-primary:hover{background:#0c4a6e}.btn-secondary{background:#edf4f7;color:var(--navy)}.btn-danger{background:#b91c1c;color:white}.btn-outline{border:1px solid #b7cbd7;color:var(--navy);background:white}.btn-full{width:100%;margin-top:23px;padding:15px}.btn-full span{float:right;font-size:17px;line-height:12px}.form-foot{text-align:center;font-size:10px!important;margin:12px 0 0!important}.exam-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.exam-top h1{font-size:32px;margin:8px 0}.exam-top p{margin:0;color:var(--muted);font-size:12px}.timer-box{border:1px solid #b7e8f0;background:#effcff;border-radius:14px;padding:12px 18px;text-align:center;min-width:130px}.timer-box span{display:block;color:#087b91;font-size:9px;font-weight:800;letter-spacing:1px}.timer-box strong{font:800 26px Manrope,sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}.timer-box.warning{background:#fff7ed;border-color:#fdba74}.timer-box.warning strong{color:#c2410c}.exam-layout{display:grid;grid-template-columns:235px 1fr;gap:20px;align-items:start}.question-map{padding:22px}.question-map h3{margin:0;font:800 16px Manrope}.question-map>p{font-size:11px;color:var(--muted);margin:5px 0 13px}.mini-progress,.progress-track{height:5px;border-radius:10px;background:#e6eef2;overflow:hidden}.mini-progress div,.progress-track div{height:100%;background:linear-gradient(90deg,var(--cyan),#38bdf8);width:0;transition:width .25s}.question-map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.map-q{aspect-ratio:1;border:1px solid #d7e3e9;border-radius:9px;background:#f8fbfc;color:#526675;font-weight:700;cursor:pointer;font-size:12px}.map-q.done{background:#cffafe;border-color:#67e8f9;color:#075985}.map-q.current{outline:2px solid var(--navy);outline-offset:1px}.map-legend{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.dot.done{background:#06b6d4}.dot.pending{background:#d6e1e7}.question-panel{padding:30px 34px}.question-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:17px}.category-chip{border-radius:20px;padding:6px 10px;background:#e6fbff;color:#087b91;font-size:10px;font-weight:800}.question-meta>span:last-child{font-size:11px;color:var(--muted);font-weight:700}.progress-track{margin-bottom:28px}.question-number{font-size:11px;color:var(--cyan);font-weight:800;letter-spacing:1px}.question-title{font:800 clamp(20px,2.4vw,27px)/1.35 Manrope,sans-serif;letter-spacing:-.55px;margin:10px 0 25px}.options-list{display:grid;gap:11px}.option-label{display:flex;gap:13px;align-items:flex-start;border:1px solid #d8e4ea;border-radius:13px;padding:15px;cursor:pointer;transition:border .15s,background .15s}.option-label:hover{border-color:#67cddd;background:#f4fdff}.option-label.selected{border-color:#0891b2;background:#ecfeff;box-shadow:0 0 0 1px #0891b2}.option-input{appearance:none;width:18px;height:18px;min-width:18px;border:1.5px solid #9aafbb;border-radius:50%;margin:2px 0 0;position:relative}.option-input:checked{border-color:#0891b2}.option-input:checked:after{content:'';position:absolute;inset:4px;background:#0891b2;border-radius:50%}.option-text{font-size:13px;color:#294251}.exam-nav{display:flex;justify-content:space-between;margin-top:27px}.exam-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e7eef2;margin-top:25px;padding-top:18px}.text-button{border:0;background:transparent;color:#087b91;font:700 12px 'DM Sans',sans-serif;cursor:pointer;padding:8px 0}.review-panel{margin:20px auto;max-width:900px}.review-panel h1{font-size:36px}.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.review-item{border:1px solid var(--line);border-radius:12px;padding:13px;background:#f9fcfd}.review-item strong{font-size:12px}.review-item p{font-size:11px;color:var(--muted);margin:5px 0}.review-item.done{border-color:#a5e9f2;background:#f0fdff}.review-item.pending{border-color:#fed7aa;background:#fffaf3}.review-item button{font-size:11px;color:#087b91;border:0;background:transparent;padding:4px 0;cursor:pointer;font-weight:800}.review-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.results-heading{text-align:center;margin:35px 0 24px}.results-heading h1{font-size:42px;margin:9px 0}.results-heading p{color:var(--muted);margin:0}.results-info{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 25px;font-size:12px;margin-bottom:18px}.results-info span{color:var(--muted)}.results-info strong{color:var(--ink)}.score-panel{display:flex;align-items:center;justify-content:center;gap:35px;padding:35px}.score-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) 0deg,#dbeafe 0deg);position:relative;flex-shrink:0}.score-ring:before{content:'';position:absolute;inset:10px;border-radius:50%;background:white}.score-ring>div{z-index:1;text-align:center;display:flex;flex-direction:column}.score-ring strong{font:800 36px Manrope;color:var(--navy);line-height:1.1}.score-ring span{font-size:10px;color:var(--muted)}.score-copy h2{font:800 23px Manrope;margin:7px 0}.score-copy p{max-width:450px;color:var(--muted);font-size:13px;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:18px 0}.stat-card{padding:20px;border-radius:16px;background:white;border:1px solid var(--line);box-shadow:var(--shadow)}.stat-card span{font-size:11px;color:var(--muted);font-weight:700}.stat-card strong{display:block;font:800 30px Manrope;margin-top:7px}.stat-card.correct strong{color:var(--green)}.stat-card.incorrect strong{color:var(--red)}.stat-card.blank strong{color:#b45309}.results-next{display:flex;align-items:center;justify-content:space-between;gap:20px}.results-next h2{margin-bottom:5px}.results-next p{margin:0;max-width:580px}.restart-button{display:block;margin:18px auto 0}.small-note{text-align:center;font-size:10px;color:var(--muted);margin-top:18px}.feedback-heading{margin:25px 0}.feedback-heading h1{font-size:38px;margin:10px 0}.feedback-heading p{color:var(--muted);margin:0}.feedback-list{display:grid;gap:15px}.feedback-card{background:white;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:var(--shadow)}.feedback-card.correct{border-left:4px solid #16a34a}.feedback-card.incorrect{border-left:4px solid #dc2626}.feedback-card h3{font:800 17px/1.4 Manrope;margin:10px 0 15px}.feedback-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.feedback-top span{font-size:10px;font-weight:800;color:var(--muted)}.status-pill{border-radius:30px;padding:5px 9px;font-size:10px!important}.status-pill.correct{background:var(--green-bg);color:var(--green)}.status-pill.incorrect{background:var(--red-bg);color:var(--red)}.feedback-option{padding:10px 12px;border-radius:9px;background:#f7fafc;margin:7px 0;font-size:12px;border:1px solid transparent}.feedback-option.is-correct{background:var(--green-bg);border-color:#86efac;color:#166534;font-weight:700}.feedback-option.is-selected-wrong{background:var(--red-bg);border-color:#fca5a5;color:#991b1b}.explanation{border-radius:10px;padding:12px 14px;background:#effcff;color:#155e75;font-size:12px;margin-top:13px}.feedback-source{color:var(--muted);font-size:10px;margin-top:8px}footer{max-width:1180px;margin:0 auto;padding:22px 28px 30px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}footer span:first-child{font-weight:800;letter-spacing:.8px;color:var(--navy)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#082f49;color:white;border-radius:12px;padding:12px 18px;font-size:12px;box-shadow:var(--shadow);transition:.2s;z-index:10;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}.empty-note{padding:20px;background:#fff7ed;border-radius:12px;color:#9a3412;font-size:12px}
@media(max-width:850px){main{padding:0 18px}.site-header{padding:18px}.hero{padding:35px 30px;grid-template-columns:1fr}.hero-art{position:absolute;right:-50px;bottom:-40px;opacity:.25;width:300px;pointer-events:none}.hero-copy{max-width:650px}.welcome-grid{grid-template-columns:1fr}.exam-layout{grid-template-columns:1fr}.question-map{order:2}.question-map-grid{grid-template-columns:repeat(10,1fr)}.map-legend{flex-direction:row}.question-panel{padding:25px}.question-map{padding:18px}.score-panel{justify-content:flex-start}.results-next{align-items:flex-start;flex-direction:column}.results-next .btn{width:100%}}
@media(max-width:560px){.header-chip{display:none}.hero{padding:30px 23px;border-radius:18px}.hero h1{font-size:37px}.hero-stats{gap:15px;flex-wrap:wrap}.hero-stats strong{font-size:18px}.hero-stats span{font-size:9px}.panel{padding:21px;border-radius:16px}.form-row{grid-template-columns:1fr;gap:0}.exam-top{align-items:flex-start;gap:12px;padding:20px;flex-direction:column}.timer-box{width:100%;display:flex;align-items:center;justify-content:space-between}.timer-box span{display:inline}.timer-box strong{font-size:21px}.question-panel{padding:19px}.question-meta{align-items:flex-start;flex-direction:column}.question-title{font-size:21px}.exam-bottom{align-items:stretch;flex-direction:column}.exam-bottom .btn{width:100%}.review-grid{grid-template-columns:repeat(2,1fr)}.review-actions{flex-direction:column}.review-actions .btn{width:100%}.score-panel{flex-direction:column;text-align:center;gap:20px}.score-ring{width:135px;height:135px}.score-ring strong{font-size:32px}.stats-grid{grid-template-columns:1fr}.stat-card{display:flex;align-items:center;justify-content:space-between}.stat-card strong{margin:0}.results-info{justify-content:flex-start}.feedback-top{align-items:flex-start;flex-direction:column}footer{flex-direction:column;padding:20px 18px}main{margin-top:5px;padding:0 14px}.question-map-grid{grid-template-columns:repeat(5,1fr)}}
