/* Music24/7: układ inspirowany dostarczoną referencją. Funkcje odtwarzacza i katalogu pozostają aktywne. */
:root{color-scheme:dark;--bg:#080914;--panel:#101121;--panel2:#17172b;--teal:#7b4df2;--teal2:#9b71ff;--aqua:#c9b9ff;--ink:#f7f7fb;--muted:#a5a4b9;--stroke:#28283c;--gold:#8a5cf5;--shadow:0 16px 48px #0007}
body,.layout{background:#090a15;color:#f7f7fb}
.layout{background:#090a15;grid-template-columns:214px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 82px}
.sidebar{background:#0e0f1d;border-color:#222338;padding:24px 13px 18px}
.sidebar .brand{justify-content:flex-start;margin:0 8px 26px}
.sidebar .site-logo{width:150px}
.nav{gap:3px}
.nav-item{min-height:43px;padding:9px 13px;gap:13px;border-radius:8px;color:#b8b8cb;font-size:13px;font-weight:500}
.nav-item .icon{color:#a9a8bd}
.nav-item:hover{background:#1c1a31;color:#fff}
.nav-item.active{background:#302260;color:#fff;border-color:transparent;box-shadow:none}
.nav-item.active .icon{color:#b69aff}
.premium-card{border:1px solid #33285a;background:#171329;border-radius:11px;margin:24px 4px 0;padding:14px}
.premium-heading,.premium-heading .icon{color:#b99dff}
.premium-card p{color:#a9a8bf}
.btn{border-radius:9px}
.btn-main{background:#7043e5;border-color:#7043e5;color:#fff;box-shadow:0 6px 18px #4e2ab045}
.btn-main:hover{background:#865bf5;filter:none}
.btn-outline{background:#1a1930;border-color:#43385f;color:#e6deff}
.btn-outline:hover{background:#27213e}
.main-column{grid-column:2;grid-row:1}
.topbar{height:72px;padding:0 26px;background:#090a15;border-bottom:1px solid #1f2033}
.searchbar{height:42px;max-width:640px;border:1px solid #29293e;border-radius:9px;background:#161725;color:#d8d6e8}
.searchbar input{font-size:13px}
.searchbar input::placeholder,.searchbar kbd{color:#85859e}
.account-button{font-size:13px}
.avatar{background:#463272;color:#fff}
.scroll-content{padding:18px 26px 42px;scrollbar-color:#3e345d transparent}
.welcome{margin:6px 0 22px}
.welcome h1{font-size:clamp(23px,2.2vw,32px);letter-spacing:-.7px;margin:0 0 5px;font-weight:760}
.welcome h1 span{color:#ae87ff}
.welcome p{color:#aaaabd;font-size:13px;margin:0}
.hero{height:260px;min-height:260px;border:1px solid #31294c;border-radius:12px;background-image:linear-gradient(90deg,#100b28f0 0%,#130d2fca 31%,#1a0c4344 72%),var(--hero);background-size:cover;background-position:center;box-shadow:none}
.hero:before{background:linear-gradient(0deg,#090a1544,transparent 50%)}
.hero-content{padding:28px 30px 34px}
.eyebrow,.eyebrow em{color:#c4acff;font-size:10px;letter-spacing:1.6px}
.hero h2{font-size:clamp(28px,2.9vw,43px);line-height:1.08;letter-spacing:-1px;max-width:490px;margin:8px 0 10px}
.hero p{color:#eee9ff;font-size:14px;max-width:360px;margin-bottom:22px}
.btn-play-hero{padding:11px 20px}
.hero-dot.active{background:#a77cff}
.content-section{margin-top:28px}
.section-header{margin-bottom:15px}
.section-header h2{font-size:19px;letter-spacing:-.3px}
.section-header h2:before{display:none}
.more-link{color:#a889ff;font-size:12px}
.more-link:hover{color:#d5c5ff}
.card-strip{gap:13px}
.playlist-card{flex-basis:calc((100% - 65px)/6);min-width:142px}
.playlist-image{aspect-ratio:1;border:1px solid #302d45;border-radius:9px;background-size:cover;background-position:center;box-shadow:0 7px 20px #0003}
.playlist-card:hover .playlist-image{border-color:#9c70ff;filter:brightness(1.1)}
.playlist-title{font-size:13px;margin-top:9px}
.playlist-card small{font-size:11px;color:#a5a4b9}
.round-play{width:32px;height:32px;border:0;background:#fff;color:#201436;box-shadow:0 4px 14px #0005}
.industry-card{height:140px;flex-basis:calc((100% - 65px)/6);min-width:140px;border:1px solid #302d45;border-radius:9px;background-image:linear-gradient(0deg,#090a15ed,#090a1500 90%),var(--cover)}
.industry-card:before{background:linear-gradient(0deg,#090a15ec,transparent 65%)}
.industry-card b{font-size:13px}.industry-card small{font-size:11px;color:#d4d1de}
.daypart-card{height:105px;flex-basis:calc((100% - 52px)/5);min-width:145px;border-color:#302d45;border-radius:9px;background-image:linear-gradient(0deg,#090a15db,transparent 85%),var(--cover)}
.daypart-card b{font-size:13px}.daypart-card small{font-size:11px;color:#e2dfec}
.right-panel{display:none;position:fixed;inset:72px 0 82px auto;width:min(360px,100vw);z-index:25;overflow-y:auto;margin:0;padding:18px;background:#111222;border:1px solid #323047;border-right:0;border-radius:12px 0 0 12px;box-shadow:-15px 0 35px #0008}
.right-panel.mobile-open{display:flex}
.panel-close{display:inline-grid;min-width:40px;min-height:40px;font-size:26px}
.right-heading h2{font-size:16px}
.right-cover{border-color:#40385b}
.queue-tabs{background:#1b1a2d;border-color:#343049}
.queue-tabs button.active{background:#352552;color:#fff;border-bottom-color:#9e73ff}
.queue-row:hover{background:#27233a}.queue-row.active{background:#352553;border-color:#7b5abb}
.bottom-player{grid-column:1/-1;grid-row:2;height:82px;background:#10111f;border-top:1px solid #2d2a42;box-shadow:0 -10px 24px #0004;padding:8px 22px;grid-template-columns:minmax(180px,26%) minmax(0,1fr) minmax(125px,16%)}
.bottom-current img{width:54px;height:54px;border:1px solid #463b64}
.bottom-current strong{font-size:13px}.bottom-current small{font-size:11px;color:#aaa8bd}
.bottom-current button{color:#aa87ff}
.small-controls .bottom-main-play{background:#fff;border:0;color:#171225;width:38px;height:38px}
.small-controls .bottom-main-play>svg{color:#171225}
.big-controls .big-play{background:#7b4df2;border:0;color:#fff}
input[type=range]{background:#39334f;accent-color:#9a6cff}
input[type=range]::-webkit-slider-thumb{background:#a779ff}
input[type=range]::-moz-range-thumb{background:#a779ff}
.browse-section{padding-top:12px}
.filter-panel{background:#141524;border-color:#2d2a42}
.filter-panel label{color:#bbb9ce}
.filter-panel select,.filter-panel input{background:#1c1c2e;border-color:#343149;color:#f6f4ff}
.filter-chip{background:#1d1c30;border-color:#38334e;color:#e6e2f1}
.filter-chip:hover,.filter-chip.active{background:#6b45ce;border-color:#825deb;color:#fff}
.result-track{background:#161725;border-color:#2d2a43}
.result-track:hover{background:#24203a;border-color:#8b62ed}
.result-track small,.result-track .meta{color:#a9a5bb}
.empty-state{border-color:#333047;color:#aaa9be}
.playlist-browse-grid .playlist-card.active .playlist-image{border-color:#a879ff;box-shadow:0 0 0 2px #8050e777}
.playlist-pending{color:#aaa9be}
.toast{background:#252039;border-color:#7651bd;color:#fff}
.account-frame{background:#11121f}
:focus-visible{outline:3px solid #aa80ff;outline-offset:3px}
@media(min-width:1600px){.layout{grid-template-columns:225px minmax(0,1fr)}.playlist-card{min-width:160px}}
@media(max-width:1100px) and (min-width:781px){.layout{grid-template-columns:195px minmax(0,1fr)}.sidebar .site-logo{width:145px}.playlist-card,.industry-card{flex-basis:160px}.daypart-card{flex-basis:170px}}
@media(max-width:780px){
 .layout{display:flex;flex-direction:column;--player-height:calc(72px + env(safe-area-inset-bottom,0px))}
 .sidebar{position:fixed;left:-300px;top:0;bottom:var(--player-height);width:min(280px,85vw);z-index:30;visibility:hidden}
 .sidebar.open{left:0;visibility:visible}
 .sidebar .site-logo{width:160px}.sidebar .brand{justify-content:flex-start}
 .main-column{height:calc(100dvh - var(--player-height));width:100%}
 .topbar{height:64px;padding:0 12px;gap:8px}
 .searchbar{height:41px}.searchbar input{font-size:16px}
 .scroll-content{padding:14px 14px 24px}
 .welcome{margin:3px 0 16px}.welcome h1{font-size:23px}.welcome p{font-size:12px}
 .hero{min-height:240px;height:240px}.hero-content{padding:25px 20px 30px}.hero h2{font-size:30px}.hero p{font-size:13px}
 .section-header h2{font-size:17px}.more-link{font-size:11px}
 .playlist-card{flex-basis:145px}.industry-card{flex-basis:145px;height:140px}.daypart-card{flex-basis:155px}
 .right-panel{inset:64px 0 var(--player-height);width:100%;border-radius:0}
 .bottom-player{height:var(--player-height);grid-template-columns:minmax(0,1fr) 48px 44px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
 .menu-backdrop{inset:64px 0 var(--player-height)}
}
@media(max-width:420px){.topbar{height:64px;flex-wrap:nowrap}.topbar .searchbar{order:0;flex-basis:auto;height:40px}.top-actions .account-button{display:none}.right-panel{top:64px}.menu-backdrop{top:64px}.hero{min-height:230px}.hero h2{font-size:27px}.hero p{max-width:250px}}
@media(prefers-reduced-motion:reduce){.playlist-image,.industry-card,.daypart-card{transition:none}}

/* Delikatne powiększenie kafelka branży po najechaniu. */
.industry-strip{padding:8px 5px 12px;margin:-8px -5px -4px}
.industry-strip .industry-card{transform-origin:center;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease}
@media(hover:hover) and (pointer:fine){
 .industry-strip .industry-card:hover{transform:scale(1.045);position:relative;z-index:2;border-color:#9f78ff;box-shadow:0 14px 30px #0009;filter:brightness(1.08)}
}
@media(prefers-reduced-motion:reduce){.industry-strip .industry-card{transition:none}}

/* Mniejsze kafelki w widoku „Branże”; kafelki strony głównej bez zmian. */
.industry-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;width:100%;margin:5px 0 19px}
.industry-choice{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;min-width:0;min-height:86px;padding:11px;border:1px solid #37304e;border-radius:10px;background-image:linear-gradient(0deg,#090a15ef,#090a1544 82%),var(--cover);background-size:cover;background-position:center;color:#fff;text-align:left;font-size:12px;font-weight:650;line-height:1.25;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.industry-choice span{position:relative;z-index:1;text-shadow:0 2px 5px #000b}
.industry-choice:hover,.industry-choice.active{border-color:#a47bff;box-shadow:0 0 0 2px #7544d944}
@media(hover:hover) and (pointer:fine){.industry-choice:hover{transform:translateY(-2px)}}
@media(max-width:600px){.industry-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.industry-choice{min-height:78px;padding:8px;font-size:11px}}
@media(max-width:390px){.industry-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.industry-choice{transition:none}}