:root{
  --bg:#f4f7fb;--surface:#fff;--surface-2:#f8fafc;--text:#172033;--muted:#6b7485;
  --line:#e5eaf1;--primary:#3157d5;--primary-2:#2647b6;--primary-soft:#eef2ff;
  --success:#15803d;--warning:#b45309;--danger:#b42318;--shadow:0 12px 36px rgba(25,36,62,.08);
  --radius:18px;--radius-sm:12px;--sidebar:250px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.hidden{display:none!important}
a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.small{font-size:.86rem}.tiny{font-size:.76rem}.nowrap{white-space:nowrap}.grow{flex:1}.right{text-align:right}.center{text-align:center}
.shell{min-height:100vh}.topbar{height:68px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:-.02em}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--primary),#6684ed);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 8px 20px rgba(49,87,213,.24)}
.top-actions{display:flex;align-items:center;gap:10px}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.8rem;color:var(--muted);font-weight:650}.dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.btn{border:0;border-radius:11px;padding:10px 14px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease;min-height:40px}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(49,87,213,.18)}.btn-primary:hover{background:var(--primary-2)}.btn-soft{background:var(--primary-soft);color:var(--primary)}.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--text)}.btn-danger{background:#fff0ef;color:var(--danger)}.btn-sm{padding:7px 10px;min-height:34px;font-size:.84rem}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.teacher-layout{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:calc(100vh - 68px)}.sidebar{background:#fff;border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:68px;height:calc(100vh - 68px);overflow:auto}.nav-title{padding:0 10px 10px;color:#99a1af;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.nav-list{display:grid;gap:5px}.nav-btn{width:100%;border:0;background:transparent;color:#596274;text-align:left;padding:11px 12px;border-radius:11px;font-weight:700;display:flex;align-items:center;gap:10px}.nav-btn:hover{background:#f7f9fc}.nav-btn.active{background:var(--primary-soft);color:var(--primary)}.nav-icon{width:24px;height:24px;border-radius:8px;background:#f2f4f8;display:grid;place-items:center;font-size:.78rem}.nav-btn.active .nav-icon{background:#dfe6ff}.sidebar-foot{margin-top:24px;padding:15px;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}
.main{padding:28px;max-width:1500px;width:100%;margin:0 auto}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.page-head h1{margin:0;font-size:1.72rem;letter-spacing:-.035em}.page-head p{margin:5px 0 0;color:var(--muted)}
.grid{display:grid;gap:16px}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.card.flat{box-shadow:none}.metric{min-height:126px;display:flex;flex-direction:column;justify-content:space-between}.metric .label{font-size:.82rem;color:var(--muted);font-weight:750}.metric .value{font-size:2rem;font-weight:900;letter-spacing:-.05em}.metric .foot{font-size:.78rem;color:var(--muted)}
.section-card{padding:0;overflow:hidden}.section-card-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.section-card-head h2{font-size:1rem;margin:0}.section-card-body{padding:20px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}.data-table{border-collapse:collapse;width:100%;min-width:850px}.data-table th,.data-table td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.data-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#7c8595;background:#fafbfc;position:sticky;top:0;z-index:1}.data-table td{font-size:.9rem}.data-table tr:last-child td{border-bottom:0}.status{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:.75rem;font-weight:800}.status-live{color:#147a3d;background:#eaf8ef}.status-draft{color:#946009;background:#fff7df}.status-pending{color:#6b4aa8;background:#f2edff}
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}.field{grid-column:span 6;display:grid;gap:7px}.field.full{grid-column:1/-1}.field.third{grid-column:span 4}.field.quarter{grid-column:span 3}.field label{font-size:.78rem;font-weight:800;color:#596274}.input,.textarea,.select{width:100%;border:1px solid #dbe1ea;background:#fff;border-radius:11px;padding:10px 12px;color:var(--text);outline:none;transition:.15s ease}.textarea{min-height:120px;resize:vertical}.input:focus,.textarea:focus,.select:focus{border-color:#94a7ef;box-shadow:0 0 0 3px #edf1ff}.hint{font-size:.75rem;color:var(--muted)}
.choice-editor{display:grid;gap:9px}.choice-row{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center}.choice-letter{width:36px;height:36px;border-radius:10px;background:#f3f5f8;display:grid;place-items:center;font-weight:850;color:#596274}.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;color:#7d8796}.icon-btn:hover{background:#f7f9fb}
.dialogue-workspace{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;gap:18px;align-items:stretch}.character-slot{border:1px dashed #ccd4e0;border-radius:16px;background:#fafbfc;padding:12px;display:flex;align-items:flex-end;justify-content:center;min-height:380px;overflow:hidden}.character-slot img{max-height:355px;object-fit:contain}.dialogue-center{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;min-height:380px}.dialogue-line{display:grid;grid-template-columns:86px 1fr 38px;gap:8px;align-items:center;margin-bottom:9px}.speaker-toggle{display:flex;background:#f3f5f8;border-radius:10px;padding:3px}.speaker-toggle button{flex:1;border:0;background:transparent;border-radius:7px;padding:6px 5px;font-weight:800;color:#808899}.speaker-toggle button.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(22,31,49,.08)}
.character-library{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.char-option{border:1px solid var(--line);border-radius:13px;background:#fff;padding:7px;aspect-ratio:1/1.08;display:flex;align-items:end;justify-content:center;overflow:hidden;position:relative}.char-option img{max-height:100%;object-fit:contain}.char-option.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.dialogue-preview{background:linear-gradient(#f8fbff,#f4f7fb);border:1px solid var(--line);border-radius:18px;min-height:380px;display:grid;grid-template-columns:180px 1fr 180px;gap:14px;padding:18px;overflow:hidden}.dialogue-preview .person{display:flex;align-items:end;justify-content:center}.dialogue-preview .person img{max-height:330px;object-fit:contain}.bubble-stack{display:flex;flex-direction:column;justify-content:center;gap:10px}.bubble{max-width:88%;border-radius:16px;padding:10px 12px;font-size:.9rem;box-shadow:0 4px 12px rgba(27,42,70,.06)}.bubble.left{align-self:flex-start;background:#fff;border:1px solid var(--line)}.bubble.right{align-self:flex-end;background:var(--primary);color:#fff}
.notice{padding:12px 14px;border-radius:12px;background:#f6f8fb;border:1px solid var(--line);color:#626d7e;font-size:.86rem}.notice strong{color:var(--text)}
.score-input{width:72px;text-align:center;padding:8px;border:1px solid #dbe1ea;border-radius:9px}.score-total{font-weight:900;font-size:1rem}.pending-value{color:#9aa2ae;font-style:italic}
/* Student */
.student-body{background:#f5f7fb}.student-wrap{max-width:980px;margin:0 auto;padding:34px 22px 70px}.student-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}.hero-copy h1{font-size:2.5rem;line-height:1.08;letter-spacing:-.055em;margin:0 0 14px}.hero-copy p{font-size:1.03rem;color:var(--muted);max-width:620px}.hero-art{min-height:350px;background:linear-gradient(145deg,#edf2ff,#f8fafc);border:1px solid #dfe6f3;border-radius:28px;display:flex;align-items:end;justify-content:center;overflow:hidden;position:relative}.hero-art img{position:relative;z-index:1;max-height:340px;max-width:96%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(25,36,62,.12))}.hero-art:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:#dce5ff;top:42px;right:38px}
.start-card{margin-top:24px}.start-row{display:grid;grid-template-columns:1fr auto;gap:12px}.sections-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:18px}.section-pill{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:#fff}.section-pill b{display:block;font-size:.86rem}.section-pill span{font-size:.75rem;color:var(--muted)}
.exam-shell{max-width:1120px;margin:0 auto;padding:22px}.exam-head{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 16px;display:flex;align-items:center;gap:15px;position:sticky;top:12px;z-index:15;box-shadow:0 8px 24px rgba(25,36,62,.07)}.exam-title{font-weight:850}.progress-rail{height:7px;border-radius:999px;background:#edf0f5;overflow:hidden;flex:1}.progress-bar{height:100%;width:0;background:var(--primary);border-radius:inherit;transition:.25s}.progress-label{font-size:.8rem;color:var(--muted);font-weight:700}
.question-card{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:28px}.question-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:20px}.part-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--primary)}.q-number{font-size:.78rem;color:var(--muted);font-weight:700}.question-text{font-size:1.3rem;line-height:1.45;font-weight:800;letter-spacing:-.018em;margin:0 0 20px}.passage{background:#f8fafc;border:1px solid var(--line);border-radius:15px;padding:17px;margin-bottom:18px;color:#3c4658;white-space:pre-line}.q-image{max-height:360px;margin:0 auto 20px;border-radius:14px;object-fit:contain}
.options{display:grid;gap:10px}.option{display:flex;align-items:flex-start;gap:12px;border:1px solid #e0e5ed;border-radius:14px;padding:13px 14px;background:#fff;transition:.16s;cursor:pointer}.option:hover{border-color:#b9c5ee;background:#fafbff}.option.selected{border-color:var(--primary);background:#f2f5ff;box-shadow:0 0 0 2px #e2e8ff}.option-letter{min-width:30px;height:30px;border-radius:9px;background:#f1f3f7;display:grid;place-items:center;font-weight:850}.option.selected .option-letter{background:var(--primary);color:#fff}.option input{display:none}
.writing-box{min-height:260px;font-size:1rem;line-height:1.65}.word-counter{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-size:.79rem}.audio-box{border:1px solid #dfe5ef;background:#f8fafc;border-radius:15px;padding:15px;display:flex;align-items:center;gap:13px;margin-bottom:18px}.play-btn{width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;border:0;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 8px 18px rgba(49,87,213,.2)}.audio-wave{flex:1;height:34px;display:flex;align-items:center;gap:4px}.audio-wave i{display:block;width:4px;border-radius:99px;background:#b3bfdd;height:10px}.audio-wave i:nth-child(2n){height:20px}.audio-wave i:nth-child(3n){height:28px}.audio-info{font-size:.78rem;color:var(--muted)}
.exam-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.nav-group{display:flex;gap:9px}.review-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:20px 0}.review-cell{border:1px solid var(--line);border-radius:10px;padding:9px 4px;text-align:center;font-size:.78rem;font-weight:850;background:#fff}.review-cell.done{background:#eaf8ef;color:#16743b;border-color:#cdebd7}.review-cell.current{background:var(--primary-soft);color:var(--primary);border-color:#ccd6ff}
.submit-success{text-align:center;padding:46px 24px}.success-mark{width:72px;height:72px;border-radius:50%;background:#e9f8ef;color:#16803e;margin:0 auto 18px;display:grid;place-items:center;font-size:2rem;font-weight:900}.submit-success h2{font-size:1.7rem;margin:0 0 8px}.submit-success p{max-width:560px;margin:0 auto;color:var(--muted)}
.toast{position:fixed;right:22px;bottom:22px;background:#172033;color:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 14px 30px rgba(0,0,0,.18);z-index:99;font-size:.88rem;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(13,20,34,.42);display:grid;place-items:center;padding:20px;z-index:50}.modal{background:#fff;border-radius:20px;width:min(760px,96vw);max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.22)}.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-body{padding:20px}
@media(max-width:1100px){.grid-5{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.dialogue-workspace{grid-template-columns:160px 1fr 160px}.dialogue-preview{grid-template-columns:140px 1fr 140px}.character-library{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.teacher-layout{display:block}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px;overflow:auto}.nav-title,.sidebar-foot{display:none}.nav-list{display:flex;min-width:max-content}.nav-btn{width:auto}.nav-icon{display:none}.main{padding:18px}.page-head{flex-direction:column}.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr}.form-grid{display:block}.field{margin-bottom:13px}.dialogue-workspace{grid-template-columns:1fr}.character-slot{min-height:230px}.dialogue-preview{grid-template-columns:100px 1fr 100px}.student-hero{grid-template-columns:1fr}.hero-art{min-height:280px}.hero-copy h1{font-size:2.1rem}.sections-strip{grid-template-columns:repeat(2,1fr)}.review-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){.topbar{padding:0 14px}.top-actions .badge{display:none}.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.main{padding:14px}.card{padding:16px}.question-card{padding:19px}.exam-shell{padding:10px}.exam-head{top:6px}.exam-title{display:none}.question-text{font-size:1.13rem}.exam-nav{align-items:stretch;flex-direction:column}.nav-group{display:grid;grid-template-columns:1fr 1fr}.nav-group .btn{width:100%}.student-wrap{padding:24px 14px}.hero-copy h1{font-size:1.9rem}.start-row{grid-template-columns:1fr}.sections-strip{grid-template-columns:1fr 1fr}.dialogue-preview{grid-template-columns:72px 1fr 72px;padding:10px;gap:8px}.dialogue-preview .person img{max-height:220px}.bubble{font-size:.78rem;padding:8px}.review-grid{grid-template-columns:repeat(5,1fr)}.character-library{grid-template-columns:repeat(3,1fr)}}
@media print{.topbar,.sidebar,.btn,.exam-nav{display:none!important}body{background:#fff}.main,.exam-shell{padding:0}.card,.question-card{box-shadow:none;border:0}}

/* Phase 2: timed exam + live teacher controls */
.exam-timer{min-width:74px;text-align:center;padding:7px 10px;border-radius:11px;background:#eef2ff;color:var(--primary);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.exam-timer.warning{background:#fff7df;color:#a55b00}.exam-timer.danger{background:#fff0ef;color:var(--danger);animation:timerPulse 1s ease-in-out infinite}
@keyframes timerPulse{50%{transform:scale(1.04)}}
.attempt-info{margin-top:12px;padding:10px 12px;border-radius:11px;font-size:.82rem;line-height:1.45;border:1px solid var(--line)}
.attempt-info.info{background:#f4f7ff;color:#3650a3;border-color:#dce4ff}.attempt-info.success{background:#edf9f1;color:#17673a;border-color:#ccebd7}.attempt-info.warning{background:#fff8e7;color:#8a5800;border-color:#f2dfaa}
.return-countdown{margin-top:18px;font-size:.82rem;color:var(--muted)}
.timeout-modal{width:min(480px,94vw)}.timeout-mark{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#fff0ef;color:var(--danger);font-weight:950;font-size:2rem}
.listening-visual{min-height:250px;grid-template-columns:minmax(110px,180px) 1fr minmax(110px,180px);align-items:end;margin-bottom:18px}
.listening-visual .person img{max-height:235px}.listening-center{align-self:center;text-align:center;color:var(--muted);display:grid;justify-items:center;gap:14px;font-size:.85rem}
.listen-rings{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;position:relative}.listen-rings:before{content:"▶";width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;padding-left:3px;z-index:2}
.listen-rings span{position:absolute;inset:8px;border:2px solid #b9c7fb;border-radius:50%;animation:listenRing 1.8s ease-out infinite}.listen-rings span:nth-child(2){animation-delay:.6s}.listen-rings span:nth-child(3){animation-delay:1.2s}
@keyframes listenRing{0%{transform:scale(.72);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.status-waiting{color:#6b4aa8;background:#f2edff}.status-done{color:#3d5668;background:#edf2f5}.status-timeout{color:#a63b32;background:#fff0ef}
.live-legend{display:flex;gap:13px;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}.live-legend span{display:flex;align-items:center;gap:6px}.live-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.live-dot.active{background:#22c55e}.live-dot.waiting{background:#8b5cf6}.live-dot.done{background:#94a3b8}
.live-table{min-width:1180px}.mono-time{font-variant-numeric:tabular-nums}.table-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:190px}.action-row{display:flex;gap:10px;margin-top:14px}.action-row .btn{flex:1}
.score-input:disabled{background:#f3f5f8;color:#9aa2ae;cursor:not-allowed}

@media(max-width:860px){.exam-timer{min-width:68px}.listening-visual{grid-template-columns:90px 1fr 90px;min-height:220px}.listening-visual .person img{max-height:200px}}
@media(max-width:560px){.exam-head{gap:9px}.progress-label{display:none}.exam-timer{min-width:65px;padding:6px 8px}.listening-visual{grid-template-columns:70px 1fr 70px;min-height:185px;padding:10px}.listening-visual .person img{max-height:165px}.listening-center strong{font-size:.72rem}.listen-rings{width:58px;height:58px}.listen-rings:before{width:34px;height:34px}.action-row{flex-direction:column}}

/* Phase 3: writing threshold, topic analytics and A4 student reports */
.req{color:var(--danger)}.topic-chip{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#4059b8;font-size:.75rem;font-weight:800;white-space:nowrap}
.writing-warning{margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);display:grid;gap:3px;font-size:.84rem}.writing-warning strong{font-size:.86rem}.writing-warning span{color:inherit;opacity:.9}.writing-warning.error{background:#fff1f0;border-color:#f1c6c1;color:#9d2f26}.writing-warning.warning{background:#fff8e7;border-color:#efdca8;color:#8a5800}.writing-warning.success{background:#edf9f1;border-color:#ccebd7;color:#17673a}.review-cell.incomplete{background:#fff1f0!important;color:#a3382e!important;border-color:#efc5c1!important}.text-danger{color:var(--danger)!important}.text-warning{color:var(--warning)!important}.text-success{color:var(--success)!important}
.report-editor-grid{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(480px,1.12fr);gap:16px}.report-writing{min-height:210px}.gemini-box{min-height:220px}.report-inline{display:flex;align-items:center;justify-content:space-between;gap:12px}.report-student-mini{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px solid var(--line);margin:14px 0}.report-student-mini span{font-size:.76rem;color:var(--muted)}.report-preview{border:1px solid var(--line);border-radius:15px;background:#fcfdff;min-height:560px;padding:18px}.preview-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px}.preview-report-head h3{font-size:1.35rem;margin:4px 0}.preview-total{display:flex;align-items:flex-end;gap:3px;padding:10px 13px;border-radius:13px;background:var(--primary-soft);color:var(--primary)}.preview-total b{font-size:1.7rem;line-height:1}.preview-total span{font-weight:800;font-size:.75rem}.mini-score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}.mini-score-grid>div{border:1px solid var(--line);border-radius:11px;padding:10px 7px;text-align:center;background:#fff}.mini-score-grid span{display:block;color:var(--muted);font-size:.66rem}.mini-score-grid b{font-size:1.1rem;margin-right:2px}.mini-score-grid small{font-size:.65rem;color:var(--muted)}.report-mini-title{margin:16px 0 7px;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:#7e8797;font-weight:900}.topic-preview-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}.topic-preview-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;border-bottom:1px solid var(--line);font-size:.8rem}.topic-preview-list>div:last-child{border-bottom:0}.topic-preview-list span:first-child{display:flex;flex-direction:column}.topic-preview-list small{color:var(--muted)}.writing-status-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:11px;font-size:.82rem}.writing-status-row.good{background:#edf9f1;color:#17673a}.writing-status-row.warn{background:#fff8e7;color:#8a5800}.writing-status-row.bad{background:#fff1f0;color:#9d2f26}.report-feedback-preview{margin-top:12px;padding:12px;border-radius:12px;background:#f7f9fc;border:1px solid var(--line);font-size:.79rem}.report-feedback-preview p{margin:7px 0 0;line-height:1.5;color:#596274}
.report-page-body{background:#e9edf4}.report-toolbar{max-width:210mm;margin:18px auto 10px;display:flex;justify-content:space-between;gap:10px}.a4-report-sheet{width:210mm;min-height:297mm;margin:0 auto 28px;background:#fff;padding:14mm 14mm 12mm;box-shadow:0 14px 42px rgba(25,36,62,.14);color:#172033}.report-loading,.report-error{padding:60px 20px;text-align:center;color:var(--muted)}.a4-report-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding-bottom:7mm;border-bottom:2px solid #1f3d96}.report-kicker{font-size:9pt;letter-spacing:.12em;font-weight:900;color:#3157d5}.a4-report-head h1{font-size:19pt;line-height:1.12;margin:2mm 0 1.5mm;letter-spacing:-.03em}.report-meta{font-size:9pt;color:#667085}.a4-total{min-width:33mm;border-radius:5mm;background:#eef2ff;padding:5mm;text-align:center;color:#3157d5}.a4-total b{font-size:27pt;line-height:1}.a4-total span{font-size:9pt;font-weight:900}.a4-info-row{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-top:5mm}.a4-info-row>div{border:1px solid #e4e8ef;border-radius:3mm;padding:3mm}.a4-info-row span{display:block;color:#7b8492;font-size:7.5pt}.a4-info-row b{display:block;font-size:9pt;margin-top:1mm}.a4-section{margin-top:5mm}.a4-section h2{font-size:11pt;margin:0 0 2.5mm}.a4-section-title{display:flex;justify-content:space-between;align-items:end;gap:10mm}.a4-section-title span{font-size:7.5pt;color:#7b8492}.a4-score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2.5mm}.a4-score-grid>div{border:1px solid #e4e8ef;border-radius:3mm;padding:3mm;text-align:center}.a4-score-grid span{display:block;font-size:7.5pt;color:#737d8c}.a4-score-grid b{font-size:18pt;margin-right:1mm}.a4-score-grid small{font-size:7pt;color:#8892a0}.a4-topic-table{width:100%;border-collapse:collapse;font-size:7.5pt}.a4-topic-table th,.a4-topic-table td{border:1px solid #e2e7ee;padding:2.2mm 2.5mm;text-align:left}.a4-topic-table th{background:#f6f8fb;color:#687384;font-size:6.8pt;text-transform:uppercase;letter-spacing:.04em}.a4-topic-table th:nth-child(n+3),.a4-topic-table td:nth-child(n+3){text-align:center;width:12mm}.a4-writing-summary{display:grid;grid-template-columns:1fr 1fr 2fr;border-radius:3mm;padding:3mm;gap:3mm}.a4-writing-summary.good{background:#edf9f1}.a4-writing-summary.warn{background:#fff8e7}.a4-writing-summary.bad{background:#fff1f0}.a4-writing-summary div{display:grid;gap:1mm}.a4-writing-summary b{font-size:7pt;color:#697383}.a4-writing-summary span{font-size:8.5pt;font-weight:750}.a4-feedback{border:1px solid #dfe5ee;border-radius:3mm;padding:3.5mm;min-height:29mm;font-size:8.2pt;line-height:1.48;color:#455063;white-space:normal}.a4-report-foot{margin-top:6mm;padding-top:3mm;border-top:1px solid #e3e7ed;text-align:right;color:#8992a0;font-size:7pt}
@page{size:A4;margin:0}@media print{.no-print{display:none!important}.report-page-body{background:#fff}.a4-report-sheet{margin:0;width:210mm;min-height:297mm;box-shadow:none;padding:13mm 13mm 11mm;page-break-after:always}.a4-report-sheet:last-child{page-break-after:auto}}
@media(max-width:1050px){.report-editor-grid{grid-template-columns:1fr}.mini-score-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.report-toolbar{margin:10px}.a4-report-sheet{width:calc(100% - 20px);min-height:auto;margin:0 10px 20px;padding:18px}.a4-info-row,.a4-score-grid{grid-template-columns:repeat(2,1fr)}.a4-writing-summary{grid-template-columns:1fr}.report-inline{align-items:flex-start;flex-direction:column}}

/* Phase 4: dialogue voice controls */
.voice-config-card{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:#fafbfc;padding:12px}.voice-config-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.voice-config-title span{font-size:.72rem;color:var(--muted);font-weight:800;letter-spacing:.02em}.voice-config-grid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}.voice-config-card .field{margin:0}.voice-config-card label{font-size:.72rem}.voice-config-card .select{min-height:40px}.voice-config-card .tiny{margin-top:8px}.voice-option-note{font-size:.72rem;color:var(--muted)}
@media(max-width:700px){.voice-config-grid{grid-template-columns:1fr}.voice-config-title{align-items:flex-start;flex-direction:column}}


/* Phase 4.1: AS Fen Lisesi branding */
:root{--school-blue:#0d537a;--school-teal:#2fb5c6;--school-teal-soft:#e8f8fb;}
.school-topbar{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(239,250,252,.96));}
.school-brand{gap:14px}
.brand-copy{display:grid;line-height:1.02}
.brand-copy strong{font-size:.95rem;letter-spacing:-.02em}
.brand-copy span{font-size:.8rem;color:var(--school-blue);font-weight:800}
.brand-logo{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(13,83,122,.12);flex:0 0 auto}
.school-part{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--school-teal-soft),#f4fbfd);color:var(--school-blue);border:1px solid #cbe9ee;padding:7px 12px;border-radius:999px}
.start-card{border:1px solid #d5ebef;background:linear-gradient(180deg,#ffffff,#fbfeff)}
.exam-brand{display:flex;align-items:center;gap:12px;min-width:220px}
.exam-brand-logo{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(13,83,122,.14);flex:0 0 auto}
.exam-brand-copy{display:grid;line-height:1.02}
.exam-brand-copy span{font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--school-blue)}
.exam-head{background:linear-gradient(180deg,#fff,#fbfeff)}
.exam-head .exam-title{font-size:1rem;color:var(--text)}
@media(max-width:860px){.exam-brand{min-width:unset}.brand-copy strong{font-size:.88rem}.brand-copy span{font-size:.74rem}}
@media(max-width:560px){.brand-logo{width:40px;height:40px}.exam-brand-logo{width:38px;height:38px}.exam-brand-copy span{font-size:.62rem}.exam-head .exam-title{display:block;font-size:.92rem}}


/* Phase 4.2: print layout lock — keep A4 print identical to on-screen report */
@page{size:A4 portrait;margin:0}
@media print{
  html,body{
    width:210mm!important;
    min-width:210mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
  body.report-page-body{
    width:210mm!important;
    min-width:210mm!important;
    background:#fff!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  .no-print{display:none!important}
  .a4-report-sheet{
    box-sizing:border-box!important;
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
    min-height:297mm!important;
    margin:0!important;
    padding:14mm 14mm 12mm!important;
    box-shadow:none!important;
    background:#fff!important;
    transform:none!important;
    zoom:1!important;
  }
  /* Do not allow the mobile breakpoint to turn desktop report grids into 2 columns while printing. */
  .a4-info-row{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3mm!important;
    margin-top:5mm!important;
  }
  .a4-score-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:2.5mm!important;
  }
  .a4-writing-summary{
    display:grid!important;
    grid-template-columns:1fr 1fr 2fr!important;
    gap:3mm!important;
  }
  .a4-section-title{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
  }
  .a4-topic-table{
    width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
  }
  .a4-topic-table th:nth-child(1),.a4-topic-table td:nth-child(1){width:21%!important}
  .a4-topic-table th:nth-child(2),.a4-topic-table td:nth-child(2){width:50%!important}
  .a4-topic-table th:nth-child(n+3),.a4-topic-table td:nth-child(n+3){width:7.25%!important}
  .a4-report-head,.a4-info-row,.a4-score-grid,.a4-writing-summary,.a4-feedback{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .a4-topic-table tr{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
}


/* Phase 4.5: corrected entrance, supplied canvas animation, centered completion */
.launch-body{
  min-height:100vh;margin:0;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%,#f7fcff 0%,#edf6fb 48%,#f7fafc 100%);
}
.launch-screen{width:100%;min-height:100vh;display:grid;place-items:center;padding:24px}
.launch-link{
  appearance:none;border:0;background:transparent;color:var(--school-blue);padding:18px;
  display:grid;justify-items:center;align-content:center;gap:18px;text-align:center;cursor:pointer;
  font-weight:850;letter-spacing:.005em;transition:transform .2s ease,opacity .2s ease;
}
.launch-link:hover{transform:translateY(-2px) scale(1.015)}
.launch-link:focus-visible{outline:3px solid rgba(47,181,198,.38);outline-offset:10px;border-radius:24px}
.launch-logo{width:clamp(170px,18vw,245px);height:auto;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(13,83,122,.14))}
.launch-link span{display:block;max-width:460px;font-size:clamp(.96rem,1.1vw,1.08rem);line-height:1.45}
.launching .launch-screen{pointer-events:none;opacity:.12;transition:opacity .28s ease}
.transition-overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at center,rgba(255,255,255,.98) 0%,rgba(238,247,251,.98) 57%,rgba(227,241,247,.98) 100%);
  opacity:0;transition:opacity .28s ease;
}
.transition-overlay.show{opacity:1}.transition-overlay.fade-out{opacity:0}
.highfive-frame{
  width:min(94vw,1100px);height:min(82vh,720px);border:0!important;outline:0!important;
  background:transparent!important;display:block;overflow:hidden;pointer-events:none;
}
@media(max-width:650px){.launch-logo{width:min(58vw,225px)}.highfive-frame{width:100vw;height:72vh}}

.success-stage{
  position:relative;min-height:100vh;overflow:hidden;
  background:radial-gradient(circle at top,#f5fbfe 0%,#eef6fb 48%,#f7fafc 100%);
}
.success-wrap{
  width:100%;max-width:none;min-height:100vh;margin:0;padding:32px 20px;
  display:grid;place-items:center;position:relative;z-index:3;
}
.celebration-card{
  width:min(92vw,720px);margin:0 auto;padding:38px 34px!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:24px;position:relative;z-index:3;
}
.success-school-logo{
  display:block!important;width:clamp(108px,13vw,150px)!important;height:auto!important;
  object-fit:contain;margin:0 auto 18px!important;align-self:center!important;
  filter:drop-shadow(0 12px 22px rgba(13,83,122,.13));
}
.success-kicker{font-weight:850;color:var(--school-blue);margin:0 0 8px}
.return-countdown{margin-top:20px;color:var(--muted);font-size:.86rem}
.fireworks{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.firework-burst{position:absolute;width:1px;height:1px;animation:fireworkBurst 1.8s ease-out both}
.firework-burst i{
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--c);
  box-shadow:0 0 9px color-mix(in srgb,var(--c),transparent 25%);
  animation:fireworkParticle 1.45s cubic-bezier(.16,.72,.26,1) both;
}
@keyframes fireworkBurst{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes fireworkParticle{0%{transform:translate(0,0) scale(.35);opacity:0}12%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}
@media(max-width:600px){.success-wrap{padding:20px 12px}.celebration-card{padding:28px 18px!important}.success-school-logo{width:112px!important}}

/* Phase 5: supplied student PNG + grouped reading passages */
.passage-title{font-size:.88rem;font-weight:900;letter-spacing:.04em;color:var(--school-blue);margin:0 0 10px;text-transform:uppercase}
.passage-text{white-space:pre-line}
.passage-tools{display:flex;align-items:center;gap:12px;margin:-3px 0 18px;padding:10px 12px;border:1px solid #dce7f2;border-radius:13px;background:#f8fbfd}
.passage-tools span{font-size:.78rem;color:var(--muted)}
.reading-modal{width:min(820px,96vw)}
.modal-passage{margin:0;max-height:68vh;overflow:auto;font-size:.96rem;line-height:1.68}
.writing-prompts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
.writing-prompt{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;text-align:left;color:var(--text);transition:.16s;min-height:150px}
.writing-prompt:hover{border-color:#b9c5ee;background:#fafbff}
.writing-prompt.selected{border-color:var(--primary);background:#f2f5ff;box-shadow:0 0 0 2px #e2e8ff}
.writing-prompt b{display:block;margin-bottom:7px;color:var(--primary);font-size:.82rem}
.writing-prompt span{display:block;white-space:pre-line;font-size:.9rem;line-height:1.48}
.writing-choice-note{font-size:.78rem;color:var(--muted);margin:-5px 0 14px}
@media(max-width:700px){.writing-prompts{grid-template-columns:1fr}.passage-tools{align-items:flex-start;flex-direction:column}}

/* Phase 6: one-time access codes, teacher gate, exam open/close and ranked results */
.teacher-auth-stage{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:22px;
  background:radial-gradient(circle at 50% 28%,#f9fdff 0%,#edf5fa 52%,#e7f0f6 100%);
}
.teacher-auth-card{
  width:min(94vw,420px);background:#fff;border:1px solid #d7e4ee;border-radius:24px;padding:30px;
  box-shadow:0 24px 70px rgba(24,58,84,.14);text-align:center;
}
.teacher-auth-card img{width:112px;margin:0 auto 16px}.teacher-auth-card h1{margin:8px 0 8px;font-size:1.7rem}.teacher-auth-card p{margin:0 0 20px;color:var(--muted);font-size:.9rem}.teacher-auth-card .field{text-align:left;margin-top:12px}
.exam-control-card{display:flex;align-items:center;justify-content:space-between;gap:20px;border-color:#cbddea;background:linear-gradient(135deg,#fff 0%,#f5fbfe 100%)}
.exam-control-card p{margin:6px 0 0;font-size:.84rem}.exam-control-state{display:flex;align-items:center;gap:9px;margin-top:5px;font-size:1.18rem}.exam-state-dot{width:12px;height:12px;border-radius:50%;background:#c53d3d;box-shadow:0 0 0 5px rgba(197,61,61,.10)}.exam-state-dot.open{background:#1b9b5f;box-shadow:0 0 0 5px rgba(27,155,95,.12)}
.code-output{min-height:310px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.5}.rank-cell{font-weight:900;font-size:1rem;color:var(--school-blue)}.access-code-input{text-transform:uppercase;letter-spacing:.18em;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;font-size:1.05rem}
.exam-closed-screen{min-height:100vh;width:100%;display:grid;place-items:center;padding:24px}.exam-closed-card{width:min(92vw,620px);text-align:center;background:#fff;border:1px solid #d9e6ef;border-radius:26px;padding:38px 30px;box-shadow:0 20px 60px rgba(20,55,80,.10)}.exam-closed-card img{width:145px;margin:0 auto 18px}.exam-closed-card h1{margin:14px 0 10px;color:#10233f;font-size:clamp(1.55rem,3.5vw,2.35rem)}.exam-closed-card p{margin:0;color:var(--muted);line-height:1.6}
@media(max-width:650px){.teacher-auth-card{padding:24px 18px}.exam-control-card{align-items:stretch;flex-direction:column}.exam-control-card .btn{width:100%}.code-output{min-height:240px}.exam-closed-card{padding:28px 18px}}