:root{--app-bg: #f2f7f0;--app-bg-warm: #faf9f6;--app-surface: #ffffff;--app-surface-soft: #f4f8f2;--app-gold: #b8860b;--app-gold-light: #f5eed8;--app-navy: #1a3567;--app-navy-soft: rgba(26, 53, 103, .06);--app-accent: #256f42;--app-accent-light: #e6f0e9;--app-accent-dark: #1b5233;--app-text: #1c211c;--app-text-soft: #3a4a3d;--app-muted: #5c6d60;--app-border: rgba(184, 134, 11, .2);--app-border-subtle: rgba(26, 53, 103, .1);--app-radius-sm: .375rem;--app-radius: .75rem;--app-radius-md: 1rem;--app-radius-lg: 1.25rem;--app-radius-xl: 1.5rem;--app-shadow: 0 1px 3px rgba(28, 33, 28, .06);--app-shadow-card: 0 4px 20px rgba(28, 33, 28, .08);--app-shadow-header: 0 1px 0 rgba(28, 33, 28, .06);--app-shadow-hover: 0 8px 28px rgba(28, 33, 28, .1);--app-space-4: 4px;--app-space-8: 8px;--app-space-12: 12px;--app-space-16: 16px;--app-space-20: 20px;--app-space-24: 24px;--app-space-32: 32px;--app-header-height: 160px;--app-header-height-mobile: 128px;--safe-top: env(safe-area-inset-top, 0);--safe-bottom: env(safe-area-inset-bottom, 0);--safe-left: env(safe-area-inset-left, 0);--safe-right: env(safe-area-inset-right, 0);--app-gutter: 1.25rem;--app-gutter-mobile: 1rem;--app-touch-min: 44px;--app-font-heading: "Tajawal", "Noto Kufi Arabic", sans-serif;--app-font-body: "Scheherazade New", "Amiri", "Traditional Arabic", serif;--app-text-base: 1rem;--app-text-sm: .875rem;--app-text-lg: 1.125rem;--app-leading-tight: 1.35;--app-leading-normal: 1.6;--app-leading-relaxed: 1.75}@media (max-width: 767px),(display-mode: standalone){:root{--app-header-height: 128px;--app-header-height-mobile: 128px}}@media (max-width: 480px){:root{--app-header-height: 120px;--app-header-height-mobile: 120px}}:root{--bg: var(--app-bg);--bg-warm: var(--app-bg-warm);--surface: var(--app-surface);--surface-soft: var(--app-surface-soft);--accent: var(--app-accent);--accent-light: var(--app-accent-light);--accent-dark: var(--app-accent-dark);--gold: var(--app-gold);--gold-light: var(--app-gold-light);--navy: var(--app-navy);--navy-soft: var(--app-navy-soft);--text: var(--app-text);--text-soft: var(--app-text-soft);--muted: var(--app-muted);--border: var(--app-border);--shadow: var(--app-shadow);--shadow-card: var(--app-shadow-card);--shadow-hover: var(--app-shadow-hover);--radius: var(--app-radius);--radius-lg: var(--app-radius-lg);--radius-xl: var(--app-radius-xl);--font-arabic: var(--app-font-body);--font-kufi: var(--app-font-heading);--touch-min: var(--app-touch-min);--mobile-gutter: var(--app-gutter-mobile);--mobile-header-padding-y: var(--app-gutter-mobile)}*,*:before,*:after{box-sizing:border-box}html{font-size:clamp(15px,2.8vw,17px);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:manipulation}html[dir=rtl]{direction:rtl}body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--app-font-body);font-size:var(--app-text-base);line-height:var(--app-leading-normal);background:var(--app-bg);color:var(--app-text);direction:rtl;text-align:right;overscroll-behavior:none;-webkit-overflow-scrolling:touch;background-image:linear-gradient(180deg,var(--app-bg-warm) 0%,var(--app-bg) 100%);background-attachment:fixed}:focus-visible{outline:2px solid var(--app-gold);outline-offset:2px}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--app-gold);outline-offset:2px}h1,h2,h3,h4{font-family:var(--app-font-heading);font-weight:700;line-height:var(--app-leading-tight);color:var(--app-text)}.prose-arabic,.duaa-text,.modal-body{line-height:var(--app-leading-relaxed);letter-spacing:.01em}@media (max-width: 767px),(display-mode: standalone){html,body{height:100%;height:100dvh;overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0}#root{height:100%;overflow:hidden}}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--app-bg-warm);animation:splash-fade-out .4s ease-out 1.6s forwards;pointer-events:none}.splash-image{width:100%;height:100%;object-fit:contain;object-position:center}@keyframes splash-fade-out{to{opacity:0;visibility:hidden}}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:0;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);text-align:center}@media (max-width: 767px),(display-mode: standalone){.app{width:100%;height:100%;height:100dvh;overflow:hidden}}.app-layout{width:100%;max-width:420px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--app-surface);box-shadow:0 0 0 1px var(--app-border-subtle);overflow:hidden}@media (max-width: 767px),(display-mode: standalone){.app-layout{max-width:none;min-height:100%;height:100%;box-shadow:none}}@media (min-width: 768px){.app-layout{min-height:90vh;border-radius:var(--app-radius-xl);box-shadow:var(--app-shadow-card),0 0 0 1px var(--app-border-subtle);margin:2rem auto}}.app-header{position:fixed;top:0;right:0;left:0;z-index:1000;padding-top:max(var(--app-space-12),var(--safe-top));padding-right:var(--app-gutter);padding-bottom:0;padding-left:var(--app-gutter);background:var(--app-surface);border-bottom:1px solid var(--app-border-subtle);box-shadow:var(--app-shadow-header);flex-shrink:0}.app-header-pattern{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231a3567' fill-opacity='1'%3E%3Cpath d='M16 14v-2h-1v2h-2v1h2v2h1v-2h2v-1h-2zm0-12V0h-1v2h-2v1h2v2h1V3h2V2h-2zM4 14V12H3v2H0v1h3v2h1v-2h2v-1H4zM4 4V2H3v2H0v1h3v2h1V4h2V3H4z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}.app-header-inner{position:relative;z-index:1}.app-header-brand{display:flex;align-items:center;gap:var(--app-space-12);margin-bottom:var(--app-space-8)}.app-header-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:var(--app-shadow);border:2px solid var(--app-border-subtle);flex-shrink:0}.app-header-titles{flex:1;min-width:0}.app-header-title{font-family:var(--app-font-heading);font-size:1.15rem;font-weight:700;margin:0;color:var(--app-text);letter-spacing:-.02em;line-height:var(--app-leading-tight)}.app-header-nav{display:flex;width:100%;background:var(--app-surface-soft);border-radius:var(--app-radius-sm) var(--app-radius-sm) 0 0;padding:0 var(--app-space-4);gap:2px}.app-header-tab{flex:1;padding:.65rem var(--app-space-8);font-size:.875rem;font-family:var(--app-font-heading);font-weight:500;color:var(--app-muted);background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:color .2s,border-color .2s,background .2s;min-height:var(--app-touch-min)}.app-header-tab:hover{color:var(--app-text-soft)}.app-header-tab-active{color:var(--app-accent-dark);border-bottom-color:var(--app-gold);font-weight:600;background:var(--app-surface);box-shadow:0 -1px 0 0 var(--app-border-subtle)}@media (max-width: 480px){.app-header-title{font-size:1rem}.app-header-tab{padding:.6rem var(--app-space-4);font-size:.85rem}.app-header-logo{width:48px;height:48px}}.app-layout-main{flex:1;width:100%;min-height:0;padding-top:var(--app-header-height);padding-right:var(--app-gutter);padding-bottom:var(--app-space-24);padding-left:var(--app-gutter);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-width: 767px),(display-mode: standalone){.app-layout-main{padding:var(--app-gutter-mobile);padding-top:var(--app-header-height);padding-bottom:max(var(--app-space-24),var(--safe-bottom))}}.app-layout-footer{margin-top:auto;padding:var(--app-space-16) var(--app-gutter);padding-bottom:max(var(--app-space-16),var(--safe-bottom));color:var(--app-muted);font-size:var(--app-text-sm);border-top:1px solid var(--app-border);background:linear-gradient(180deg,var(--app-surface-soft) 0%,rgba(240,247,238,.6) 100%);flex-shrink:0}@media (max-width: 767px),(display-mode: standalone){.app-layout-footer{padding:var(--app-space-12) var(--app-gutter-mobile);padding-bottom:max(var(--app-space-12),calc(var(--safe-bottom) + 4px));font-size:.8125rem}}.app-layout-footer p{margin:0}.tab-panel{width:100%}.tab-panel-settings{text-align:center}.encyclopedia-fullpage{flex:1;width:100%;min-height:0;display:flex;flex-direction:column;background:var(--app-bg-warm)}.encyclopedia-iframe-full{flex:1;width:100%;min-height:0;border:none;background:var(--app-bg-warm)}.settings-card{width:100%;max-width:360px;margin:0 auto;padding:var(--app-space-24);background:var(--app-surface);border:1px solid var(--app-border-subtle);border-radius:var(--app-radius-lg);box-shadow:var(--app-shadow-card);text-align:right}.settings-heading{font-family:var(--app-font-heading);font-size:1.125rem;font-weight:700;margin:0 0 var(--app-space-16);color:var(--app-text);display:flex;align-items:center;gap:var(--app-space-8)}.settings-heading-icon{width:2rem;height:2rem;border-radius:var(--app-radius-sm);background:var(--app-accent-light);color:var(--app-accent-dark);display:flex;align-items:center;justify-content:center;font-size:1.125rem}.notifications-list-heading{font-weight:600;margin:var(--app-space-12) 0 var(--app-space-8);color:var(--app-text);font-size:var(--app-text-sm)}.notifications-list{list-style:none;padding:0;margin:0 0 var(--app-space-16);text-align:right}.notifications-list li{padding:.35rem 1.25rem .35rem 0;color:var(--app-text-soft);font-size:var(--app-text-sm);line-height:1.5;position:relative}.notifications-list li:before{content:"";position:absolute;right:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--app-accent)}.main-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}@media (max-width: 767px),(display-mode: standalone){.main-content{gap:1.25rem;max-width:100%}}.status{color:var(--muted);max-width:100%;line-height:1.6;font-size:var(--app-text-sm);padding:0;margin:0 0 var(--app-space-12)}.status.success{color:var(--accent-dark);font-weight:600}.status.denied,.status.error{color:#c0392b;font-weight:500}.status.asking{color:var(--app-muted);display:flex;align-items:center;gap:var(--app-space-8)}.status-spinner{width:20px;height:20px;border:2px solid var(--app-accent-light);border-top-color:var(--app-accent);border-radius:50%;animation:status-spin .6s linear infinite}@keyframes status-spin{to{transform:rotate(360deg)}}.enable-notifications-btn{margin-top:var(--app-space-8);padding:.75rem 1.5rem;font-size:1rem;font-family:var(--font-kufi);font-weight:600;color:#fff;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);border:none;border-radius:var(--app-radius);box-shadow:var(--app-shadow);cursor:pointer;transition:opacity .2s,transform .1s,box-shadow .2s;-webkit-tap-highlight-color:transparent}.enable-notifications-btn:hover{opacity:.95;transform:translateY(-1px);box-shadow:var(--app-shadow-hover)}.enable-notifications-btn:active{transform:translateY(0)}.enable-notifications-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}@media (max-width: 767px),(display-mode: standalone){.enable-notifications-btn{min-height:var(--touch-min);padding:.75rem 1.5rem;width:100%;border-radius:var(--app-radius)}}.youtube-playlist-section-heading-wrap{width:100%;margin-top:var(--app-space-24);margin-bottom:var(--app-space-12);position:relative;padding:var(--app-space-12) 0;text-align:right}.youtube-playlist-section-heading__line{position:absolute;bottom:0;right:0;width:3rem;height:3px;background:linear-gradient(90deg,var(--app-gold) 0%,transparent 100%);border-radius:2px}.youtube-playlist-section-heading{font-family:var(--app-font-heading);font-size:1.2rem;font-weight:700;color:var(--app-text);margin:0;letter-spacing:-.01em}.youtube-playlist-section{width:100%;margin-top:0}.youtube-playlist-card--teaser{position:relative;background:var(--app-surface);border:1px solid var(--app-border-subtle);border-radius:var(--app-radius-lg);box-shadow:var(--app-shadow-card);overflow:hidden;text-align:right;transition:box-shadow .2s ease}.youtube-playlist-card--teaser:hover{box-shadow:var(--app-shadow-hover)}.youtube-playlist-card__accent{position:absolute;top:0;right:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--app-gold) 0%,var(--app-accent) 100%);border-radius:0 var(--app-radius-sm) var(--app-radius-sm) 0}.youtube-playlist-card__content{padding:1.25rem var(--app-space-24);padding-right:calc(var(--app-space-24) + 4px)}.youtube-playlist-card__header{display:flex;align-items:center;gap:var(--app-space-12);justify-content:flex-end;margin-bottom:var(--app-space-12)}.youtube-playlist-card__icon{width:2.25rem;height:2.25rem;border-radius:var(--app-radius-sm);background:var(--app-gold-light);flex-shrink:0;position:relative}.youtube-playlist-card__icon:after{content:"";position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border-width:6px 0 6px 10px;border-style:solid;border-color:transparent transparent transparent var(--app-gold);right:8px;left:auto}.youtube-playlist-title{font-family:var(--app-font-heading);font-size:1.15rem;font-weight:700;color:var(--app-text);margin:0;line-height:var(--app-leading-tight)}.youtube-playlist-description{font-family:var(--app-font-body);font-size:var(--app-text-base);line-height:var(--app-leading-relaxed);color:var(--app-text-soft);margin:0 0 var(--app-space-20);max-width:100%}.youtube-playlist-btn{min-height:var(--app-touch-min);padding:.65rem 1.35rem;font-family:var(--app-font-heading);font-size:1rem;font-weight:600;border-radius:var(--app-radius);cursor:pointer;transition:opacity .2s,transform .15s,box-shadow .2s;-webkit-tap-highlight-color:transparent;border:2px solid var(--app-gold)}.youtube-playlist-btn-primary{color:#fff;background:linear-gradient(180deg,var(--app-navy) 0%,#152a6e 100%);box-shadow:var(--app-shadow)}.youtube-playlist-btn-primary:hover{opacity:.95;transform:translateY(-1px);box-shadow:var(--app-shadow-hover)}.youtube-playlist-btn--play .youtube-playlist-btn__label{display:inline-flex;align-items:center;gap:.5rem}.youtube-playlist-btn--play .youtube-playlist-btn__label:before{content:"";width:0;height:0;border-width:6px 10px 6px 0;border-style:solid;border-color:transparent #fff transparent transparent;flex-shrink:0}.youtube-playlist-player-block{width:100%;background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius-lg);overflow:hidden;box-shadow:var(--app-shadow-card)}.youtube-playlist-embed-wrap{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;background:var(--app-surface-soft)}.youtube-playlist-iframe{position:absolute;top:0;right:0;width:100%;height:100%;border:none}.youtube-playlist-player-footer{padding:var(--app-space-12) var(--app-space-16);text-align:right;border-top:1px solid var(--app-border-subtle);background:var(--app-surface-soft)}.youtube-playlist-link{font-family:var(--app-font-heading);font-size:var(--app-text-sm);font-weight:600;color:var(--app-navy);background:none;border:none;cursor:pointer;padding:.35rem 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--app-gold);transition:color .2s,text-decoration-color .2s;-webkit-tap-highlight-color:transparent}.youtube-playlist-link:hover{color:var(--app-accent-dark);text-decoration-color:var(--app-accent)}.global-player-bar{position:fixed;bottom:0;right:0;left:0;z-index:900;display:flex;flex-direction:column;background:var(--app-surface);border-top:1px solid var(--app-border);box-shadow:0 -4px 16px #00000014;max-height:45vh}.global-player-bar__embed{position:relative;width:100%;height:0;padding-bottom:28%;min-height:100px;overflow:hidden;background:var(--app-surface-soft)}.global-player-bar__iframe{position:absolute;top:0;right:0;width:100%;height:100%;border:none}.global-player-bar__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--app-space-12);padding:var(--app-space-8) var(--app-gutter);border-top:1px solid var(--app-border-subtle);background:var(--app-surface-soft)}.global-player-bar__link{font-family:var(--app-font-heading);font-size:var(--app-text-sm);font-weight:600;color:var(--app-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--app-gold)}.global-player-bar__link:hover{color:var(--app-accent-dark)}.global-player-bar__close{font-family:var(--app-font-heading);font-size:var(--app-text-sm);font-weight:600;padding:.4rem .85rem;border-radius:var(--app-radius);border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-text);cursor:pointer;-webkit-tap-highlight-color:transparent}.global-player-bar__close:hover{background:var(--app-surface-soft)}.app--has-global-player .app-layout-main{padding-bottom:220px}.prayer-times{width:100%}@media (max-width: 767px),(display-mode: standalone){.prayer-times{padding:0;width:100%}}.prayer-times-card{background:var(--surface);border-radius:var(--app-radius-lg);overflow:hidden;border:1px solid var(--app-border-subtle);box-shadow:var(--app-shadow-card);transition:box-shadow .2s ease,border-color .2s ease}.prayer-times-card:hover{box-shadow:var(--app-shadow-hover)}.prayer-times-header{padding:1.1rem 1.25rem .9rem;text-align:center;background:var(--app-surface-soft);border-bottom:1px solid var(--app-border-subtle)}.prayer-times-header h2{font-family:var(--font-kufi);margin:0 0 .35rem;font-size:1.25rem;font-weight:700;color:var(--text);letter-spacing:-.01em}.prayer-times-date{margin:0;font-size:.875rem;color:var(--muted);line-height:1.4}.prayer-times-date.prayer-times-error{color:#b84545}.prayer-times-location{margin:.45rem 0 0;font-size:.8rem;color:var(--accent);font-weight:600}.prayer-times-list{list-style:none;margin:0;padding:.5rem .75rem .75rem}.prayer-times-loading{padding:2rem;display:flex;justify-content:center;align-items:center}.prayer-times-spinner{width:36px;height:36px;border:3px solid var(--accent-light);border-top-color:var(--accent);border-radius:50%;animation:prayer-spin .7s linear infinite}@keyframes prayer-spin{to{transform:rotate(360deg)}}.prayer-times-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;margin:.2rem 0;border-radius:var(--radius);transition:background .2s ease}.prayer-times-row:hover{background:var(--surface-soft)}.prayer-times-row.prayer-times-next{background:var(--accent-light);margin:.35rem 0;padding:.85rem 1rem;border:1px solid rgba(45,138,78,.25);border-radius:var(--radius)}.prayer-times-row.prayer-times-next .prayer-times-name{color:var(--accent-dark);font-weight:700}.prayer-times-row.prayer-times-next .prayer-times-time{color:var(--accent-dark);font-weight:700;font-size:1.05rem}.prayer-times-name{font-size:1rem;color:var(--text-soft)}.prayer-times-time{font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--muted);font-weight:500}@media (max-width: 480px){.prayer-times-card{border-radius:var(--radius)}.prayer-times-header{padding:.875rem var(--mobile-gutter) .75rem}.prayer-times-header h2{font-size:1.1rem}.prayer-times-list{padding:.375rem .5rem .5rem}.prayer-times-row{padding:.75rem;min-height:var(--touch-min)}.prayer-times-row.prayer-times-next{padding:.85rem .75rem}.settings-heading{font-size:1.1rem;margin-bottom:.875rem}.status{font-size:.9375rem;line-height:1.55}}@media (max-width: 360px){:root{--app-gutter-mobile: .75rem}}