*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f0d0b;--surface: #161412;--surface2: #1e1b16;--border: #252218;--text: #ede5d4;--text-dim: #8a8070;--text-muted: #504840;--accent: #c5e84a;--accent-hi: #d4f562;--accent-dark: #1a2604;--gold: #c9a84c;--sidebar-bg: #f2ece1;--radius: 6px;--radius-sm: 3px;--sidebar-w: 272px;--f-display: "Cormorant Garamond", Georgia, serif;--f-body: "EB Garamond", Georgia, serif;--f-urdu: "Noto Nastaliq Urdu", serif;--f-sans: "Syne", system-ui, sans-serif}.sidebar{--text: #18140e;--text-dim: #6e6450;--text-muted: #a09080;--border: #ddd4c2}.noise{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px}.vignette{position:fixed;inset:0;z-index:9997;pointer-events:none;background:radial-gradient(ellipse at 65% 50%,transparent 40%,rgba(4,3,2,.55) 100%)}body{font-family:var(--f-body);background:var(--bg);color:var(--text);height:100vh;overflow:hidden}@keyframes reveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app{display:flex;height:100vh;position:relative;z-index:1;animation:reveal .5s cubic-bezier(.22,1,.36,1) both}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;position:relative}.sidebar-header{padding:32px 24px 26px;text-align:center;border-bottom:1px solid var(--border);flex-shrink:0}.logo{display:block}.logo-ar{font-family:var(--f-urdu);font-size:50px;font-weight:700;color:var(--text);line-height:1.3;display:block;margin-bottom:14px}.logo-en{font-family:var(--f-sans);font-size:9px;font-weight:700;letter-spacing:.52em;text-transform:uppercase;color:var(--text-muted);display:block;margin-top:10px}.logo-sub{font-family:var(--f-sans);font-size:10px;font-weight:400;color:var(--text-muted);margin-top:5px;letter-spacing:.04em;opacity:.8}.album-list{flex:1;overflow-y:auto;padding:6px 0 32px;counter-reset:track-num}.album-header{list-style:none;display:flex;align-items:center;gap:10px;padding:20px 20px 8px;font-family:var(--f-sans);font-size:8px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--accent-dark);opacity:.65}.album-header:after{content:"";flex:1;height:1px;background:var(--border)}.album-header:first-child{padding-top:10px}.track-item{list-style:none;counter-increment:track-num;display:flex;align-items:baseline;gap:10px;padding:8px 20px 8px 16px;cursor:pointer;font-family:var(--f-body);font-size:14px;color:var(--text-dim);transition:color .15s,background .15s;border-left:2px solid transparent;line-height:1.35}.track-item:before{content:counter(track-num,decimal-leading-zero);font-family:var(--f-sans);font-size:8px;font-weight:500;color:var(--text-muted);min-width:20px;flex-shrink:0;text-align:right;opacity:.7;transition:opacity .15s}.track-item .track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.track-item:hover{color:var(--text);background:#0000000a}.track-item.active{background:var(--accent);color:var(--accent-dark);border-left-color:transparent;font-weight:500}.track-item.active:before{color:var(--accent-dark);opacity:.55}.sidebar-close{display:none;position:absolute;top:14px;right:14px;z-index:10;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:color .2s;line-height:0}.sidebar-close:hover{color:var(--text)}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#000000b3;z-index:98;opacity:0;transition:opacity .3s;pointer-events:none}.sidebar-backdrop.open{display:block;opacity:1;pointer-events:auto}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:44px 56px 0;max-width:1100px}.player-header{margin-bottom:24px;position:relative;text-align:center}.menu-btn{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--accent);cursor:pointer;padding:8px;border-radius:var(--radius-sm);z-index:5;transition:color .2s;line-height:0}.menu-btn:hover{color:var(--accent-hi)}.track-title{font-family:var(--f-display);font-size:26px;font-weight:500;color:var(--text);text-align:center;line-height:1.4;transition:opacity .3s}.track-title.loading{opacity:.3}.track-title .urdu-heading{font-family:var(--f-urdu);font-size:52px;font-weight:700;direction:rtl;display:block;color:var(--text);line-height:1.4;margin-bottom:24px}.track-title .en{font-family:var(--f-sans);font-size:9px;font-weight:600;font-style:normal;letter-spacing:.38em;text-transform:uppercase;color:var(--text-muted);direction:ltr;display:block;margin-top:10px}.album-name{display:none}.audio-player{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 24px 14px;margin-bottom:24px;position:relative}.player-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px}.ctrl-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:color .18s,background .18s;line-height:0;display:flex;align-items:center;justify-content:center}.ctrl-btn:hover{color:var(--text);background:var(--surface2)}.ctrl-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.play-btn{width:46px;height:46px;background:var(--accent);color:var(--accent-dark);border-radius:50%;box-shadow:0 0 0 1px #c5e84a33,0 4px 20px #c5e84a2e;transition:background .2s,transform .2s,box-shadow .2s}.play-btn:hover{background:var(--accent-hi);transform:scale(1.07);box-shadow:0 0 0 1px #c5e84a59,0 6px 28px #c5e84a4d}.play-btn:active{transform:scale(.93);transition-duration:.08s}.time-display{margin-left:auto;font-family:var(--f-sans);font-size:9.5px;font-weight:500;letter-spacing:.04em;color:var(--text-muted);white-space:nowrap}.progress-container{position:relative;cursor:pointer;padding:8px 0}.progress-pixels{display:flex;align-items:center;gap:1.5px;height:20px}.px{flex:1;height:var(--ph, 3px);background:var(--text-muted);border-radius:1px;transition:height .18s cubic-bezier(.34,1.56,.64,1),background-color .08s ease;transform-origin:center bottom}.px.played{height:16px;background:var(--accent)}.px.head{height:16px;background:var(--accent-hi);box-shadow:0 0 8px #c5e84a8c}.seek-bar{position:absolute;inset:-8px 0;width:100%;opacity:0;cursor:pointer;z-index:4;appearance:none}.subtitles-area{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1;min-height:0;padding-bottom:28px}.subtitle-column{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;overflow-y:auto;position:relative}.subtitle-column:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,var(--surface));pointer-events:none;z-index:2}.subtitle-header{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface2);z-index:3}.subtitle-label-en{font-family:var(--f-sans);font-size:8px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--text-muted)}.subtitle-label-ar{font-family:var(--f-urdu);font-size:11px;color:var(--text-muted);opacity:.3}.subtitle-cues{padding:4px 0 40px}.track-cues{display:none}.track-cues.visible{display:block}.cue{padding:9px 16px 9px 18px;margin:1px 0;border-left:2px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}.cue:before{display:none}.cue:hover{background:#ffffff05}.cue.active{background:#c5e84a0e;border-left-color:var(--accent)}.cue .cue-time{font-family:var(--f-sans);font-size:8px;font-weight:500;letter-spacing:.05em;color:var(--text-muted);display:block;margin-bottom:4px;opacity:.35;transition:opacity .2s}.cue:hover .cue-time{opacity:.5}.cue.active .cue-time{opacity:.7}#romanColumn{order:1}#urduColumn{order:2}#urduColumn .cue{font-family:var(--f-urdu);direction:rtl;text-align:right;font-size:21px;line-height:1.75;padding-right:18px;padding-left:12px;border-left:none;border-right:2px solid transparent}#urduColumn .cue .cue-time{direction:ltr;text-align:left}#urduColumn .cue:hover{background:#ffffff05}#urduColumn .cue.active{background:#c5e84a0e;border-right-color:var(--accent)}#romanColumn .cue{font-family:var(--f-body);font-size:17px;line-height:1.9;letter-spacing:.003em}.subtitle-tabs{display:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.sidebar .album-list::-webkit-scrollbar-thumb{background:#ccc4b4}.sidebar .album-list::-webkit-scrollbar-thumb:hover{background:#b8ae9e}.empty-state{padding:40px;text-align:center;color:var(--text-dim)}.empty-state .big{font-family:var(--f-urdu);font-size:48px;color:var(--accent);opacity:.1;margin-bottom:12px;line-height:1}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-width:820px){.menu-btn{display:flex;align-items:center;justify-content:center}.player-header{position:relative;padding-right:10px}.sidebar{position:fixed;top:0;left:0;width:100%;max-width:100%;height:100vh;min-width:unset;z-index:99;transform:translate(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1)}.sidebar.open{transform:translate(0)}.sidebar-close{display:flex;align-items:center;justify-content:center}.app{flex-direction:column;height:100vh}.main{padding:10px 16px 0;overflow:hidden}.player-sticky{background:var(--bg);flex-shrink:0;box-shadow:0 4px 24px #00000080}.player-sticky .audio-player{margin-bottom:0}.player-sticky .player-header{margin-bottom:8px}.subtitle-tabs{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:10px;flex-shrink:0;background:var(--surface)}.subtitle-tab{flex:1;background:none;border:none;color:var(--text-muted);padding:10px;font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .15s,background .15s;border-right:1px solid var(--border)}.subtitle-tab:last-child{border-right:none}.subtitle-tab.active{color:var(--accent);background:#c5e84a0d}.subtitles-area.tabbed #urduColumn,.subtitles-area.tabbed #romanColumn{display:none}.subtitles-area.tabbed #urduColumn.tab-active,.subtitles-area.tabbed #romanColumn.tab-active{display:flex;flex-direction:column}.subtitles-area{grid-template-columns:1fr;grid-template-rows:1fr;gap:0;margin-top:8px}.track-title{font-size:18px}.track-title .urdu-heading{font-size:28px}.track-title .en{font-size:8px}.cue{padding:10px 16px;margin:2px 0}.ctrl-btn{padding:10px}.track-item{font-size:17px}}@media(max-width:480px){.main{padding:8px 12px 0}.audio-player{padding:10px 14px;margin-bottom:14px}.player-controls{gap:8px;margin-bottom:10px}.play-btn{width:40px;height:40px}.play-btn svg{width:18px;height:18px}.ctrl-btn svg{width:16px;height:16px}.time-display{font-size:9px}.track-title{font-size:15px}.track-title .urdu-heading{font-size:22px}#urduColumn .cue{font-size:19px;line-height:1.7}#romanColumn .cue{font-size:18px;line-height:1.8}.track-item{font-size:17px;padding:12px 16px 12px 14px}}@media(pointer:coarse){.progress-container{padding:12px 0}.seek-bar{inset:-12px 0}}