/* Reading room skin. Existing navigation, API, audio and preferences are untouched. */
:root{--cream:#fbf9f4;--cream-2:#f2eee5;--line:#e5dfd5;--ink:#252039;--ink-soft:#655d73}
body{background:var(--cream)}
.app{max-width:1200px;background:var(--cream);box-shadow:none}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #bd8d34;outline-offset:3px}
.panel,.ayah-scroll{min-height:0;scrollbar-gutter:stable;overscroll-behavior:contain}
#listHdr{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;background:linear-gradient(120deg,#19153e,#302658);box-shadow:none}
#listHdr .hdr-top{display:flex;flex:1;min-width:0;min-height:44px;padding:0;gap:20px}
#listHdr .hdr-top::before{display:none}
#listHdr .hdr-title{text-align:start;font-size:1.4rem;letter-spacing:-.02em}
#listHdr .tabbar{width:310px;max-width:100%;flex:none;margin:0;padding:4px;border-radius:13px;background:rgba(255,255,255,.07)}
#listHdr .tabbar button{text-transform:none;letter-spacing:0;font-size:.82rem}
#listHdr .tabbar button.active{background:#f7dfab;box-shadow:none}
.search-bar{position:sticky;top:0;z-index:5;padding:18px 24px;background:rgba(251,249,244,.97);border:0}
.search-bar .wrap{max-width:none;margin-inline:auto}
.search-bar input{min-height:48px;padding-inline:42px 16px;border:1px solid #ded7e7;border-radius:14px;font-size:.9rem;background:#fff}
.search-bar svg{left:auto;inset-inline-start:15px}
#surahListWrap,#panelJuz,#panelBookmark{padding:4px 24px 24px}
#surahListWrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.s-row,.j-row,.bm-row{border:1px solid #e8e1ec;border-radius:14px;padding:17px 15px;background:rgba(255,255,255,.84);gap:12px;min-width:0;transition:border-color .18s,background .18s}
.s-row:hover,.j-row:hover,.bm-row:hover{border-color:#c4b1d6;background:#fff}
.s-row{display:grid;grid-template-columns:34px minmax(0,1fr) 44px;gap:12px;padding:18px;border-radius:16px;align-items:center;background:linear-gradient(145deg,#fff,#fdfbf7)}
.s-meta .en{font-size:.94rem;white-space:normal;overflow-wrap:anywhere;line-height:1.45}.s-meta .sub{font-size:.64rem;letter-spacing:.015em;color:#83728b;line-height:1.65}
.s-ar{grid-column:1/3;grid-row:2;justify-self:start;font-size:1.7rem;margin:0;line-height:1.9;max-width:100%;overflow-wrap:anywhere;direction:rtl;color:#4a365b}
.s-play{grid-column:3;grid-row:1/3;align-self:center}
.s-play{width:44px;height:44px;border:1px solid #e8e0f0;border-radius:50%;background:#f7f4fb;color:#625081}
.badge-oct{width:34px;height:34px}
#panelJuz.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;padding-top:20px}
.j-num{background:#f1eaf8;color:#69527c;border:1px solid #e5d9ef}.j-info{min-width:0}.j-info span{line-height:1.6}
.bm-row{margin-top:12px}.bm-del{min-width:44px;min-height:44px;border-radius:10px;background:#fff5f6}
.bm-empty,.empty-state{grid-column:1/-1;max-width:500px;margin:auto;line-height:1.8}
.reader{background:var(--cream)}
.reader>.hdr{background:linear-gradient(115deg,#1b173f,#302657);padding:4px 20px 0}
.reader .hdr-top{min-height:62px;padding:6px 0;gap:12px}
.reader .hdr-title{font-size:1.15rem}.hdr-back{padding-inline:8px;font-size:.8rem}
.reader .hdr-actions button{border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06)}
.reader-tabs{background:none;max-width:760px;margin-inline:auto;gap:6px}
.reader-tabs button{padding:12px 14px;font-size:.78rem;min-height:44px;color:#cec5dc}
.reader-tabs button.current{color:#ffe0a4;border-color:#e6bf75}
.ayah-scroll{scroll-padding-block:20px}
.surah-hero{padding:30px 24px 24px;background:linear-gradient(150deg,#fffdf8,#f3edf8);border-color:#e9e1ed}
.surah-hero .ar{font-size:2.4rem;line-height:1.8;color:#352650}
.surah-hero .en{font-size:.9rem;line-height:1.7}.surah-hero .meta{font-size:.73rem;line-height:1.7;color:#936f32}
.bism-line{font-size:1.85rem;padding:25px 20px 8px}
.a-card{max-width:860px;margin-inline:auto;padding:24px 36px 30px;border-bottom:1px solid #e8e1d8;background:transparent}
.a-card:nth-child(even){background:transparent}
.a-card.playing{background:#fff4d9;box-shadow:inset 3px 0 0 #d0a454}
.a-top{margin-bottom:12px;justify-content:flex-start;gap:8px}
.a-play,.a-bm{border:1px solid #e7dfed;border-radius:12px;background:#fffdf9}
.a-play span{border:0;width:26px;height:26px}.a-bm.on{background:#fff0cd;border-color:#e7c581}
.a-ar{font-size:2rem;line-height:2.2;margin-bottom:20px;color:#26203a}
.a-trans{font-size:.96rem;line-height:1.9;color:#60586b;max-width:70ch}
.player{padding:12px 24px 14px;background:linear-gradient(115deg,#211a43,#30264f);border-top:1px solid #504164;box-shadow:0 -10px 30px -24px #211a43}
.player-meta{font-size:.76rem;color:#e0d6eb;margin-bottom:9px}
.player-scrub{max-width:760px;margin:0 auto 9px;height:6px;border-radius:8px}.player-scrub .fill{background:#edcc8a}
.player-ctl{gap:18px}.player-ctl .play-btn{background:#f5dca8;width:46px;height:46px}
.settings-backdrop.open{background:rgba(25,18,45,.24);backdrop-filter:blur(3px)}
.settings-pop{top:72px;right:auto;inset-inline-end:20px;width:min(340px,calc(100% - 32px));padding:24px;border:1px solid #e7dfed;border-radius:20px;box-shadow:0 24px 65px -26px rgba(29,19,51,.45);background:#fffdf9}
.settings-pop label{font-size:.74rem}.settings-pop select{min-height:46px;margin-bottom:18px;padding-inline:12px 30px}
.settings-row{gap:18px;padding:12px 0;border-top:1px solid #eee7f0}.settings-row span{line-height:1.6}
.skel-wrap{grid-column:1/-1;width:100%}
@media(min-width:701px) and (max-width:1050px){#surahListWrap{grid-template-columns:repeat(2,minmax(0,1fr))}#listHdr .tabbar{width:270px}}
@media(max-width:700px){
 #listHdr{display:block;padding:18px 16px 14px}#listHdr .hdr-top{margin-bottom:14px}#listHdr .hdr-title{font-size:1.3rem}#listHdr .tabbar{width:100%;max-width:none}
 #surahListWrap{grid-template-columns:minmax(0,1fr);gap:8px;padding:0 12px 18px}
 .search-bar{padding:14px 12px}.s-row{padding:14px;column-gap:11px;row-gap:7px}.s-ar{font-size:1.6rem}.s-meta .en{font-size:.9rem}.s-meta .sub{font-size:.64rem}
 #panelJuz.active{grid-template-columns:minmax(0,1fr);padding:14px 12px}.reader>.hdr{padding-inline:12px}
 .reader .hdr-title{font-size:.98rem}.reader-tabs button{min-width:85px;padding:10px 6px;font-size:.7rem}
 .surah-hero{padding:22px 16px}.surah-hero .ar{font-size:2.1rem}.surah-hero .en{font-size:.8rem}
 .a-card{padding:20px 18px 24px}.a-ar{font-size:1.8rem;line-height:2.2}.a-trans{font-size:.88rem;line-height:1.85}
 .player{padding:10px 16px max(12px,env(safe-area-inset-bottom))}.player-ctl{gap:15px}.player-meta{font-size:.68rem}
 .settings-pop{inset-inline:12px;width:auto;top:70px;padding:20px}.hdr-back{font-size:.74rem}
}
#listHdr .quran-title{font-family:"Amiri",serif!important;font-size:2rem;line-height:1.7;text-shadow:none;white-space:normal}
#listHdr .tabbar{border-radius:999px;padding:5px;border:1px solid rgba(255,255,255,.28);background:linear-gradient(130deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#listHdr .tabbar button{border-radius:999px;min-height:44px}
#listHdr .tabbar button.active{background:linear-gradient(135deg,#ffe9b9,#ebc987);box-shadow:inset 0 1px 0 #fff1d2,0 4px 12px -8px #09051b}
#listHdr .hdr-actions button,.reader .hdr-actions button{border-radius:50%;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);backdrop-filter:blur(14px)}
.settings-pop{max-height:calc(100dvh - 90px);overflow-y:auto;border-radius:24px;background:linear-gradient(140deg,#fffdf9,#f4eff9);padding:24px}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;padding-bottom:15px;border-bottom:1px solid #e3dbea}
.settings-heading h2{font-size:1.1rem;color:#302448;line-height:1.5}
.settings-heading button{width:40px;height:40px;flex:none;border:1px solid #ddd2e8;border-radius:50%;background:#fff;color:#514065;font-size:24px;cursor:pointer}
.settings-row{padding:15px 0}.toggle-sw{width:42px;height:26px}.toggle-sw::after{width:22px;height:22px}.toggle-sw.on::after{left:18px}
@media(max-width:700px){#listHdr .quran-title{font-size:1.8rem}.settings-pop{inset-inline:12px;top:16px;max-height:calc(100dvh - 32px);padding:20px}.settings-row span{font-size:.8rem}.settings-pop select{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}