.red-text{color:#c04b4b!important}.instruments-section{margin-bottom:2rem;margin-top:2rem}.instruments-section h2{font-size:2rem;margin-bottom:2rem}.instruments-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:768px){.instruments-grid{grid-template-columns:repeat(2,1fr)}}.instrument-card{background-color:var(--bg-card);border:1px solid rgba(226,226,229,.05);border-radius:16px;padding:2rem;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease}.instrument-card:hover{transform:translateY(-5px);border-color:#c04b4b4d}.inst-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.8}.instrument-card h3{font-size:1.3rem;color:var(--text-main);margin-bottom:.5rem}.inst-status{display:inline-block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .75rem;border-radius:20px;margin-bottom:1rem}.active-instrument .inst-status{background-color:#c04b4b1a;color:#c04b4b}.future-instrument{border:1px dashed rgba(226,226,229,.2);background-color:transparent;opacity:.7}.future-instrument .inst-status{background-color:#e2e2e51a;color:var(--text-muted)}.instrument-card p{color:var(--text-muted);font-size:.95rem;line-height:1.6}.media-section{margin-bottom:2rem}.media-placeholder{width:100%;height:250px;background-color:var(--bg-card);border:2px dashed rgba(192,75,75,.2);border-radius:16px;display:flex;align-items:center;justify-content:center}.placeholder-content{text-align:center;color:var(--text-muted)}.placeholder-content svg{margin-bottom:1rem}@media(max-width:767px){.instruments-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1rem}.instruments-grid::-webkit-scrollbar{display:none}.instrument-card{flex:0 0 85%;scroll-snap-align:center}}.progress-section{margin-bottom:2rem}.track-list{display:flex;flex-direction:column;gap:1rem}.track-item{flex-direction:column;align-items:stretch;background-color:var(--bg-card);border:1px solid rgba(226,226,229,.05);border-radius:12px;padding:1rem 1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;transition:transform .3s ease,background-color .3s ease}.track-item:hover{transform:translate(4px);background-color:#1e1e23cc}.track-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;width:100%}.track-info{flex:1 1 200px}.track-info h4{font-size:1.1rem;color:var(--text-main);margin-bottom:.2rem}.track-meta{font-size:.85rem;color:var(--text-muted)}.track-progress{display:flex;align-items:center;gap:1rem;flex:1 1 150px}.progress-bar{flex:1;height:6px;background-color:#ffffff1a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background-color:#c04b4b;border-radius:4px;transition:width .5s ease-in-out}.progress-text{font-size:.85rem;font-weight:600;color:var(--text-main);min-width:40px}.track-actions{display:flex;gap:.5rem}.track-btn{background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-main);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.track-btn:hover{background-color:#c04b4b;border-color:#c04b4b;color:#fff}.play-btn{font-size:.9rem;padding-left:3px}.player-dropdown{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,margin-top .4s ease,opacity .3s ease}.track-item.playing .player-dropdown{max-height:100px;margin-top:1.5rem;opacity:1}.track-item.playing .play-btn{background-color:#c04b4b;border-color:#c04b4b;color:#fff}.player-wrapper{background-color:transparent;padding:.5rem 1rem}.custom-audio{width:100%;height:50px;outline:none}.lyrics-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0a0a0cd9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.lyrics-modal.show{opacity:1;visibility:visible}.modal-content{background-color:var(--bg-card);border:1px solid rgba(192,75,75,.2);border-radius:16px;padding:2.5rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;position:relative;transform:translateY(20px);transition:transform .3s ease;box-shadow:0 15px 40px #00000080}.lyrics-modal.show .modal-content{transform:translateY(0)}.close-modal{position:absolute;top:1rem;right:1.5rem;background:none;border:none;color:var(--text-muted);font-size:2rem;cursor:pointer;transition:color .3s}.close-modal:hover{color:#c04b4b}.modal-content h3{font-size:1.8rem;margin-bottom:.2rem}.modal-meta{color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.05)}.modal-lyrics-text{font-size:1rem;line-height:2.5;color:var(--text-main);white-space:pre-wrap;font-family:inherit;margin-top:1.5rem}.chord{display:inline-block;position:relative;width:0;height:0;line-height:0;vertical-align:baseline;overflow:visible}.chord:before{content:attr(data-chord);position:absolute;bottom:1.5em;left:0;color:#c04b4b;font-weight:700;font-size:.95em;white-space:nowrap}.banner{background-image:url(https://www.kissfm.ua/static/img/content/userfiles/images/jefferson-santos-fCEJGBzAkrU-unsplash.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;height:200px;display:flex;justify-content:center;align-items:center;color:#fff;text-align:center;padding:10px;border-radius:10px;margin-bottom:3rem}.banner-link{display:inline-block;padding:5px 20px;background-color:#d35b52;color:#fff;text-decoration:none;border-radius:8px;font-weight:700;transition:background-color .3s ease;margin:2rem}.banner-link:hover{background-color:#730404}.banner-content{background-color:#23222280;padding:15px;border-radius:10px}.banner h1{margin:0;font-size:36px}.banner p{font-size:18px;margin:10px 0 20px}.banner-button{display:inline-block;padding:10px 20px;background-color:#ff4500;color:#fff;text-decoration:none;border-radius:5px;font-weight:700;transition:background-color .3s}.banner-button:hover{background-color:tomato}@media(max-width:767px){.modal-content{width:95%;padding:1.5rem 1rem}.modal-lyrics-text{font-size:.85rem;line-height:2.6}.chord:before{font-size:.9em;bottom:1.6em}}@media(max-width:768px){.banner{height:auto;padding:40px 15px;margin-bottom:1.5rem}.banner h1{font-size:24px}.banner-content{width:100%;padding:15px}.banner-link{margin:1rem 0 0;width:100%;box-sizing:border-box;text-align:center}}@media(max-width:480px){.banner h1{font-size:20px}}
