@font-face{font-family:HafsUthmanic;src:url(/rukje/assets/HafsUthmanicScriptRegular-CDdq5xhX.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #1e7e34;--primary-light: #28a745;--primary-dark: #155724;--accent-color: #ffc107;--background-color: #f8f9fa;--surface-color: #ffffff;--text-primary: #212529;--text-secondary: #6c757d;--border-color: #dee2e6;--shadow-light: 0 2px 4px rgba(0, 0, 0, .08);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .12);--shadow-heavy: 0 8px 24px rgba(0, 0, 0, .15);--border-radius: 12px;--border-radius-small: 8px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--arabic-font-size: 1.8rem;--translation-font-size: 1.1rem}body.dark-theme{--primary-color: #28a745;--primary-light: #2ecc71;--primary-dark: #1e7e34;--accent-color: #f1c40f;--background-color: #121212;--surface-color: #1e1e1e;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--border-color: #333333;--shadow-light: 0 2px 4px rgba(0, 0, 0, .2);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .3);--shadow-heavy: 0 8px 24px rgba(0, 0, 0, .4)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--background-color);overflow-x:hidden;transition:background-color .3s,color .3s;padding-bottom:90px}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));color:#fff;padding:1rem 0;position:sticky;top:0;z-index:1000;box-shadow:var(--shadow-medium)}.header-content{display:flex;justify-content:space-between;align-items:center;min-height:40px}.logo{display:flex;align-items:center;gap:12px;min-width:0}.logo i{font-size:1.5rem;color:var(--accent-color);flex-shrink:0}.logo h1{font-size:1.5rem;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-controls{display:flex;align-items:center;gap:.5rem}.theme-toggle,.share-btn{background:none;border:none;color:#fff;cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:var(--transition)}.theme-toggle:hover,.share-btn:hover{background-color:#ffffff1a}.theme-toggle{position:relative;overflow:hidden}.theme-toggle i{transition:transform .3s ease-out;position:absolute}.theme-toggle .fa-sun{transform:translateY(-150%)}.theme-toggle .fa-moon,.dark-theme .theme-toggle .fa-sun{transform:translateY(0)}.dark-theme .theme-toggle .fa-moon{transform:translateY(150%)}.menu-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--border-radius-small);transition:var(--transition);z-index:1001}.menu-toggle span{width:25px;height:3px;background-color:#fff;margin:3px 0;transition:var(--transition);border-radius:2px}.menu-toggle.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}.nav{background-color:var(--surface-color);border-bottom:1px solid var(--border-color);position:sticky;top:72px;z-index:999}.nav-list{display:flex;list-style:none;gap:1rem;padding:.5rem 0;flex-wrap:wrap;align-items:center}.nav-link{text-decoration:none;color:var(--text-secondary);font-weight:500;padding:.5rem 1rem;border-radius:var(--border-radius-small);transition:var(--transition);position:relative;display:inline-block}.nav-link:hover,.nav-link.active{color:var(--primary-color);background-color:#1e7e341a}.dark-theme .nav-link:hover,.dark-theme .nav-link.active{background-color:#28a74533}.nav-link.active:after{content:"";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:30px;height:3px;background-color:var(--primary-color);border-radius:2px}.nav-link-special{background-color:#0000000a;border-radius:50px;font-weight:600;padding-left:1.5rem;padding-right:1.5rem;display:flex;align-items:center;gap:.5rem}.dark-theme .nav-link-special{background-color:#ffffff14}.nav-link-special.active{background-color:var(--accent-color);color:#111;box-shadow:0 2px 8px #0000001a}.dark-theme .nav-link-special.active{color:#212529}.nav-link-special.active:after{display:none}.nav-link-special:hover:not(.active){background-color:#00000014}.dark-theme .nav-link-special:hover:not(.active){background-color:#ffffff26}.main{padding:2rem 0;min-height:calc(100vh - 160px)}.controls{display:flex;gap:1rem;margin-bottom:2rem;background-color:var(--surface-color);padding:1rem;border-radius:var(--border-radius);border:1px solid var(--border-color);align-items:stretch;transition:display .3s}.controls-column{display:flex;flex-direction:column;gap:1rem;flex:1}.control-group{display:flex;align-items:center;gap:.5rem;flex:1}.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-input{display:none}.toggle-slider{position:relative;width:50px;height:24px;background-color:var(--border-color);border-radius:12px;transition:var(--transition)}.dark-theme .toggle-slider{background-color:#555}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:#fff;border-radius:50%;transition:var(--transition);box-shadow:0 2px 4px #0003}.toggle-input:checked+.toggle-slider{background-color:var(--primary-color)}.toggle-input:checked+.toggle-slider:before{transform:translate(26px)}.toggle-text{font-weight:500;color:var(--text-primary);font-size:.9rem}.font-size-controls{justify-content:flex-start}.font-size-controls .toggle-text{margin-right:auto}.font-btn{background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-secondary);width:32px;height:32px;border-radius:var(--border-radius-small);cursor:pointer;font-weight:600;transition:var(--transition);flex-shrink:0}.font-btn:hover{background-color:var(--border-color);color:var(--text-primary)}.dark-theme .font-btn{background-color:#2a2a2a}.dark-theme .font-btn:hover{background-color:#333}.content-sections{margin-top:2rem}.content-section{display:none}.content-section.active{display:block}.section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color)}.section-title{display:flex;align-items:center;gap:12px;font-size:1.8rem;color:var(--primary-color);margin:0;padding:0;border:none}.section-title i{font-size:1.5rem}.section-repeat-control{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.section-repeat-control label{font-size:.85rem;color:var(--text-secondary);font-weight:500}.section-repeat-control div{display:flex;align-items:center;gap:.5rem;background-color:var(--background-color);padding:.25rem .75rem;border-radius:var(--border-radius-small);border:1px solid var(--border-color)}.section-repeat-control i{color:var(--text-secondary)}.section-repeat-control input[type=number]{width:50px;border:none;background:transparent;color:var(--text-primary);font-size:1rem;text-align:center;font-weight:600;-moz-appearance:textfield}.section-repeat-control input[type=number]::-webkit-outer-spin-button,.section-repeat-control input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.section-repeat-control input:focus{outline:none}.verses-container{display:flex;flex-direction:column}.verse-wrapper{margin-bottom:2.5rem}.verse-wrapper:last-child{margin-bottom:0}.card-repeat-instruction{text-align:center;font-weight:500;color:var(--text-secondary);background-color:var(--surface-color);padding:.75rem;border:1px dashed var(--border-color);border-bottom:none;border-radius:var(--border-radius) var(--border-radius) 0 0;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem}.dark-theme .card-repeat-instruction{background-color:var(--background-color)}.card-repeat-instruction i{color:var(--primary-color)}.verse-card{background-color:var(--surface-color);padding:1.5rem;box-shadow:var(--shadow-light);transition:var(--transition);border:1px solid var(--border-color);border-left:4px solid var(--primary-light);border-radius:0 0 var(--border-radius) var(--border-radius)}.verse-card:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px)}.dark-theme .verse-card:hover{border-color:#555}.verse-card.playing{border-left-color:var(--accent-color);box-shadow:0 0 15px #ffc10766}body.dark-theme .verse-card.playing{box-shadow:0 0 15px #f1c40f4d}.verse-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.verse-name{font-size:1.3rem;font-weight:600;color:var(--primary-color);margin:0}.verse-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto}.verse-audio-controls{display:flex;align-items:center;gap:.75rem}.play-verse-btn{background-color:var(--primary-light);color:#fff;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--transition);position:relative}.play-verse-btn:hover{background-color:var(--primary-dark)}.play-verse-btn .fa-pause{display:none}.play-verse-btn.playing{background-color:var(--accent-color)}.play-verse-btn.playing .fa-play,.play-verse-btn.loading .fa-play{display:none}.play-verse-btn.playing .fa-pause{display:block}.play-verse-btn.loading:after{content:"";position:absolute;width:20px;height:20px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.verse-repeat-control{display:flex;align-items:center;gap:.25rem;padding-left:.75rem;margin-left:.75rem;border-left:1px solid var(--border-color)}.verse-repeat-control i{font-size:.9rem;color:var(--text-secondary)}.verse-repeat-control input{width:40px;font-size:.9rem;text-align:center;border:1px solid var(--border-color);border-radius:var(--border-radius-small);background-color:var(--background-color);color:var(--text-primary);padding:.2rem}.verse-repeat-control input:focus{outline:none;border-color:var(--primary-color)}.arabic-text{text-align:right;direction:rtl;color:var(--text-primary);padding:1.5rem;background:linear-gradient(135deg,var(--background-color),#e9ecef);border-radius:var(--border-radius-small);border-right:4px solid var(--primary-color)}.dark-theme .arabic-text{background:linear-gradient(135deg,#222,#2a2a2a)}.arabic-text span{font-family:HafsUthmanic,Amiri,serif;font-size:var(--arabic-font-size);line-height:2.2}.arabic-text.clickable-words .word{display:inline;cursor:pointer;border-radius:6px;padding:2px 4px;transition:background-color .15s ease,color .15s ease}.arabic-text.clickable-words .word:hover{background-color:#e67e2226}.arabic-text.clickable-words .word.active{background-color:#e67e2259;color:#c0550a;border-radius:6px}.arabic-text.clickable-words .word.playing{background-color:#e67e22b3;color:#7d3200;font-weight:700;border-radius:6px}.dark-theme .arabic-text.clickable-words .word.active{background-color:#e67e2259;color:#f0a060}.dark-theme .arabic-text.clickable-words .word.playing{background-color:#e67e22a6;color:#ffd0a0}.ayah-group{display:inline}.verse-number{display:inline;color:var(--primary-color);font-size:var(--arabic-font-size);font-family:HafsUthmanic,Amiri,serif;margin:0 .15em;vertical-align:middle;line-height:inherit}.transliteration-text,.translation-text{display:none;font-size:var(--translation-font-size);line-height:1.8;padding:1rem;border-radius:var(--border-radius-small)}.transliteration-text{font-family:Inter,sans-serif;color:var(--text-secondary);font-style:italic;background-color:#6c757d1a}.dark-theme .transliteration-text{background-color:#a0a0a01a}.translation-text{color:var(--text-primary);background-color:#1e7e340d;border-left:4px solid var(--primary-light)}.dark-theme .translation-text{background-color:#28a7451a}.verse-name-container{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}.verse-repeat-hint{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background-color:var(--background-color);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:50px;font-size:.8rem;font-weight:500}.verse-repeat-hint i{font-size:.7rem}.audio-controls-header{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;margin-bottom:2rem;box-shadow:var(--shadow-light);display:flex;flex-direction:column;gap:1.5rem}.search-container{position:relative;width:100%}.search-input{width:100%;padding:14px 20px 14px 50px;border-radius:50px;border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-primary);font-size:1rem;transition:var(--transition)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #1e7e3426}.dark-theme .search-input:focus{box-shadow:0 0 0 3px #28a74540}.search-input::placeholder{color:var(--text-secondary)}.search-icon-inside{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.filter-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.filter-btn{padding:10px 20px;border:1px solid var(--border-color);background:var(--surface-color);color:var(--text-secondary);border-radius:50px;cursor:pointer;font-weight:500;transition:all .3s ease}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.audio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}.no-results{grid-column:1 / -1;text-align:center;padding:60px 20px;background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow-light)}.audio-card{position:relative;background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow-light);transition:all .3s ease;cursor:pointer;overflow:hidden;display:flex;flex-direction:column}.audio-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-medium)}.audio-card.is-playing{border:2px solid var(--primary-color);box-shadow:0 0 0 4px #1e7e3433}.card-content{padding:25px;display:flex;flex-direction:column;height:100%}.add-to-playlist-btn{position:absolute;top:15px;right:15px;width:36px;height:36px;border-radius:50%;background:var(--background-color);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;font-size:1.5rem;line-height:34px;text-align:center;z-index:5;transition:all .3s ease}.add-to-playlist-btn:hover{background:var(--primary-color);color:#fff;transform:scale(1.1) rotate(90deg)}.card-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.card-icon{width:50px;height:50px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;flex-shrink:0}.card-title{font-size:1.3rem;font-weight:600;color:var(--text-primary);line-height:1.4}.card-description{color:var(--text-secondary);font-size:.95rem;margin-bottom:20px;line-height:1.6;flex-grow:1}.card-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center}.play-btn-card{background:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:50px;cursor:pointer;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:8px}.play-btn-card:hover{transform:scale(1.05);background:var(--primary-dark)}.duration{color:var(--text-secondary);font-size:.9rem;font-weight:500}.section-footer-info{text-align:center;padding:2rem;margin-top:1rem;color:var(--text-secondary);background-color:var(--background-color);border-radius:var(--border-radius)}.playlist-toggle-btn{position:fixed;bottom:120px;right:20px;width:60px;height:60px;border-radius:50%;background:var(--primary-color);color:#fff;border:none;cursor:pointer;box-shadow:0 5px 20px #1e7e3466;display:none;align-items:center;justify-content:center;z-index:990;transition:all .3s ease}.playlist-toggle-btn:hover{transform:scale(1.1)}.playlist-toggle-btn svg{width:28px;height:28px}.playlist-counter{position:absolute;top:-4px;right:-4px;width:24px;height:24px;border-radius:50%;background:#c0392b;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid white;transform:scale(0);opacity:0;transition:all .3s ease}.playlist-toggle-btn.has-items .playlist-counter{transform:scale(1);opacity:1}.playlist-container{position:fixed;top:0;right:0;width:380px;max-width:90%;height:100vh;background:var(--surface-color);box-shadow:-10px 0 30px #0000001a;z-index:1100;transform:translate(100%);transition:transform .4s cubic-bezier(.25,1,.5,1);display:flex;flex-direction:column}.playlist-container.open{transform:translate(0)}.playlist-header{padding:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);flex-shrink:0}.playlist-header h3{font-size:1.25rem;color:var(--text-primary)}.playlist-close{font-size:2rem;color:var(--text-secondary);background:none;border:none;cursor:pointer;transition:color .2s;line-height:1}.playlist-close:hover{color:var(--text-primary)}.playlist-items{flex-grow:1;overflow-y:auto;padding:10px}.empty-playlist{padding:20px;text-align:center;color:var(--text-secondary)}.playlist-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;cursor:pointer;transition:background-color .2s}.playlist-item:hover{background-color:var(--background-color)}.item-info{display:flex;align-items:center;gap:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.item-icon{font-size:1.2rem;color:var(--text-secondary)}.item-name{color:var(--text-primary)}.remove-item-btn{background:transparent;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;transition:color .2s;line-height:1;padding:5px}.remove-item-btn:hover{color:#ef4444}.playlist-actions{padding:20px;border-top:1px solid var(--border-color);display:flex;gap:12px;flex-shrink:0}.playlist-action-btn{flex:1;padding:12px;border-radius:8px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s}.playlist-action-btn.primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.playlist-action-btn:not(.primary){border-color:var(--border-color);background:var(--surface-color);color:var(--text-primary)}.playlist-action-btn:not(.primary):hover{background:var(--background-color)}.audio-player-container{position:fixed;bottom:0;left:0;right:0;background-color:var(--surface-color);box-shadow:var(--shadow-heavy);border-top:1px solid var(--border-color);z-index:5000;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#ffffffd9}body.dark-theme .audio-player-container{background-color:#1e1e1ed9}.audio-player-container.show{transform:translateY(0)}.player-progress{position:absolute;top:-4px;left:0;right:0;height:4px;background-color:var(--border-color);cursor:pointer}.progress-bar{width:0%;height:100%;background-color:var(--primary-color);border-radius:0 2px 2px 0;transition:width .1s linear}.player-main-content{display:flex;align-items:center;padding:.75rem 1.5rem;min-height:80px;gap:1rem}.track-info-container{display:flex;align-items:center;gap:1rem;flex:1;min-width:0}.track-artwork{width:50px;height:50px;border-radius:var(--border-radius-small);background-color:var(--border-color);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text-secondary);flex-shrink:0}.track-title{font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-reciter{font-size:.85rem;color:var(--text-secondary)}.main-controls-container{display:flex;align-items:center;gap:.5rem}.player-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--transition)}.player-btn:hover{background-color:var(--border-color);color:var(--text-primary)}.dark-theme .player-btn:hover{background-color:#333}.play-pause-btn{background-color:var(--primary-color);color:#fff;width:54px;height:54px;font-size:1.5rem}.play-pause-btn:hover{background-color:var(--primary-dark);color:#fff}.play-pause-btn .fa-pause,.play-pause-btn.playing .fa-play{display:none}.play-pause-btn.playing .fa-pause{display:inline-block}.extra-controls-container{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:1rem;min-width:0}.time-container{font-size:.85rem;color:var(--text-secondary);white-space:nowrap}.extra-buttons{display:flex;align-items:center;gap:.25rem}.player-btn.active{color:var(--primary-color)}.speed-control-wrapper{position:relative}.speed-control-wrapper .player-btn{font-size:.85rem;font-weight:700}.speed-control-select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.timer-container{position:relative}.timer-dropdown{display:none;position:absolute;bottom:120%;left:50%;transform:translate(-50%);background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-medium);width:150px;overflow:hidden;z-index:10}.timer-dropdown.show{display:block}.timer-option{display:block;width:100%;padding:10px;background:none;border:none;border-bottom:1px solid var(--border-color);color:var(--text-secondary);font-size:.9rem;text-align:center;cursor:pointer}.timer-option:last-child{border-bottom:none}.timer-option:hover{background:var(--background-color);color:var(--text-primary)}.timer-option.cancel{color:#c0392b}.timer-container .player-btn.active{color:var(--primary-color)}.toast-container{position:fixed;top:100px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px}.toast{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius-small);padding:1rem 1.5rem;box-shadow:var(--shadow-medium);display:flex;align-items:center;gap:12px;min-width:300px;transform:translate(120%);opacity:0;transition:var(--transition)}.toast.show{transform:translate(0);opacity:1}.toast.success{border-left:4px solid var(--primary-color)}.toast.success i{color:var(--primary-color)}.toast .toast-content{flex-grow:1;display:flex;flex-direction:column}.toast-actions{margin-top:8px}.toast-action-btn{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color);padding:4px 10px;border-radius:var(--border-radius-small);cursor:pointer;font-weight:600;transition:var(--transition);margin-right:8px;align-self:flex-start}.toast-action-btn:hover{background-color:var(--primary-color);color:#fff}.dark-theme .toast-action-btn{color:var(--primary-light);border-color:var(--primary-light)}.dark-theme .toast-action-btn:hover{background-color:var(--primary-light);color:var(--background-color)}.install-prompt{position:fixed;bottom:20px;left:20px;right:20px;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1rem;box-shadow:var(--shadow-heavy);transform:translateY(120%);opacity:0;transition:var(--transition);z-index:10000;max-width:400px;margin:0 auto}.install-prompt.show{transform:translateY(0);opacity:1}.install-btn{background-color:var(--primary-color);color:#fff;border:none;padding:.5rem 1rem;border-radius:var(--border-radius-small);font-weight:500;cursor:pointer;transition:var(--transition);flex-shrink:0}.close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;transition:var(--transition);flex-shrink:0}.footer{background-color:var(--surface-color);border-top:1px solid var(--border-color);padding:2rem 0;margin-top:2rem;text-align:center;color:var(--text-secondary);font-size:.9rem}.dark-theme .footer{background-color:#1a1a1a}.footer a{color:var(--primary-color);text-decoration:none}.footer a:hover{text-decoration:underline}.footer-highlight{background:linear-gradient(135deg,#1e7e3414,#1e7e340a);border:1px solid rgba(30,126,52,.25);border-left:4px solid var(--primary-color);border-radius:var(--border-radius-small);padding:.9rem 1.2rem;margin-bottom:1rem;color:var(--text-primary);font-size:1rem;font-weight:500}.footer-highlight a{font-weight:700;font-size:1.05rem}.dark-theme .footer-highlight{background:linear-gradient(135deg,#28a7451a,#28a7450d);border-color:#28a7454d;border-left-color:var(--primary-color)}body.menu-open{overflow:hidden}.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:998}.menu-overlay.active{opacity:1;visibility:visible}@media(max-width:992px){.extra-controls-container{display:none}}@media(max-width:768px){.container{padding:0 16px}.header-controls{gap:0}.logo h1{font-size:1.1rem}.menu-toggle{display:flex}.nav{position:fixed;top:0;left:0;width:300px;max-width:80%;height:100vh;transform:translate(-100%);opacity:1;box-shadow:0 0 20px #0003;z-index:1000;overflow-y:auto;border-bottom:none}.nav.active{transform:translate(0)}.nav-list{flex-direction:column;gap:0;padding:1rem 0}.nav-link{border-bottom:1px solid var(--border-color);padding:1rem 1.5rem;border-radius:0}.nav-list li:last-child .nav-link{border-bottom:none}.nav-link.active:after{display:none}.track-info-container,.extra-controls-container{display:none}.main-controls-container{flex:1;justify-content:center;gap:1rem}.audio-grid{grid-template-columns:1fr}}@media(max-width:480px){.controls{flex-direction:column;gap:.75rem;align-items:stretch}.font-size-controls .toggle-text{flex-grow:1;margin-right:0}}