.page{padding-bottom:210px}
select,#search{display:block;width:100%;height:52px;margin-bottom:12px;padding:0 16px;border:1px solid #31504e;border-radius:14px;outline:0;background:var(--field);color:var(--text);font-size:16px;transition:border-color .2s}
select:focus,#search:focus{border-color:var(--gold)}
select:disabled{opacity:.5}
.surahs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:48vh;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.surahs:empty{display:none}
.sura{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1px solid #31504e;border-radius:14px;background:rgba(3,14,18,.5);color:var(--text);font-size:14px;cursor:pointer;transition:border-color .2s,background .2s}
.sura small{color:var(--gold);font-size:11px}
.sura:hover{border-color:var(--gold)}
.sura.on{border-color:var(--gold);background:#d9bc7a26}
.player{position:fixed;z-index:30;left:0;right:0;bottom:0;padding:12px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(5,16,20,.97);box-shadow:0 -14px 34px #000a;animation:rise .3s var(--ease) both}
.player>*{max-width:748px;margin-inline:auto}
.now{display:flex;flex-direction:column;text-align:center;line-height:1.4}
.now strong{font:700 19px "Amiri",serif;color:var(--gold-l)}
.now span{color:var(--muted);font-size:12px}
.seek{display:flex;align-items:center;gap:10px;margin:8px auto;direction:ltr;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.seek input{flex:1;accent-color:var(--gold);height:22px}
.ctrl{display:flex;align-items:center;justify-content:center;gap:14px}
.play{display:grid;place-items:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#ecd592,#b8964a);color:#13211b;cursor:pointer;box-shadow:0 8px 22px #b8964a40;transition:transform .15s var(--ease)}
.play:active{transform:scale(.94)}
.play svg{width:26px;height:26px}
.i-fill{fill:currentColor;stroke:none}
.i-pause,.playing .i-play{display:none}
.playing .i-pause{display:block}
.pill{display:flex;align-items:center;justify-content:center;gap:5px;min-width:52px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:rgba(3,14,18,.55);color:var(--gold-l);font-size:13px;cursor:pointer;transition:border-color .2s,background .2s}
.pill svg{width:17px;height:17px}
.pill.on{border-color:var(--gold);background:#d9bc7a1f}
.pill span:empty{display:none}
.live .seek,.live #next,.live #prev{display:none}
#rate{direction:ltr}