:root{--bg:#f4f1eb;--surface:#fffdf8;--text:#4d5a53;--text-strong:#17251f;--muted:#6d776f;--quran-text:#18281f;--border:#e3ded2;--border-strong:#cfc6b5;--accent:#2f6f4f;--shadow:0 16px 42px #2f383114;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Cairo,Segoe UI,Tahoma,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;direction:rtl}body{background:linear-gradient(180deg, #fffdf8ad, #f4f1eb00), var(--bg);min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:32px 0 56px}.hero-section{grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:stretch;gap:24px;margin-bottom:18px;display:grid}.hero-copy,.status-panel,.control-card,.reading-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:8px}.hero-copy{padding:34px}.eyebrow{color:var(--muted);margin:0 0 8px;font-size:.95rem;font-weight:700}h1{color:var(--text-strong);margin:0;font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.15}.subtitle{color:var(--text);margin:12px 0 0;font-size:1.1rem}.status-panel{align-items:center;gap:14px;padding:24px;display:flex}.status-panel strong{color:var(--text-strong);margin-bottom:4px;display:block}.status-panel p{color:var(--muted);margin:0;line-height:1.8}.mic-dot{width:18px;height:18px;box-shadow:0 0 0 2px var(--border);background:#9ca3af;border:3px solid #fff;border-radius:999px;flex:0 0 18px}.mic-dot-listening{background:#2f855a;box-shadow:0 0 0 2px #2f855a47,0 0 0 8px #2f855a1a}.mic-dot-error,.mic-dot-unsupported{background:#b45309}.control-card{grid-template-columns:minmax(210px,1.25fr) minmax(120px,.7fr) minmax(120px,.7fr) auto;align-items:end;gap:10px;margin-bottom:18px;padding:14px 16px;display:grid}.field-group{gap:5px;display:grid}label{color:var(--text-strong);font-size:.88rem;font-weight:700}select,button{font:inherit}select{border:1px solid var(--border-strong);min-height:38px;color:var(--text-strong);background:#fff;border-radius:7px;padding:0 10px}.actions{flex-wrap:nowrap;align-items:end;gap:8px;display:flex}button{border:1px solid var(--border-strong);min-height:38px;color:var(--text-strong);cursor:pointer;background:#fff;border-radius:7px;padding:0 12px;transition:transform .16s,box-shadow .16s,border-color .16s}button:hover{border-color:#789584;transform:translateY(-1px);box-shadow:0 8px 18px #384b411f}button:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #3e63dd38}.primary-action{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800}.ghost-action{color:#8a4a14;background:#fff8ed;border-color:#efd2a8}.error-note{color:#8a3b13;background:#fff4ed;border:1px solid #edc0a2;border-radius:7px;grid-column:1/-1;margin:0;padding:14px 16px}.recitation-error{color:#7c2d12;text-align:center;background:#fff7ed;border:1px solid #d49a6a;border-radius:7px;margin:0 0 18px;padding:10px 14px;font-weight:800}button:disabled,select:disabled{cursor:not-allowed;opacity:.62;box-shadow:none;transform:none}.reading-card{margin-bottom:18px;padding:18px clamp(14px,4vw,34px)}.mushaf-page{background:radial-gradient(circle at 8% 8%,#df37892e 0 10px,#0000 11px),radial-gradient(circle at 92% 8%,#df37892e 0 10px,#0000 11px),radial-gradient(circle at 8% 92%,#df37892e 0 10px,#0000 11px),radial-gradient(circle at 92% 92%,#df37892e 0 10px,#0000 11px),linear-gradient(90deg,#00859629,#0000 12% 88%,#00859629),linear-gradient(#ffffffc7,#fffaeef0),#fff8ea;border:8px double #1f7f8a;border-radius:3px;max-width:820px;min-height:min(1040px,128vw);margin:0 auto 24px;padding:clamp(34px,5vw,66px) clamp(24px,5vw,64px);position:relative;overflow:hidden;box-shadow:inset 0 0 0 4px #f3d379,inset 0 0 0 8px #18778447,inset 0 0 0 14px #e2408f1f}.mushaf-page:before,.mushaf-page:after{content:"";pointer-events:none;opacity:.42;background:repeating-linear-gradient(90deg,#1f7f8a 0 10px,#e8c95d 10px 15px,#cc3b8b 15px 20px,#0000 20px 28px);height:22px;position:absolute;inset-inline:20px}.mushaf-page:before{top:18px}.mushaf-page:after{bottom:18px}.page-header{color:#3f3324;background:linear-gradient(90deg,#248a942e,#0000 18% 82%,#248a942e),#fff6df;border:3px double #248a94;border-radius:999px;justify-content:center;gap:12px;width:min(420px,82%);margin:6px auto 26px;padding:12px 26px;font-size:1rem;font-weight:800;display:flex;box-shadow:inset 0 0 0 2px #e8c95d80}.page-header span:first-child{display:none}.mushaf-page-body{color:var(--quran-text);text-align:justify;text-align-last:center;font-family:Noto Naskh Arabic,Traditional Arabic,Amiri,serif;font-size:clamp(1.55rem,3.25vw,2.35rem);font-weight:600;line-height:2.45}.mushaf-page-opening{width:min(900px,100%);min-height:auto;box-shadow:none;background:0 0;border:0;margin:0 auto;padding:0;overflow:visible}.mushaf-page-opening:before,.mushaf-page-opening:after{display:none}.written-mushaf-page{background:linear-gradient(90deg,#1a84911a,#0000 15% 85%,#1a84911a),#fffaf0;border:8px double #1b7f8e;min-height:min(920px,128vw);padding:clamp(26px,5vw,58px) clamp(16px,4vw,46px);box-shadow:inset 0 0 0 4px #e7c765,inset 0 0 0 12px #de438b1a,0 16px 32px #43341f1f}.written-surah-title{color:#32271c;text-align:center;background:#fff5dd;border:3px double #1b7f8e;border-radius:999px;width:min(460px,86%);margin:0 auto clamp(32px,7vw,64px);padding:12px 24px;font-family:Noto Naskh Arabic,Traditional Arabic,serif;font-size:clamp(1.35rem,3vw,2.3rem);font-weight:700}.written-page-number{color:#6c5a35;margin-top:4px;font-family:Cairo,Segoe UI,Tahoma,Arial,sans-serif;font-size:.48em;font-weight:700;display:block}.written-bismillah{color:#181713;text-align:center;margin:0 auto clamp(18px,4vw,34px);font-family:Noto Naskh Arabic,Traditional Arabic,Amiri,serif;font-size:clamp(1.45rem,4vw,3rem);font-weight:600;line-height:2}.written-fatiha{color:#181713;text-align:center;width:min(720px,100%);margin:0 auto;font-family:Noto Naskh Arabic,Traditional Arabic,Amiri,serif;font-size:clamp(1.45rem,4vw,3rem);font-weight:600;line-height:2.15}.written-generic-surah{text-align:center}.written-line{white-space:normal;min-height:2.15em;margin:0}.written-ayah{margin-inline:.18em;display:inline}.written-word{margin-inline:.06em;transition:filter .18s,opacity .18s;display:inline-block}.written-ayah-blurred{filter:blur(7px);opacity:.34;-webkit-user-select:none;user-select:none}.written-ayah-revealed{filter:none;opacity:1}.written-ayah-number{color:#5f471e;vertical-align:middle;background:#fff7df;border:2px solid #d4aa49;border-radius:999px;place-items:center;width:1.55em;height:1.55em;margin-inline:.18em;font-family:Cairo,Segoe UI,Tahoma,Arial,sans-serif;font-size:.42em;font-weight:800;line-height:1;display:inline-grid}.written-number-blurred{filter:blur(4px);opacity:.34}.ayah{transition:background .18s;display:inline}.ayah-current{background:#dfece459}.mushaf-page-opening .ayah{text-align:center;min-height:2.1em;margin:.06em 0;display:block}.mushaf-page-opening .ayah-current{background:0 0}.mushaf-page-opening .hidden-ayah-placeholder{min-height:2.1em;display:block}.mushaf-page-opening .word-read{color:var(--quran-text);text-decoration:none}.mushaf-page-opening .word-current{color:var(--quran-text);box-shadow:none;background:0 0;-webkit-text-decoration:underline #1f5d43a6;text-decoration:underline #1f5d43a6}.ayah-hidden{opacity:.9}.hidden-ayah-placeholder{display:inline}.hidden-word,.ayah-hidden .ayah-number{visibility:hidden}.quran-word{text-underline-offset:.26em;border-radius:2px;margin-inline:.06em;padding:0 .03em .02em;text-decoration-thickness:2px;display:inline}.word-pending{color:var(--quran-text)}.word-read{color:#1f5d43;text-decoration:underline}.word-current{color:#143a2c;background:#316f4f1f;box-shadow:inset 0 -.18em #316f4f2e}.word-skipped{color:#805a16;border-bottom:2px dotted #c6922e}.word-uncertain{color:#5a6170;border-bottom:2px dashed #9aa6b5}.word-blurred{filter:blur(7px);opacity:.34;-webkit-user-select:none;user-select:none}.ayah-number{color:#1d6a65;vertical-align:middle;background:#fffdf8b8;border:1px solid #8fb2a1;border-radius:999px;place-items:center;width:1.85em;height:1.85em;margin-inline:.26em .34em;font-family:Cairo,Segoe UI,Tahoma,Arial,sans-serif;font-size:.48em;font-weight:700;line-height:1;display:inline-grid}.ayah-number-blurred{filter:blur(4px);opacity:.34}@media (width<=760px){.app-shell{width:min(100% - 18px,1180px);padding-top:12px}.hero-section,.control-card{grid-template-columns:1fr}.hero-copy,.status-panel,.control-card,.reading-card{padding:16px}.actions button{flex:150px}.actions{flex-wrap:wrap}}