:root{--font-arabic:Amiri,"Traditional Arabic",serif;--font-heading:"Reem Kufi",sans-serif;--primary-glow:#a5f3fc99;--secondary-bg:#ffffff14;--border-light:#ffffff26}.listen-container{color:#1e293b;direction:rtl;flex-direction:column;gap:2rem;max-width:900px;min-height:85vh;margin:0 auto;padding:2rem 1rem;display:flex}.listen-header{text-align:center;margin-bottom:1rem}.listen-header h1{font-family:var(--font-heading);background:linear-gradient(135deg,#0f172a 0%,#334155 100%);-webkit-text-fill-color:transparent;letter-spacing:-1px;-webkit-background-clip:text;background-clip:text;margin-bottom:.2rem;font-size:3rem}.listen-header p{font-family:var(--font-arabic);opacity:.7;font-size:1.4rem}.listen-card{-webkit-backdrop-filter:blur(25px);border:1px solid var(--border-light);box-shadow:0 10px 40px -10px #0000001a inset 0 0 0 1px #fff3;background:#ffffff1a;border-radius:2rem;flex-direction:column;gap:2rem;padding:2.5rem;display:flex;position:relative;overflow:hidden}.glass-pattern:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#0000 0% 2px,#00000008 3px,#0000 4px),linear-gradient(30deg,#00000005 1px,#0000 1px),linear-gradient(150deg,#00000005 1px,#0000 1px);background-size:20px 20px,30px 30px,30px 30px;position:absolute;inset:0}.selection-area{grid-template-columns:1fr 1fr 1fr 1fr;align-items:end;gap:1.5rem;display:grid}.select-group{flex-direction:column;gap:.6rem;display:flex}.select-group label{font-family:var(--font-heading);color:#475569;align-items:center;gap:.6rem;font-size:.95rem;font-weight:700;display:flex}.select-wrapper{position:relative}.custom-select{background:var(--secondary-bg);border:1px solid var(--border-light);width:100%;font-family:var(--font-arabic);cursor:pointer;appearance:none;color:inherit;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-position:1rem 50%;background-repeat:no-repeat;background-size:1em;border-radius:1rem;outline:none;padding:.9rem 1rem;font-size:1.1rem;transition:all .3s}.custom-select:focus,.custom-select:hover{background-color:#fff3;border-color:#a5f3fc80;box-shadow:0 0 0 3px #a5f3fc1a}.mode-tabs{background:#0000000d;border-radius:1rem;gap:0;width:100%;padding:.3rem;display:flex}.mode-tab{color:#64748b;cursor:pointer;font-family:var(--font-heading);background:0 0;border:none;border-radius:.8rem;flex:1;padding:.6rem .5rem;font-size:.9rem;transition:all .3s}.mode-tab.active{color:#0f172a;background:#fff;box-shadow:0 2px 8px #0000000d}.ornamental-divider{text-align:center;margin:.5rem 0;position:relative}.ornamental-divider:before,.ornamental-divider:after{content:"";background:linear-gradient(90deg,#0000,#0000001a,#0000);width:40%;height:1px;position:absolute;top:50%}.ornamental-divider:before{right:0}.ornamental-divider:after{left:0}.divider-icon{color:#0003;font-size:1.5rem}.player-section{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.now-playing{text-align:center;width:100%}.bismillah{font-family:var(--font-arabic);opacity:.8;margin-bottom:1rem;font-size:1.8rem}.surah-info h2{font-family:var(--font-heading);color:#0f172a;margin-bottom:1rem;font-size:2.2rem}.ayah-display-box{max-width:100%;box-shadow:inset 0 0 30px #ffffff80 0 4px 15px #00000008;background:#fff6;border:1px solid #fff9;border-radius:1.5rem;margin:1rem auto;padding:2.5rem 2rem;position:relative}.ayah-display-box:before{content:"";pointer-events:none;border:1px dashed #0000001a;border-radius:1rem;position:absolute;inset:10px}.ayah-text{color:#1e293b;font-size:2.2rem;line-height:2.2;font-family:var(--font-arabic);text-align:center;direction:rtl}.ayah-end-symbol{font-family:var(--font-arabic);color:#94a3b8;justify-content:center;align-items:center;margin:0 .5rem;font-size:.9em;display:inline-flex;position:relative}.ayah-number{color:#1e293b;margin-top:2px;font-size:.4em;font-weight:700;position:absolute}.reciter-name{font-family:var(--font-heading);color:#64748b;margin-top:1rem;font-size:1rem}.audio-controls-wrapper{background:#ffffff4d;border:1px solid #fff3;border-radius:1.5rem;width:100%;padding:1.5rem}.controls-row{flex-direction:column;gap:1.5rem;display:flex}.controls-main{justify-content:center;align-items:center;gap:2rem;width:100%;display:flex}.volume-area,.volume-placeholder{align-items:center;gap:.5rem;width:150px;padding:0 4px;display:flex}.sliders-bottom{align-items:center;gap:1rem;width:100%;display:flex}.sliders-bottom .progress-area{flex:1}.sliders-bottom .volume-area{flex-shrink:0}.control-btn{cursor:pointer;color:var(--app-primary);background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 6px -1px #0000001a}.control-btn.primary{width:75px;height:75px;box-shadow:0 10px 15px -3px #0000001a 0 0 0 4px #ffffff80;background:linear-gradient(135deg,#fff 0%,#f1f5f9 100%);font-size:1.8rem}.control-btn.primary:hover:not(:disabled){box-shadow:0 20px 25px -5px #0000001a 0 0 0 4px #a5f3fc66;color:#0ea5e9;transform:scale(1.05)}.control-btn.secondary{width:45px;height:45px;box-shadow:none;background:#ffffff80;border:1px solid #fff3;font-size:1rem}.control-btn.secondary:hover:not(:disabled){background:#fff;transform:translateY(-2px)}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.progress-area{color:#64748b;align-items:center;gap:1rem;width:100%;padding:0 4px;font-family:monospace;font-size:.9rem;display:flex}.slider-container{flex:1;align-items:center;padding:0 8px;display:flex}input[type=range]{-webkit-appearance:none;cursor:pointer;direction:rtl;background:#0000001a linear-gradient(#0f172a,#0f172a) 100% no-repeat;border-radius:3px;width:100%;max-width:100%;height:6px;margin:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:1px solid #0000001a;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 2px 5px #0003}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider,.delay-slider{flex:1;height:4px!important}.mute-btn{cursor:pointer;color:#64748b;background:0 0;border:none;width:24px}.loading-spinner{font-family:var(--font-heading);color:#64748b;padding:2rem}@media (max-width:900px){.selection-area{grid-template-columns:1fr 1fr;gap:1rem}}@media (max-width:600px){.selection-area{grid-template-columns:1fr;gap:1rem}.controls-row{gap:1.5rem}.sliders-bottom{flex-direction:column;gap:1rem}.sliders-bottom .volume-area{justify-content:center;width:100%}.volume-placeholder{display:none}.ayah-text{font-size:1.6rem}.listen-header h1{font-size:2rem}}