:root{--color-bg:#f8f5f0;--color-surface:#fff;--color-text:#1a1a2e;--color-text-muted:#6b6b8a;--color-accent:#2d6a4f;--color-accent-light:#40916c;--color-warning:#e67e22;--color-danger:#e74c3c;--color-border:#e0ddd8;--color-nav-bg:var(--color-surface);--color-nav-active:var(--color-accent);--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--font-body:"Segoe UI", system-ui, sans-serif;--nav-height:64px;--header-height:56px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}[x-cloak]{display:none!important}html,body{height:100%;font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);font-size:16px;line-height:1.5}button{cursor:pointer;font:inherit;color:inherit;background:0 0;border:none}input{font:inherit}#app{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:10;height:var(--header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:0 var(--space-md);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-header__title{color:var(--color-accent);font-size:1.2rem;font-weight:700}.app-header__location{color:var(--color-text-muted);align-items:center;gap:var(--space-xs);font-size:.9rem;display:flex}.app-main{padding:var(--space-md);padding-bottom:calc(var(--nav-height) + var(--space-md));flex:1;overflow-y:auto}.app-nav{height:var(--nav-height);background:var(--color-nav-bg);border-top:1px solid var(--color-border);z-index:10;display:flex;position:fixed;bottom:0;left:0;right:0}.app-nav__item{color:var(--color-text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.7rem;transition:color .2s;display:flex}.app-nav__item .icon{font-size:1.4rem}.app-nav__item.active{color:var(--color-nav-active)}@media (width>=768px){#app{flex-direction:row}.app-nav{border-top:none;border-right:1px solid var(--color-border);flex-direction:column;width:80px;height:100vh;position:sticky;inset:0 auto auto}.app-main{padding-bottom:var(--space-md);width:100%;max-width:600px;margin:0 auto;overflow-y:visible}}.card,.learn-card,.prayer-card{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid var(--color-border)}.btn{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);justify-content:center;align-items:center;font-size:.9rem;font-weight:600;transition:background .2s;display:inline-flex}.btn--primary{background:var(--color-accent);color:#fff}.btn--primary:hover{background:var(--color-accent-light)}.btn--ghost{border:1px solid var(--color-border);color:var(--color-text)}.btn--ghost:hover{background:var(--color-bg)}.modal-overlay{z-index:100;padding:var(--space-md);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);width:100%;max-width:360px}.modal h2{margin-bottom:var(--space-sm)}.modal p{color:var(--color-text-muted);margin-bottom:var(--space-md);font-size:.9rem}.modal__form{gap:var(--space-sm);flex-direction:column;display:flex}.modal__form input{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);outline:none;width:100%}.modal__form input:focus{border-color:var(--color-accent)}.modal__error{color:var(--color-danger)!important;font-size:.85rem!important}.prayer-list{gap:var(--space-sm);flex-direction:column;display:flex}.prayer-card{justify-content:space-between;align-items:center;gap:var(--space-sm);transition:opacity .2s;display:flex}.prayer-card--done{opacity:.45}.prayer-card--active{border-color:var(--color-accent);background:#f0faf4;border-width:2px}.prayer-card__names{flex-direction:column;min-width:80px;display:flex}.prayer-card__name{font-size:1rem;font-weight:600}.prayer-card__name-ar{color:var(--color-text-muted);direction:rtl;font-size:.85rem}.prayer-card__times{align-items:center;gap:var(--space-xs);color:var(--color-text-muted);font-size:.9rem;display:flex}.prayer-card__sep{color:var(--color-border)}.prayer-card__status{text-align:right;font-size:.85rem}.prayer-card__countdown{color:var(--color-accent)}.prayer-card__warning{color:var(--color-warning)}.qibla-view{align-items:center;gap:var(--space-lg);padding:var(--space-xl) 0;flex-direction:column;display:flex}.compass{width:220px;height:220px;position:relative}.compass__dial{border:3px solid var(--color-border);background:var(--color-surface);border-radius:50%;width:100%;height:100%;transition:transform .15s linear;position:relative}.compass__tick{background:var(--color-border);width:2px;height:10px;margin-top:-5px;margin-left:-1px;position:absolute;top:50%;left:50%}.compass__label{text-align:center;width:24px;height:16px;color:var(--color-text-muted);margin-top:-8px;margin-left:-12px;font-size:.75rem;font-weight:600;line-height:16px;position:absolute;top:50%;left:50%}.compass__label--n{color:var(--color-danger);font-weight:700}.compass__needle{background:linear-gradient(to bottom, var(--color-accent) 50%, var(--color-border) 50%);transform-origin:bottom;border-radius:2px;width:4px;height:80px;margin-top:-80px;margin-left:-2px;transition:transform .15s linear;position:absolute;top:50%;left:50%}.compass__hub{background:var(--color-accent);border-radius:50%;width:10px;height:10px;margin-top:-5px;margin-left:-5px;position:absolute;top:50%;left:50%}.compass__kaaba{font-size:1.5rem;position:absolute;top:12px;left:50%;transform:translate(-50%)}.qibla-info{text-align:center;font-size:1.1rem}.qibla-info__dist{color:var(--color-text-muted);margin-top:var(--space-xs);font-size:.9rem}.qibla-info__debug{color:var(--color-text-muted);margin-top:var(--space-xs);opacity:.7;font-size:.75rem}.audio-search{margin-bottom:var(--space-md)}.audio-search__input{border:1px solid var(--color-border);border-radius:var(--radius-sm);width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-surface)}.audio-search__input:focus{border-color:var(--color-accent);outline:none}.sura-list{flex-direction:column;gap:2px;padding-bottom:120px;display:flex}.juz-group{margin-bottom:var(--space-md)}.juz-group__title{z-index:1;background:var(--color-bg);color:var(--color-accent);padding:var(--space-xs) 0;font-size:.85rem;font-weight:700;position:sticky;top:0}.juz-group .sura-item{margin-top:2px}.sura-item{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.sura-item--active{border-color:var(--color-accent);background:#f0faf4}.sura-item__meta{align-items:center;gap:var(--space-sm);flex:1;display:flex}.sura-item__num{color:var(--color-text-muted);text-align:right;min-width:24px;font-size:.8rem}.sura-item__names{flex-direction:column;display:flex}.sura-item__ar{color:var(--color-text-muted);direction:rtl;font-size:.85rem}.sura-item__badge{background:var(--color-accent);color:#fff;border-radius:99px;padding:2px 6px;font-size:.7rem}.sura-item__play{background:var(--color-accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;display:flex}.mini-player{bottom:var(--nav-height);background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-sm) var(--space-md);z-index:9;position:fixed;left:0;right:0}.mini-player__info{margin-bottom:var(--space-xs);justify-content:space-between;font-size:.85rem;display:flex}.mini-player__ar{color:var(--color-text-muted);direction:rtl}.mini-player__controls{justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xs);font-size:1.2rem;display:flex}.mini-player__play{color:var(--color-accent);font-size:1.4rem}.mini-player__progress{background:var(--color-border);cursor:pointer;height:4px;margin-bottom:var(--space-xs);border-radius:2px}.mini-player__bar{background:var(--color-accent);pointer-events:none;border-radius:2px;max-width:100%;height:100%}.mini-player__time{color:var(--color-text-muted);justify-content:space-between;font-size:.75rem;display:flex}.tabs{gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.tabs__btn{padding:var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface);flex:1;font-size:.9rem;transition:all .2s}.tabs__btn.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.learn-progress{background:var(--color-border);height:6px;margin-bottom:var(--space-xs);border-radius:3px}.learn-progress__bar{background:var(--color-accent);border-radius:3px;max-width:100%;height:100%;transition:width .3s}.learn-progress__label{color:var(--color-text-muted);margin-bottom:var(--space-md);font-size:.8rem}.learn-card{margin-bottom:var(--space-md)}.learn-card__title{margin-bottom:var(--space-sm);color:var(--color-accent);font-size:1.2rem}.learn-card__text{margin-bottom:var(--space-md);font-size:.95rem;line-height:1.6}.learn-card__arabic{background:var(--color-bg);border-radius:var(--radius-sm);padding:var(--space-md);margin-bottom:var(--space-md);text-align:center}.learn-card__arabic-text{direction:rtl;font-family:Scheherazade New,serif;font-size:1.6rem;line-height:2}.learn-card__transliteration{color:var(--color-text-muted);margin-bottom:var(--space-xs);font-size:.95rem;font-style:italic}.learn-card__meaning{color:var(--color-text-muted);font-size:.9rem}.learn-card__audio{width:100%}.learn-nav{gap:var(--space-sm);padding-bottom:var(--space-xl);display:flex}.learn-nav .btn{flex:1}.learn-sura-list{gap:var(--space-md);padding-bottom:var(--space-xl);flex-direction:column;display:flex}.learn-sura-list__intro{color:var(--color-text-muted);margin-bottom:var(--space-xs);font-size:.9rem}.learn-card__verse{margin-bottom:var(--space-sm)}.learn-card__verse:last-child{margin-bottom:0}.learn-card__header{justify-content:space-between;align-items:center;gap:var(--space-sm);cursor:pointer;display:flex}.learn-card__header .learn-card__title{margin-bottom:0}.learn-card__header-actions{align-items:center;gap:var(--space-sm);flex-shrink:0;display:flex}.learn-card__chevron{color:var(--color-text-muted);font-size:.75rem;transition:transform .2s}.learn-card__chevron--open{transform:rotate(180deg)}.learn-card__body{margin-top:var(--space-md)}.rakat-list{margin-bottom:var(--space-md);list-style:none}.rakat-list__item{align-items:baseline;gap:var(--space-xs);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-border);flex-wrap:wrap;font-size:.95rem;display:flex}.rakat-list__item:last-child{border-bottom:none}.rakat-list__item--fard{color:var(--color-accent);font-weight:600}.rakat-list__label{color:var(--color-text-muted);font-size:.85rem}.rakat-qunut{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.rakat-qunut__title{margin-bottom:var(--space-xs);color:var(--color-accent);font-size:1rem;font-weight:600}