*{box-sizing:border-box}:root{--bg:#f4f2e9;--paper:#fffdf7;--green:#08352d;--green2:#0f4a3d;--mint:#e3eee8;--gold:#b68a3d;--ink:#18352f;--muted:#718079;--line:#e3e7df;--shadow:0 18px 55px #123a2a0d}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif}button,input,select,textarea{font:inherit}.top{min-height:74px;padding:12px clamp(15px,5vw,70px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fffdf7;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:4}.brand{display:flex;align-items:center;gap:12px;color:var(--green);text-decoration:none;font-weight:800;font-size:14px}.brand>b{width:42px;height:42px;border-radius:13px;background:var(--green);color:#e8d4a4;display:grid;place-items:center;font:28px Amiri}.brand small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.top nav{display:flex;gap:8px}.top nav a{padding:10px;border-radius:9px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:700}.top nav .active,.top nav a:hover{background:var(--mint);color:var(--green)}.top select{width:auto}.shell{max-width:1220px;margin:auto;padding:30px clamp(15px,4vw,42px)}.hero{background:var(--green);border-radius:26px;padding:clamp(25px,5vw,55px);color:white;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.hero>div:first-child{max-width:680px}.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:var(--gold);margin-bottom:12px}.hero h1{font-size:clamp(29px,4vw,46px);line-height:1.15;letter-spacing:-1.4px;margin:0 0 15px}.hero em{font-style:normal;color:#d9c28d}.hero p{font-size:14px;line-height:1.8;color:#d1e0d9}.hero aside{font-size:11px;line-height:1.6;color:#e0d0a6;margin-top:20px}.art{height:150px;width:150px;flex-shrink:0;border:1px solid #d8bc78;border-radius:50%;display:grid;place-content:center;text-align:center;color:#e7d29d;font:50px Amiri;box-shadow:0 0 70px #d8bc781c}.art small{font-size:22px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0 42px}.stats article,.panel{background:var(--paper);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.stats article{padding:18px}.stats span,.stats small{display:block;color:var(--muted);font-size:11px}.stats strong{display:block;font-size:30px;color:var(--green);margin:9px 0 4px}.section-title,.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.section-title{margin-bottom:18px}.section-title h2{font-size:26px;margin:0}.pill{font-size:9px;letter-spacing:1px;background:var(--mint);color:var(--green);padding:8px 11px;border-radius:30px;font-weight:800;white-space:nowrap}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:15px}.tab{display:flex;gap:13px;align-items:center;text-align:left;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);cursor:pointer}.tab>b{font-size:22px;color:#b4c4b8}.tab strong,.tab small{display:block}.tab strong{font-size:14px}.tab small{font-size:11px;color:var(--muted);margin-top:4px}.tab.active{background:var(--green);color:white;border-color:var(--green)}.tab.active>b{color:#d8bc78}.tab.active small{color:#c9d9d0}.grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:15px}.panel{padding:22px;min-width:0}.panel-head{margin-bottom:18px}.panel-head h3{font-size:19px;margin:0}.icon{height:35px;width:35px;border-radius:11px;background:var(--mint);display:grid;place-items:center;color:var(--green)}label{display:block;font-size:11px;font-weight:800;color:#52665d;margin:13px 0 7px}input,select,textarea{width:100%;border:1px solid #dce3dc;background:#fffefa;border-radius:10px;padding:11px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--green2);box-shadow:0 0 0 3px #0f4a3d14}textarea{resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.primary,.secondary,.file-label{border:0;border-radius:10px;padding:12px 14px;font-size:11px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--green);color:white}.secondary,.file-label{background:var(--mint);color:var(--green)}button:disabled{opacity:.45;cursor:not-allowed}#status,#recordStatus{font-size:11px;color:var(--muted);line-height:1.6;display:block;margin-top:12px;min-height:14px}.reader{display:flex;flex-direction:column}.audio-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}.speed{display:flex;align-items:center;gap:7px;margin:0 0 0 auto}.speed select{width:80px;padding:8px}.ayahs{max-height:440px;overflow:auto;padding:3px}.ayah{padding:15px 10px;border-bottom:1px solid var(--line)}.ayah-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;margin-bottom:9px}.ayah-meta button{border:1px solid var(--line);background:#fffefa;color:var(--green);padding:6px 9px;border-radius:8px;cursor:pointer}.arabic{font:28px/2 Amiri,serif;text-align:right;direction:rtl;color:#173c31;overflow-wrap:anywhere}.empty{text-align:center;padding:28px 10px;color:var(--muted);font-size:12px;line-height:1.7}.record{border-top:1px solid var(--line);padding-top:15px;margin-top:auto}.record>b{font-size:12px}.record p{font-size:11px;color:var(--muted);margin:5px 0 12px}.delete{background:#f8e9e5;color:#8e3d32;border:0;padding:10px;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer}.history{margin-top:17px}.history #history{display:grid;gap:9px}.history-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line);padding:13px;border-radius:11px}.history-item strong{display:block;font-size:12px}.history-item small{display:block;color:var(--muted);font-size:10px;margin-top:5px;line-height:1.5}.history-item button{border:0;background:var(--mint);color:var(--green);padding:8px 10px;border-radius:8px;font-size:10px;font-weight:800;cursor:pointer}.history-item .del{background:#f8e9e5;color:#8e3d32}.disclaimer{margin:20px 0;padding:17px 20px;border-left:3px solid var(--gold);background:#f0ead9;border-radius:0 12px 12px 0;font-size:12px}.disclaimer p{font-size:11px;line-height:1.8;color:#5c6d63;margin:6px 0 0}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0;color:var(--muted);font-size:10px}footer a{color:var(--green);text-decoration:none;font-weight:800}html[dir=rtl] .hero,html[dir=rtl] .section-title,html[dir=rtl] .panel-head{direction:rtl}html[dir=rtl] .history-item{direction:rtl}@media(max-width:850px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.art{width:110px;height:110px;font-size:36px}.top nav a{padding:8px}}@media(max-width:560px){.top{flex-wrap:wrap;gap:10px}.top nav{order:3;width:100%;justify-content:space-between}.top nav a{font-size:10px}.top select{margin-left:auto;width:auto}.hero{padding:25px 20px}.art{display:none}.hero h1{font-size:31px}.stats{gap:8px;margin-bottom:30px}.stats article{padding:14px}.stats strong{font-size:25px}.section-title{align-items:flex-start;flex-direction:column}.section-title h2{font-size:23px}.tabs{gap:6px}.tab{padding:11px 8px;gap:7px}.tab>b{font-size:17px}.tab strong{font-size:12px}.tab small{font-size:9px}.panel{padding:16px}.two{gap:8px}.actions>.primary,.actions>.secondary{flex:1}.history-item{grid-template-columns:1fr}.speed{margin-left:0}}
[hidden]{display:none!important}
.seg{display:flex;gap:6px;margin:0 0 4px}.vt{flex:1;border:1px solid var(--line);background:#fffefa;color:var(--muted);border-radius:10px;padding:10px;font-size:11px;font-weight:800;cursor:pointer}.vt.active{background:var(--green);color:#fff;border-color:var(--green)}
.pager{display:grid;grid-template-columns:48px 1fr 48px;gap:8px}.pager input{text-align:center}.pager button{font-size:20px;padding:0}#byPage small{display:block;margin-top:8px;font-size:10px;color:var(--muted);line-height:1.6}
.surah-sep{margin:12px 0 0;padding:8px 10px;background:var(--mint);color:var(--green);border-radius:9px;font-size:12px;font-weight:800;display:flex;justify-content:space-between}
.test{margin-top:17px}.t-intro{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 6px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.t-box{margin:16px 0 0;padding:18px;border:1px dashed #cdd8cf;border-radius:14px;background:#fffefa;min-height:120px}
.t-top{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:700}.t-flag{color:#8e3d32}.t-bar{height:4px;background:var(--mint);border-radius:4px;margin:8px 0 14px;overflow:hidden}.t-bar i{display:block;height:100%;background:var(--gold)}
.t-label{font-size:11px;font-weight:800;color:#52665d;margin:12px 0 6px}.t-hint{font:26px/2 Amiri,serif;color:var(--muted);margin:6px 0 14px;direction:rtl;text-align:right}.t-answer{background:#f0ead9;border-radius:10px;padding:6px 14px;margin:8px 0}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.grades button{border:0;border-radius:10px;padding:12px 8px;font-size:11px;font-weight:800;cursor:pointer;background:var(--mint);color:var(--green)}.grades [data-g=shaky]{background:#f3e8c9;color:#7a5a14}.grades [data-g=forgot]{background:#f8e9e5;color:#8e3d32}
.t-done strong{display:block;font-size:20px;color:var(--green)}.t-done small{display:block;color:var(--muted);font-size:11px;margin:6px 0}.t-done ul{margin:0 0 14px;padding-left:18px;font-size:12px;line-height:1.9}.t-done em{color:var(--muted);font-style:normal}
#testLog h4{font-size:12px;margin:18px 0 8px}.t-row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.t-row b{color:var(--green)}
.vt:focus-visible,.grades button:focus-visible,.pager button:focus-visible,.t-box button:focus-visible{outline:2px solid var(--green2);outline-offset:2px}
@media(max-width:560px){.three{grid-template-columns:1fr}.grades{grid-template-columns:1fr}}