@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#060919;--panel:#0d1428;--line:#24304b;--muted:#a7b6cf;--text:#f2f6ff;--cyan:#57e4ed;--blue:#3b70fa;--font:'Plus Jakarta Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 12%,#13284980,transparent 45%),var(--bg);color:var(--text);font:16px/1.65 var(--font)}a{color:var(--cyan)}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.topbar{max-width:1320px;margin:auto;padding:28px 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:white;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:.06em}.brand-mark{display:grid;place-items:center;width:41px;height:44px;border:1px solid var(--cyan);color:var(--cyan);font-size:28px;border-radius:8px 18px 8px 8px}.brand-light{font-weight:400;color:var(--cyan)}.brand small{display:block;font:10px/1.5 var(--font);letter-spacing:.2em;color:var(--muted)}.top-label{font:12px 'Space Grotesk',sans-serif;letter-spacing:.16em;color:var(--muted)}.version{display:inline-block;margin-left:15px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;color:var(--cyan)}main{max-width:1232px;padding:64px 44px 70px;margin:auto;min-height:75vh}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Space Grotesk',sans-serif;line-height:1.1;letter-spacing:-.04em}h1{font-size:clamp(40px,5.2vw,70px);font-weight:500;margin-bottom:24px}h2{font-size:36px}h3{font-size:19px;line-height:1.4}.eyebrow{font:12px 'Space Grotesk',sans-serif;color:var(--cyan);letter-spacing:.19em;margin-bottom:22px}.muted,.intro{color:var(--muted)}.intro{max-width:510px;font-size:17px}.accent{color:var(--cyan)}.welcome-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;align-items:center}.meta-row{display:flex;gap:28px;margin:28px 0;color:var(--muted);font-size:14px}.meta-row strong{color:var(--text);display:block;font-size:20px;font-family:'Space Grotesk',sans-serif}.start-card{background:linear-gradient(135deg,#132139,#0b1023);border:1px solid #2b3f5c;border-radius:20px;padding:30px;box-shadow:0 25px 80px #0004}.card-tag{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;letter-spacing:.13em;margin-bottom:24px}.card-tag span:last-child{color:var(--cyan)}.start-card h3{font-family:'Space Grotesk',sans-serif;font-size:25px}.field{display:block;margin:20px 0}.field span{display:block;margin-bottom:8px;font-size:14px}.input,textarea,select{width:100%;border:1px solid #354560;border-radius:9px;background:#070e1e;color:var(--text);padding:13px 15px}.input::placeholder,textarea::placeholder{color:#7e90ad}textarea{min-height:190px;resize:vertical}.check-label{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:14px;margin:22px 0}.check-label input{margin-top:7px;accent-color:var(--cyan)}.button{border:0;border-radius:9px;padding:14px 22px;font-weight:700;background:var(--cyan);color:#061323;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.button.wide{width:100%}.button.secondary{background:transparent;color:var(--text);border:1px solid #3b4c69}.button.small{font-size:14px;padding:9px 15px}.fine{font-size:13px;color:var(--muted)}.steps-overview{margin-top:58px;border-top:1px solid var(--line);padding-top:27px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.step-number{color:var(--cyan);font:14px 'Space Grotesk',sans-serif}.steps-overview h3{font-size:16px;margin:8px 0 4px}.steps-overview p{font-size:14px;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px}.side-name{font-size:22px;font-family:'Space Grotesk',sans-serif;overflow-wrap:anywhere}.stage{display:flex;gap:12px;padding:15px 0;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line)}.stage.active{color:var(--cyan)}.stage .num{font-family:'Space Grotesk',sans-serif}.progress-track{height:5px;border-radius:9px;background:#22314c;overflow:hidden;margin:14px 0}.progress-track>span{display:block;height:100%;background:var(--cyan);transition:width .25s}.assessment-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px}.question-top{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted);margin-bottom:24px}.question{font-size:23px;line-height:1.5;margin:22px 0;font-weight:500}.options{display:grid;gap:12px;border:0;padding:0;margin:0}.option{display:flex;gap:14px;padding:15px 18px;border:1px solid #354560;border-radius:10px;background:#090f21;cursor:pointer}.option:has(input:checked){border-color:var(--cyan);background:#102c3a}.option input{accent-color:var(--cyan);flex-shrink:0}.actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:27px}.reading{padding:22px;background:#08101e;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;margin:22px 0;color:#ccdaee;line-height:1.9}.audio-tools{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.helper{padding:15px 18px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:14px;margin:18px 0}.result-header{max-width:720px}.result-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:25px;margin-top:32px}.score-card,.result-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px}.big-level{font:60px/1.2 'Space Grotesk',sans-serif;color:var(--cyan);letter-spacing:-.06em;margin:18px 0}.skill-row{margin:22px 0}.skill-label{display:flex;justify-content:space-between;gap:12px;font-size:14px}.skill-track{height:8px;background:#22314c;border-radius:10px;margin-top:9px;overflow:hidden}.skill-track span{height:100%;display:block;background:linear-gradient(90deg,var(--blue),var(--cyan))}.pending{color:#ebce85}.next-plan{border-top:1px solid var(--line);margin-top:30px;padding-top:24px}.next-plan li{margin-bottom:12px;color:var(--muted)}footer{max-width:1232px;margin:auto;padding:26px 44px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px;gap:20px}#notice:not(:empty){position:fixed;bottom:20px;right:20px;max-width:400px;background:#183143;border:1px solid var(--cyan);padding:15px;border-radius:10px;z-index:5}.teacher-grid{display:grid;gap:24px}.review-answer{background:#0a1123;padding:22px;border:1px solid var(--line);border-radius:12px;margin:20px 0;white-space:pre-wrap;overflow-wrap:anywhere}.rubrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.rubric-label{display:block;font-size:14px;margin:15px 0}.rubric-label select{margin-top:8px}.print-only{display:none}.status-message{color:var(--cyan);font-size:14px}.error{color:#ffb8b8}.screen-title:focus{outline:none}legend{padding:0}.pill{display:inline-block;border:1px solid #314563;border-radius:100px;padding:5px 12px;color:var(--muted);font-size:12px}audio{max-width:100%;margin:12px 0}.export-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.brand-image{display:block;width:240px;height:auto;max-width:100%;object-fit:contain}.whatsapp-button{background:#85edb5;color:#072116}.submission-callout{margin:24px 0}.submission-callout .fine{margin:10px 0 0}
@media(max-width:680px){.brand-image{width:200px}}
.share-dialog{color:var(--text);background:var(--panel);border:1px solid #3d536e;border-radius:18px;width:min(660px,calc(100% - 32px));max-height:90vh;padding:28px;overflow:auto}.share-dialog::backdrop{background:#020715bf;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.share-dialog h2{font-size:30px}.share-dialog textarea{font-size:14px;line-height:1.65;min-height:180px}.share-dialog .fine{margin:12px 0}.share-dialog .eyebrow{line-height:1.7}
@media(max-width:900px){.welcome-grid{gap:30px}.workspace{grid-template-columns:180px minmax(0,1fr);gap:24px}main{padding:40px 24px}.topbar{padding:24px}.start-card,.assessment-card{padding:24px}.result-layout{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.welcome-grid,.workspace,.result-layout{grid-template-columns:1fr}.top-label{display:none}main{padding:30px 20px 45px}.topbar{padding:20px}.steps-overview{grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.workspace aside .stage{display:none}.workspace aside{border-bottom:1px solid var(--line);padding-bottom:15px}.side-name{font-size:19px;margin-bottom:5px}.assessment-card{padding:21px}.question{font-size:20px}h2{font-size:30px}.meta-row{gap:24px}.rubrics{grid-template-columns:1fr}footer{padding:22px 20px;flex-direction:column}.result-card,.score-card{padding:24px}}
@media print{color-scheme:light;body{background:white!important;color:#172239;font:12px/1.5 system-ui}.topbar,footer,.export-actions,.button,.no-print,#notice{display:none!important}main{padding:0;max-width:none}h1,h2{font-size:28px;color:#172239}.result-layout{display:block}.score-card,.result-card,.review-answer{background:white;color:#172239;border:1px solid #bbb;padding:18px;margin:15px 0;break-inside:avoid}.muted,.fine,.intro,.skill-label,.next-plan li{color:#43536b}.accent,.big-level{color:#17657b}.big-level{font-size:34px}.print-only{display:block}.skill-track{border:1px solid #bbb}.result-card h3{color:#172239}}