/* Music24/7 — motyw inspirowany zaakceptowanym projektem, 2026-10-21.
   Osobna warstwa wizualna: zachowuje strukturę i działanie aplikacji. */
:root{color-scheme:dark;--bg:#050c12;--panel:#0b151f;--panel2:#111e2b;--teal:#efc778;--teal2:#c49951;--aqua:#ffe1a0;--ink:#f5f5f6;--muted:#aab5c5;--stroke:#293646;--gold:#efc778;--shadow:0 18px 55px #0005}
body,.layout{background:#050c12;color:var(--ink)}
.layout{background:radial-gradient(ellipse at 55% 0%,#101c28 0%,#050c12 65%)}
.btn{border-radius:14px;font-weight:600}
.btn-main{background:linear-gradient(115deg,#ffe2a0,#e8bb6b 60%,#b88a44);border-color:#f0d291;color:#17130c;box-shadow:inset 0 1px #fff5,0 4px 15px #0003}
.btn-main:hover{filter:brightness(1.08)}
.btn-outline{background:#0b141e;border-color:#957746;color:#f3dfb8}
.btn-outline:hover{background:#202128}
.sidebar{background:linear-gradient(150deg,#09121d,#050c12 70%);border-color:#222e3a;scrollbar-color:#37424e transparent;padding:26px 14px 20px}
.sidebar:after{display:none}
.brand{margin:0 6px 28px;gap:10px;font-size:27px;font-weight:700;letter-spacing:-.6px}
.brand-mark{width:64px;height:58px;flex:none;background:var(--gold);mask:url('../icons/audio-lines.svg') center/contain no-repeat;-webkit-mask:url('../icons/audio-lines.svg') center/contain no-repeat;filter:none;font-size:0}
.brand-mark:after,.logo-note{display:none}
.brand-copy small{color:var(--muted);font-size:10px;letter-spacing:1.7px;margin:4px 0 0;font-weight:400}
.nav{gap:6px}
.nav-item{padding:10px 18px;gap:23px;min-height:45px;border-radius:11px;color:#c8ced9;font-size:13px}
.nav-item .icon{color:#d2d6df}
.nav-item:hover{background:#17212d}
.nav-item.active{background:linear-gradient(105deg,#edc776,#826538 48%,#24221b);border-color:#b9975855;box-shadow:inset 0 1px #ffdfac55;color:#fff}
.nav-item.active .icon{color:#fff7df;filter:none}
.premium-card{margin: auto 5px 0;padding:17px 14px 13px;background:linear-gradient(135deg,#151d26,#080f17);border-color:#a68750;border-radius:12px;box-shadow:none}
.premium-heading{font-size:13px;gap:12px;color:#f5d794}.premium-heading .icon{color:var(--gold);filter:none}
.premium-card p{color:#b9c4d1;font-size:11px;margin:9px 0 12px 43px}.premium-card .btn{padding:8px;font-size:11px}
.topbar{height:88px;border:0;gap:16px;padding-inline:22px}
.searchbar{height:44px;background:linear-gradient(90deg,#101c29,#0a131d);border-color:#344050;border-radius:19px;color:#f0f1f4;box-shadow:inset 0 1px #ffffff04}
.searchbar input{font-size:12px}.searchbar input::placeholder,.searchbar kbd{color:#9caabc}
.icon-button{color:#dde0e8}.icon-button:hover{background:#1d2836}
.account-button{border:0;font-size:12px;font-weight:400}.avatar{width:39px;height:39px;background:linear-gradient(135deg,#ffe3a4,#d8a457);color:#241a0e;box-shadow:none}
.scroll-content{padding:2px 22px 28px;scrollbar-color:#344150 transparent}
.hero{min-height:260px;height:auto;border:1px solid #354050;border-radius:13px;box-shadow:none;background-image:linear-gradient(90deg,#03080de8 0%,#03080db3 33%,#03080d22 68%),var(--hero);background-position:center}
.hero:before{background:linear-gradient(0deg,#02070c80,transparent 40%)}
.hero-content{padding:28px 30px 38px}.eyebrow,.eyebrow em{color:#ead399;font-size:10px;letter-spacing:2.1px}
.hero h1{font-size:clamp(28px,2.6vw,43px);letter-spacing:-1.3px;line-height:1.12;max-width:550px;margin:10px 0 12px;text-wrap:balance}
.hero p{color:#d7dce4;font-size:15px;line-height:1.5;max-width:440px;margin:0 0 24px}.btn-play-hero{padding:11px 23px}
.content-section{margin-top:22px}.section-header{margin-bottom:12px}.section-header h2{font-size:19px;font-weight:600;letter-spacing:-.35px;gap:15px}.section-header h2:before{height:25px;width:4px;background:linear-gradient(#ffe6a6,#c39850)}
.more-link{color:#e5cf9f;font-size:11px}.card-strip{gap:12px}
.industry-card,.daypart-card{border-color:#5b514454;border-radius:9px;background-image:linear-gradient(0deg,#03080de8,#03080d10 95%),var(--cover)}
.industry-card{height:134px;flex-basis:calc((100% - 60px)/6);min-width:130px;padding:13px 5px 14px}.industry-card:before{background:none}.industry-card b{font-size:13px;font-weight:600}.industry-card small{font-size:11px;color:#c1cad5;white-space:normal;line-height:1.25;text-align:center}
.playlist-card{flex-basis:calc((100% - 60px)/6);min-width:130px}.playlist-image{height:auto;aspect-ratio:1.48;border-color:#37404a;border-radius:9px}.round-play{border-color:#f7f4e9;background:#080d14bc;box-shadow:none;width:31px;height:31px}.playlist-title{margin-top:7px;font-size:12px}.playlist-card small{color:#a6b5c8;margin-top:4px}
.daypart-card{flex-basis:calc((100% - 48px)/5);min-width:150px;height:92px}.daypart-card small{color:#c1cad5}
.right-panel{background:linear-gradient(140deg,#0b151f,#060e16);border:1px solid #344050;border-radius:14px;box-shadow:none;padding:12px 14px;margin:61px 12px 18px 0;min-width:0}
.right-heading{border:0;margin-bottom:12px;padding:0;gap:4px}.right-heading h2{font-size:14px;font-weight:600;letter-spacing:-.2px}.right-cover{border-color:#243042;border-radius:9px;aspect-ratio:1.27}.current-heart{color:var(--gold)}
.track-heading{margin-top:13px}.track-heading strong{font-size:14px;font-weight:600;margin-bottom:4px}.track-heading span{font-size:11px;color:#bac6d4}
.right-progress{margin-top:15px}.time-row{font-size:10px;color:#c3cdda}
input[type=range]{background:#253442;accent-color:var(--gold)}
input[type=range]::-webkit-slider-thumb{background:var(--gold);box-shadow:none}
input[type=range]::-moz-range-thumb{background:var(--gold);box-shadow:none}
.big-controls{margin:8px -5px 18px}.big-controls button,.small-controls button,.bottom-tools button{color:#e9edf1}
.big-controls .big-play,.small-controls .bottom-main-play{background:#0c1822;border-color:#ebc879;box-shadow:none}.big-controls .big-play{width:60px;height:60px}
.queue-tabs{border-color:#33404e;background:#0d1823}.queue-tabs button{font-size:10px;color:#adb9c9}.queue-tabs button.active{background:#c49a4b12;color:#fff5d9;border-bottom-color:var(--gold)}
.queue-row{border-radius:6px;border-bottom-color:#1b2734}.queue-row:hover{background:#192431}.queue-row.active{background:linear-gradient(90deg,#d4aa4d1a,#101b26);border-color:#9b804d55}.queue-row .num{color:var(--gold)}.queue-info small{color:#a4b4c7}
.bottom-player{background:linear-gradient(90deg,#080f18,#0b151e,#050c12);border-color:#344050;box-shadow:none;padding:8px 25px;gap:20px}.bottom-current img{height:52px;width:52px;border-color:#3e4651;border-radius:7px}.bottom-current strong{font-size:13px}.bottom-current small{font-size:11px;color:#a8b7c9;margin-top:4px}.small-controls{gap:17px}.small-controls .bottom-main-play{height:36px;width:36px}.bottom-center{gap:4px}.progress-line{font-size:10px;gap:12px}
.empty-state{border-color:#344250;color:#a8b6c8}.toast{background:#17212d;color:#fff5dc;border-color:#b79961}.filter-panel,.result-track{background:#0d1822;border-color:#2c3b4b}.result-track:hover{background:#1a2735;border-color:#ad8f56}.result-track small,.result-track .meta{color:#b0bdd0}.filter-panel label{color:#b9c3d0}
.filter-panel select,.filter-panel input,.auth-form input,.admin-form input,.admin-form select,.admin-form textarea,.client-form input,.client-form select,.compact-row input,.compact-row select{background:#0a141f;border-color:#344354;color:#f1f3f6}
.filter-chip{background:#15202c;border-color:#405064;color:#e9edf4}.filter-chip:hover,.filter-chip.active{background:#e8c176;color:#17130c}
.auth-page,.admin-page{background:radial-gradient(ellipse at 60% 0%,#162331,#050c12 70%)}.auth-shell{background:#0c1621;border-color:#354354}.auth-shell p,.subheading,.admin-card p,.client-card p{color:#afbdcd}.auth-links a{color:var(--gold)}
.auth-form label,.client-form label,.admin-form label{color:#bec8d6}.account-frame{background:#080f17}
.admin-sidebar{background:#09131e;border-color:#2d3b4b}.admin-nav a{color:#c2cbd8}.admin-nav a.current,.admin-nav a:hover{background:#28271f;color:#ffdfa4}.admin-top,.client-top{border-color:#2d3a49}.admin-user{border-color:#344354}.admin-user a{color:var(--gold)}
.stat-card,.admin-card,.client-card{background:linear-gradient(130deg,#111e2a,#0b1520);border-color:#2f3e50}.stat-card strong,.plan-price{color:var(--gold)}.stat-card small,td small,.muted{color:#a8b7c8}td,th{border-color:#293746}th{color:#dfc48d}
.category-picks{background:#0b1520;border-color:#2d3b4d}.check-list label{border-color:#3d4a59;color:#d8e0ea}.check-list label:has(input:checked){background:#534323;border-color:#d8b56e}.admin-form label small{color:#a5b2c5}
.tab-links a,.client-menu a{background:#14202d;border-color:#354558}.tab-links a.active,.client-menu a.active{background:#514025;border-color:#e9c781;color:#fff5d9}.pricing-featured{border-color:var(--gold);box-shadow:0 0 24px #eac87e0c}.pricing-badge{color:#241c10}
.notice:not(.error):not(.success){background:#202536;border-color:#596071;color:#f3f4f8}
@media(min-width:1101px){.layout{grid-template-columns:250px minmax(0,1fr) 308px;grid-template-rows:minmax(0,1fr) 78px}}
@media(min-width:1600px){.layout{grid-template-columns:273px minmax(0,1fr) 320px}.hero{min-height:260px}.nav-item{min-height:46px}}
@media(min-width:781px) and (max-width:1270px){.brand{font-size:22px;gap:6px}.brand-mark{width:46px}.right-panel{margin-top:61px}.hero h1{font-size:34px}}
@media(min-width:781px) and (max-width:1100px){.right-panel{margin:0;top:88px;bottom:105px}}
@media(max-width:1030px) and (min-width:781px){.sidebar{padding-inline:9px}.brand{margin:0 0 28px}.nav-item{padding:12px}}
@media(max-width:780px){.sidebar{padding:20px 14px}.brand{font-size:25px}.premium-card{margin-top:24px}.nav-item{gap:18px}.topbar{height:65px;padding-inline:12px}.searchbar input{font-size:16px}.scroll-content{padding:2px 12px 24px}.hero{min-height:245px;background-position:60% center}.hero-content{padding:25px 20px 38px}.hero h1{font-size:32px;letter-spacing:-.9px;max-width:320px}.hero p{font-size:13px;max-width:270px;margin-bottom:20px}.section-header h2{font-size:17px;gap:9px}.more-link{font-size:11px}.industry-card{flex-basis:140px}.playlist-card{flex-basis:145px}.daypart-card{flex-basis:165px}.right-panel{margin:0;border-radius:0;top:65px;background:#09131d}.right-cover{aspect-ratio:1.27}.bottom-player{padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:6px}.bottom-current img{width:48px;height:48px}.small-controls .bottom-main-play{width:43px;height:43px}.bottom-current strong{font-size:13px}.filter-panel select,.filter-panel input,.auth-form input{font-size:16px}}
@media(max-width:600px){.topbar{height:112px}.right-panel{top:112px}}
@media(pointer:coarse){.right-progress input,.progress-line input{background:linear-gradient(#344252,#344252) center/100% 5px no-repeat}}
/* Obecne grafiki branż zawierają już ikony. Wygaszamy zapisane w nich
   podpisy, a nazwy kategorii pozostają czytelnym tekstem HTML. */
.industry-icon{visibility:hidden}
.industry-card:before{background:linear-gradient(0deg,#070d14 0%,#070d14f5 27%,#070d14b3 38%,transparent 65%)}
.playlist-image{background-size:112% auto;background-position:center 35%}
.hero{background-size:cover,108% auto}
@media(max-width:780px){.hero{background-size:cover,auto 110%}}

/* Logo użytkownika: oryginalny PNG, proporcje zachowane.
   Okno usuwa jedynie przezroczysty margines, bez modyfikowania pliku. */
.site-logo{display:block;position:relative;overflow:hidden;width:200px;max-width:100%;aspect-ratio:1.38;flex:none}
.site-logo img{position:absolute;display:block;width:114%;max-width:none;height:auto;left:-8%;top:-35%}
.sidebar .brand{justify-content:center;margin:0 0 20px;flex-shrink:0}
.admin-logo{flex-direction:column;gap:6px;padding:0;align-items:center}
.admin-logo small{margin:0;letter-spacing:2px}
.admin-logo .site-logo{width:180px}
.client-logo{display:block}.client-logo .site-logo{width:150px}
.auth-shell .auth-brand{justify-content:center;margin:0 0 22px}
.auth-brand .site-logo{width:215px}
@media(min-width:781px) and (max-width:1030px){
 .sidebar .site-logo{width:48px;aspect-ratio:1.2}
 .sidebar .site-logo img{width:200%;left:-44%;top:-60%}
}
@media(max-width:780px){.sidebar .site-logo{width:180px}.sidebar .brand{margin-bottom:20px}}
@media(max-width:750px){.admin-logo{flex-direction:row;justify-content:space-between}.admin-logo .site-logo{width:120px}.client-logo .site-logo{width:120px}}

/* Stały okrąg i wyśrodkowanie SVG: padding 8px pozostawiał zbyt mało
   miejsca dla ikony 22px w przycisku o średnicy 36px. */
.small-controls .bottom-main-play{
 padding:0;flex-shrink:0;aspect-ratio:1;border-radius:50%;
 display:flex;align-items:center;justify-content:center;line-height:1;
}
.small-controls .bottom-main-play>svg{display:block;flex:none;width:22px;height:22px;margin:0}

/* Czytelne playlisty z muzyką, bez zmiany motywu strony. */
.playlist-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin:12px 0 20px}
.playlist-browse-grid .playlist-card{width:100%;min-width:0;flex-basis:auto}
.playlist-browse-grid .playlist-card.active .playlist-image{border-color:#e8c176;box-shadow:0 0 0 2px #e8c17655}
.playlist-pending{color:#a6b5c8;font-size:13px;margin:0 0 22px}
.btn-play-hero:disabled{opacity:.72;cursor:default}
@media(max-width:600px){.playlist-browse-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.result-header #play-all[hidden]{display:none}

/* Czytelniejszy interfejs: większa typografia, wyraźne sekcje i większe cele dotykowe. */
:root{--muted:#bbc7d5;--stroke:#405065}
body{font-size:15px}
.nav{gap:5px}
.nav-item{min-height:48px;font-size:14px;font-weight:550;gap:17px;padding-inline:15px}
.nav-item.active{background:linear-gradient(105deg,#b99350,#59472e);color:#fff;box-shadow:inset 3px 0 #ffe2a0}
.topbar{border-bottom:1px solid #293746;background:#071019}
.searchbar{height:48px;border-radius:12px;border-color:#405063}
.searchbar input{font-size:14px}
.searchbar input::placeholder{color:#afbdcc}
.scroll-content{padding-top:22px;padding-bottom:40px}
.hero{min-height:285px;border-color:#4b5663;border-radius:16px}
.hero-content{padding:34px 36px 44px}
.hero h1{font-size:clamp(32px,3vw,47px);line-height:1.08}
.hero p{font-size:16px;color:#e0e6ed}
.content-section{margin-top:32px}
.section-header{margin-bottom:17px}
.section-header h2{font-size:21px;font-weight:700}
.more-link{font-size:13px;font-weight:600}
.card-strip{gap:15px}
.industry-card{height:158px;flex-basis:calc((100% - 60px)/5);min-width:155px;border-radius:12px}
.industry-card b{font-size:15px}
.industry-card small{font-size:12px}
.playlist-card{flex-basis:calc((100% - 60px)/5);min-width:155px}
.playlist-image{aspect-ratio:1.36;border-radius:12px}
.playlist-title{font-size:14px;font-weight:650;margin-top:10px}
.playlist-card small{font-size:12px;margin-top:6px}
.daypart-card{height:118px;flex-basis:calc((100% - 60px)/4);min-width:165px;border-radius:12px}
.daypart-card b{font-size:15px}
.daypart-card small{font-size:12px}
.right-panel{padding:17px;margin-top:22px;border-color:#405063}
.right-heading h2{font-size:17px;font-weight:700}
.track-heading strong{font-size:16px}
.track-heading span{font-size:13px;line-height:1.45}
.queue-tabs button{font-size:12px;min-height:44px}
.queue-list .empty-state{font-size:13px;line-height:1.55}
.bottom-current strong{font-size:14px}
.bottom-current small{font-size:12px}
.filter-panel{border-radius:14px}
.filter-panel label{font-size:13px}
.filter-chip{min-height:42px;font-size:13px}
.result-track{padding:12px;min-height:72px}
.result-track b{font-size:14px}
.result-track small{font-size:12px}
.empty-state{font-size:14px;line-height:1.6}
button,a,input,select{touch-action:manipulation}
:focus-visible{outline:3px solid #ffe2a0;outline-offset:3px}
@media(min-width:1101px){.layout{grid-template-columns:255px minmax(0,1fr) 330px}}
@media(min-width:1600px){.layout{grid-template-columns:275px minmax(0,1fr) 355px}}
@media(max-width:1100px) and (min-width:781px){.industry-card,.playlist-card{flex-basis:170px}.daypart-card{flex-basis:175px}.right-panel{top:88px}}
@media(max-width:780px){
 .sidebar{padding:20px 14px}.nav-item{min-height:50px;font-size:15px}
 .scroll-content{padding:14px 14px 30px}
 .hero{min-height:260px}.hero-content{padding:26px 22px 32px}.hero h1{font-size:34px}.hero p{font-size:14px}
 .content-section{margin-top:27px}.section-header h2{font-size:19px}.more-link{font-size:12px}
 .industry-card{flex-basis:158px;height:150px}.playlist-card{flex-basis:160px}.daypart-card{flex-basis:175px;height:110px}
 .right-panel{margin:0;border-radius:0;top:65px;padding:18px}
 .bottom-player{padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
}
@media(max-width:600px){.topbar{height:65px}.right-panel{top:65px}.searchbar{height:43px}.searchbar input{font-size:14px}.hero{min-height:245px}.hero h1{font-size:30px}.hero p{font-size:13px}.section-header{align-items:flex-start}.section-header h2{font-size:17px}.more-link{font-size:11px}.playlist-browse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.industry-card,.daypart-card,.playlist-image{transition:none}}