@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#0f0f0f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;background:#0f0f0f;color:#fff;font-family:inherit;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit}button{font-family:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.header{position:fixed;top:0;left:0;right:0;background:#0f0f0ff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);z-index:1000;padding:0}.header__container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:70px}.header__left{display:flex;align-items:center;gap:40px}.header__logo img{height:32px;width:auto}.header__nav{display:flex;gap:30px}.nav__link{color:#ffffffb3;text-decoration:none;font-size:16px;font-weight:500;transition:color .2s ease;position:relative}.nav__link:hover,.nav__link--active{color:#fff}.nav__link--active:after{content:"";position:absolute;bottom:-20px;left:0;right:0;height:2px;background:#ff6b35;border-radius:1px}.header__right{display:flex;align-items:center;gap:20px}.header__burger{display:none;width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;align-items:center;justify-content:center;position:relative;padding:0}.header__burger span{position:absolute;width:18px;height:2px;background:#fff;border-radius:1px;transition:transform .2s ease,opacity .2s ease,top .2s ease}.header__burger span:nth-child(1){top:10px}.header__burger span:nth-child(2){top:15px}.header__burger span:nth-child(3){top:20px}.header__burger--open span:nth-child(1){top:15px;transform:rotate(45deg)}.header__burger--open span:nth-child(2){opacity:0}.header__burger--open span:nth-child(3){top:15px;transform:rotate(-45deg)}.header__search{position:relative;display:flex;align-items:center}.header__search input{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:25px;padding:8px 45px 8px 16px;color:#fff;font-size:14px;width:300px;outline:none;transition:border-color .2s ease}.header__search input::placeholder{color:#ffffff80}.header__search input:focus{border-color:#ff6b35}.search__button{position:absolute;right:8px;background:none;border:none;color:#ffffffb3;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease}.search__button:hover{background:#ffffff1a;color:#fff}.user__button{background:#ff6b35;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease}.user__button:hover{background:#ff5722}.user__button--ghost{background:#ffffff24}.user__button--ghost:hover{background:#ffffff38}.header__mobile-menu{display:none}.header__mobile-menu--open{position:fixed;top:70px;left:0;right:0;background:#0f0f0ffa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);z-index:999;padding:16px 20px 24px}.mobile-nav{display:flex;flex-direction:column;gap:12px}.mobile-nav__link{color:#fff;text-decoration:none;font-size:16px;font-weight:500}.mobile-nav__login{margin-top:8px;background:#ff6b35;color:#fff;border:none;padding:10px 16px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer}.mobile-nav__login--ghost{background:#ffffff24}.auth-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}.auth-modal__backdrop{position:absolute;inset:0;background:#0000008c}.auth-modal__content{position:relative;width:100%;max-width:420px;background:#0f0f0ff5;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;box-shadow:0 24px 40px #00000059}.auth-modal__close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;border-radius:50%;background:#ffffff14;color:#fffc;cursor:pointer}.auth-modal__title{margin:0 0 16px;color:#fff;font-size:22px;font-weight:700}.auth-modal__form{display:flex;flex-direction:column;gap:14px}.auth-modal__label{display:flex;flex-direction:column;gap:8px;color:#ffffffd1;font-size:14px}.auth-modal__input{height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#ffffff14;color:#fff;padding:0 14px;outline:none}.auth-modal__input:focus{border-color:#ff6b35}.auth-modal__error{margin:0;color:#ff7b7b;font-size:13px}.auth-modal__submit{border:none;border-radius:12px;height:42px;background:#ff6b35;color:#fff;font-size:15px;font-weight:600;cursor:pointer}.auth-modal__submit:disabled{opacity:.7;cursor:not-allowed}@media(max-width:900px){.header__container{gap:12px}.header__nav,.header__user{display:none}.header__search input{width:180px}.header__burger{display:flex}.header__mobile-menu{display:none}.header__mobile-menu--open{display:block}.auth-modal__content{max-width:100%}}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}.audio-player{position:fixed;bottom:0;left:0;right:0;background:#0f0f0ff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);z-index:1000;padding:0}.player__container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:stretch;justify-content:space-between;height:80px;gap:20px;position:relative}.player__close-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;border-radius:50%;background:#ffffff14;color:#ffffffbf;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.player__close-btn:hover{background:#ffffff29;color:#fff}.player__track-info{display:flex;align-items:center;gap:15px;min-width:250px;flex-shrink:0;align-self:center}.track__cover{width:50px;height:50px;border-radius:8px;object-fit:cover;flex-shrink:0}.track__details{min-width:0;flex:1}.track__title{color:#fff;font-size:14px;font-weight:600;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track__artist{color:#ffffffb3;font-size:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track__placeholder{display:flex;align-items:center;gap:12px;color:#ffffff80}.placeholder__icon{font-size:24px;opacity:.5}.player__controls{flex:1;max-width:600px;align-self:stretch}.controls__layout{display:grid;grid-template-columns:35px 1fr;grid-template-rows:10px auto 10px auto 10px;align-items:center;column-gap:12px;width:100%;height:100%}.controls__layout>.favorite-btn--control{grid-column:1;grid-row:2;justify-self:center}.controls__layout>.controls__buttons{grid-column:2;grid-row:2;justify-self:center}.controls__layout>.time--current{grid-column:1;grid-row:4;justify-self:center}.controls__layout>.controls__progress{grid-column:2;grid-row:4}.controls__buttons{display:flex;align-items:center;gap:16px}.control-btn{background:none;border:none;color:#ffffffb3;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.control-btn:hover{color:#fff;background:#ffffff1a}.control-btn--primary{width:40px;height:40px;background:#ff6b35;color:#fff}.control-btn--primary:hover{background:#ff5722;transform:scale(1.05)}.controls__progress{display:flex;align-items:center;gap:12px;width:100%}.time{color:#ffffffb3;font-size:12px;font-variant-numeric:tabular-nums;min-width:35px;text-align:center}.favorite-btn{width:18px;height:18px;border:none;border-radius:50%;background:#ffffff14;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.favorite-btn--control{width:24px;height:24px}.favorite-btn--active{background:#ff6b35;color:#fff}.progress-bar{flex:1;height:4px;background:#fff3;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#ff6b35;cursor:pointer;box-shadow:0 0 0 2px #ff6b354d}.progress-bar::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#ff6b35;cursor:pointer;border:none;box-shadow:0 0 0 2px #ff6b354d}.player__volume{display:flex;align-items:center;gap:12px;min-width:120px;align-self:flex-end;margin-bottom:10px}.volume-btn{background:none;border:none;color:#ffffffb3;cursor:pointer;padding:4px;border-radius:4px;transition:color .2s ease}.volume-btn:hover{color:#fff}.volume-bar{flex:1;height:4px;background:#fff3;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#ff6b35;cursor:pointer}.volume-bar::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#ff6b35;cursor:pointer;border:none}@media(max-width:1024px){.player__container{height:auto;padding:16px;flex-wrap:wrap;row-gap:10px}.player__controls{order:2;width:100%;max-width:none}.player__volume{display:none}}@media(max-width:768px){.player__container{padding:10px 12px}.player__track-info{min-width:0;width:100%;justify-content:center}}.app{min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f0f0f;color:#fff}*{box-sizing:border-box}body{margin:0;padding:0;background:#0f0f0f;color:#fff;font-family:inherit}#root{min-height:100vh}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}@media(max-width:768px){.hero__title{font-size:2.5rem}.hero__subtitle{font-size:1.2rem}.section{padding:40px 0}.tracks-grid,.playlists-grid,.radio-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.genres-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}.section__header{flex-direction:column;align-items:flex-start;gap:12px}.player__container{flex-direction:column;height:auto;padding:16px 20px;gap:16px}.player__track-info,.player__volume{min-width:auto}.controls__progress{width:100%}}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}.main{padding-top:70px;padding-bottom:80px;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.hero{position:relative;height:60vh;min-height:400px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}.hero__content{position:relative;z-index:2;max-width:600px;padding:0 20px}.hero__title{font-size:4rem;font-weight:700;margin:0 0 16px;background:linear-gradient(45deg,#fff,#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}.hero__subtitle{font-size:1.5rem;margin:0 0 32px;opacity:.9;line-height:1.4}.hero__button{background:#ff6b35;color:#fff;border:none;padding:16px 32px;font-size:1.1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 25px #ff6b354d}.hero__button:hover{background:#ff5722;transform:translateY(-2px);box-shadow:0 12px 35px #ff6b3566}.hero__background{position:absolute;inset:0;background:url(/hero-bg.jpg) center/cover no-repeat;z-index:1}.hero__gradient{position:absolute;inset:0;background:linear-gradient(135deg,#667eeacc,#764ba2cc);z-index:1}.section{padding:60px 0}.section__header{max-width:1200px;margin:0 auto 40px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.section__title{color:#fff;font-size:2rem;font-weight:700;margin:0}.section__link{color:#ff6b35;text-decoration:none;font-weight:500;transition:color .2s ease}.section__link:hover{color:#ff5722}.tracks-grid{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px}.track-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;overflow:hidden;transition:all .3s ease;cursor:pointer}.track-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0003}.track__image-container{position:relative;aspect-ratio:1;overflow:hidden}.track__image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.track-card:hover .track__image{transform:scale(1.05)}.track__play-btn{position:absolute;bottom:12px;right:12px;width:48px;height:48px;background:#ff6b35;border:none;border-radius:50%;color:#fff;cursor:pointer;opacity:0;transform:translateY(10px);transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #ff6b354d}.track-card:hover .track__play-btn{opacity:1;transform:translateY(0)}@media(hover:none)and (pointer:coarse){.track__play-btn{opacity:1;transform:translateY(0)}}.track__info{padding:16px}.track__name{color:#fff;font-size:1rem;font-weight:600;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track__artist{color:#ffffffb3;font-size:.9rem;margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track__plays{color:#ffffff80;font-size:.8rem;margin:0}.playlists-grid{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}.playlist-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;overflow:hidden;transition:all .3s ease;cursor:pointer}.playlist-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0003}.playlist__image-container{position:relative;aspect-ratio:1;overflow:hidden}.playlist__image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.playlist-card:hover .playlist__image{transform:scale(1.05)}.playlist__play-btn{position:absolute;bottom:16px;right:16px;width:56px;height:56px;background:#ff6b35;border:none;border-radius:50%;color:#fff;cursor:pointer;opacity:0;transform:translateY(10px);transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #ff6b354d}.playlist-card:hover .playlist__play-btn{opacity:1;transform:translateY(0)}.playlist__info{padding:20px}.playlist__name{color:#fff;font-size:1.1rem;font-weight:600;margin:0 0 8px}.playlist__description{color:#ffffffb3;font-size:.9rem;margin:0 0 12px;line-height:1.4}.playlist__tracks{color:#ffffff80;font-size:.8rem;margin:0}.genres-grid{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px}.genre-card{aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.genre-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:0;transition:opacity .3s ease}.genre-card:hover:before{opacity:1}.genre-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0000004d}.genre__image{width:100%;height:100%;border-radius:16px;object-fit:cover;position:absolute;top:0;left:0;z-index:0}.genre__name{color:#fff;font-size:1rem;font-weight:600;margin:0 0 16px;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.8);position:relative}.radio-grid{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.radio-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;overflow:hidden;transition:all .3s ease;cursor:pointer}.radio-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0003}.radio__image-container{position:relative;aspect-ratio:16/9;overflow:hidden}.radio__image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.radio-card:hover .radio__image{transform:scale(1.05)}.radio__overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.radio-card:hover .radio__overlay{opacity:1}.radio__play-btn{background:#ff6b35;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #ff6b3566;transition:all .2s ease}.radio__play-btn:hover{transform:scale(1.05);box-shadow:0 12px 35px #ff6b3580}.radio__name{color:#fff;font-size:1.2rem;font-weight:600;margin:16px 20px 8px}.radio__description{color:#ffffffb3;font-size:.9rem;margin:0 20px 20px;line-height:1.4}@media(max-width:768px){.hero__title{font-size:2.5rem}.hero__subtitle{font-size:1.2rem}.section{padding:40px 0}.tracks-grid,.playlists-grid,.radio-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.genres-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}.section__header{flex-direction:column;align-items:flex-start;gap:12px}.player__container{flex-direction:column;height:auto;padding:16px 20px;gap:16px}.player__track-info,.player__volume{min-width:auto}.controls__progress{width:100%}.track__play-btn{opacity:1;transform:translateY(0)}}