:root{--bg-primary:#0a0f1a;--bg-secondary:#111827;--bg-card:#1a2236;--bg-card-hover:#1f2a42;--bg-glass:rgba(26,34,54,0.85);--gold-primary:#d4a853;--gold-light:#f0d48a;--gold-dark:#b8892e;--gold-glow:rgba(212,168,83,0.3);--emerald:#10b981;--emerald-glow:rgba(16,185,129,0.2);--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-subtle:rgba(212,168,83,0.15);--border-card:rgba(212,168,83,0.25);--font-arabic:"Noto Naskh Arabic","Amiri",serif;--font-display:"Amiri",serif;--player-height:180px;--transition-fast:150ms ease;--transition-medium:300ms ease;--transition-slow:500ms ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-arabic);background:var(--bg-primary);color:var(--text-primary);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle at 20% 50%,rgba(212,168,83,.03) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(16,185,129,.02) 0,transparent 50%),radial-gradient(circle at 50% 80%,rgba(212,168,83,.02) 0,transparent 50%)}.app-header{text-align:center;padding:2.5rem 1rem 1.5rem;background:linear-gradient(180deg,rgba(212,168,83,.08),transparent);border-bottom:1px solid var(--border-subtle);position:relative}.header-ornament{font-size:2rem;color:var(--gold-primary);margin-bottom:.75rem;opacity:.9;filter:drop-shadow(0 0 8px var(--gold-glow))}.app-title{font-family:var(--font-display);font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,var(--gold-light) 0,var(--gold-primary) 50%,var(--gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.02em;margin-bottom:.35rem}.app-subtitle{font-size:.95rem;color:var(--text-secondary);font-weight:400}.app-main{max-width:960px;margin:0 auto;padding:1.5rem 1rem;padding-bottom:calc(var(--player-height) + 2rem)}.hizb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.85rem}.hizb-card{aspect-ratio:1;border:none;background:var(--bg-card);border-radius:16px;cursor:pointer;position:relative;overflow:hidden;transition:transform var(--transition-medium),box-shadow var(--transition-medium),background var(--transition-medium);outline:1px solid var(--border-card);outline-offset:-1px}.hizb-card:before{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,rgba(212,168,83,.1),transparent 60%);opacity:0;transition:opacity var(--transition-medium)}.hizb-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 24px var(--gold-glow);background:var(--bg-card-hover)}.hizb-card:hover:before{opacity:1}.hizb-card:active{transform:translateY(-1px) scale(1.01)}.hizb-card-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.15rem}.hizb-ornament{font-size:.55rem;color:var(--gold-primary);opacity:.5;transition:opacity var(--transition-medium)}.hizb-card:hover .hizb-ornament{opacity:1}.hizb-number{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--gold-light);line-height:1;text-shadow:0 0 20px var(--gold-glow)}.hizb-label{font-size:.75rem;color:var(--text-secondary);font-weight:500}.hizb-active{outline:2px solid var(--gold-primary);outline-offset:-2px;box-shadow:0 0 16px var(--gold-glow)}.hizb-cached{outline:2px solid #10b981;outline-offset:-2px;box-shadow:0 0 12px rgba(16,185,129,.25)}.hizb-partial{outline:2px solid #f59e0b;outline-offset:-2px;box-shadow:0 0 12px rgba(245,158,11,.25)}.hizb-not-cached{outline:2px solid #ef4444;outline-offset:-2px;box-shadow:0 0 12px rgba(239,68,68,.2)}.offline-legend{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.75rem 1rem;margin-bottom:1rem;text-align:center;animation:overlayFadeIn .3s ease}.offline-legend-title{font-family:var(--font-arabic);font-size:.9rem;font-weight:600;color:var(--gold-light);margin-bottom:.5rem}.offline-legend-items{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--text-secondary)}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}.legend-dot-green{background:#10b981}.legend-dot-orange{background:#f59e0b}.legend-dot-red{background:#ef4444}.tomon-dialog{border:none;background:transparent;max-width:90vw;width:480px;padding:0;overflow:visible;margin:auto;position:fixed;inset:0;display:flex!important;align-items:center;justify-content:center;height:fit-content}.tomon-dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tomon-dialog-content{background:var(--bg-secondary);border:1px solid var(--border-card);border-radius:24px;padding:1.75rem;box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 40px var(--gold-glow);animation:dialogEnter .35s cubic-bezier(.16,1,.3,1)}@keyframes dialogEnter{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.tomon-dialog-header{text-align:center;margin-bottom:1.5rem;position:relative}.tomon-dialog-header h2{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--gold-light);margin-bottom:.25rem}.tomon-dialog-subtitle{font-size:.9rem;color:var(--text-secondary)}.tomon-close-btn{position:absolute;top:-.25rem;left:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:border var(--transition-fast),color var(--transition-fast)}.tomon-close-btn:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}.tomon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.tomon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:.9rem .5rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;cursor:pointer;transition:transform var(--transition-medium),border var(--transition-medium),box-shadow var(--transition-medium),border-color var(--transition-medium)}.tomon-card:hover{transform:translateY(-3px);background:var(--bg-card-hover);border-color:var(--gold-primary);box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 12px var(--gold-glow)}.tomon-card:active{transform:translateY(-1px)}.tomon-number{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--gold-light);line-height:1}.tomon-label{font-size:.65rem;color:var(--text-secondary);text-align:center;line-height:1.3}.audio-player{position:fixed;bottom:0;left:0;right:0;height:var(--player-height);background:linear-gradient(180deg,rgba(17,24,39,.95),rgba(10,15,26,.98));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-card);padding:.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:100;box-shadow:0 -8px 32px rgba(0,0,0,.4);animation:playerSlideUp .4s cubic-bezier(.16,1,.3,1)}@keyframes playerSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.player-track-info{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.player-hizb{color:var(--gold-light);font-weight:600}.player-separator{color:var(--text-muted);font-size:.75rem}.player-tomon{color:var(--text-secondary)}.player-controls{display:flex;align-items:center;gap:1rem}.player-btn{border:none;background:transparent;color:var(--text-primary);cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast);padding:.25rem}.player-btn:disabled{color:var(--text-muted);cursor:default}.player-btn:not(:disabled):hover{color:var(--gold-primary);transform:scale(1.15)}.player-btn-play{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold-primary) 0,var(--gold-dark) 100%)!important;color:var(--bg-primary)!important;font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--gold-glow);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.player-btn-play:hover{transform:scale(1.1)!important;box-shadow:0 6px 24px var(--gold-glow)}.player-btn-skip{font-size:1.1rem}.player-options{display:flex;gap:.75rem;margin-bottom:.25rem}.player-btn-toggle{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.04);padding:.45rem .85rem;border-radius:100px;border:1px solid rgba(212,168,83,.1);font-size:.8rem;font-weight:600;color:var(--text-secondary);opacity:.8;transition:all var(--transition-medium);white-space:nowrap}.player-btn-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(212,168,83,.3);opacity:1}.player-btn-toggle.active{background:rgba(212,168,83,.15);border-color:var(--gold-primary);color:var(--gold-light);opacity:1;box-shadow:0 0 15px var(--gold-glow);text-shadow:0 0 8px var(--gold-glow)}.player-btn-toggle span{font-family:var(--font-arabic);line-height:1}.player-progress{display:flex;align-items:center;gap:.75rem;width:100%;max-width:480px;direction:ltr;margin-bottom:2.5rem}.player-time{font-size:.95rem;color:var(--text-muted);min-width:40px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600;direction:ltr}.player-seekbar-wrapper{position:relative;flex:1 1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:visible}.player-seekbar-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-primary));border-radius:3px;transition:width .1s linear;pointer-events:none}.player-seekbar{position:absolute;top:-10px;left:0;width:100%;height:26px;appearance:none;background:transparent;cursor:pointer;direction:ltr}.player-seekbar::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold-primary);box-shadow:0 0 10px var(--gold-glow),0 2px 6px rgba(0,0,0,.4);cursor:pointer;border:2px solid var(--gold-light)}.player-seekbar::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold-primary);border:2px solid var(--gold-light);box-shadow:0 0 10px var(--gold-glow),0 2px 6px rgba(0,0,0,.4);cursor:pointer}@media (max-width:600px){.app-header{padding:1.75rem 1rem 1.25rem}.header-ornament{font-size:1.5rem}.app-title{font-size:1.6rem}.app-subtitle{font-size:.8rem}.hizb-grid{grid-template-columns:repeat(4,1fr);gap:.65rem}.hizb-number{font-size:1.3rem}.hizb-label{font-size:.65rem}.hizb-ornament{font-size:.45rem}.tomon-dialog{width:95vw;max-width:95vw}.tomon-dialog-content{padding:1.25rem;border-radius:20px}.tomon-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}.tomon-dialog-header h2{font-size:1.3rem}}@media (min-width:601px) and (max-width:768px){.hizb-grid{grid-template-columns:repeat(5,1fr)}}@media (min-width:769px){.hizb-grid{grid-template-columns:repeat(6,1fr)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:rgba(212,168,83,.3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgba(212,168,83,.5)}.download-header-btn{position:absolute;top:1rem;left:1rem;background:rgba(212,168,83,.12);border:1px solid var(--border-card);color:var(--gold-light);padding:.5rem 1rem;border-radius:12px;cursor:pointer;font-family:var(--font-arabic);font-size:.85rem;font-weight:600;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.download-header-btn:hover{background:rgba(212,168,83,.2);box-shadow:0 4px 16px var(--gold-glow);transform:translateY(-1px)}.install-btn{position:absolute;top:1rem;right:1rem;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:var(--emerald);padding:.5rem 1rem;border-radius:12px;cursor:pointer;font-family:var(--font-arabic);font-size:.85rem;font-weight:600;transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.install-btn:hover{background:rgba(16,185,129,.2);box-shadow:0 4px 16px var(--emerald-glow);transform:translateY(-1px)}.download-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:overlayFadeIn .2s ease}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.download-dialog-content{background:var(--bg-secondary);border:1px solid var(--border-card);border-radius:24px;padding:1.75rem;box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 40px var(--gold-glow);animation:dialogEnter .35s cubic-bezier(.16,1,.3,1);width:100%;max-width:560px;max-height:85vh;overflow-y:auto}.download-close-btn{position:absolute;top:-.25rem;left:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--text-secondary);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast);z-index:10}.download-close-btn:hover{background:rgba(255,255,255,.15);color:var(--text-primary)}.download-dialog-header{text-align:center;margin-bottom:1.5rem;position:relative}.download-dialog-header h2{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--gold-light)}.download-mode-buttons{display:flex;flex-direction:column;gap:.75rem}.download-action-btn{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;cursor:pointer;text-align:right;transition:background var(--transition-medium),border-color var(--transition-medium),transform var(--transition-medium),box-shadow var(--transition-medium)}.download-action-btn:hover{background:var(--bg-card-hover);border-color:var(--gold-primary);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 12px var(--gold-glow)}.download-action-icon{font-size:1.6rem}.download-action-text{display:flex;flex-direction:column;gap:.2rem}.download-action-text strong{color:var(--text-primary);font-family:var(--font-arabic);font-size:1rem}.download-action-text small{color:var(--text-secondary);font-size:.75rem}.download-select-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:1rem}.download-back-btn{background:transparent;border:none;color:var(--gold-primary);font-family:var(--font-arabic);font-size:.9rem;cursor:pointer;padding:.25rem .5rem;transition:color var(--transition-fast)}.download-dialog-footer{margin-top:1.5rem;display:flex;justify-content:center}.download-footer-close-btn{background:rgba(255,255,255,.05);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:.6rem 2rem;border-radius:12px;cursor:pointer;font-family:var(--font-arabic);font-size:.9rem;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.download-footer-close-btn:hover{background:rgba(255,255,255,.1);color:var(--text-primary);border-color:var(--gold-primary)}.download-back-btn:hover{color:var(--gold-light)}.download-hizb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;max-height:50vh;overflow-y:auto;padding-left:4px}.download-hizb-card{position:relative;aspect-ratio:1;border:1px solid var(--border-subtle);background:var(--bg-card);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.download-hizb-card:not(:disabled):hover{background:var(--bg-card-hover);border-color:var(--gold-primary);transform:scale(1.05)}.download-hizb-card:disabled{cursor:default;opacity:.85}.download-hizb-cached{border-color:var(--emerald)!important;background:rgba(16,185,129,.08)!important}.download-hizb-num{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--gold-light)}.download-hizb-badge{position:absolute;top:-4px;left:-4px;font-size:.65rem}.download-progress-section{display:flex;flex-direction:column;align-items:center;gap:.75rem}.download-progress-bar-wrapper{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}.download-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-primary),var(--emerald));border-radius:4px;transition:width .2s ease}.download-progress-info{display:flex;justify-content:space-between;width:100%;font-size:.8rem;color:var(--text-secondary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.download-cancel-btn{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#f87171;padding:.5rem 1.5rem;border-radius:10px;cursor:pointer;font-family:var(--font-arabic);font-size:.85rem;transition:background var(--transition-fast),transform var(--transition-fast)}.download-cancel-btn:hover{background:rgba(239,68,68,.25);transform:scale(1.03)}@media (max-width:600px){.download-dialog-content{padding:1.25rem}.download-hizb-grid{grid-template-columns:repeat(5,1fr)}.download-header-btn{position:static;margin-top:.75rem}}:focus-visible{outline:2px solid var(--gold-primary);outline-offset:2px}.pwa-update-banner{position:fixed;bottom:calc(var(--player-height) + 1.5rem);left:50%;transform:translateX(-50%);width:min(90vw,500px);z-index:1000;animation:bannerSlideUp .5s cubic-bezier(.16,1,.3,1)}@keyframes bannerSlideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.pwa-update-content{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--gold-primary);border-radius:16px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 20px var(--gold-glow)}.pwa-update-icon{font-size:1.5rem;filter:drop-shadow(0 0 8px var(--gold-glow))}.pwa-update-text{flex:1 1}.pwa-update-text strong{display:block;font-size:1rem;color:var(--gold-light);margin-bottom:.15rem}.pwa-update-text p{font-size:.8rem;color:var(--text-secondary);line-height:1.4}.pwa-update-btn{background:linear-gradient(135deg,var(--gold-primary),var(--gold-dark));border:none;border-radius:10px;color:var(--bg-primary);padding:.6rem 1.2rem;font-size:.85rem;font-weight:700;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap}.pwa-update-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px var(--gold-glow)}.pwa-update-btn:active{transform:scale(.98)}.pwa-update-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.pwa-update-error{color:#f87171;font-size:.78rem;margin-top:.35rem;font-weight:600;animation:bannerSlideUp .3s ease}@media (max-width:600px){.pwa-update-banner{bottom:calc(var(--player-height) + 1rem)}.pwa-update-content{padding:.85rem 1rem;gap:.75rem}.pwa-update-text strong{font-size:.9rem}.pwa-update-text p{font-size:.75rem}.pwa-update-btn{padding:.5rem 1rem;font-size:.8rem}}