:root{color-scheme:light;--bg:#f4f5ef;--panel:#fffef8;--ink:#163e36;--muted:#64746b;--line:#dce3d6;--accent:#126b50;--gold:#aa8133;--soft:#edf3e8;--size:40px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tahoma,Arial,sans-serif;line-height:1.7}body.dark{color-scheme:dark;--bg:#10221d;--panel:#182e27;--ink:#eef4df;--muted:#b4c5b9;--line:#354b40;--accent:#5ab58c;--gold:#d9b15b;--soft:#263e32}a{color:inherit}button,input,select{font:inherit}button,.button{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);min-height:46px;padding:10px 18px;cursor:pointer;font-weight:700;text-decoration:none}button:hover,.button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}body.dark .primary{color:#10221d}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.topbar{max-width:1220px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:20px}.brand img{object-fit:contain}.brand small{display:block;font-size:10px;letter-spacing:3px;color:var(--muted)}nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}nav>a{text-decoration:none}select,input[type=number]{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:11px;min-height:46px;width:100%}nav select{width:auto;max-width:130px}.layout{max-width:960px;margin:auto;padding:35px 24px}.heading{text-align:center;max-width:760px;margin:0 auto 30px}.eyebrow{color:var(--gold);font-size:13px;font-weight:bold}.heading h1{font-size:clamp(30px,5vw,48px);line-height:1.4;margin:12px 0}.heading p{color:var(--muted);margin:0;font-size:17px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 8px 35px #142f2310;margin-bottom:22px}.fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.fields label{font-size:14px;font-weight:bold}.fields input,.fields select{display:block;margin-top:7px}.setup-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}#notice:not(:empty){padding:12px 0;color:var(--muted)}#notice.error{color:#b44332}.session-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700}.font-control{display:flex;align-items:center;gap:10px;font-size:12px}.font-control input{width:105px;accent-color:var(--accent)}.progress-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;margin-top:16px}progress{width:100%;height:7px;accent-color:var(--gold);display:block;margin:8px 0 28px}.verse{font-family:'Amiri Quran','Traditional Arabic','Noto Naskh Arabic',serif;font-size:var(--size);line-height:2.5;text-align:center;min-height:160px;padding:24px 12px;overflow-wrap:anywhere;border-block:1px solid var(--line)}.mask{display:inline-block;background:var(--soft);border-bottom:2px solid var(--line);border-radius:5px;width:1.5em;height:.5em;vertical-align:middle;margin-inline:3px}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:12px}.reveal-actions,.assessment,.verse-nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.assessment{border-top:1px solid var(--line);padding-top:22px;margin-top:20px}.assessment button{flex:1}.assessment #good[aria-pressed=true]{background:#dcefdc;color:#245730;border-color:#65946b}.assessment #weak[aria-pressed=true]{background:#fff0d9;color:#80521a;border-color:#c39149}.verse-nav{margin-top:22px;justify-content:space-between}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:var(--soft);border-radius:12px;text-align:center;padding:18px 8px}.stat strong{display:block;font-size:30px}.stat span{font-size:12px}.summary-actions{display:flex;gap:10px;flex-wrap:wrap}.foot-notes{font-size:12px;color:var(--muted);margin:30px 0}.foot-notes summary{cursor:pointer;font-size:15px;color:var(--ink);font-weight:bold}.teacher-cta{background:#163f32;color:#f5f5e4;border-radius:20px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:20px}.teacher-cta h2{font-size:21px;margin:0}.teacher-cta p{font-size:13px;opacity:.8}.teacher-cta .button{background:#e5c178;color:#183a2c;border:0;white-space:nowrap}footer{text-align:center;font-size:12px;color:var(--muted);padding:20px}@media(max-width:650px){.topbar{padding:15px;align-items:flex-start}.brand{font-size:16px}.topbar nav{gap:7px;justify-content:flex-end}.topbar nav>a{display:none}nav button{font-size:11px;padding:7px;min-height:40px}nav select{font-size:11px;max-width:100px;padding:7px;min-height:40px}.layout{padding:25px 14px}.panel{padding:18px;border-radius:17px}.fields{grid-template-columns:1fr 1fr}.surah-field{grid-column:1/-1}.session-top{flex-wrap:wrap}.verse{padding:18px 2px;line-height:2.3}.reveal-actions button{padding:9px 10px;font-size:13px}.verse-nav button{font-size:12px;padding:8px 10px;flex:1}.stats{grid-template-columns:repeat(2,1fr)}.teacher-cta{display:block}.teacher-cta .button{display:inline-block;white-space:normal}.assessment button{font-size:13px}.heading p{font-size:14px}}

.audio-section{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.audio-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.repeat-control{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}.repeat-control input{width:18px;height:18px;accent-color:var(--accent)}.audio-section audio{display:block;width:100%;margin-top:15px}.audio-section p{margin-bottom:0;text-align:center}#audio-status.error{color:#b44332}

.voice-section{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px;margin:20px 0}.voice-section p{margin-bottom:0;text-align:center}#mic[aria-pressed=true]{background:#a44338;color:#fff;border-color:#a44338}#mic-status.error{color:#b44332}
