@font-face{font-family:DigitalKhatt;src:url("fonts/DigitalKhattV2.woff2") format("woff2");font-display:swap}
:root{--g:#173d2a;--g2:#24583b;--gold:#d99b2b;--bg:#f5f3ed;--card:#fff;--ink:#1f2822;--muted:#6c756e;--line:#e5e2d9;--ok:#176b3a;--bad:#ad2d2d;--warn:#a66a00;--soft:#eef4ef}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}
a{color:inherit}.top{background:linear-gradient(135deg,#102d1e,#173d2a 60%,#24583b);color:#fff;padding:22px 16px}
.topin{max-width:1080px;margin:auto}.brandrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home{display:inline-flex;gap:8px;align-items:center;text-decoration:none;background:#ffffff12;border:1px solid #ffffff2a;border-radius:10px;padding:9px 12px;font-weight:700}
.top h1{font-size:clamp(25px,4vw,42px);margin:18px 0 8px}.top p{margin:0;color:#dbe8df;line-height:1.55;max-width:820px}
.wrap{max-width:1080px;margin:auto;padding:22px 14px 60px}.grid{display:grid;grid-template-columns:1.5fr .7fr;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 5px 20px #0000000a}
.controls{display:grid;grid-template-columns:1fr 120px;gap:10px}.controls label,.small-label{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:5px}
select,button,input,textarea{font:inherit} select,input,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px;background:#fff;color:var(--ink)}
.ayahBox{margin-top:16px;border:1px solid var(--line);border-radius:16px;padding:18px;background:#fffdf8;min-height:140px}
.meta{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.pill{background:var(--soft);color:var(--g2);padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800}
.arabic{font-family:DigitalKhatt,"Amiri","Noto Naskh Arabic",serif;direction:rtl;text-align:right;font-size:clamp(30px,5vw,48px);line-height:2.05}
.arabic.hiddenText{filter:blur(13px);user-select:none}.arabic.initials .aw{filter:none}
.meal{margin-top:14px;line-height:1.65;color:#414b44;border-top:1px dashed var(--line);padding-top:12px}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.btn{border:1px solid var(--line);border-radius:11px;padding:11px 14px;background:#fff;font-weight:800;cursor:pointer}.btn:hover{border-color:#aebfb2}
.primary{background:var(--g);border-color:var(--g);color:#fff}.danger{background:#8f2c2c;color:#fff;border-color:#8f2c2c}.gold{background:var(--gold);border-color:var(--gold);color:#2b210f}
.status{margin-top:15px;padding:12px 14px;border-radius:12px;background:#f6f7f5;color:#475049;line-height:1.5}.status.listening{background:#fff2d9;color:#6f4b00}
.transcript{margin-top:12px}.transcript textarea{min-height:82px;direction:rtl;font-size:20px}
.result{margin-top:16px;display:none}.scoreRow{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap}.score{font-size:44px;font-weight:900;color:var(--g)}.sub{color:var(--muted);font-size:13px}
.words{direction:rtl;text-align:right;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;line-height:2.2}.w{font-family:DigitalKhatt,"Amiri",serif;font-size:25px;padding:2px 7px;border-radius:8px;border:1px solid transparent;cursor:default}.w.ok{background:#e6f5eb;color:var(--ok);border-color:#bce0c8}.w.bad{background:#fde8e8;color:var(--bad);border-color:#efbaba;cursor:pointer}.w.miss{background:#fff1d8;color:var(--warn);border-color:#e8c989;cursor:pointer}
.w.extra{background:#ececf6;color:#5d5b8c;border-color:#cac9e4}.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;font-size:12px}
.side h3{margin-top:0}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.statbox{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fafbf9}.num{font-size:25px;font-weight:900;color:var(--g)}.lbl{font-size:12px;color:var(--muted)}
.side section+section{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.list{display:grid;gap:8px;max-height:300px;overflow:auto}.item{border:1px solid var(--line);padding:9px;border-radius:10px;background:#fff;cursor:pointer;font-size:13px}.item:hover{border-color:#aac0ae}
.modebar{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.mode{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700;font-size:12px}.mode.active{background:var(--g);color:#fff;border-color:var(--g)}
.note{margin-top:18px;padding:14px;border-radius:14px;background:#fff7e7;border:1px solid #edd3a0;color:#66501f;line-height:1.55;font-size:13px}
.footer{text-align:center;padding:25px;color:var(--muted);font-size:13px}
@media(max-width:820px){.grid{grid-template-columns:1fr}.controls{grid-template-columns:1fr 100px}.side{order:2}.card{padding:14px}.arabic{font-size:34px}}