/* Warm glass: a quiet, sculptural treatment of the existing recitation UI. */
:root{--paper:#e9e1d7;--ink:#272624;--muted:#77716b;--line:#d9d1c7;--green:#34312e;--surface:rgba(255,253,250,.64);--field:rgba(255,255,255,.6);--accent:#f58a3c;--ring:#cf7336}
html{min-height:100%;background:#e9e1d7}
body{font-family:'Outfit','DM Sans',sans-serif;background:radial-gradient(ellipse at 92% 15%,#f6f3ed 0,transparent 45%),radial-gradient(ellipse at 5% 75%,#d7c2ad88 0,transparent 45%),linear-gradient(140deg,#e7ded4,#f1ece5 60%,#e1d6c9);min-height:100vh;isolation:isolate}
body:before{content:'';position:fixed;z-index:-1;pointer-events:none;top:90px;right:-100px;width:min(490px,65vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 28% 20%,#fff9 0,#fff0 45%),radial-gradient(circle at 64% 84%,#f79a4c66,transparent 53%);box-shadow:inset 3px 3px 20px #fff9,inset -10px -9px 25px #ab927b1f,0 20px 70px #b9a58b14;border:1px solid #fff7}
header{max-width:980px;padding:15px 28px 12px;border:0;background:transparent}
.brand{font-size:15px;letter-spacing:2px;color:#292824;gap:11px}.brand small{font-size:10px;letter-spacing:.1px;color:#827a70;margin-top:3px;font-weight:400}.logo{background:#345e48;flex-basis:18px;width:18px;height:18px;box-shadow:inset 0 1px 2px #ffffff40}
.settings-button{color:#33312e;background:#ffffff50;border:1px solid #ffffff80;width:40px;height:40px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.settings-button:hover{background:#ffffffa0}
main{max-width:924px;padding-top:9px;padding-bottom:18px;margin:auto}
.verse-stage{padding:15px 23px 0;border:1px solid #fffc;border-radius:27px;background:linear-gradient(115deg,#fff9,#fff6 60%,#fbe4ce70);box-shadow:0 12px 34px #79654d0c,inset 0 1px 1px #fff;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);min-height:0}
.verse-stage:before{content:'';position:absolute;pointer-events:none;width:175px;height:175px;border-radius:50%;right:-55px;top:5px;background:radial-gradient(circle,#ffb36f66,#ffa25711 65%,transparent 72%);filter:blur(18px)}
.verse-meta{color:#7d7268;font-size:9px;letter-spacing:1.6px;margin-bottom:7px;position:relative}
#arabic{color:#35302a;line-height:1.85;position:relative;padding:0 8px;min-height:0}
#arabic span.active{background:#f6c79777;color:#29251f;box-shadow:0 2px 0 #d48143;border-radius:6px}
#translation{color:#71665c;font-size:12px;font-weight:400;line-height:1.65;margin:5px auto 12px;position:relative;max-width:700px;min-height:0}
.stage-foot{padding-bottom:13px;color:#887b6c;font-size:9px}.stage-foot #repeatLabel{letter-spacing:1.2px}.progress{height:2px;background:#d4c7b744;margin:0 -23px}#progress{background:#ec8c45}
.workspace{margin-top:25px;gap:0}.section-heading{margin-bottom:12px;gap:10px}h1{font-size:21px;letter-spacing:-.5px;font-weight:400;margin:0}h2{font-weight:400;letter-spacing:-.4px}.pill{font-size:10px;color:#7a7269;background:#fff6;border:1px solid #fff9;padding:5px 10px}
.range{padding:12px 14px;border:1px solid #ffffffb0;border-radius:21px;background:#fefcf96b;margin-bottom:11px;box-shadow:0 5px 18px #6b55430a;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.range.current{background:linear-gradient(115deg,#fff9,#fff6);border:1px solid #d4a37c;box-shadow:inset 3px 0 0 #e6985f,0 7px 22px #7856350a}
.range .row-head{font-size:11px;margin-bottom:9px;color:#746a60;font-weight:400}.range.current .row-head{color:#33302b;font-weight:500}.range-number{background:#e4dcd199;color:#706357;width:23px;height:23px;font-size:11px}.range.current .range-number{background:#2c2b29;color:#fff}
.range .remove{color:#9b9084;font-size:18px;border-radius:50%}.range .remove:hover{background:#e7dbcc80;color:#44392f}
.range .fields{gap:9px}.range .fields label,.range .surah-search>label{color:#877c70;font-size:10px;font-weight:400}.range .surah-or{color:#a3988b;font-size:10px}.surah-picker{gap:10px}
body .range .compact-control>input,body .range .compact-control>select{border-radius:19px;padding-left:13px;padding-right:10px;border:1px solid #ffffffa6;box-shadow:inset 0 1px 2px #c8b8a312;background:#ffffff88;color:#37312b}
.surah-search:not(.is-muted) input,.surah-dropdown:not(.is-muted) select{background:#ffffffa0;border-color:#c6b4a2}
.surah-search.is-muted input,.surah-dropdown.is-muted select{background:#e5dfd744;color:#a59b90;border-color:#e3dcd340}
.surah-search.is-muted>label,.surah-dropdown.is-muted{color:#a59c91}
.surah-search.is-muted input:focus,.surah-dropdown.is-muted select:focus{background:#fff9;border-color:#cba37e;color:#37312b}
.surah-results{background:#faf6f0f5;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid #fffc;border-radius:16px;box-shadow:0 12px 30px #57442d24}.range .surah-results [role=option]{font-size:12px;padding:10px 12px;border-color:#e6ded3;color:#483d32}.surah-results [role=option]:hover,.surah-results [aria-selected=true]{background:#f3ddc9;color:#3b2a1b}
input::placeholder{color:#a1988e}.add{background:#ffffff3d;border:1px dashed #bcae9b;border-radius:17px;color:#6f5d4b;padding:9px}.add:hover{background:#ffffff75}.add>span{color:#cb7c42}.add small{font-size:9px;margin-top:0;color:#a19484}
.player{background:#174f42f5;border:1px solid #2b6655;border-radius:25px;padding:12px 19px;margin-top:23px;margin-bottom:0;bottom:12px;box-shadow:0 12px 35px #174f4238;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.player .eyebrow{color:#c3d8ce;font-size:9px;letter-spacing:1.7px}.player p{color:#f3f8f4;font-size:12px;margin-top:4px;line-height:1.45}.controls{gap:12px}.reset{color:#c6d8cf;font-size:25px}.play{background:#e0eadf;color:#174f42;width:52px;height:52px;min-width:52px;border:1px solid #fff7;box-shadow:0 3px 8px #0001}.play:hover{background:#f2f8f2}.play.is-playing{background:#b8d4bf}.play .play-symbol{width:23px;height:23px}
#settings{background:#f5f0e9ed;border:1px solid #fff;border-radius:27px;padding:21px 24px;box-shadow:0 25px 90px #42332640;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);max-height:calc(100dvh - 32px);overflow-y:auto}
dialog::backdrop{background:#4d41333d;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.settings-heading{margin-bottom:19px}.settings-heading h2{font-size:24px}.night-setting{color:#796c60;border-color:#d9cec0;font-size:13px;padding-bottom:14px}#settings .gap,#settings .display-control{color:#796c60;font-size:12px}#settings select,.gap span{background:#fff9;border:1px solid #fff;border-radius:14px;color:#40362e}#settings select{padding:10px 12px}#settings .gap input{color:#40362e}.gap span{height:38px}#nightMode{background:#d5c9b9;border-color:#d5c9b9}#nightMode:checked{background:#37322d;border-color:#37322d}
:focus-visible{outline-color:#b97b45!important}.range:focus-visible{outline:2px solid #b97b45;outline-offset:3px}
@media(max-width:980px){main{margin:0 28px}header{padding-left:28px;padding-right:28px}}
@media(max-width:760px){header{padding:12px 18px 10px}.brand{font-size:13px;letter-spacing:1.6px;gap:9px}.brand small{font-size:9px;margin-top:2px}.logo{width:17px;height:17px;flex-basis:17px}.settings-button{width:38px;height:38px}main{margin:0 16px;padding-top:5px;padding-bottom:16px}.verse-stage{border-radius:23px;padding:13px 16px 0}.verse-meta{font-size:8px;letter-spacing:1.1px;margin-bottom:4px}#arabic{padding:0;line-height:1.85}#translation{font-size:11px;margin:4px auto 10px;line-height:1.55}.stage-foot{padding-bottom:11px;font-size:8px}.progress{margin:0 -16px}.workspace{margin-top:21px}h1{font-size:20px}.section-heading{margin-bottom:11px}.range{padding:11px 12px;border-radius:19px}.range .row-head{font-size:10px}.range .fields label,.range .surah-search>label{font-size:9px}.range .surah-picker{gap:7px}.player{padding:11px 14px;border-radius:22px;bottom:8px;margin-top:19px}.player p{font-size:11px;margin-top:3px}.player .eyebrow{font-size:8px}.play{width:49px;height:49px;min-width:49px}.controls{gap:8px}.reset{width:30px}#settings{padding:18px 21px}.surah-results{min-width:min(240px,calc(100vw - 60px))}}
/* The same material palette in night mode. Tajwid's night colours remain intact. */
html[data-theme=night]{--paper:#211f1c;--ink:#efe9df;--muted:#b5a99a;--line:#51463b;--green:#e6d3bc;background:#211f1c}
html[data-theme=night] body{background:radial-gradient(ellipse at 95% 10%,#4d382822,transparent 50%),linear-gradient(135deg,#24221f,#302923)}
html[data-theme=night] body:before{opacity:.25;border-color:#bda2823b}
html[data-theme=night] .brand{color:#efe4d5}html[data-theme=night] .brand small{color:#b1a28f}html[data-theme=night] .logo{background:#89b96f}
html[data-theme=night] .settings-button{color:#e4d2bb;background:#ffffff0a;border-color:#ffffff12}html[data-theme=night] .settings-button:hover{background:#ffffff15}
html[data-theme=night] .verse-stage{background:linear-gradient(120deg,#ffffff0c,#c58b4d0d);border-color:#ffffff24;box-shadow:inset 0 1px 1px #ffffff12,0 12px 35px #0001}
html[data-theme=night] .verse-meta,html[data-theme=night] .stage-foot{color:#bfa98d}html[data-theme=night] #arabic{color:#f0e4d1}html[data-theme=night] #arabic span.active{background:#79553366;color:#fff3dd;box-shadow:0 2px 0 #d79a61}html[data-theme=night] #translation{color:#c1b29e}
html[data-theme=night] .progress{background:#ffffff12}html[data-theme=night] #progress{background:#e9a065}
html[data-theme=night] .pill{background:#ffffff0a;border-color:#ffffff1f;color:#c3b39e}
html[data-theme=night] .range{background:#ffffff06;border-color:#ffffff1c;box-shadow:none}html[data-theme=night] .range.current{background:#b7793c12;border-color:#bd8a57;box-shadow:inset 3px 0 0 #d5955b}
html[data-theme=night] .range .row-head{color:#bcad98}html[data-theme=night] .range.current .row-head{color:#f3dec4}html[data-theme=night] .range-number{background:#ffffff0d;color:#c5b49c}html[data-theme=night] .range.current .range-number{background:#e0b58b;color:#30251b}
html[data-theme=night] .range .fields label,html[data-theme=night] .range .surah-search>label{color:#b4a38e}
html[data-theme=night] .range .compact-control>input,html[data-theme=night] .range .compact-control>select{background:#ffffff0b;color:#e8d9c4;border-color:#ffffff1a;box-shadow:none}
html[data-theme=night] .surah-search:not(.is-muted) input,html[data-theme=night] .surah-dropdown:not(.is-muted) select{border-color:#b28d67;background:#ffffff0b}
html[data-theme=night] .surah-search.is-muted input,html[data-theme=night] .surah-dropdown.is-muted select{background:#ffffff03;color:#958575;border-color:#ffffff0a}
html[data-theme=night] .surah-search.is-muted input:focus,html[data-theme=night] .surah-dropdown.is-muted select:focus{background:#ffffff0f;color:#f4e2c9;border-color:#d1a576}
html[data-theme=night] .surah-results{background:#342d25f7;border-color:#65503b}html[data-theme=night] .surah-results [role=option]{color:#e4d4bf;border-color:#ffffff0d}html[data-theme=night] .surah-results [role=option]:hover,html[data-theme=night] .surah-results [aria-selected=true]{background:#70503366;color:#ffe3c2}
html[data-theme=night] .add{background:#ffffff05;border-color:#6f5d47;color:#dac5aa}html[data-theme=night] #settings{background:#302a24f5;border-color:#76614b;color:#f0e1cd}
html[data-theme=night] #settings select,html[data-theme=night] .gap span{background:#ffffff09;color:#efddc4;border-color:#ffffff15}html[data-theme=night] #settings .gap input{color:#efddc4}html[data-theme=night] #settings .night-setting,html[data-theme=night] #settings .display-control,html[data-theme=night] #settings .gap{color:#c9b498}html[data-theme=night] #nightMode:checked{background:#c9915e;border-color:#c9915e}
html[data-theme=night] .player{background:#181817f5;border-color:#ffffff1a}html[data-theme=night] .player .eyebrow{color:#c9b6a0}html[data-theme=night] .play{background:#e6d4b9;color:#30251a}html[data-theme=night] .play.is-playing{background:#e9ac76}html[data-theme=night] .play:hover{background:#f0c49f}
/* Keep the selected method legible and the suggestion overlay above adjacent cards. */
.range:focus-within,.range:has(.surah-results:not([hidden])){position:relative;z-index:5}
.range .surah-search.is-muted .compact-control>input,.range .surah-dropdown.is-muted .compact-control>select{background:#e5dfd744;color:#a59b90;border-color:#e3dcd370;box-shadow:none}
.range .surah-search:not(.is-muted) .compact-control>input,.range .surah-dropdown:not(.is-muted) .compact-control>select{background:#ffffffa0;border-color:#c6b4a2}
.range .surah-search.is-muted .compact-control>input:focus,.range .surah-dropdown.is-muted .compact-control>select:focus{background:#fff9;border-color:#cba37e;color:#37312b}
html[data-theme=night] .range .surah-search.is-muted .compact-control>input,html[data-theme=night] .range .surah-dropdown.is-muted .compact-control>select{background:#ffffff03;color:#958575;border-color:#ffffff0a}
html[data-theme=night] .range .surah-search:not(.is-muted) .compact-control>input,html[data-theme=night] .range .surah-dropdown:not(.is-muted) .compact-control>select{background:#ffffff0b;color:#e8d9c4;border-color:#b28d67}
html[data-theme=night] .range .surah-search.is-muted .compact-control>input:focus,html[data-theme=night] .range .surah-dropdown.is-muted .compact-control>select:focus{background:#ffffff0f;color:#f4e2c9;border-color:#d1a576}
/* Settings controls need room for a complete text line plus native arrows. */
#settings .display-control select{box-sizing:border-box;height:44px;min-height:44px;line-height:24px;padding:9px 32px 9px 12px;font-size:16px;vertical-align:middle}
#settings .gap span{box-sizing:border-box;height:44px;min-height:44px;display:inline-flex;align-items:center;padding:0 10px;line-height:24px}
#settings .gap input{box-sizing:border-box;height:42px;min-height:42px;line-height:24px;padding:9px 0;font-size:16px;width:66px;vertical-align:middle;border:0;background:transparent}