:root{--g:#0B2A1F;--g2:#123D2C;--gold:#C9A54A;--gold2:#E6D3A0;--ink:#EEF3EF;--mute:#9DB3A8;--line:rgba(255,255,255,.07);--card:rgba(18,61,44,.55)}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);font-size:15px;-webkit-font-smoothing:antialiased;
background-color:#0B2A1F;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A54A' stroke-opacity='.055' stroke-width='1'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(120% 60% at 50% -10%,#1B5A40 0%,#123D2C 35%,#0B2A1F 75%);background-attachment:fixed;padding:env(safe-area-inset-top) 18px 40px}
.wrap{max-width:520px}
header{padding:28px 0 10px}
h1{font-family:Amiri,serif;font-weight:700;font-size:38px;color:var(--gold2);text-shadow:none;letter-spacing:0}
.sub{font-family:Inter;font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold);margin-top:4px}
.date{font-size:13px;color:var(--mute);margin-top:10px}.small{font-size:12.5px;color:var(--mute);opacity:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;margin:16px 0;box-shadow:0 10px 30px rgba(0,0,0,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.next{padding:26px 20px;background:linear-gradient(160deg,rgba(201,165,74,.14),rgba(18,61,44,.55) 55%)}
.next .lbl{font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--mute)}
.next .nm{font-family:Inter;font-weight:600;font-size:22px;color:var(--ink);margin-top:6px}.next .nm span{color:var(--gold2)}
.cd{font-family:Inter;font-weight:300;font-size:52px;letter-spacing:-.02em;margin:4px 0;color:#fff}
.row{border-bottom:1px solid var(--line);padding:14px 6px;font-size:16px;font-weight:500}
.row .ar{font-family:Amiri;font-size:19px;color:var(--mute);margin-left:10px;font-weight:400}
.row .t{font-family:Inter;font-weight:500;font-size:16px;color:var(--ink)}
.row.sun{opacity:.55}.row.on{background:rgba(201,165,74,.12);border-radius:14px;border-color:transparent;box-shadow:inset 3px 0 0 var(--gold)}
.row.on .t,.row.on .ar{color:var(--gold2)}
button{font-family:Inter;font-weight:500;font-size:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);padding:11px 14px;transition:background .2s}
button:hover{background:rgba(255,255,255,.09)}button.gold{background:var(--gold);color:#0B2A1F;border-color:transparent;font-weight:600}
input,select,.player select{font-family:Inter;font-size:15px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--ink);padding:11px 12px}
input::placeholder{color:#6f877c}
.tabs{gap:4px;padding:12px 0 10px;background:none}
.tabs{position:sticky;top:0}.tabs::before{content:"";position:absolute;inset:0 -18px;background:rgba(11,42,31,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);z-index:-1}
.tab{font-size:12.5px;padding:9px 6px;border-radius:12px;border:0;background:transparent;opacity:1;color:var(--mute)}
.tab.on{background:rgba(201,165,74,.16);color:var(--gold2);font-weight:600}
#unlock,#locIntro{background:rgba(7,28,20,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#unlock div{font-family:Amiri;color:var(--gold2)}#unlock span{font-family:Inter}
#locIntro p{color:var(--mute);line-height:1.55;font-size:15px}
/* Quran */
.qhead .ar{font-family:'Amiri Quran',Amiri;font-size:32px;color:var(--gold2)}.qhead{color:var(--mute);font-size:13px}
.sl{border-bottom:1px solid var(--line);padding:13px 4px;border-radius:12px}.sl:hover{background:rgba(255,255,255,.03)}
.sl .n{width:34px;height:34px;border:1px solid rgba(201,165,74,.45);border-radius:8px;font-family:Inter;font-weight:600;font-size:12px;color:var(--gold2)}
.sl .en{font-weight:500}.sl .en small{color:var(--mute);opacity:1;font-weight:400;font-size:12px;margin-top:2px}.sl .ar{font-size:22px}
.bsm{color:var(--gold2);font-size:28px}
.ay{border-bottom:1px solid var(--line);padding:16px 10px;border-radius:16px}
.ay .t{font-size:29px;line-height:2.3;color:#F4F7F3}.ay .m{color:var(--gold);font-size:24px}
.ay .tr{font-size:15px;line-height:1.65;color:#C9D6CF;opacity:1}.ay .fn{font-size:12px;color:var(--mute);opacity:.8}
.ay.cur{background:rgba(201,165,74,.08);box-shadow:inset 0 0 0 1px rgba(201,165,74,.35)}
.w.hl{background:rgba(201,165,74,.9);color:#0B2A1F;padding:0 2px}
.player{bottom:12px;background:rgba(11,42,31,.8)}.player .st{color:var(--mute)}
label.tg{font-family:Inter;font-size:13px;color:var(--mute)}
.cr{font-size:11.5px;color:var(--mute)}.cr a{color:var(--gold2)}
/* Masjids */
.mq{border-bottom:1px solid var(--line);padding:16px 4px}.mh{font-size:16px}.mh b{font-weight:600}
.md{font-family:Inter;font-weight:600;font-size:13px;color:var(--gold2);background:rgba(201,165,74,.12);padding:3px 9px;border-radius:999px}
.dbtn{font-family:Inter;font-weight:600;font-size:13px;border-radius:12px;padding:8px 14px;background:var(--gold)}
.sl .n{transform:none}.sl .n span{transform:none}
.tab{font-family:Inter}.qhead .sub,.sub{font-family:Inter}
.next .nm{font-family:Inter}
.small,.date,.ay .tr,.mq{font-family:Inter}
.tab{white-space:nowrap;font-size:12px}
.note{margin-top:10px;font-size:12px;color:var(--gold2);background:rgba(201,165,74,.1);border:1px solid rgba(201,165,74,.2);border-radius:12px;padding:8px 12px;font-family:Inter}
.md{align-self:flex-start;flex:none}
.chips{display:flex;gap:8px;margin-top:14px;justify-content:center;flex-wrap:wrap}
.chip{flex:none;border-radius:999px;padding:8px 14px;font-size:13px;color:var(--mute)}
.chip.on{background:rgba(201,165,74,.18);color:var(--gold2);border-color:rgba(201,165,74,.4);font-weight:600}
.badge{display:inline-block;font-size:11px;font-weight:600;color:#0B2A1F;background:var(--gold2);border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:4px}
.badge.opt{background:rgba(255,255,255,.12);color:var(--ink)}