:root{--bg:#050a12;--panel:#0b1421;--panel2:#101d2d;--line:#2a3b52;--ink:#f7f3ec;--muted:#adb9c8;--gold:#efad31;--gold2:#d77a21;--red:#ed4149;--cyan:#d77a21;--violet:#bd4fd1}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 78% 10%,#123754 0,transparent 32%),radial-gradient(ellipse at 16% 62%,#281737 0,transparent 27%),var(--bg);color:var(--ink);font:14px Inter,Arial,sans-serif;letter-spacing:.01em}body:before{content:'';position:fixed;inset:0;opacity:.28;pointer-events:none;background-image:linear-gradient(90deg,transparent 49%,#ffffff06 50%,transparent 51%);background-size:48px 48px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:0}.site-header{height:68px;border-bottom:1px solid #243044;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100% - 1440px)/2));background:#070b12eF;backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.logo{display:flex;align-items:center;gap:10px;color:var(--gold);font-family:Georgia,serif;font-size:20px;letter-spacing:6px;font-weight:bold;white-space:nowrap}.logo-mark{height:40px;width:40px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;letter-spacing:0;font-size:17px}.site-header nav{display:flex;gap:24px;flex:1}.site-header nav a{font-size:12px;color:#c1c7d1;text-transform:uppercase}.site-header nav a:hover,.site-header nav a.active{color:var(--gold)}.search{width:250px;border:1px solid #354054;border-radius:8px;padding:10px 13px;color:#bcc5d0;background:#0d131d}.topbtn,.btn{padding:10px 16px;border-radius:7px;background:linear-gradient(100deg,#efad31,#d77a21);color:#ffffff;font-weight:800}.btn.ghost,.topbtn.ghost{background:transparent;border:1px solid #6e5d3d;color:#f2d395}.btn.red{background:var(--red);color:#fff}.btn.small{padding:7px 11px;font-size:12px}.wrap{max-width:1440px;margin:auto;padding:28px 34px 100px}.hero{display:grid;grid-template-columns:1.12fr .88fr;min-height:335px;align-items:center;position:relative;overflow:hidden}.hero:after{content:'?  ?  ?';position:absolute;right:11%;top:15%;font-size:34px;letter-spacing:32px;color:#e9aa4b65;transform:rotate(-9deg)}.hero h1{font:44px/1.08 Georgia,serif;letter-spacing:-1.2px;margin:0 0 14px;max-width:630px}.gold{color:var(--gold)}.lead{color:#c7cbd1;font-size:15px;line-height:1.55;max-width:520px;margin:0 0 18px}.hero-actions{display:flex;gap:12px}.hero-person{justify-self:end;width:330px;height:300px;border-radius:48% 48% 18px 18px;background:linear-gradient(140deg,#2e2023,#1d3d5a 60%,#0b111a);position:relative;overflow:hidden;border:1px solid #526171}.hero-person:after{content:'KS';position:absolute;inset:0;display:grid;place-items:center;color:#f6b73e;font:60px Georgia,serif;text-shadow:0 0 35px #f6b73e}.live-banner{display:flex;align-items:center;gap:14px;background:#f5f5f4e8;color:#151515;border-radius:12px;padding:12px 14px;width:max-content;box-shadow:0 8px 25px #0007;margin-top:18px}.live-dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}.live-copy b{display:block;font-size:14px}.live-copy span{font-size:12px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}.section-head h2{font:20px Georgia,serif;margin:0;color:#f3c45d}.link{color:#d77a21;font-size:12px}.home-grid{display:grid;grid-template-columns:1.28fr 1fr;gap:14px}.panel{background:linear-gradient(145deg,#111925,#0c121c);border:1px solid var(--line);border-radius:10px;padding:13px;box-shadow:0 8px 25px #0002}.tracks{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.track-card{background:#121925;border:1px solid #303c50;border-radius:8px;padding:7px;min-width:0}.cover{width:100%;aspect-ratio:1;border-radius:6px;display:grid;place-items:center;font:24px Georgia,serif;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative;overflow:hidden}.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,#ffffff25 50%,transparent 65%)}.track-card b{display:block;margin-top:7px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card span{font-size:10px;color:var(--muted)}.play{position:absolute;right:6px;bottom:6px;height:24px;width:24px;background:#f5f1e9;color:#10141b;border-radius:50%;z-index:1}.artist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.artist-mini{display:grid;grid-template-columns:56px 1fr;gap:9px;padding:9px;background:#121a26;border:1px solid #303d51;border-radius:8px;cursor:pointer}.avatar{border-radius:7px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(140deg,var(--c1),var(--c2));font-size:16px}.artist-mini .avatar{height:56px}.artist-mini b{font-size:12px}.artist-mini span{font-size:10px;color:var(--muted);display:block;margin:3px 0}.follow{font-size:10px;width:100%;padding:5px;border-radius:5px;background:linear-gradient(100deg,#efad31,#d77a21);color:#fff;font-weight:bold}.info-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;margin-top:14px}.feature{min-height:162px;position:relative;overflow:hidden}.feature h2{font:20px Georgia,serif;color:#efc25d;margin:0 0 8px}.feature p{line-height:1.45;color:#bec6d1;font-size:12px;max-width:240px}.donut{float:right;margin:-4px 5px;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--gold) 0 68%,var(--cyan) 0 90%,var(--violet) 0);display:grid;place-items:center}.donut:after{content:'68%\A Human';white-space:pre;text-align:center;line-height:1.2;font-size:14px;background:#101722;border-radius:50%;width:65px;height:65px;display:grid;place-items:center}.community-stats{display:grid;gap:9px}.mini-live{padding:9px;border:1px solid #334155;border-radius:7px;font-size:11px}.player{position:fixed;bottom:0;left:0;right:0;height:68px;z-index:15;background:#0b111bdd;border-top:1px solid #354257;backdrop-filter:blur(15px);display:flex;align-items:center;gap:14px;padding:8px 28px}.player .cover{width:48px;flex:none}.wave{height:30px;flex:1;background:repeating-linear-gradient(90deg,transparent 0 3px,#d49b3b 4px 5px,transparent 6px 10px);opacity:.7;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 80%,transparent)}.player b{font-size:12px}.player small{color:var(--muted)}.round{background:transparent;color:#fff;border:1px solid #58667a;border-radius:50%;height:37px;width:37px}.page-title{font:32px Georgia,serif;margin:10px 0 5px;color:#f2ca69}.sub{color:var(--muted);margin:0 0 22px}.discover-layout{display:grid;grid-template-columns:230px 1fr;gap:18px}.filter label,.form label{font-size:11px;color:#d5bd87;text-transform:uppercase;display:block;margin:12px 0 5px}.filter select,.form input,.form textarea,.form select{width:100%;background:#0a1019;border:1px solid #38465a;border-radius:6px;padding:10px;color:#ecf1f8}.music-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.artist-page{display:grid;grid-template-columns:220px 1fr;gap:20px}.artist-hero .avatar{height:220px;font-size:55px}.statline{display:flex;gap:24px;margin:12px 0}.statline b{display:block;color:#f4c45c}.song-list .row{display:grid;grid-template-columns:42px 1fr 80px 80px;gap:10px;align-items:center}.row .avatar{height:42px}.modal{position:fixed;inset:0;background:#000a;z-index:30;display:none;place-items:center;padding:25px}.modal.show{display:grid}.modal-box{width:min(930px,94vw);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#f7f7f7,#dce3ec);color:#151a23;border-radius:14px;padding:22px;position:relative;box-shadow:0 20px 80px #000}.modal-box.dark{background:linear-gradient(145deg,#121c29,#0d121c);color:var(--ink);border:1px solid #47556a}.close{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;background:#fff;color:#111;font-size:20px}.overlay-artist{display:grid;grid-template-columns:250px 1fr;gap:22px}.overlay-artist .avatar{height:250px;font-size:60px}.modal h2{margin:0 0 6px;font:28px Georgia,serif}.top-list{display:grid;gap:7px;margin-top:15px}.top-row{display:grid;grid-template-columns:30px 42px 1fr auto;gap:10px;align-items:center;padding:8px;background:#ffffffa8;border-radius:7px}.top-row .avatar{width:42px;height:42px}.vote-row{grid-template-columns:30px 46px 1fr 90px}.vote-row input{accent-color:#e79c27;width:17px;height:17px}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan{padding:20px;border:1px solid var(--line);border-radius:10px;background:#111925}.plan.goldplan{border-color:#e8b63d;box-shadow:0 0 25px #e8b63d22}.plan h2{font:23px Georgia,serif;color:var(--gold);margin:0}.plan .price{font-size:30px;font-weight:bold;margin:10px 0}.plan li{margin:9px 0;color:#c9d0da}.radio-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:15px}.video{height:270px;background:linear-gradient(120deg,#1b2236,#5a314a,#143d56);display:grid;place-items:center;font:35px Georgia,serif;border-radius:9px;position:relative}.video:after{content:'LIVE PRESENTER FEED';position:absolute;bottom:12px;left:12px;padding:6px 8px;background:#000a;font:11px Arial;color:#fff}.chat{display:grid;gap:8px;align-content:start}.chat-msg{background:#1c2635;border-radius:7px;padding:9px;font-size:12px}.chat-msg b{color:var(--gold)}.history{margin-top:14px}.history .row{grid-template-columns:28px 1fr auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form .wide{grid-column:1/-1}.checks{display:grid;gap:8px;margin:10px 0;font-size:12px}.checks input{width:auto;margin-right:7px}.notice{padding:12px;border:1px solid #765c26;background:#37281255;border-radius:7px;color:#edcf88;font-size:12px}@media(max-width:950px){.tracks{grid-template-columns:repeat(3,1fr)}.artist-grid{grid-template-columns:1fr}.music-grid{grid-template-columns:repeat(3,1fr)}.site-header nav{gap:12px}.search{display:none}}@media(max-width:680px){.site-header{padding:0 15px}.site-header nav{display:none}.wrap{padding:22px 15px 90px}.hero,.home-grid,.info-row,.discover-layout,.artist-page,.radio-grid,.overlay-artist{grid-template-columns:1fr}.hero{min-height:0}.hero h1{font-size:34px}.hero-person{display:none}.tracks,.music-grid,.plans{grid-template-columns:repeat(2,1fr)}.artist-grid{grid-template-columns:1fr}.player{padding:7px 12px}.player .wave{display:none}.form-grid{grid-template-columns:1fr}.form .wide{grid-column:auto}}
/* ── Artist Profile v2 (Klankstal-style) ── */
.artist-profile-v2{display:flex;flex-direction:column;gap:20px}
.ap-hero-row{display:grid;grid-template-columns:240px 1fr 280px;gap:20px;align-items:start}
.ap-photo-col{display:flex;flex-direction:column;gap:12px}
.ap-photo-frame{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:#0a1220}
.ap-photo-img{width:100%;height:100%;border-radius:0;min-height:100%;display:block}
.ap-photo-badge{position:absolute;bottom:10px;left:10px;background:rgba(8,15,26,.75);backdrop-filter:blur(8px);border:1px solid var(--cyan);color:var(--cyan);padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.03em}
.ap-action-row{display:flex;gap:8px}
.ap-follow-btn,.ap-collab-btn{flex:1;font-size:12px;padding:9px 8px;text-align:center}
.ap-social-row{display:flex;gap:8px;justify-content:center}
.ap-social-icon{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted);transition:border-color .15s,color .15s}
.ap-bio-col{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.ap-name{font:36px/1.1 Georgia,serif;margin:4px 0 2px;color:#f2ca69}
.ap-verified-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--cyan);color:#000814;border-radius:50%;font-size:11px;font-weight:800;vertical-align:middle;margin-left:6px}
.ap-meta-row{display:flex;gap:16px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.ap-bio-text{color:#c0c8d4;line-height:1.65;margin:0;font-size:14px}
.ap-skill-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ap-skill-tag{border:1px solid var(--line);border-radius:20px;padding:4px 14px;font-size:12px;color:var(--muted)}
.ap-sidebar{display:flex;flex-direction:column;gap:12px}
.ap-stats-panel{padding:16px}
.ap-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.ap-stats-grid b{display:block;font-size:18px;color:var(--gold);font-weight:700}
.ap-stats-grid small{font-size:11px;color:var(--muted);margin-top:2px;display:block}
.ap-genres-panel{padding:16px}
.ap-genres-panel h3{font:15px Georgia,serif;color:var(--gold);margin:0 0 14px}
.ap-genre-bar{margin-bottom:12px}
.ap-genre-bar-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;color:var(--muted)}
.ap-genre-track{height:4px;background:rgba(42,59,82,.6);border-radius:2px;overflow:hidden}
.ap-genre-fill{height:100%;border-radius:2px;transition:width .4s ease}
.ap-bottom-row{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.ap-releases-panel{padding:16px}
.ap-release-row{display:grid;grid-template-columns:56px 1fr auto auto 28px;gap:12px;align-items:center;padding:9px 6px;border-radius:8px;transition:background .15s}
.ap-release-row:hover{background:rgba(215, 122, 33,.07)!important}
.ap-release-cover{width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0;position:relative}
.ap-cover{width:56px!important;height:56px!important;border-radius:8px;aspect-ratio:1;min-height:unset}
.ap-release-info b{display:block;font-size:13px;margin-bottom:2px}
.ap-release-info small{font-size:11px;color:var(--muted)}
.ap-verified-small{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:var(--cyan);color:#000814;border-radius:50%;font-size:8px;font-weight:800;vertical-align:middle;margin-left:4px}
.ap-release-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ap-type-tag{border:1px solid var(--line);border-radius:4px;padding:2px 8px;font-size:10px;color:var(--muted)}
.ap-release-stats{display:flex;gap:12px;font-size:11px;color:var(--muted);white-space:nowrap}
.ap-menu-btn{background:none;color:var(--muted);font-size:18px;padding:4px 6px;border-radius:4px;line-height:1}
.ap-menu-btn:hover{color:var(--gold)}
.ap-process-panel{padding:20px}
.ap-process-panel h3{font:16px Georgia,serif;color:var(--gold);margin:0 0 2px}
.ap-process-row{display:flex;align-items:flex-start;gap:2px;margin:18px 0 16px;flex-wrap:wrap}
.ap-process-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;gap:6px;min-width:44px}
.ap-process-icon{width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:17px;background:rgba(239,173,49,.07)}
.ap-process-step b{font-size:10px;color:var(--ink);line-height:1.3}
.ap-process-step small{font-size:9px;color:var(--muted);line-height:1.4}
.ap-process-dash{color:var(--line);font-size:12px;letter-spacing:1px;padding-top:14px;flex-shrink:0}
.ap-process-note{border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:11px;color:var(--muted);margin-top:4px;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.ap-process-note>span:first-child{font-size:15px;flex-shrink:0;margin-top:1px}
@media(max-width:860px){.ap-hero-row{grid-template-columns:200px 1fr}.ap-sidebar{display:none}.ap-bottom-row{grid-template-columns:1fr}}
/* ── Fan Artists Page ── */
.fan-artists-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:16px}
.fan-artists-head h2{font:22px Georgia,serif;margin:0 0 4px;color:#f2ca69}
.fan-artist-panel{padding:16px}
.fan-artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.fan-artist-card{background:linear-gradient(145deg,#0d1824,#090f1a);border:1px solid #263646;border-radius:10px;padding:9px;cursor:pointer;transition:border-color .15s,transform .15s;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.fan-artist-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.fan-artist-card .artist-browse-avatar-frame{flex:none;padding:3px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#8d4927,var(--cyan));box-shadow:0 4px 14px #0007;width:72px;height:72px}
.fan-artist-card .avatar{height:100%;width:100%;border:2px solid #0d1520;border-radius:5px;font-size:18px}
.fan-artist-card .artist-browse-info{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.fan-artist-card .artist-browse-info b{font-size:13px;color:#f3f0ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.fan-artist-card .artist-browse-info small{font-size:10px;color:var(--muted)}
.fan-artist-card .artist-browse-followers{font-size:10px;color:var(--muted)}
.fan-artist-stat{display:inline-block;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:600;margin-top:2px}
.purchased-tag{background:rgba(239,173,49,.15);color:var(--gold);border:1px solid rgba(239,173,49,.3)}
.liked-tag{background:rgba(237,65,73,.12);color:#f87277;border:1px solid rgba(237,65,73,.25)}
.follow-tag{background:rgba(215, 122, 33,.1);color:var(--cyan);border:1px solid rgba(215, 122, 33,.25)}
.fan-artist-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media(max-width:680px){.ap-hero-row{grid-template-columns:1fr}.ap-photo-frame{aspect-ratio:16/9}.ap-release-row{grid-template-columns:48px 1fr 28px}.ap-release-tags,.ap-release-stats{display:none}}
.cover,.avatar{background-size:cover!important;background-position:center!important}.hero-person{background-image:linear-gradient(90deg,#070b12 0%,#070b1220 50%,#070b1200),url('assets/hero-studio.png');background-size:cover;background-position:center}.hero-person:after{display:none}.login-screen{min-height:620px;display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:center}.login-card{padding:30px}.login-card .page-title{font-size:30px}.login-card label{font-size:11px;color:#e0bf7b;text-transform:uppercase;display:block;margin:14px 0 5px}.login-card input{width:100%;background:#080e17;border:1px solid #3a485c;color:#fff;border-radius:6px;padding:11px}.artist-genre-select b,.artist-genre-select small{display:block}.artist-genre-select small{margin-top:3px}.login-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.login-choice button{padding:10px;border:1px solid #3a485c;border-radius:6px;background:#080e17;color:#9aa7b3;font:700 11px "Trebuchet MS",Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.login-choice button.active{background:linear-gradient(100deg,#f9cc58,#df8c25);color:#18120c;border-color:transparent}.login-art{height:500px;border-radius:12px;background:linear-gradient(90deg,#080d16 0%,#080d1640 35%,transparent),url('assets/hero-studio.png');background-size:cover;background-position:right center;border:1px solid #344257}@media(max-width:680px){.login-screen{grid-template-columns:1fr}.login-art{height:220px}}
.winner-card{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;background:linear-gradient(120deg,#1c1820,#162b35)}.winner-cover{height:190px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#8d4927,#e0ad58);font:60px Georgia,serif;color:#fff;text-decoration:none}.winner-card h2{font:36px Georgia,serif;color:var(--gold);margin:5px 0}.winner-card a{text-decoration:none}.winner-meta{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 14px}.winner-meta span{font-size:11px;color:var(--muted)}.winner-meta .chart-genre{color:var(--gold)}.chart-row{display:grid;grid-template-columns:34px 48px minmax(160px,1fr) 90px 76px 60px 54px minmax(90px,180px) 60px 38px;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line)}
.chart-row a{text-decoration:none;color:inherit}
.chart-mood,.chart-bpm,.chart-length{font-size:11px;color:var(--muted);white-space:nowrap}
.chart-row-head{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:0 4px 8px}
.chart-genre{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-row .avatar{height:48px}.chart-pos{font-size:18px;color:var(--gold)}.vote-bar{height:8px;border-radius:20px;background:#222d3b;overflow:hidden}.vote-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#e97437)}.chart-row small{color:var(--muted)}.vote-callout{margin-top:16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#192235,#2b1b3a)}.vote-callout h2{margin:0;color:#f1c35d}@media(max-width:680px){.winner-card{grid-template-columns:1fr}.winner-cover{height:150px}.chart-row,.chart-row-head{grid-template-columns:28px 42px 1fr 54px}.chart-row .vote-bar,.chart-row small:last-child,.chart-genre,.chart-mood,.chart-bpm,.chart-length,.chart-row-head span:nth-child(4),.chart-row-head span:nth-child(5),.chart-row-head span:nth-child(6),.chart-row-head span:nth-child(7),.chart-row-head span:nth-child(8),.chart-row-head span:nth-child(9){display:none}.vote-callout{align-items:flex-start;gap:12px;flex-direction:column}}
/* Wireframe-inspired atmospheric backgrounds shared by every page */
main{position:relative;overflow:hidden;background:linear-gradient(115deg,#050a12 0%,#08121d 48%,#07131d 100%)}.wrap{position:relative;isolation:isolate;min-height:calc(100vh - 68px)}.wrap:before{content:'';position:absolute;z-index:-1;inset:0 -8vw;background:radial-gradient(ellipse at 82% 14%,#008cc52e 0,transparent 25%),radial-gradient(ellipse at 18% 72%,#bf37c126 0,transparent 26%),radial-gradient(ellipse at 55% 34%,#eaa02a12 0,transparent 20%),linear-gradient(90deg,#050a12ee,#050a1299),url('assets/hero-studio.png');background-size:auto,auto,auto,auto,cover;background-position:center;background-attachment:fixed;opacity:.9;pointer-events:none}.wrap:after{content:'';position:absolute;inset:0 -8vw;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 80px,#4ecbe507 81px 82px),repeating-linear-gradient(0deg,transparent 0 80px,#f1b43a05 81px 82px);pointer-events:none}.wrap>*,.wrap section{position:relative}.panel{background:linear-gradient(145deg,#101b2bdc,#09111bdd)!important;border-color:#334a64!important;backdrop-filter:blur(5px)}.page-title,.hero h1{color:#f8f3e8;text-shadow:0 2px 18px #000}.gold,.page-title span{color:var(--gold)}.btn{background:linear-gradient(105deg,#f3c052,#db8127)}.btn.ghost{border-color:#b78632;color:#f5cd76;background:#09111ca8}.hero-person{box-shadow:0 0 70px #19bde139,0 0 100px #bd4fd123}.login-art{box-shadow:0 0 55px #19bde12c}.winner-card{background:linear-gradient(110deg,#1d1825e8,#0a2431e8)!important}.chart-row:hover,.top-row:hover{background:#1bbde112}.radio{background:linear-gradient(135deg,#171531,#053f57)!important;box-shadow:inset 0 0 60px #bd4fd123}
.brand-logo{height:52px;width:210px;object-fit:contain;object-position:left center;mix-blend-mode:screen}.logo{font-size:0;letter-spacing:0}.hero-person,.login-art{background-image:linear-gradient(90deg,#050a1266 0%,transparent 38%),url('assets/background-syntera.png')!important;background-size:cover!important;background-position:center!important}.wrap:before{background-image:radial-gradient(ellipse at 82% 14%,#008cc52e 0,transparent 25%),radial-gradient(ellipse at 18% 72%,#bf37c126 0,transparent 26%),radial-gradient(ellipse at 55% 34%,#eaa02a12 0,transparent 20%),linear-gradient(90deg,#050a12ee,#050a1299),url('https://cdn1.site-media.eu/images/1920/26603939/Klankstal_background-w84oGmJDloisZ5O-V0fa8w.jpg')!important}.live-stage{display:grid;grid-template-columns:1fr 1fr;gap:16px}.presenter-card{height:440px;position:relative;overflow:hidden;border:1px solid #43637c;border-radius:12px;background:#0a1019}.presenter-photo{position:absolute;inset:0;background:linear-gradient(0deg,#050a12e8 0%,transparent 55%),url('https://cdn1.site-media.eu/images/1024/26607499/Welcome-fOtY-V1L8f8re5kws7QbEg.jpg') center/cover}.on-air{position:absolute;top:15px;left:15px;z-index:1;background:#ee3f4a;color:#fff;font-weight:800;font-size:12px;padding:8px 11px;border-radius:5px;box-shadow:0 0 18px #ee3f4a88}.presenter-overlay{position:absolute;z-index:1;left:20px;bottom:18px}.presenter-overlay span,.now-playing span{font-size:10px;color:#f4c052;letter-spacing:1.2px}.presenter-overlay h2{font:30px Georgia,serif;margin:3px 0}.presenter-overlay p{margin:0;color:#d5dae1}.live-console{min-height:440px;padding:25px;background:linear-gradient(145deg,#131735e8,#062d3de8)!important}.live-console h2{font:34px Georgia,serif;color:#f3c45c;margin:8px 0}.now-playing{display:grid;grid-template-columns:68px 1fr 52px;gap:12px;align-items:center;padding:12px;margin:18px 0;background:#07101bd6;border:1px solid #36506b;border-radius:9px}.now-playing .avatar{height:68px}.now-playing b,.now-playing small{display:block;margin:4px 0}.big-play{width:48px;height:48px;border-radius:50%;border:1px solid #f2bd48;background:#f2bd48;color:#0c1119;font-size:18px}.sound-wave{height:58px;display:flex;align-items:center;gap:5px;margin:8px 0 15px}.sound-wave i{width:6%;border-radius:7px;background:linear-gradient(#d77a21,#d77a21,#f3b846);animation:pulse 1s ease-in-out infinite alternate}.sound-wave i:nth-child(1){height:35%}.sound-wave i:nth-child(2){height:70%;animation-delay:.2s}.sound-wave i:nth-child(3){height:46%;animation-delay:.1s}.sound-wave i:nth-child(4){height:95%;animation-delay:.4s}.sound-wave i:nth-child(5){height:60%;animation-delay:.25s}.sound-wave i:nth-child(6){height:38%}.sound-wave i:nth-child(7){height:82%;animation-delay:.3s}.sound-wave i:nth-child(8){height:55%}.sound-wave i:nth-child(9){height:100%;animation-delay:.45s}.sound-wave i:nth-child(10){height:44%}.sound-wave i:nth-child(11){height:72%;animation-delay:.2s}.sound-wave i:nth-child(12){height:34%}@keyframes pulse{to{transform:scaleY(.55);filter:brightness(1.35)}}.live-actions{display:flex;gap:8px;flex-wrap:wrap}.live-bottom{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;margin-top:16px}.live-chat{display:grid;gap:9px;align-content:start}.live-chat input{background:#07101a;color:#fff;border:1px solid #38506a;padding:10px;border-radius:6px}@media(max-width:760px){.live-stage,.live-bottom{grid-template-columns:1fr}.presenter-card{height:330px}.brand-logo{width:155px}}
.artist-mini{grid-template-columns:1fr!important}.artist-link{display:grid;grid-template-columns:56px 1fr;gap:9px;cursor:pointer;text-align:left;background:transparent;border:0;padding:0;color:inherit;width:100%}.artist-link span{display:grid;gap:3px}.artist-link small{color:var(--muted);font-size:.78rem}.artist-link:hover b{color:var(--gold)}.artist-link .avatar{height:56px}
/* Wireframe-faithful brand, radio and global player refresh */
.site-header{height:78px;padding:0 max(26px,calc((100% - 1510px)/2));background:linear-gradient(90deg,#03070deF,#09111aeF);border-bottom-color:#27354a}
.logo{height:76px;display:flex;align-items:center;overflow:visible}
.brand-logo{width:335px;height:70px;max-width:31vw;object-fit:contain;object-position:left center;mix-blend-mode:normal;filter:none}
.radio-page{max-width:1320px;margin:0 auto}.radio-heading{display:flex;justify-content:space-between;align-items:end;margin:8px 0 18px}.radio-heading .page-title{font-size:42px;margin:3px 0}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#f1bf4f;font-weight:800}.live-listener{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #735c34;background:#17130d;border-radius:8px}.live-listener small{color:#bfc9d6}.radio-stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:17px}.presenter-card{height:458px;border-radius:15px;border:1px solid #355b75;box-shadow:0 18px 45px #0007}.presenter-photo{background:linear-gradient(0deg,#030711f5,transparent 65%),url('https://cdn1.site-media.eu/images/1024/26607499/Welcome-fOtY-V1L8f8re5kws7QbEg.jpg') center/cover}.presenter-overlay{bottom:58px}.presenter-overlay h2{font-size:34px}.watch-live{position:absolute;z-index:2;bottom:15px;left:20px;padding:9px 14px;border-radius:6px;background:#f4f4f0;color:#111;font-weight:800}.broadcast-console{min-height:458px;padding:22px;border:1px solid #8d4927;border-radius:15px;background:radial-gradient(circle at 85% 3%,#4b1a7a55,transparent 32%),linear-gradient(145deg,#0c1c2a,#08101d);box-shadow:0 18px 45px #0005}.broadcast-top{display:flex;justify-content:space-between;align-items:center}.genre-tag{font-size:11px;padding:6px 8px;border-radius:20px;color:#bdeafa;border:1px solid #d77a21;background:#0a2632}.track-now{display:grid;grid-template-columns:82px 1fr 54px;gap:14px;align-items:center;margin:19px 0 10px}.track-now .avatar{height:82px;border-radius:10px}.track-now h2{font:31px Georgia,serif;margin:3px 0;color:#f5ca64}.track-now span,.track-now p{font-size:11px;color:#b5c3d0;margin:0}.play-disc{height:52px;width:52px;border-radius:50%;background:#f3bf4c;color:#13100a;border:2px solid #ffe6a0;font-weight:bold}.wave-panel{padding:12px 14px;border:1px solid #2e5368;border-radius:10px;background:#050d17}.wave-copy{display:flex;justify-content:space-between;font-size:11px;color:#a8bacb;margin-bottom:7px}.wave-copy b{color:#e9eff6}.pro-wave,.mini-wave{display:flex;align-items:center;gap:3px;height:64px;overflow:hidden}.pro-wave i,.mini-wave i{height:var(--h);flex:1;min-width:2px;border-radius:5px;background:linear-gradient(#e8b746,#d77a21 50%,#d77a21);animation:wavepulse 1.2s ease-in-out infinite alternate}.pro-wave i:nth-child(3n){animation-delay:.18s}.pro-wave i:nth-child(4n){animation-delay:.36s}.pro-wave i:nth-child(5n){animation-delay:.52s}@keyframes wavepulse{to{transform:scaleY(.38);filter:brightness(1.3)}}.transport{display:flex;align-items:center;gap:10px;margin-top:13px}.transport button,.player-controls button{background:transparent;border:0;color:#e7edf5;padding:6px;font-size:16px}.transport-play,.main-control{height:42px;width:42px!important;border-radius:50%!important;background:#f1bd4a!important;color:#111!important;border:1px solid #ffda7b!important}.live-time{font-size:11px;color:#99acbf;margin-right:auto}.heart{background:transparent;color:#f1c95d;font-size:25px;padding:2px 8px}.cart-control{border:1px solid #c9912b;background:#e9ac35;color:#14110b;font-weight:800;border-radius:6px;padding:8px 11px}.live-checks{grid-template-columns:1fr 1fr;margin-top:13px}.live-checks label{padding:8px;border:1px solid #254354;border-radius:6px;color:#c1cfdd}.radio-lower{display:grid;grid-template-columns:.9fr 1.1fr;gap:17px;margin-top:17px}.chat-panel,.session-history{padding:17px}.chat-panel h2,.session-history h2{font:22px Georgia,serif;color:#f0c35d;margin:3px 0 0}.listener-count{font-size:11px;color:#efad31;background:#0d2a35;padding:5px 8px;border-radius:12px}.chat-feed{display:grid;gap:10px;min-height:215px;max-height:280px;overflow:auto;padding-right:4px}.chat-msg{display:flex;gap:9px;background:#111f2d;border:1px solid #273e52;border-radius:10px;padding:9px}.chat-msg p{margin:0;line-height:1.35;font-size:12px;color:#d2dbe5}.chat-msg b{color:#f0c663}.chat-msg small{font-size:10px;color:#8796a8;margin-left:6px}.chat-msg em{font-style:normal;font-size:9px;background:#6b4387;color:#fff;padding:2px 4px;border-radius:4px}.chat-avatar{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:bold;color:white}.av1{background:#d77a21}.av2{background:#b76539}.av3{background:#d77a21}.chat-compose{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.chat-compose input{background:#07101a;border:1px solid #38546c;border-radius:7px;padding:11px;color:white}.history-list{display:grid;gap:7px}.history-row{display:grid;grid-template-columns:40px 44px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:8px;background:#101b28}.history-row.current{border:1px solid #c49432;background:#20190b}.history-row .avatar{height:44px}.history-row b,.history-row small{display:block}.history-row small,.history-row>span:last-child{font-size:10px;color:#a8b6c6}.history-no{font-size:10px;color:#f0bf50;font-weight:bold}.pro-player{height:82px;padding:9px 28px;background:linear-gradient(90deg,#080f19ee,#0c1521f2);gap:12px}.player-art .cover{height:60px;width:60px}.player-meta{min-width:130px;display:grid;gap:4px}.player-meta small,.player-time{font-size:11px;color:#aab9c9}.player-wave{height:58px;flex:1;min-width:120px;padding:0 8px}.mini-wave{height:100%}.mini-wave i{background:linear-gradient(#e6b545,#b78c3d);opacity:.9}.player-controls{display:flex;align-items:center;gap:1px}.player .heart{font-size:24px}.player .cart-control{white-space:nowrap}.player .round,.player .wave{display:none}@media(max-width:950px){.brand-logo{width:245px}.radio-stage,.radio-lower{grid-template-columns:1fr}.pro-player{padding:8px 15px}.player-wave{display:none}.player-time{display:none}}@media(max-width:620px){.brand-logo{width:185px;max-width:58vw}.site-header{height:66px}.radio-heading{align-items:start;gap:8px;flex-direction:column}.live-checks{grid-template-columns:1fr}.track-now h2{font-size:26px}.player-meta{min-width:0}.player .heart,.player-controls button:not(.main-control){display:none}.player .cart-control{font-size:10px;padding:7px}.pro-player{height:72px}.player-art .cover{height:50px;width:50px}}
.wrap{position:relative;isolation:isolate}.wrap:before{content:'';position:absolute;z-index:-1;inset:0 -30vw;background-position:center top;background-size:cover;background-attachment:fixed;opacity:.55;pointer-events:none}.wrap:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#050a12 0%,#050a12cc 40%,#050a1288 72%,#050a12 100%);pointer-events:none}.hero-person:after{display:none}.hero-person{background-position:center;background-size:cover;border-color:#3d6079;box-shadow:0 25px 60px #0009}.hero{min-height:370px}.hero h1{font-size:52px;line-height:1.02}.page-title{font-size:38px;letter-spacing:-.5px;color:#f5f0e8;text-shadow:0 2px 14px #000}.panel{background:linear-gradient(145deg,#101926f4,#07111bf4);border-color:#294154;box-shadow:0 16px 42px #0005}.form{padding:22px}.form input,.form textarea,.form select{background:#07111b;border-color:#35536a;min-height:42px}.form input:focus,.form textarea:focus,.form select:focus,.chat-compose input:focus{outline:1px solid #e9b640;border-color:#e9b640}.form label{color:#e4b54b;font-size:11px;letter-spacing:.7px}.notice{background:#1a2631aa;border-color:#8c672a}.plan{background:linear-gradient(160deg,#121d2b,#080e17);border-color:#314a61}.plan h2{font-size:27px}.winner-card{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,#e3aa2b28,transparent 25%),linear-gradient(145deg,#101d29,#09101a)}.winner-cover{background:linear-gradient(135deg,#5f3922,#ce9b2f);box-shadow:0 0 28px #e5b23f66}.chart-row{background:#0b1521dd;border:1px solid #24394d;border-radius:8px;margin:5px 0;padding:7px}.login-screen{min-height:620px}.login-card{background:linear-gradient(145deg,#101a28f5,#080d17f5);border-color:#335672}.login-art{border-radius:0 14px 14px 0;min-height:500px;background-position:center;background-size:cover}.discover-layout>.panel,.artist-page>.panel{backdrop-filter:blur(6px)}
/* Master wireframe reference: header and live radio dashboard */
.site-header{height:76px;background:rgba(5,10,16,.94);border-bottom:1px solid #1d2a36;padding-left:18px;padding-right:22px}.wire-logo{display:flex!important;align-items:center!important;gap:10px!important;width:365px;height:68px;color:#e7a72d!important;font-family:Georgia,serif!important;font-size:0!important;letter-spacing:0!important}.ks-mark{display:grid;place-items:center;width:54px;height:54px;border:2px solid #d88d1f;border-radius:50%;font:28px Georgia,serif;color:#db9a2c;line-height:1;letter-spacing:-4px;padding-right:4px}.logo-title{font:600 22px/1 Georgia,serif;letter-spacing:7px;color:#e0a22c;text-shadow:0 0 12px #d7801d55}.logo-wave{height:34px;width:66px;opacity:.9;background:linear-gradient(90deg,transparent 0 3%,#a66b20 4% 6%,transparent 7% 11%,#efae2b 12% 14%,transparent 15% 20%,#c37620 21% 25%,transparent 26% 31%,#efad2c 32% 34%,transparent 35% 42%,#db9024 43% 47%,transparent 48% 56%,#b56d1e 57% 62%,transparent 63% 70%,#eda82a 71% 73%,transparent 74%);mask-image:linear-gradient(transparent 2%,#000 15%,#000 85%,transparent 98%)}.right-wave{transform:scaleX(-1)}.brand-logo{display:none!important}.site-header nav{justify-content:center}.site-header nav a{font-weight:700;color:#d0d3d5}.search{background:#0b1119;border-color:#4c5862}.wrap:before{opacity:.46}.wrap{padding-top:20px}
.wire-live{max-width:1510px;margin:auto}.live-hero-wire{height:264px;display:grid;grid-template-columns:1fr 440px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 42%,#0f84b63d,transparent 38%),radial-gradient(ellipse at 57% 46%,#d8942531,transparent 30%)}.live-hero-wire:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#e6ab2e 1px,transparent 1px);background-size:34px 34px;opacity:.17;pointer-events:none}.live-hero-copy{position:relative;z-index:1;padding:14px 30px}.live-kicker{font-size:13px;font-weight:bold;color:#ecf0f2;margin-bottom:6px}.live-kicker span,.live-label{background:#ef3d45;color:#fff;font-size:10px;font-weight:900;padding:4px 6px;border-radius:4px;margin-right:8px}.live-hero-copy h1{font:43px/1.1 Georgia,serif;margin:0;color:#f7f4ee;letter-spacing:-.7px}.live-hero-copy h1 em{font-style:normal;color:#e5a52c}.live-hero-copy p{color:#d0d2d4;line-height:1.5;margin:11px 0}.live-hero-actions{display:flex;align-items:center;gap:15px}.wire-listen{font-size:15px;padding:11px 26px}.wire-conversation{padding:10px 20px;color:#ded2b8;border-color:#74634a}.watching{border-left:1px solid #69604c;padding-left:16px;color:#d8dce0}.watching b{color:#d6a52e}.live-owner{position:relative;z-index:1;background:linear-gradient(90deg,transparent,#050a12 95%),url('https://cdn1.site-media.eu/images/1024/26607499/Welcome-fOtY-V1L8f8re5kws7QbEg.jpg') center top/cover no-repeat}.wire-live-grid{display:grid;grid-template-columns:1.72fr .68fr .68fr;gap:12px}.wire-panel{background:linear-gradient(145deg,#0d1721eF,#081019f5);border:1px solid #223747;border-radius:9px;box-shadow:0 12px 25px #0004;overflow:hidden}.wire-panel-title{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px;color:#e6e7e4;font-weight:bold;border-bottom:1px solid #1b2d3b}.wire-panel-title>b{font-size:10px;background:#ec3c44;color:#fff;border-radius:3px;padding:3px 5px;margin-right:5px}.wire-panel-title span{color:#d77a21;font-size:10px;font-weight:normal}.schedule-panel{grid-row:span 2}.wire-schedule{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;padding:10px}.wire-track-card{position:relative;display:grid;gap:3px;min-width:0;background:#121b24;border:1px solid #334352;border-radius:7px;padding:5px}.wire-track-card .cover{height:auto}.wire-track-card b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wire-track-card small{font-size:9px;color:#aeb7c1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wire-track-card button{position:absolute;right:7px;top:calc(100% - 68px);height:25px;width:25px;border-radius:50%;background:#fff;color:#111}.wire-track-card .live-label{position:absolute;top:5px;left:5px;margin:0}.notify-strip{display:grid;grid-template-columns:45px 1.2fr 1fr 1.2fr auto;gap:10px;align-items:center;border-top:1px solid #263846;margin:0 10px 10px;padding:10px 4px}.notify-icon{font-size:25px;color:#e2a630;border:1px solid #d99824;border-radius:50%;height:45px;width:45px;display:grid;place-items:center}.notify-strip b,.notify-strip small{display:block}.notify-strip b{color:#e4aa32}.notify-strip small,.notify-strip label,.notify-strip button{font-size:10px;color:#c4ccd4}.notify-strip label{border-left:1px solid #334454;padding-left:10px}.notify-strip button{background:transparent;color:#d1d4d2}.conversation-panel{grid-column:2;grid-row:1}.wire-chat-feed{padding:4px 12px}.wire-chat{display:grid;grid-template-columns:28px 1fr;gap:7px;padding:8px 0;border-bottom:1px solid #203341}.wire-chat>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#d69a3f,#6f3c25);font-size:8px;font-weight:bold}.wire-chat p{margin:0;font-size:10px;color:#c5ccd4;line-height:1.35}.wire-chat b{color:#ecefee}.wire-chat small{float:right;color:#8b98a3;font-size:9px}.wire-chat-compose{display:grid;grid-template-columns:1fr 30px;gap:6px;padding:8px 12px}.wire-chat-compose input{background:#111b25;border:1px solid #3b4b59;border-radius:5px;color:#fff;padding:8px;font-size:10px}.wire-chat-compose button{background:transparent;color:#ddd;font-size:23px}.history-panel{grid-column:3;grid-row:1}.wire-history-row{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid #1e303c}.wire-history-row .avatar{height:36px}.wire-history-row b,.wire-history-row small{display:block;font-size:10px}.wire-history-row small,.wire-history-row time{font-size:9px;color:#9aa7b2}.community-promo,.genres-promo{min-height:157px;position:relative;padding:17px}.community-promo h2,.genres-promo h2{font:20px Georgia,serif;color:#e4b248;margin:0 0 8px}.community-promo p,.genres-promo p{font-size:11px;color:#bcc5ce;line-height:1.45;max-width:280px}.community-promo .btn,.genres-promo .btn{position:absolute;bottom:17px}.neon-community{position:absolute;right:34px;bottom:16px;font-size:70px;color:#efad31;filter:drop-shadow(0 0 16px #d77a21)}.genre-orbs{position:absolute;right:10px;bottom:14px;display:flex;gap:8px}.genre-orbs i{height:43px;width:43px;border-radius:50%;display:grid;place-items:center;border:1px solid #d49b35;color:#d7d9de;font-style:normal;font-size:7px}.genre-orbs i:nth-child(2){border-color:#d77a21}.genre-orbs i:nth-child(3){border-color:#d77a21}.genre-orbs i:nth-child(4){border-color:#d77a21}.genre-orbs i:nth-child(5){border-color:#d77a21}.on-air-panel{padding-bottom:10px}.on-air-track{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:10px}.on-air-track .avatar,.up-next .avatar{height:42px}.on-air-track b,.on-air-track small{display:block;font-size:10px}.on-air-track small{color:#aab6c0;margin-top:4px}.up-next{margin:0 10px;border-top:1px solid #2b3b49;padding-top:8px;color:#e0b03f;font-size:10px}.up-next>div{display:grid;grid-template-columns:32px 1fr auto;gap:7px;align-items:center;color:#d6dce0;margin-top:5px}.up-next .avatar{height:32px}.up-next small,.up-next time{color:#9ba7b1;font-size:9px}.pro-player{height:88px;background:#0a111af5;border-top-color:#3a3425;padding:10px 20px}.player-wave{height:54px}.mini-wave i{background:linear-gradient(#b98731,#f2c462,#776f65);opacity:.85}.player-controls .main-control{height:52px;width:52px!important}.player-meta{min-width:110px}.player-art .cover{height:58px;width:58px}
@media(max-width:1050px){.wire-live-grid{grid-template-columns:1fr 1fr}.schedule-panel{grid-column:1/-1;grid-row:auto}.conversation-panel{grid-column:auto;grid-row:auto}.history-panel{grid-column:auto;grid-row:auto}.wire-schedule{grid-template-columns:repeat(6,1fr)}}@media(max-width:700px){.wire-logo{width:auto}.logo-wave{display:none}.logo-title{font-size:16px;letter-spacing:4px}.ks-mark{width:42px;height:42px;font-size:21px}.live-hero-wire{grid-template-columns:1fr;height:auto}.live-owner{display:none}.live-hero-copy{padding:12px}.live-hero-copy h1{font-size:32px}.wire-live-grid{grid-template-columns:1fr}.wire-schedule{grid-template-columns:repeat(3,1fr)}.notify-strip{grid-template-columns:40px 1fr}.notify-strip label,.notify-strip button{grid-column:2}.community-promo,.genres-promo{min-height:180px}.site-header nav{display:none}}

/* === Reference-system overhaul: shared Klankstal Studio visual language === */
:root{--ink:#050a12;--surface:#0a131e;--surface2:#0d1926;--line:#2a3c4c;--cream:#f4f1e8;--muted:#aeb8c3;--amber:#e6a72d;--cyan:#d77a21;--violet:#efad31;--red:#f13e45}
*{box-sizing:border-box}body{background:#040911;color:var(--cream);font:13px/1.42 Inter,Segoe UI,Arial,sans-serif}.site-header{position:sticky;top:0;z-index:40;height:78px;padding:0 3.2vw;background:#050a12f7;border-bottom:1px solid #1d2c3a}.wire-logo{min-width:360px;height:76px;gap:8px!important}.logo-title{position:relative;display:block;padding-bottom:13px;font-size:21px;letter-spacing:7px}.logo-title:after{content:'STUDIO';position:absolute;left:50%;bottom:0;transform:translateX(-50%);font:600 10px/1 Georgia,serif;letter-spacing:5px;color:#e5a839}.ks-mark{width:53px;height:53px;font-size:27px;border-color:#efa72c}.logo-wave{width:66px;height:38px;filter:drop-shadow(0 0 6px #e8a22a88)}.site-header nav a{font-size:11px;letter-spacing:.2px}.site-header nav a:first-child:after{content:'';display:block;height:2px;background:var(--amber);margin-top:7px}.search{height:36px;font-size:11px;border-color:#3c4956}.topbtn{font-size:11px;padding:8px 13px}
.wrap{padding:18px max(4vw,38px) 108px;min-height:calc(100vh - 78px);overflow:hidden;background:radial-gradient(700px 350px at 0% 33%,#07528420,transparent 64%),radial-gradient(620px 380px at 100% 42%,#712b9a24,transparent 65%),#050b14}.wrap:before{inset:0;background:repeating-radial-gradient(ellipse at -10% 55%,transparent 0 17px,#1676cc1b 18px 19px,transparent 20px 29px),repeating-radial-gradient(ellipse at 110% 48%,transparent 0 15px,#a537bf1c 16px 17px,transparent 18px 27px);opacity:1;background-size:500px 720px,520px 650px;background-position:left center,right center}.wrap:after{display:none}.panel,.wire-panel{background:linear-gradient(145deg,#0d1824f8,#07111bf8);border:1px solid #253b4c;box-shadow:0 15px 34px #0006}.page-title{font:700 36px/1.08 Georgia,serif;color:var(--cream);margin:12px 0 7px}.sub{color:var(--muted);font-size:13px}.btn{background:linear-gradient(100deg,#efad31,#d77a21);border:0;color:#fff;font-weight:800;border-radius:6px;min-height:37px;padding:8px 18px;font-size:12px;box-shadow:none}.btn.ghost{color:#e6e4df;background:#08111a;border:1px solid #a47128}.btn.red{background:linear-gradient(135deg,#f34c54,#e62d35);border-color:#fa7378;color:white}.link,.gold{color:#e5ab37}.lead{color:#d1d7dc}.hero{position:relative;isolation:isolate;min-height:334px;display:flex;align-items:center;overflow:hidden;margin:0 -4px}.hero>div:first-child{position:relative;z-index:2;width:min(590px,58%);padding:6px 0 10px}.hero h1{font:700 46px/1.1 Georgia,serif;letter-spacing:-1px;margin:0 0 13px}.hero h1 .gold{color:#e7ac39}.hero .lead{font-size:15px;max-width:430px;margin:0 0 19px}.hero-actions{display:flex;gap:12px}.hero-person{position:absolute;z-index:1;right:-8px;bottom:-58px;width:53%;height:430px;background:url('assets/owner-hero.png') right bottom/contain no-repeat!important;border:0!important;box-shadow:none!important;border-radius:0!important;filter:saturate(.92) contrast(1.05)}.live-banner{position:relative;margin-top:20px;display:flex!important;align-items:center;gap:11px;width:355px;padding:11px 13px;background:#f7f7f4;color:#111;border:1px solid #d4d4d4;border-radius:11px;box-shadow:0 12px 35px #0006}.live-copy{display:grid;gap:3px;flex:1}.live-copy b{font-size:13px}.live-copy span{font-size:11px}.live-banner .btn{padding:8px 11px;min-height:34px}.live-dot{width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 0 10px #f53d48}.home-grid{grid-template-columns:1.15fr .85fr;gap:13px}.home-grid .panel,.info-row .panel{padding:13px}.section-head h2,.feature h2{font:600 17px Georgia,serif;color:#e2b453;margin:0}.tracks{grid-template-columns:repeat(6,1fr);gap:10px}.track-card{font-size:11px}.track-card .cover{height:120px}.track-card span{font-size:10px}.artist-grid{gap:10px}.artist-mini{padding:7px;background:#0b1520;border:1px solid #233747;border-radius:7px}.artist-mini .follow{height:27px;font-size:10px}.info-row{grid-template-columns:1fr 1fr 1fr;gap:13px;margin-top:13px}.feature{min-height:160px}.feature p{font-size:12px}.pro-player{position:fixed;z-index:35;left:0;right:0;bottom:0;height:82px!important;padding:10px max(20px,3vw);background:#070e16fa;border-top:1px solid #5a4623;box-shadow:0 -12px 32px #0009}.player-art .cover{height:58px;width:58px;border-radius:5px}.player-meta{font-size:12px}.player-meta small,.player-time{font-size:10px}.player-wave{height:48px}.player-controls .main-control{height:48px;width:48px!important}.cart-control{font-size:10px;padding:7px 10px}
/* detailed live-radio reference */
.wire-live{max-width:1510px}.live-hero-wire{height:264px;grid-template-columns:1fr 450px;background:radial-gradient(ellipse at 68% 55%,#0e8ebb2e,transparent 38%),radial-gradient(ellipse at 54% 50%,#e0a42e26,transparent 29%)}.live-hero-copy h1{font-size:40px}.live-owner{background:linear-gradient(90deg,transparent 0,#050b1420 52%,#050b14 100%),url('assets/owner-hero.png') 76% 32%/590px auto no-repeat!important}.wire-live-grid{gap:12px}.wire-panel{border-radius:8px}.wire-panel-title{font-size:12px}.wire-schedule{gap:8px}.wire-track-card .cover{height:100px}.notify-strip{background:#0a131e}.conversation-panel,.history-panel{min-height:290px}.wire-chat-feed{max-height:211px;overflow:auto}.wire-chat{padding:8px 0}.wire-chat-compose{margin-top:0}.community-promo,.genres-promo{min-height:156px}.on-air-panel{min-height:156px}.genre-orbs i{background:#101a25}.live-hero-actions .watching{font-size:11px}
/* form and information pages follow screenshots */
.form,.login-card{padding:20px;background:linear-gradient(145deg,#0c1724f8,#06101af8)}.form label{font-size:10px;color:#e0ae43}.form input,.form textarea,.form select{border-color:#354e63;background:#06101a;color:#e9edf1;min-height:39px;font-size:12px}.plans{gap:14px}.plan{padding:20px;border-color:#72511f;background:linear-gradient(150deg,#111b27,#08111b)}.plan h2{font:600 25px Georgia,serif;color:#e1af3c}.artist-page{gap:14px}.artist-hero{padding:16px}.discover-layout{gap:14px}.filter{padding:15px}.music-grid{gap:10px}.winner-card{padding:18px}.chart-row{font-size:12px}.login-screen{min-height:580px}.login-art{background-image:linear-gradient(90deg,#07111df5,#07111d00),url('assets/home-page-background.jpg')!important}.notice{font-size:12px}.modal-box{border:1px solid #3a4f62;background:linear-gradient(145deg,#0e1925,#070f18);box-shadow:0 30px 100px #000c}.modal .close{color:#fff}.modal .plans .plan{min-height:400px}.modal .goldplan{border-color:#e0aa32;box-shadow:0 0 24px #d7983033}
@media(max-width:980px){.wire-logo{min-width:250px}.logo-wave{display:none}.hero h1{font-size:38px}.hero-person{opacity:.72;width:60%}.home-grid,.info-row{grid-template-columns:1fr}.tracks{grid-template-columns:repeat(3,1fr)}.wire-live-grid{grid-template-columns:1fr 1fr}.schedule-panel{grid-column:1/-1;grid-row:auto}.conversation-panel,.history-panel{grid-column:auto;grid-row:auto}}@media(max-width:680px){.site-header{height:65px}.wire-logo{min-width:auto;height:64px}.ks-mark{width:42px;height:42px;font-size:21px}.logo-title{font-size:15px;letter-spacing:4px;padding-bottom:11px}.logo-title:after{font-size:8px;letter-spacing:3px}.topbtn{display:none}.wrap{padding:12px 14px 95px}.hero{min-height:450px;align-items:flex-start;padding-top:14px}.hero>div:first-child{width:100%}.hero h1{font-size:34px}.hero-person{opacity:.35;width:100%;height:360px;right:-90px;bottom:-55px}.live-banner{width:100%;max-width:340px}.tracks{grid-template-columns:repeat(2,1fr)}.wire-live-grid{grid-template-columns:1fr}.wire-schedule{grid-template-columns:repeat(3,1fr)}.live-hero-wire{grid-template-columns:1fr;height:auto}.live-owner{display:none}.live-hero-copy{padding:15px}.live-hero-copy h1{font-size:31px}.live-hero-actions{flex-wrap:wrap}.pro-player{height:70px!important;padding:7px 12px}.player-wave,.player-time,.player-controls button:not(.main-control),.heart{display:none}.player-art .cover{height:48px;width:48px}.player-meta{font-size:10px}.player-controls .main-control{display:block;height:42px;width:42px!important}.cart-control{font-size:0;padding:8px}.cart-control:after{content:'??';font-size:14px}}
/* Exact approved home wireframe presentation */
body:has(.wireframe-home) .player{display:none}.wrap:has(.wireframe-home){max-width:none!important;width:100%!important;min-height:calc(100vh - 76px)!important;padding:0!important;margin:0!important;background:#050911!important}.wrap:has(.wireframe-home):before,.wrap:has(.wireframe-home):after{display:none!important}.wireframe-home{width:100vw;height:calc(100vh - 76px);min-height:620px;background:url('assets/homepage-wireframe.png') center -76px/100% auto no-repeat;position:relative}.wire-hotspot{position:absolute;border:0;background:transparent!important;cursor:pointer}.wire-hotspot.explore{left:6.8%;top:31.6%;width:12%;height:6.2%}.wire-hotspot.join{left:19.2%;top:31.6%;width:13%;height:6.2%}.wire-hotspot.track-one{left:6.1%;top:51.8%;width:10%;height:18%}.wire-hotspot.creator{left:70%;top:45.2%;width:18%;height:24%}.wire-hotspot.challenge{right:6%;bottom:9%;width:17%;height:16%}
/* Live reference: the owner is part of the hero artwork, never a separate boxed card. */
body:has(.wire-live) .wrap{background:#050b14!important}
body:has(.wire-live) .live-hero-wire{height:284px!important;grid-template-columns:1fr!important;background:radial-gradient(ellipse at 83% 44%,#0988bf48 0,transparent 29%),radial-gradient(ellipse at 57% 48%,#df9c2d45 0,transparent 31%),linear-gradient(90deg,#050b14 0%,#050b1488 53%,#050b1418 100%),url('assets/owner-hero.png') right -36px bottom -172px/455px auto no-repeat!important}
body:has(.wire-live) .live-owner{display:none!important}
body:has(.wire-live) .live-hero-copy{padding:20px 28px!important;max-width:720px!important}
body:has(.wire-live) .live-hero-copy h1{font-size:42px!important}
.wire-hotspot.live-now{left:28.6%;top:25.2%;width:22.5%;height:11%}
/* One shared reference header: remove the legacy text logo on every route. */
/* Approved waveform + KS logo treatment. */
.site-header .wire-logo{display:block!important;width:500px!important;min-width:500px!important;height:76px!important;background:none!important;position:relative!important}
.site-header .wire-logo:after{content:'';display:block;width:500px;height:76px;background:url('assets/homepage-wireframe.png') left top/1390px auto no-repeat}
body:has(.wireframe-home) .site-header .wire-logo{background:none!important}
body:has(.wireframe-home) .wireframe-home{background-position:center -112px!important}
html,body{height:auto!important;overflow-y:auto!important;scrollbar-gutter:stable}
.wrap,.wireframe-home{overflow:visible!important}
.wireframe-home{height:56.28vw!important;min-height:calc(100vh - 76px)!important}
@media(max-width:680px){.wireframe-home{height:auto!important;min-height:calc(100vh - 65px)!important}}
@media(max-width:980px){.site-header .wire-logo{width:350px!important;min-width:350px!important;background-size:895px auto!important}}
@media(max-width:680px){.site-header .wire-logo{width:255px!important;min-width:255px!important;background-size:650px auto!important}}
body:has(.wireframe-home) .wire-logo{background:none!important;width:auto!important;min-width:auto!important}body:has(.wireframe-home) .wire-logo>*{display:inline-grid!important}.wireframe-home{background-position:center -84px!important}

/* Shared approved reference artwork for every internal page. */
body:not(:has(.wireframe-home)) .wire-logo{width:460px!important;min-width:460px!important;height:76px!important;background:url('assets/homepage-wireframe.png') left top/1176px auto no-repeat!important;filter:none!important}
body:not(:has(.wireframe-home)) .wire-logo>*{display:none!important}
body:not(:has(.wireframe-home)) .pro-player{height:82px!important;padding:0!important;background:url('assets/homepage-wireframe.png') center bottom/100vw auto no-repeat!important;border-top:1px solid #71582d!important;box-shadow:0 -10px 30px #000b!important}
body:not(:has(.wireframe-home)) .pro-player>*{opacity:0!important;pointer-events:none!important}
body:not(:has(.wireframe-home)) .pro-player:after{content:'';position:absolute;inset:0;pointer-events:none}
@media(max-width:980px){body:not(:has(.wireframe-home)) .wire-logo{width:350px!important;min-width:350px!important;background-size:895px auto!important}}
@media(max-width:680px){body:not(:has(.wireframe-home)) .wire-logo{width:255px!important;min-width:255px!important;background-size:650px auto!important}body:not(:has(.wireframe-home)) .pro-player{height:70px!important;background-size:auto 70px!important}}

/* Reference background and detailed artist catalogue. */
.wrap:not(:has(.wireframe-home)){background-color:#050b14!important;background-image:linear-gradient(90deg,rgba(5,11,20,.94),rgba(5,11,20,.62),rgba(5,11,20,.93)),url('https://cdn1.site-media.eu/images/1920/26603939/Klankstal_background-w84oGmJDloisZ5O-V0fa8w.jpg')!important;background-position:center!important;background-size:cover!important;background-attachment:fixed!important;background-repeat:no-repeat!important}
.wrap:not(:has(.wireframe-home)){max-width:none!important}
.wrap:not(:has(.wireframe-home)):before{background:radial-gradient(ellipse at 5% 58%,#168be838 0,transparent 30%),radial-gradient(ellipse at 97% 46%,#ba34d43c 0,transparent 29%),linear-gradient(90deg,#050b1490,#050b1433,#050b1490)!important;opacity:1!important}
.artist-profile-wire{display:grid;grid-template-columns:285px minmax(0,1fr);gap:18px;max-width:1390px;margin:auto}.artist-profile-card{height:max-content;position:sticky;top:98px;padding:15px}.artist-profile-card>.avatar{height:248px;border-radius:10px}.verified{display:inline-block;margin-top:-26px;position:relative;background:#d77a21;color:#fff;border-radius:13px;padding:3px 7px;font-size:10px}.artist-profile-card h2{font:27px Georgia,serif;margin:13px 0 3px;color:#f1c259}.artist-profile-card p{font-size:12px;line-height:1.55}.social-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.social-links a{border:1px solid #3a5264;background:#091521;color:#c7d5df;border-radius:5px;padding:7px 8px;text-align:center;font-size:10px}.social-links a:hover{border-color:#e4af3e;color:#f0c35f}.artist-profile-heading{padding:5px 4px 10px}.artist-profile-heading .page-title{margin:4px 0;font-size:43px}.release-panel{padding:15px}.release-panel .section-head{margin:0 0 10px}.release-list{display:grid;gap:4px}.release-row{display:grid;grid-template-columns:26px 58px minmax(260px,1fr) 42px;gap:12px;align-items:center;padding:8px 7px;border-top:1px solid #243747}.release-row .cover-play-wrap{width:58px;height:58px}.release-row:first-child{border-top:0;background:linear-gradient(90deg,#2a211034,transparent)}.release-rank{font:18px Georgia,serif;color:#e5b343;text-align:center}.release-art{height:58px!important;width:58px!important;border-radius:6px}.release-copy>b,.release-copy small{display:block}.release-copy>b{font-size:13px}.release-copy small{font-size:10px;color:#aab9c7;margin:2px 0 6px}.release-preview{display:grid;grid-template-columns:24px minmax(90px,220px) auto;gap:7px;align-items:center;max-width:390px}.release-preview button{width:22px;height:22px;border-radius:50%;background:#e9b84a;color:#111;font-size:9px}.preview-wave{display:flex;align-items:center;gap:2px;height:20px;overflow:hidden}.preview-wave i{flex:1;height:var(--v,42%);background:#c59a4a;border-radius:2px}.preview-wave i:nth-child(2n){--v:78%}.preview-wave i:nth-child(3n){--v:28%}.preview-wave i:nth-child(5n){--v:96%}.release-preview time{font-size:9px;color:#a8b5c1;white-space:nowrap}.release-cart{width:35px;height:35px;border-radius:50%;border:1px solid #d49c34;background:#0c1721;color:#edbd4e;font-size:16px}.release-cart:hover{background:#e7b443;color:#13100b}.artist-story{margin-top:15px}.artist-story h2{font:22px Georgia,serif;color:#e5b74a;margin:0 0 7px}@media(max-width:850px){.artist-profile-wire{grid-template-columns:1fr}.artist-profile-card{position:relative;top:auto;display:grid;grid-template-columns:130px 1fr;gap:12px}.artist-profile-card>.avatar{height:130px}.artist-profile-card .statline,.artist-profile-card p,.artist-profile-card .social-links{grid-column:1/-1}.artist-profile-heading .page-title{font-size:34px}}@media(max-width:580px){.release-row{grid-template-columns:20px 46px 1fr 36px;gap:7px}.release-art{height:46px!important;width:46px!important}.release-preview{grid-template-columns:22px 1fr}.release-preview time{display:none}.artist-profile-card{grid-template-columns:1fr}.artist-profile-card>.avatar{height:210px}.artist-profile-heading .page-title{font-size:30px}}
.wire-hotspot.join-artist{display:none!important}
.site-header,.site-header nav,.site-header nav a{pointer-events:auto!important}.site-header nav a{position:relative!important;z-index:50!important;cursor:pointer!important}
.site-header nav a.active{color:#efb23d!important}.site-header nav a.active:after{content:'';position:absolute;left:0;right:0;bottom:-15px;height:2px;background:#efb23d;border-radius:2px}.site-header nav a:not(.active):after{display:none!important}
.site-header nav a:first-child:after{display:none!important}
.wrap{overflow:visible!important;height:auto!important}.wire-hotspot{appearance:none!important;-webkit-appearance:none!important;padding:0!important;margin:0!important;outline:none!important}.about-page{max-width:1220px;margin:0 auto}.about-page .page-title span{background:linear-gradient(100deg,#f1a72c,#e6688c,#efad31);-webkit-background-clip:text;background-clip:text;color:transparent}.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.about-values .panel{min-height:145px;padding:22px}.about-values b{font-size:17px;text-transform:uppercase;letter-spacing:.06em}.about-values p{color:#c4ccd4;line-height:1.5}.about-contact{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;padding:25px}.about-contact h2{font:26px Georgia,serif;color:#f0bc51;margin:9px 0 17px}.about-contact p{line-height:1.55;color:#cbd1d7}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-form label{font-size:11px;color:#e4b54b;text-transform:uppercase;letter-spacing:.7px}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;background:#07111b;border:1px solid #35536a;border-radius:6px;padding:10px;color:#ecf1f8}.contact-form .wide{grid-column:1/-1}.contact-form .btn{width:max-content}@media(max-width:680px){.about-values,.about-contact,.contact-form{grid-template-columns:1fr}.contact-form .wide{grid-column:auto}}

/* artist-only analytics dashboard */
.analytics-demo{max-width:1320px;margin:0 auto 84px}.analytics-filters{display:flex;gap:9px;align-items:center;margin:20px 0;flex-wrap:wrap}.analytics-range-btn{background:transparent!important;border:1px solid #354054!important;color:#8fa0b4!important;font-size:12px;padding:8px 14px;border-radius:7px;font-weight:600;transition:all .15s}.analytics-range-btn.active{background:linear-gradient(100deg,#efad31,#d77a21)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 2px 12px rgba(215, 122, 33,.3)}.analytics-range-btn:hover:not(.active){border-color:var(--cyan)!important;color:var(--cyan)!important}.artist-plan-card{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 14px;padding:20px 24px;border:1px solid #a8701e;border-radius:10px;background:linear-gradient(100deg,#11191f,#08202c)}.artist-plan-card h2{margin:5px 0;color:#efb23e}.artist-plan-card p{margin:0;color:#aeb9c8}.artist-plan-card strong{display:flex;flex-direction:column;align-items:flex-end;color:#edf3f9}.artist-plan-card i{font-size:42px;color:#d77a21;font-style:normal;line-height:1}.artist-plan-card small{max-width:160px;text-align:right}.analytics-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.analytics-metrics article{padding:19px;border:1px solid #263544;border-radius:9px;background:#07111c;display:flex;flex-direction:column;gap:7px}.analytics-metrics small{color:#9daab8;letter-spacing:.06em}.analytics-metrics b{font-size:26px;color:#fff}.analytics-metrics span{font-size:12px;color:#d77a21}.analytics-table{overflow:hidden}.analytics-table h2{margin-bottom:4px}.analytics-head,.analytics-row{display:grid;grid-template-columns:minmax(190px,2.4fr) repeat(6,1fr);gap:12px;align-items:center}.analytics-head{border-top:1px solid #263544;padding:13px 10px 10px;color:#9daab8;text-transform:uppercase;font-size:11px;letter-spacing:.06em}.analytics-row{border-top:1px solid #1f2e3a;padding:13px 10px}.analytics-row div{display:flex;flex-direction:column}.analytics-row small{color:#8e9baa;margin-top:3px}.analytics-row strong{color:#efb23e}.payout-note{display:flex;gap:18px;align-items:center;margin-top:14px;padding:16px 20px;border:1px solid #25404b;background:#091621;border-radius:9px}.payout-note b{color:#efb23e}.payout-note span{color:#bbc6d2}@media(max-width:800px){.analytics-metrics{grid-template-columns:repeat(2,1fr)}.analytics-head{display:none}.analytics-row{grid-template-columns:1fr 1fr}.analytics-row span:nth-of-type(1),.analytics-row span:nth-of-type(2){display:none}.artist-plan-card{align-items:flex-start}.payout-note{flex-direction:column;align-items:flex-start}}@media(max-width:520px){.analytics-metrics{grid-template-columns:1fr}.analytics-filters{flex-wrap:wrap}.artist-plan-card{flex-direction:column}.artist-plan-card strong{align-items:flex-start}.artist-plan-card small{text-align:left}.analytics-row{font-size:13px}}
.wire-hotspot{z-index:20!important;pointer-events:auto!important}.wire-hotspot.track-one,.wire-hotspot.track-two,.wire-hotspot.track-three,.wire-hotspot.track-four,.wire-hotspot.track-five,.wire-hotspot.track-six{top:50.4%!important;width:11.8%!important;height:21%!important}.wire-hotspot.track-one{left:5.4%!important}.wire-hotspot.track-two{left:17.4%!important}.wire-hotspot.track-three{left:29.4%!important}.wire-hotspot.track-four{left:41.4%!important}.wire-hotspot.track-five{left:53.4%!important}.wire-hotspot.track-six{left:65.4%!important}.wire-hotspot.playing{outline:3px solid #efb23e!important;box-shadow:0 0 22px #efb23e99!important}
.wire-hotspot{display:block!important}
.component-home{max-width:1440px;margin:0 auto;padding:0 34px 105px}.component-logo{width:310px!important;min-width:310px!important;height:64px!important;background:none!important}.component-logo img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}.component-home~*{z-index:1}.home-hero-component{min-height:390px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;background:radial-gradient(ellipse at 75% 45%,#1075a955,transparent 35%),radial-gradient(ellipse at 53% 25%,#b3762444,transparent 28%)}.home-hero-copy{padding:52px 0;z-index:2}.home-hero-copy h1{font:48px/1.1 Georgia,serif;margin:8px 0 14px}.home-hero-copy em{color:#efad31;font-style:normal}.home-hero-copy p{max-width:470px;font-size:16px;line-height:1.55;color:#c1c9d4}.component-owner{height:100%;min-height:340px;background:url('assets/owner-hero.png') center right/contain no-repeat}.home-actions{display:flex;gap:12px;margin:22px 0}.component-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #a7803b;border-radius:7px;padding:12px 18px;font-weight:800}.component-btn.primary{background:linear-gradient(100deg,#efad31,#d77a21);color:#fff}.component-btn.secondary{background:#08101abb;color:#f3e7ca}.component-live{display:flex;align-items:center;gap:12px;width:max-content;padding:12px 15px;border-radius:12px;background:#f7f4ef;color:#14171c}.component-live b,.component-live span{display:block}.component-live span{font-size:12px;color:#555}.component-live strong{margin-left:14px;padding:9px 13px;background:#ed4149;color:#fff;border-radius:6px}.home-content-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:15px}.component-panel{background:linear-gradient(145deg,#0d1722ee,#07111bef);border:1px solid #273649;border-radius:10px;padding:15px}.component-heading{display:flex;justify-content:space-between;margin-bottom:12px}.component-heading h2{margin:0;font:20px Georgia,serif;color:#f3c867}.component-heading a{font-size:12px;color:#d77a21}.home-song-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.home-song-card{border:1px solid #314055;border-radius:8px;overflow:hidden;background:#0a111a}.song-art{display:grid;place-items:center;height:120px;background:linear-gradient(135deg,#923d23,#8d4927);color:#ffe4ad;font:21px Georgia,serif}.home-song-card:nth-child(2) .song-art{background:linear-gradient(135deg,#5f2636,#172e5c)}.home-song-card:nth-child(3) .song-art{background:linear-gradient(135deg,#28514a,#1a263e)}.home-song-card:nth-child(4) .song-art{background:linear-gradient(135deg,#6d675c,#182338)}.home-song-card>div{display:grid;grid-template-columns:1fr 30px;gap:6px;padding:8px}.home-song-card b,.home-song-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-song-card b{font-size:12px}.home-song-card small{font-size:10px;color:#aeb9c8;margin-top:4px}.universal-play{width:28px;height:28px;border-radius:50%;align-self:center;background:#fff;color:#111;box-shadow:0 2px 6px #0005}.featured h2{color:#f4c45c}.featured p{color:#b8c3cf;line-height:1.5;font-size:13px}.home-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:15px}.home-value{min-height:125px}.home-value h3,.home-challenge h3{margin:2px 0 7px;color:#f0c460}.home-value p,.home-challenge p{font-size:12px;color:#b7c2cf;line-height:1.5}.home-value a{font-size:12px;color:#edb43f;text-decoration:underline}.home-challenge{background:linear-gradient(120deg,#151626,#513725)}@media(max-width:900px){.component-home{padding:0 20px 95px}.home-content-grid{grid-template-columns:1fr}.home-feature-grid{grid-template-columns:repeat(2,1fr)}.home-song-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.component-home{padding:0 14px 90px}.home-hero-component{grid-template-columns:1fr;min-height:auto}.home-hero-copy{padding:38px 0 20px}.home-hero-copy h1{font-size:34px}.component-owner{display:none}.home-song-grid{grid-template-columns:repeat(2,1fr)}.home-feature-grid{grid-template-columns:1fr}.component-live{width:100%}.component-logo{width:190px!important;min-width:190px!important}.site-header .search,.site-header nav{display:none}}
body:has(.component-home) .site-header{background:linear-gradient(180deg,#02070deF,#02070e80 70%,transparent)!important;border-bottom:0!important;backdrop-filter:blur(10px)}
.component-owner{background:none!important;position:relative;display:grid;place-items:center;overflow:visible}.component-owner:before{content:'KS';display:grid;place-items:center;width:190px;height:190px;border:4px solid #f4bd55;border-radius:50%;font:70px Georgia,serif;color:#ffd473;background:radial-gradient(circle at 50% 45%,#101a34 0 55%,#0a0f1d 56%);box-shadow:0 0 0 14px #1c62ed22,0 0 0 28px #be4ced26,0 0 36px #38c9ff99,0 0 70px #d750f266;position:relative;z-index:2}.component-owner:after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:conic-gradient(from 20deg,#ffb02e,#d77a21,#d77a21,#d77a21,#ffb02e);filter:blur(18px);opacity:.7;mask:radial-gradient(transparent 48%,#000 49% 56%,transparent 57%)}
.home-song-grid{grid-template-columns:repeat(6,1fr)!important}.song-art{height:124px}.featured{min-height:226px}.featured:before{content:'KS';float:left;display:grid;place-items:center;width:86px;height:86px;margin:2px 15px 8px 0;border:2px solid #efb23e;border-radius:50%;font:34px Georgia,serif;color:#ffd370;background:conic-gradient(#f7ae31,#d77a21,#d77a21,#f7ae31)}
@media(max-width:1050px){.home-song-grid{grid-template-columns:repeat(3,1fr)!important}}@media(max-width:620px){.home-song-grid{grid-template-columns:repeat(2,1fr)!important}.component-owner:before{width:135px;height:135px;font-size:50px}}
/* Homepage hero: supplied Klankstal background artwork. */
body:has(.component-home){background:#030812!important}
.home-hero-component{min-height:430px!important;background:linear-gradient(90deg,rgba(3,8,18,.22) 0%,rgba(3,8,18,.04) 56%,rgba(3,8,18,.12) 100%),url('assets/ks-home-hero.jpg') center 57%/100% auto no-repeat!important;border-radius:0 0 12px 12px}
.component-owner{display:none!important}
.home-hero-copy{padding:68px 0 62px 36px!important;max-width:650px}
.home-actions{flex-wrap:wrap}
.component-btn{font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;font-size:13px!important;letter-spacing:.025em!important;font-weight:700!important;text-transform:none!important;box-shadow:0 4px 14px #0005}
.component-btn.fanclub{background:rgba(8,16,26,.88);border-color:#d77a21;color:#e7f8ff}
.component-btn.fanclub:hover{background:#0e2937;border-color:#efad31}
@media(max-width:900px){.home-hero-component{background-size:auto 100%!important;background-position:61% center!important}.home-hero-copy{padding-left:24px!important}}
@media(max-width:620px){.home-hero-component{min-height:460px!important;background-size:auto 100%!important;background-position:69% center!important}.home-hero-copy{padding:46px 18px!important;background:linear-gradient(90deg,#030812e8 0%,#030812a8 65%,transparent 100%)}.component-btn{font-size:12px!important;padding:11px 13px!important}}
/* Full-width homepage artwork and reusable music-card presentation. */
body:has(.component-home) .wrap{max-width:none!important;padding:0 0 100px!important;background:#02070d!important;background-image:none!important}
.component-home{max-width:none!important;margin:0!important;padding:0 0 100px!important}
.home-hero-component{width:100vw!important;min-height:450px!important;border-radius:0!important;background-size:cover!important;background-position:center center!important}
.home-hero-copy{width:min(1440px,100%);margin:0 auto;padding:76px max(34px,calc((100vw - 1372px)/2)) 68px!important}
.home-content-grid,.home-feature-grid{width:min(1440px,100%);margin-left:auto;margin-right:auto;padding-left:34px;padding-right:34px}
.home-content-grid{margin-top:18px}
.component-heading h2,.featured h2{font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;font-weight:700!important;letter-spacing:.02em!important}
.song-art{font-size:0!important;background-size:cover!important;background-position:center!important}
.universal-play{width:34px!important;height:34px!important;background:url('assets/play-control.svg') center/contain no-repeat!important;color:transparent!important;box-shadow:0 4px 12px #0008;transition:transform .16s ease,box-shadow .16s ease}
.universal-play:focus-visible{transform:scale(1.08);box-shadow:0 5px 16px #ffffff42;outline:2px solid #efb23e;outline-offset:2px}
@media(max-width:900px){.home-hero-copy{padding-left:24px!important;padding-right:24px!important}.home-content-grid,.home-feature-grid{padding-left:20px;padding-right:20px}}
@media(max-width:620px){.home-hero-component{min-height:470px!important;background-position:68% center!important}.home-hero-copy{padding:55px 18px!important}.home-content-grid,.home-feature-grid{padding-left:14px;padding-right:14px}.universal-play{width:32px!important;height:32px!important}}
/* Keep the original roomy hero copy while only extending the supplied artwork edge-to-edge. */
.home-hero-component{grid-template-columns:1fr!important;height:30vh!important;min-height:280px!important;max-height:340px!important}
.home-hero-copy{width:100%!important;max-width:760px!important;margin-left:max(34px,calc((100vw - 1372px)/2))!important;margin-right:0!important;padding:42px 0 36px!important}
.home-hero-copy h1{font-size:48px!important;line-height:1.1!important;margin:6px 0 12px!important}
.home-hero-copy p{margin:0!important;max-width:500px!important}
.home-actions{margin:17px 0!important}
.component-live{margin-top:0!important}
@media(max-width:900px){.home-hero-component{height:32vh!important;min-height:300px!important}.home-hero-copy{margin-left:24px!important;padding:34px 0!important}}
@media(max-width:620px){.home-hero-component{height:auto!important;min-height:400px!important;max-height:none!important}.home-hero-copy{margin-left:0!important;padding:42px 18px!important}.home-hero-copy h1{font-size:34px!important}}
/* Transparent header over a taller, upward-positioned homepage hero. */
body:has(.component-home) .site-header{position:absolute!important;top:0;left:0;right:0;width:100%;background:transparent!important;background-image:none!important;backdrop-filter:none!important;z-index:40}
body:has(.component-home) .home-hero-component{height:40vh!important;min-height:350px!important;max-height:460px!important;background-position:center 39%!important}
body:has(.component-home) .home-hero-copy{padding-top:108px!important;padding-bottom:42px!important}
@media(max-width:900px){body:has(.component-home) .home-hero-component{height:42vh!important;min-height:370px!important;background-position:61% 37%!important}body:has(.component-home) .home-hero-copy{padding-top:102px!important}}
@media(max-width:620px){body:has(.component-home) .site-header{position:relative!important;background:#02070dbb!important;backdrop-filter:blur(10px)!important}body:has(.component-home) .home-hero-component{height:auto!important;min-height:420px!important;background-position:68% center!important}body:has(.component-home) .home-hero-copy{padding-top:48px!important}}
/* Carry the hero artwork into the page background, fading into the requested solid RGB base. */
body:has(.component-home),body:has(.component-home) .wrap{background:rgb(3,8,14)!important;background-image:none!important}
.component-home{background-color:rgb(3,8,14)!important;background-image:linear-gradient(to bottom,rgba(3,8,14,0) 0%,rgba(3,8,14,.10) 31%,rgba(3,8,14,.72) 48%,rgb(3,8,14) 62%),url('assets/ks-home-hero.jpg')!important;background-size:100% auto!important;background-position:top center!important;background-repeat:no-repeat!important}
.home-hero-component{background:transparent!important}
@media(max-width:900px){.component-home{background-size:auto 620px!important;background-position:top center!important}}
/* Position the KS orb just below the transparent navigation instead of beneath the first content panel. */
.component-home{background-position:center -140px!important}
@media(max-width:1100px){.component-home{background-position:center -110px!important}}
@media(max-width:900px){.component-home{background-position:center -92px!important}}
@media(max-width:620px){.component-home{background-position:center top!important}}
/* Keep almost the complete KS hero mark visible above the first panel. */
body:has(.component-home) .home-hero-component{height:40vh!important;min-height:415px!important;max-height:475px!important}
.component-home{background-position:center -170px!important}
.component-live{background:#ffffff!important;color:#111820!important;border:1px solid #d8dde3!important;box-shadow:0 10px 24px #0007!important}
.component-live b,.component-live span,.component-live strong{color:#111820!important}
.component-live strong{background:#ffffff!important;border:1px solid #111820!important}
@media(max-width:1100px){.component-home{background-position:center -135px!important}}
@media(max-width:900px){body:has(.component-home) .home-hero-component{min-height:405px!important}.component-home{background-position:center -105px!important}}
@media(max-width:620px){body:has(.component-home) .home-hero-component{min-height:435px!important}.component-home{background-position:center top!important}}
/* At desktop zoom, the live card sits independently on the right of the hero. */
.home-hero-component{position:relative!important}
.home-hero-component .component-live{position:absolute!important;top:108px!important;right:max(34px,calc((100vw - 1372px)/2))!important;margin:0!important;z-index:5;width:335px!important;justify-content:space-between!important}
.home-hero-component .component-live strong{margin-left:8px!important;white-space:nowrap!important}
@media(max-width:1100px){.home-hero-component .component-live{right:24px!important;top:102px!important;width:300px!important}}
@media(max-width:820px){.home-hero-component .component-live{position:relative!important;top:auto!important;right:auto!important;width:max-content!important;margin:14px 0 0!important}.home-hero-copy{padding-bottom:24px!important}}
@media(max-width:620px){.home-hero-component .component-live{width:100%!important;justify-content:flex-start!important}.home-hero-component .component-live strong{margin-left:auto!important}}
/* Keep the supplied hero artwork crisp — no overlay fade across the KS mark. */
.component-home{background-image:url('assets/ks-home-hero.jpg')!important;background-color:rgb(3,8,14)!important}
/* Reserve space for the reusable round play icon on every card. */
.home-song-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.home-song-card>div{grid-template-columns:minmax(0,1fr) 34px!important;gap:5px!important;padding:8px 10px 8px 8px!important;min-width:0!important}
.home-song-card>div>a{min-width:0!important}.universal-play{justify-self:start!important;align-self:center!important;margin:0!important}
@media(max-width:1050px){.home-song-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:620px){.home-song-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* Supplied full-page wave background with a separately positioned KS hero mark. */
body:has(.component-home),body:has(.component-home) .wrap{background-color:rgb(3,8,14)!important;background-image:url('assets/home-background-full.png')!important;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
.component-home{background:none!important;background-color:transparent!important}
.component-owner{display:block!important;position:absolute!important;right:max(32px,calc((100vw - 1372px)/2))!important;bottom:18px!important;width:clamp(220px,18vw,310px)!important;height:clamp(220px,18vw,310px)!important;min-height:0!important;background:url('assets/ks-round-logo.png') center/contain no-repeat!important;z-index:2!important;filter:drop-shadow(0 12px 28px #0008)!important}
.component-owner:before,.component-owner:after{display:none!important}
.home-hero-component .component-live{z-index:6!important}
@media(max-width:900px){.component-owner{right:24px!important;bottom:20px!important;width:220px!important;height:220px!important}}
@media(max-width:620px){.component-owner{display:none!important}body:has(.component-home),body:has(.component-home) .wrap{background-attachment:scroll!important;background-size:auto 100vh!important}}
/* Cropped mark: the visible orb (not transparent canvas padding) tracks the copy column exactly. */
.component-owner{top:111px!important;bottom:auto!important;right:max(32px,calc((100vw - 1372px)/2))!important;width:249px!important;height:249px!important;background-image:url('assets/ks-round-logo-cropped.png')!important}
@media(max-width:1100px){.component-owner{right:24px!important;width:230px!important;height:230px!important}}
@media(max-width:900px){.component-owner{top:102px!important;width:215px!important;height:215px!important}}
/* Homepage background and reusable persistent media player. */
body:has(.component-home), body:has(.component-home) .wrap { background-color: rgb(3,8,14) !important; background-image: url('assets/home-page-background.jpg') !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; background-attachment: fixed !important; }
body:has(.component-home) .wrap { min-height: calc(100vh - 86px); padding-bottom: 96px !important; }
body:has(.component-home) .component-home { background: transparent !important; padding-bottom: 0 !important; }
body:has(.component-home) .pro-player { height: 86px !important; box-sizing: border-box !important; padding: 10px max(24px,calc((100vw - 1440px)/2)) !important; display: flex !important; align-items: center !important; gap: 13px !important; background: rgba(3,8,14,.96) !important; border-top: 0 !important; box-shadow: 0 -12px 28px rgba(0,0,0,.45) !important; overflow: hidden !important; }
body:has(.component-home) .pro-player > * { opacity: 1 !important; pointer-events: auto !important; }
body:has(.component-home) .pro-player:after { display: none !important; content: none !important; }
.pro-player .player-art { width:56px; height:56px; flex:0 0 56px; }.pro-player .player-cover-art { display:block; width:56px; height:56px; border-radius:7px; background:url('assets/trending-cover-1.jpg') center/cover no-repeat; box-shadow:0 4px 12px #0008; }.pro-player .player-meta { min-width:120px; display:flex; flex-direction:column; gap:4px; }.pro-player .player-meta b { color:#f8f3ea; font:600 14px/1.1 "Trebuchet MS",Arial,sans-serif; }.pro-player .player-meta small { color:#aebccc; font:11px/1.2 Arial,sans-serif; }.pro-player .player-wave { min-width:140px; flex:1; max-width:600px; display:flex; gap:10px; align-items:center; }.pro-player .mini-wave { height:30px; flex:1; display:flex; align-items:center; gap:2px; }.pro-player .mini-wave i { flex:1; height:var(--h,42%); min-width:2px; border-radius:2px; background:linear-gradient(#d69b31,#f3c457 55%,#7d6638); opacity:.9; }.pro-player .mini-wave i:nth-child(2n){--h:75%}.pro-player .mini-wave i:nth-child(3n){--h:28%}.pro-player .mini-wave i:nth-child(5n){--h:96%}.pro-player .mini-wave i:nth-child(7n){--h:60%}.pro-player time { color:#c6d0db; white-space:nowrap; font:11px Arial,sans-serif; }.pro-player .player-controls { display:flex; align-items:center; gap:9px; }.pro-player .player-skip { border:0; width:26px; height:26px; padding:0; color:#e8edf3; background:transparent; font-size:12px; cursor:pointer; }.pro-player .main-control { width:46px; height:46px; padding:0; border:0; border-radius:50%; background:url('assets/play-control.svg') center/contain no-repeat; color:transparent; font-size:0; cursor:pointer; transition:transform .16s ease; }.pro-player .heart { margin-left:auto; border:0; background:transparent; color:#f5f3ee; font-size:26px; cursor:pointer; }.pro-player .cart-control { border:1px solid #9f7930; border-radius:6px; padding:8px 11px; background:#0b1520; color:#edc567; font:600 11px "Trebuchet MS",Arial,sans-serif; cursor:pointer; }.pro-player .cart-control:hover { background:#e7b543; color:#0b1017; }
@media(max-width:760px){body:has(.component-home),body:has(.component-home) .wrap{background-attachment:scroll!important;background-size:auto 100vh!important}body:has(.component-home) .pro-player{height:74px!important;padding:9px 14px!important;gap:9px!important}.pro-player .player-art,.pro-player .player-cover-art{width:48px;height:48px}.pro-player .player-wave{display:none}.pro-player .player-meta{min-width:0;flex:1}.pro-player .cart-control{display:none}.pro-player .main-control{width:42px;height:42px}.pro-player .heart{margin-left:2px}}
/* Keep the live invitation in the visual gap between the headline and the KS mark. */
body:has(.component-home) .component-owner { opacity: .90 !important; }
@media(min-width:821px){
  .home-hero-component .component-live { left: calc(50% + 115px) !important; right: auto !important; top: 225px !important; width: 270px !important; }
}
@media(min-width:821px) and (max-width:1180px){.home-hero-component .component-live{left:auto!important;right:250px!important;top:215px!important;width:255px!important}}
/* Homepage cleanup: no legacy wireframe/screenshot layer is allowed on this route. */
body:has(.component-home) .wrap:before,
body:has(.component-home) .wrap:after,
body:has(.component-home) .wireframe-home,
body:has(.component-home) .wire-logo { display:none !important; background-image:none !important; content:none !important; }
body:has(.component-home) .home-hero-component { background-image:none !important; }
body:has(.component-home) .pro-player { background-image:none !important; }
/* Use the full content width and show Featured Artists as compact, reusable cards. */
body:has(.component-home) .home-content-grid { width:calc(100% - 68px) !important; max-width:none !important; grid-template-columns:minmax(0,1.35fr) minmax(420px,.65fr) !important; }
.featured-artists { min-height:0 !important; }
.featured-artists:before { display:none !important; }
.home-artist-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.home-artist-card { display:grid; grid-template-columns:1fr; gap:6px; min-width:0; padding:7px; border:1px solid #314055; border-radius:8px; background:#0a111a; }
.home-artist-card b,.home-artist-card small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.home-artist-card b { font:700 12px "Trebuchet MS",Arial,sans-serif; color:#f5f4ee; }
.home-artist-card small { color:#aeb9c8; font-size:10px; }
.artist-art { height:112px; border-radius:5px; background:center/cover no-repeat; }
.home-artist-card button { width:100%; border:0; border-radius:5px; padding:6px; background:linear-gradient(100deg,#efad31,#d77a21); color:#fff; font:700 10px "Trebuchet MS",Arial,sans-serif; cursor:pointer; }
@media(max-width:1050px){body:has(.component-home) .home-content-grid{width:calc(100% - 40px)!important;grid-template-columns:1fr!important}.artist-art{height:135px}}
@media(max-width:620px){body:has(.component-home) .home-content-grid{width:calc(100% - 28px)!important}.home-artist-grid{grid-template-columns:repeat(3,minmax(90px,1fr));gap:7px}.artist-art{height:90px}.home-artist-card{padding:5px}.home-artist-card button{padding:5px;font-size:9px}}
/* Compact live invitation: aligned to the South African AI Music label. */
@media(min-width:821px){
  .home-hero-component .component-live{
    top:108px!important;
    left:calc(50% + 96px)!important;
    width:320px!important;
    min-height:88px!important;
    display:grid!important;
    grid-template-columns:1fr 116px!important;
    grid-template-rows:30px 24px!important;
    column-gap:12px!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.97)!important;
    color:#15191f!important;
    box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
  }
  .home-hero-component .component-live:before{
    content:'';
    width:10px;height:10px;border-radius:50%;background:#ff3d47;
    box-shadow:0 0 9px #ff3d47aa;
    grid-column:1;grid-row:1;align-self:center;
  }
  .home-hero-component .component-live b{
    grid-column:1;grid-row:1;margin-left:18px;
    font:700 15px/1.1 "Trebuchet MS",Arial,sans-serif!important;
    color:#17191d!important;
  }
  .home-hero-component .component-live span{
    grid-column:1;grid-row:2;
    font:13px/1.1 "Trebuchet MS",Arial,sans-serif!important;
    color:#40454c!important;
  }
  .home-hero-component .component-live strong{
    grid-column:2;grid-row:1/3;margin:0!important;
    display:grid!important;place-items:center;
    min-height:47px!important;padding:0 13px!important;
    border:0!important;border-radius:7px!important;
    background:linear-gradient(135deg,#f54d57,#e93540)!important;
    color:#fff!important;
    font:700 14px "Trebuchet MS",Arial,sans-serif!important;
    box-shadow:0 4px 10px #dc303944!important;
  }
}
@media(min-width:821px) and (max-width:1180px){.home-hero-component .component-live{left:auto!important;right:250px!important;top:108px!important}}

/* A restrained black veil keeps the hero wording readable over the artwork. */
body:has(.component-home) .component-home:before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:rgba(0,0,0,.24)!important;
}
body:has(.component-home) .home-hero-component,
body:has(.component-home) .home-content-grid,
body:has(.component-home) .home-feature-grid{position:relative!important;z-index:1!important}

/* The hero copy shares the exact horizontal gutter of Trending Now. */
@media(min-width:901px){body:has(.component-home) .home-hero-copy{margin-left:34px!important}}

/* Home feature components: independently clickable, responsive content below discovery. */
body:has(.component-home) .home-value-grid{width:calc(100% - 68px);margin:15px auto 0;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:15px;position:relative;z-index:1}
.home-value-grid .component-panel{min-height:168px;padding:17px 18px;overflow:hidden}
.home-value-grid h2{margin:0 0 8px;color:#e8b749;font:700 19px Georgia,serif}
.home-value-grid p{max-width:260px;margin:0;color:#bdc7d1;font-size:12px;line-height:1.48}
.component-mini-link{display:inline-flex;margin-top:15px;padding:8px 13px;border:1px solid #b28438;border-radius:5px;color:#ecc35a;font:700 11px "Trebuchet MS",Arial,sans-serif}
.component-mini-link:hover{background:#e9b744;color:#15100a}
.home-transparency{display:grid;grid-template-columns:minmax(150px,1fr) 108px 145px;gap:10px;align-items:center}
.transparency-chart{width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#e8ae3d 0 68%,#d77a21 68% 90%,#8d4927 90% 100%);position:relative}
.transparency-chart:after{content:'';position:absolute;inset:15px;background:#0b1420;border-radius:50%;z-index:0}.transparency-chart b,.transparency-chart small{position:relative;z-index:1}.transparency-chart b{font-size:21px}.transparency-chart small{font-size:9px;color:#d4dce5;line-height:1.1}
.home-transparency ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:#c6d0d9;font-size:10px}.home-transparency li{display:flex;align-items:center;gap:7px}.home-transparency li i{height:9px;width:9px;border-radius:50%;background:#e8ae3d}.home-transparency li:nth-child(2) i{background:#d77a21}.home-transparency li:nth-child(3) i{background:#8d4927}
.home-artist-cta{display:grid;grid-template-columns:1fr 48%;position:relative}.home-artist-cta p{max-width:240px}.artist-cta-art{align-self:end;height:138px;margin:-2px -18px -17px 0;background:radial-gradient(circle at 64% 56%,#813fe669,transparent 26%),url('assets/home-page-background.jpg') 76% 36%/470px auto no-repeat;filter:saturate(1.2)}
.home-community-card{display:grid;grid-template-columns:1fr 180px;gap:14px}.community-quick{border-left:1px solid #28394a;padding-left:13px;display:grid;align-content:center;gap:10px}.community-quick a{padding-bottom:9px;border-bottom:1px solid #223342}.community-quick a:last-child{padding-bottom:0;border:0}.community-quick b,.community-quick small{display:block}.community-quick b{color:#e9b84b;font:700 11px "Trebuchet MS",Arial,sans-serif}.community-quick b span{display:inline-block;height:8px;width:8px;margin-right:6px;border-radius:50%;background:#ff3d47;box-shadow:0 0 8px #ff3d47}.community-quick small{margin-top:4px;color:#aebcc8;font-size:10px;line-height:1.35}
/* Reuse the white circular song-control language for the persistent player. */
.pro-player .main-control{width:34px!important;height:34px!important;border:0!important;border-radius:50%!important;background:#f5f1e9!important;color:transparent!important;position:relative!important;box-shadow:none!important}.pro-player .main-control:after{content:'';position:absolute;left:13px;top:10px;border-left:10px solid #10141b;border-top:7px solid transparent;border-bottom:7px solid transparent}.pro-player .main-control.playing:after{left:11px;top:9px;width:10px;height:15px;border:0;background:linear-gradient(90deg,#10141b 0 38%,transparent 38% 62%,#10141b 62% 100%)}
@media(max-width:1100px){body:has(.component-home) .home-value-grid{width:calc(100% - 40px);grid-template-columns:1fr}.home-value-grid .component-panel{min-height:145px}.home-transparency{grid-template-columns:minmax(160px,1fr) 100px 160px}.home-artist-cta{grid-template-columns:1fr 260px}.artist-cta-art{height:145px}.home-community-card{grid-template-columns:1fr 240px}}
@media(max-width:620px){body:has(.component-home) .home-value-grid{width:calc(100% - 28px);gap:10px}.home-transparency{grid-template-columns:1fr 100px}.home-transparency ul{grid-column:1/-1;grid-template-columns:repeat(3,1fr);font-size:9px}.home-artist-cta{grid-template-columns:1fr 130px}.artist-cta-art{height:130px;background-size:390px auto}.home-community-card{grid-template-columns:1fr}.community-quick{border-left:0;border-top:1px solid #28394a;padding:10px 0 0;grid-template-columns:1fr 1fr}.community-quick a{border:0}.pro-player .main-control{width:34px!important;height:34px!important}}

/* Roomier navigation bar. */
.site-header{height:86px!important}
.site-header .component-logo{height:74px!important}
@media(max-width:620px){.site-header{height:75px!important}.site-header .component-logo{height:65px!important}}

/* Align the hero content with the inner left edge of the Trending Now frame. */
@media(min-width:901px){body:has(.component-home) .home-hero-copy{margin-left:68px!important}}

/* Keep the live invitation beside the Fanclub action, not floating over the hero. */
@media(min-width:821px){
  body:has(.component-home) .home-hero-copy{max-width:1100px!important}
  body:has(.component-home) .home-actions{align-items:center!important;flex-wrap:nowrap!important}
  body:has(.component-home) .home-actions .component-live{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0!important;flex:0 0 320px!important}
}
/* Bottom panels share the exact outer frame of Trending Now and Featured Artists. */
body:has(.component-home) .home-content-grid,
body:has(.component-home) .home-value-grid{width:calc(100% - 68px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:1280px) and (min-width:821px){body:has(.component-home) .home-actions{flex-wrap:wrap!important}.home-actions .component-live{margin-top:0!important}}
@media(max-width:820px){body:has(.component-home) .home-actions .component-live{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0!important}}

/* Home composition refinement: shared frame, tighter vertical rhythm, component player */
body:has(.component-home) .home-content-grid{margin-top:7px!important}
body:has(.component-home) .home-value-grid{margin-top:10px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)!important}
body:has(.component-home) .home-value-grid h2{font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;font-weight:700!important;letter-spacing:.02em!important;font-size:17px!important}
body:has(.component-home) .pro-player{height:88px!important;display:grid!important;grid-template-columns:minmax(190px,.55fr) minmax(280px,1.25fr) auto auto!important;gap:20px!important;padding:10px max(34px,calc((100vw - 1440px)/2))!important;background:linear-gradient(90deg,rgba(3,8,14,.985),rgba(7,16,25,.985))!important;border:0!important}
.pro-player .player-track-info{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;min-width:0}
.pro-player .player-wave-group{min-width:0;display:flex;align-items:center}
.pro-player .player-wave-group .player-wave{width:100%;max-width:none!important}
.pro-player .player-transport{display:flex;align-items:center;gap:9px;white-space:nowrap}
.pro-player .player-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.pro-player .player-actions .heart{margin-left:0!important}
@media(max-width:760px){body:has(.component-home) .pro-player{grid-template-columns:minmax(0,1fr) auto auto!important;gap:10px!important}.pro-player .player-wave-group{display:none}.pro-player .player-track-info{grid-template-columns:48px minmax(0,1fr)}.pro-player .player-actions{gap:2px}.pro-player .player-actions .cart-control{display:none}}
/* Keep the live invitation anchored to the lower edge of the three hero actions. */
@media(min-width:821px){body:has(.component-home) .home-actions{align-items:flex-end!important}body:has(.component-home) .home-actions .component-live{align-self:flex-end!important}}

/* One shared outer frame for both the discovery and feature rows. */
@media(min-width:821px){
 body:has(.component-home) .home-content-grid,
 body:has(.component-home) .home-value-grid{
   inline-size:calc(100% - 68px)!important;
   width:calc(100% - 68px)!important;
   max-inline-size:none!important;
   max-width:none!important;
   margin-left:auto!important;
   margin-right:auto!important;
   justify-self:center!important;
 }
}

/* Text-safe mask for the bright homepage artwork. */
body:has(.component-home),body:has(.component-home) .wrap{background-image:linear-gradient(90deg,rgba(1,5,10,.88) 0%,rgba(1,5,10,.78) 34%,rgba(1,5,10,.42) 55%,rgba(1,5,10,.12) 78%,rgba(1,5,10,.08) 100%),linear-gradient(180deg,rgba(1,5,10,.32),rgba(1,5,10,.05) 44%,rgba(1,5,10,.55) 100%),url('assets/home-page-background.jpg')!important;}

/* Larger long-form Klankstal mark in the homepage header. */
@media(min-width:621px){body:has(.component-home) .site-header{height:102px!important}body:has(.component-home) .site-header .component-logo{width:390px!important;min-width:390px!important;height:92px!important}}

/* Lift the complete hero-action cluster without disturbing its internal alignment. */
body:has(.component-home) .home-actions{transform:translateY(-15px)!important}

/* Global Klankstal visual system for every non-home route. */
.site-header{position:absolute!important;top:0;left:0;right:0;width:100%;height:102px!important;background:transparent!important;background-image:none!important;border:0!important;backdrop-filter:none!important;z-index:40!important}
.site-header .component-logo{width:390px!important;min-width:390px!important;height:92px!important}
body:not(:has(.component-home)){background:rgb(3,8,14)!important}
body:not(:has(.component-home)) main{min-height:100vh!important;background:transparent!important}
body:not(:has(.component-home)) .wrap{min-height:0!important;max-width:1440px!important;padding:132px 34px 40px!important;background:transparent!important}
body:not(:has(.component-home)) .wrap:before{inset:0 -12vw!important;opacity:1!important;background-image:linear-gradient(90deg,rgba(1,5,10,.92) 0%,rgba(1,5,10,.78) 36%,rgba(1,5,10,.38) 63%,rgba(1,5,10,.2) 100%),linear-gradient(180deg,rgba(1,5,10,.45),rgba(1,5,10,.08) 40%,rgba(1,5,10,.76) 100%),url('assets/home-page-background.jpg')!important;background-size:cover!important;background-position:center top!important;background-attachment:fixed!important}
body:not(:has(.component-home)) .wrap:after{display:none!important}
body:not(:has(.component-home)) .page-title,body:not(:has(.component-home)) .section-head h2,body:not(:has(.component-home)) .panel h2,body:not(:has(.component-home)) .about-page h2{font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;font-weight:700!important;letter-spacing:.02em!important;color:#f0bd4f!important;text-shadow:none!important}
body:not(:has(.component-home)) .page-title{font-size:34px!important;line-height:1.1!important}
body:not(:has(.component-home)) .eyebrow{font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;letter-spacing:.14em!important}
body:not(:has(.component-home)) .panel{background:linear-gradient(145deg,rgba(10,21,32,.92),rgba(5,13,22,.91))!important;border-color:#2b4660!important}
.pro-player{height:88px!important;display:grid!important;grid-template-columns:minmax(190px,.55fr) minmax(280px,1.25fr) auto auto!important;gap:20px!important;padding:10px max(34px,calc((100vw - 1440px)/2))!important;background:linear-gradient(90deg,rgba(3,8,14,.985),rgba(7,16,25,.985))!important;border:0!important;box-shadow:0 -12px 28px rgba(0,0,0,.45)!important}
.pro-player .player-track-info{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;min-width:0}.pro-player .player-wave-group{min-width:0;display:flex;align-items:center}.pro-player .player-wave-group .player-wave{width:100%;max-width:none!important}.pro-player .player-transport{display:flex;align-items:center;gap:9px;white-space:nowrap}.pro-player .player-actions{display:flex;align-items:center;gap:10px;justify-self:end}.pro-player .player-actions .heart{margin-left:0!important}
@media(max-width:760px){.site-header{height:76px!important;background:rgba(3,8,14,.82)!important;backdrop-filter:blur(12px)!important}.site-header .component-logo{width:220px!important;min-width:220px!important;height:66px!important}body:not(:has(.component-home)) .wrap{padding:100px 16px 32px!important}.pro-player{grid-template-columns:minmax(0,1fr) auto auto!important;gap:10px!important;padding:10px 14px!important}.pro-player .player-wave-group{display:none}.pro-player .player-track-info{grid-template-columns:48px minmax(0,1fr)}.pro-player .player-actions{gap:2px}.pro-player .player-actions .cart-control{display:none}}
/* Restore the original Klankstal artwork on all non-home pages; it now fills to the fixed player without replacing that page identity. */
body:not(:has(.component-home)) .wrap:before{background-image:linear-gradient(90deg,rgba(5,11,20,.86) 0%,rgba(5,11,20,.64) 45%,rgba(5,11,20,.48) 100%),linear-gradient(180deg,rgba(3,8,14,.22),rgba(3,8,14,.08) 46%,rgba(3,8,14,.68) 100%),url('https://cdn1.site-media.eu/images/1920/26603939/Klankstal_background-w84oGmJDloisZ5O-V0fa8w.jpg')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;background-attachment:fixed!important;inset:0 -12vw!important;min-height:100%!important}
/* Homepage content frame: both rows align to the Explore Music action and share identical outer edges. */
@media(min-width:821px){
 body:has(.component-home) .home-content-grid,
 body:has(.component-home) .home-value-grid{box-sizing:border-box!important;width:calc(100% - 136px)!important;max-width:none!important;margin-left:68px!important;margin-right:68px!important}
 body:has(.component-home) .home-content-grid{grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr)!important}
 body:has(.component-home) .home-value-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)!important}
}
/* Login: equal-height artist/fan sign-in panels and branded artwork overlay. */
@media(min-width:681px){
 body:has(.login-screen) .login-screen{align-items:stretch!important;min-height:560px!important}
 body:has(.login-screen) .login-card,body:has(.login-screen) .login-art{min-height:560px!important;height:auto!important;box-sizing:border-box!important}
}
body:has(.login-screen) .login-art{position:relative!important;isolation:isolate!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;background-image:linear-gradient(rgba(5,11,20,.55),rgba(5,11,20,.55)),url('assets/background-syntera.png')!important;background-size:cover,cover!important;background-position:center,center!important;background-repeat:no-repeat!important}
body:has(.login-screen) .login-art:after{content:none!important}
body:has(.login-screen) .login-art:before{content:none!important}
.login-art-logo{position:relative;z-index:1;width:min(38%,190px);height:auto;opacity:.92;filter:drop-shadow(0 8px 30px #000c)}
@media(max-width:680px){body:has(.login-screen) .login-art{min-height:280px!important}}
/* Remove the inherited inner inset from the upper row so its cards share the lower row's exact edges. */
@media(min-width:821px){body:has(.component-home) .home-content-grid{padding-left:0!important;padding-right:0!important}}
/* One identical persistent player across Home and every interior page. */
body:not(:has(.component-home)) .pro-player{position:fixed!important;z-index:35!important;left:0!important;right:0!important;bottom:0!important;height:88px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(190px,.55fr) minmax(280px,1.25fr) auto auto!important;align-items:center!important;gap:20px!important;padding:10px max(34px,calc((100vw - 1440px)/2))!important;background:linear-gradient(90deg,rgba(3,8,14,.985),rgba(7,16,25,.985))!important;background-image:linear-gradient(90deg,rgba(3,8,14,.985),rgba(7,16,25,.985))!important;border:0!important;border-top:0!important;box-shadow:0 -12px 28px rgba(0,0,0,.45)!important;overflow:visible!important}
body:not(:has(.component-home)) .pro-player .player-track-info{display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;min-width:0!important}
body:not(:has(.component-home)) .pro-player .player-wave-group{min-width:0!important;display:flex!important;align-items:center!important}
body:not(:has(.component-home)) .pro-player .player-wave-group .player-wave{width:100%!important;max-width:none!important;height:auto!important;padding:0!important}
body:not(:has(.component-home)) .pro-player .player-transport{display:flex!important;align-items:center!important;gap:9px!important;white-space:nowrap!important}
body:not(:has(.component-home)) .pro-player .player-actions{display:flex!important;align-items:center!important;gap:10px!important;justify-self:end!important}
body:not(:has(.component-home)) .pro-player .player-actions .heart{margin-left:0!important}
body:not(:has(.component-home)) .pro-player .main-control{width:34px!important;height:34px!important;border:0!important;border-radius:50%!important;background:#f5f1e9!important;color:transparent!important;position:relative!important;box-shadow:none!important}
body:not(:has(.component-home)) .pro-player .main-control:after{content:''!important;position:absolute!important;left:13px!important;top:10px!important;border-left:10px solid #10141b!important;border-top:7px solid transparent!important;border-bottom:7px solid transparent!important}
body:not(:has(.component-home)) .pro-player .main-control.playing:after{left:11px!important;top:9px!important;width:10px!important;height:15px!important;border:0!important;background:linear-gradient(90deg,#10141b 0 38%,transparent 38% 62%,#10141b 62% 100%)!important}
@media(max-width:760px){body:not(:has(.component-home)) .pro-player{height:74px!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:10px!important;padding:10px 14px!important}body:not(:has(.component-home)) .pro-player .player-wave-group{display:none!important}body:not(:has(.component-home)) .pro-player .player-track-info{grid-template-columns:48px minmax(0,1fr)!important}body:not(:has(.component-home)) .pro-player .player-actions{gap:2px!important}body:not(:has(.component-home)) .pro-player .player-actions .cart-control{display:none!important}}
/* Artist plan chooser overlay. */
.artist-plan-modal{width:min(1060px,94vw)!important;padding:28px!important}.artist-plan-modal>h2{font:700 34px/1.1 "Trebuchet MS",Arial,sans-serif!important;color:#f0bd4f!important;margin:7px 0!important}.artist-plan-modal .plans{margin-top:20px!important}.artist-plan-modal .plan{min-height:390px!important;display:flex!important;flex-direction:column!important}.artist-plan-modal .plan ul{padding-left:18px!important;line-height:1.55!important;flex:1!important}.artist-plan-modal .plan button{margin-top:auto!important;width:100%!important}@media(max-width:700px){.artist-plan-modal{padding:20px!important}.artist-plan-modal .plans{grid-template-columns:1fr!important}.artist-plan-modal .plan{min-height:auto!important}}
/* Explore catalogue: multi-select filters, artist selector and pagination. */
.discover-page{max-width:1320px;margin:0 auto 86px}.explore-filters{padding:32px 22px;margin-top:17px}.explore-results{padding:20px 22px;margin-top:17px}.filter-heading,.artist-filter{display:flex;align-items:center;justify-content:space-between;gap:16px}.filter-heading b{display:block;color:#edba47;font:600 17px Georgia,serif}.filter-heading small{display:block;color:#9ba9b7;margin-top:3px}.filter-clear{background:transparent;color:#d77a21;border:1px solid #d77a21;border-radius:5px;padding:8px 12px}.genre-multiselect{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}.genre-multiselect button{background:#09131e;color:#d6dde4;border:1px solid #324557;border-radius:20px;padding:8px 13px;font-size:12px}.genre-multiselect button:hover,.genre-multiselect button.selected{background:#e5a62e;color:#09101a;border-color:#f4c258}.artist-filter{justify-content:flex-start;border-top:1px solid #253646;padding-top:15px}.artist-filter label{color:#e2b451;font-size:12px;font-weight:700}.artist-filter select{min-width:250px;background:#07111c;border:1px solid #394d60;border-radius:5px;color:#eef2f4;padding:10px 12px}.explore-results .section-head{align-items:flex-start}.explore-release .release-copy>a b{color:#f3f3ee}.explore-release .release-copy small a{color:#d77a21}.explore-pagination{display:flex;justify-content:center;gap:7px;margin-top:18px}.explore-pagination button{min-width:38px;padding:8px 11px;background:#09131e;color:#cad3dc;border:1px solid #35485a;border-radius:5px}.explore-pagination button.active{background:#e5a62e;color:#07111a;border-color:#f2be50}.empty-results{padding:32px 12px;text-align:center}@media(max-width:620px){.explore-filters,.explore-results{padding:16px}.filter-heading{align-items:flex-start;flex-direction:column}.artist-filter{align-items:stretch;flex-direction:column}.artist-filter select{min-width:0;width:100%}.genre-multiselect{gap:7px}.genre-multiselect button{font-size:11px;padding:7px 10px}.explore-pagination{gap:4px}.explore-pagination button{padding:7px 8px;font-size:11px}}
/* Supporter / Fanclub sign-up screen. */
.supporter-signup{max-width:1320px;margin:0 auto 86px;display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:18px}.supporter-form{padding:25px;border:1px solid #2a3d4e;border-radius:10px;background:linear-gradient(145deg,#0b1723f8,#06101af8)}.supporter-form .page-title{margin-top:8px}.supporter-genre{margin:18px 0}.supporter-genre>b{display:block;color:#e4b34b;font-size:13px}.supporter-genre>small{display:block;color:#9eabb8;margin:3px 0}.supporter-notice{margin:17px 0}.terms-check{display:block!important;margin:16px 0!important;color:#d8dfe5!important;font-size:12px!important}.terms-check input{width:auto!important;min-height:0!important;margin-right:8px}.terms-check a{color:#d77a21;text-decoration:underline}.artist-recommendations{padding:21px}.artist-recommendations h2{margin:6px 0;font:600 24px Georgia,serif;color:#e4b34b}.recommendation-list{margin-top:15px}.recommendation-list article{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #203140}.recommendation-list .avatar{height:44px;width:44px}.recommendation-list b,.recommendation-list small{display:block}.recommendation-list b{font-size:12px}.recommendation-list small{font-size:10px;color:#e5ae3b;margin-top:2px}.recommendation-list .link{font-size:10px;white-space:nowrap}@media(max-width:880px){.supporter-signup{grid-template-columns:1fr}.artist-recommendations{display:none}}
/* Global sticky navigation and demo page tree. */
.site-header{position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:100%!important;flex:none!important;background:rgba(3,8,14,.86)!important;backdrop-filter:blur(14px)!important;border-bottom:1px solid rgba(215, 122, 33,.36)!important;z-index:100!important}.wrap{min-height:calc(100vh - 102px)!important}.demo-sitemap-wrap{margin:20px 0 82px;display:flex;align-items:center;gap:14px}.demo-sitemap-wrap small{color:#9cacb9}.sitemap-modal{width:min(1080px,94vw)!important;max-height:min(760px,86vh)!important;overflow:auto!important;padding:28px!important}.sitemap-modal>h2{font:700 33px/1.1 "Trebuchet MS",Arial,sans-serif!important;color:#f0bd4f!important;margin:7px 0!important}.sitemap-tree{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.sitemap-group{border:1px solid #2e4458;border-radius:9px;background:linear-gradient(145deg,#0b1723,#07111b);overflow:hidden}.sitemap-group h3{margin:0;padding:13px 15px;border-bottom:1px solid #2e4458;color:#e9b646;font:700 15px "Trebuchet MS",Arial,sans-serif}.sitemap-group ul{list-style:none;margin:0;padding:4px 15px 12px}.sitemap-group li{border-bottom:1px solid #1f3040}.sitemap-group li:last-child{border-bottom:0}.sitemap-group a{display:block;padding:10px 0}.sitemap-group a:hover b{color:#d77a21}.sitemap-group b,.sitemap-group small{display:block}.sitemap-group b{font-size:13px;color:#edf1f3}.sitemap-group small{font-size:10px;line-height:1.35;color:#9eacb8;margin-top:2px}@media(max-width:820px){.site-header{position:sticky!important;height:76px!important}.wrap{min-height:calc(100vh - 76px)!important}.sitemap-tree{grid-template-columns:1fr}.sitemap-modal{padding:20px!important}.demo-sitemap-wrap{align-items:flex-start;flex-direction:column}}
/* Upload disclaimer modal. */
.inline-disclaimer{display:inline!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;color:#d77a21!important;text-decoration:underline!important;font:inherit!important;cursor:pointer!important}.disclaimer-modal{width:min(760px,94vw)!important;max-height:min(760px,86vh)!important;overflow:auto!important;padding:28px!important}.disclaimer-modal>h2{font:700 33px/1.1 "Trebuchet MS",Arial,sans-serif!important;color:#f0bd4f!important;margin:7px 0!important}.disclaimer-lead{color:#d8e0e6;margin:0 0 16px}.disclaimer-modal section{padding:13px 0;border-top:1px solid #2b4051}.disclaimer-modal h3{color:#e7b448;font:700 15px "Trebuchet MS",Arial,sans-serif;margin:0 0 5px}.disclaimer-modal section p{color:#b8c3ce;font-size:13px;line-height:1.55;margin:0}.disclaimer-full-link{display:inline-block;margin-top:16px}@media(max-width:620px){.disclaimer-modal{padding:20px!important}}
/* Homepage KS logo: real image element rather than a browser-dependent background layer. */
.component-owner{background:none!important;display:block!important}.component-owner>img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;opacity:.9!important;filter:drop-shadow(0 12px 28px rgba(0,0,0,.58))!important;position:relative!important;z-index:4!important}
/* Syntera corporate shell — visual identity comes only from the supplied assets. */
:root{--syn-gold:#d4af37;--syn-white:#fff;--syn-blue:#efad31;--syn-violet:#d77a21;--syn-cyan:#f2ca69;--syn-ink:#0d1117}
body:has(.authentic-syntera-home){margin:0!important;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important;color:var(--syn-white)!important;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif!important}
body:has(.authentic-syntera-home):before,body:has(.authentic-syntera-home):after{display:none!important}
body:has(.authentic-syntera-home){height:100vh!important;overflow:hidden!important}
body:has(.authentic-syntera-home) main{background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important;height:calc(100vh - 76px)!important;min-height:0!important;padding-top:0!important;margin-top:76px!important;overflow:hidden!important;display:flex!important}
body:has(.authentic-syntera-home) .wrap:has(.authentic-syntera-home){height:100%!important;display:flex!important;flex-direction:column!important}
@media(max-width:760px){body:has(.authentic-syntera-home) main{height:calc(100vh - 70px)!important;margin-top:70px!important}}
body:has(.authentic-syntera-home) .site-header{height:76px!important;box-sizing:border-box!important;padding:0 clamp(18px,4vw,68px)!important;background:rgba(7,12,18,.94)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}
body:has(.authentic-syntera-home) .site-header nav{display:flex!important;flex:1!important;align-items:center!important;gap:clamp(17px,2.3vw,38px)!important;margin:0!important}
body:has(.authentic-syntera-home) .site-header nav a{position:relative!important;padding:28px 0 25px!important;color:#cbd3dc!important;font:700 12px/1 "Trebuchet MS",Arial,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;white-space:nowrap!important}
body:has(.authentic-syntera-home) .site-header nav a:hover,body:has(.authentic-syntera-home) .site-header nav a.active{color:#fff!important}
body:has(.authentic-syntera-home) .site-header nav a.active:after{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:18px!important;height:2px!important;background:linear-gradient(90deg,var(--syn-gold),var(--syn-cyan))!important}
body:has(.authentic-syntera-home) .site-header .search{width:min(23vw,300px)!important;background:#101923!important;border:1px solid #2b3947!important;border-radius:22px!important;color:#fff!important}
body:has(.authentic-syntera-home) .site-header .topbtn{border-color:rgba(212,175,55,.75)!important;color:#f2ca5b!important;border-radius:22px!important;white-space:nowrap!important}
body:has(.authentic-syntera-home) .wrap:has(.authentic-syntera-home){width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
body:has(.authentic-syntera-home) .wrap:has(.authentic-syntera-home):before,body:has(.authentic-syntera-home) .wrap:has(.authentic-syntera-home):after{display:none!important}
.authentic-syntera-home *{box-sizing:border-box}
.authentic-syntera-home a{text-decoration:none}
@media(max-width:760px){body:has(.authentic-syntera-home) .site-header{height:70px!important;padding:0 14px!important;gap:12px!important}body:has(.authentic-syntera-home) .site-header nav{overflow-x:auto!important;scrollbar-width:none!important;gap:22px!important}body:has(.authentic-syntera-home) .site-header nav::-webkit-scrollbar{display:none!important}body:has(.authentic-syntera-home) .site-header nav a{font-size:10px!important;padding:27px 0 24px!important}body:has(.authentic-syntera-home) .site-header .search,body:has(.authentic-syntera-home) .site-header .topbtn{display:none!important}}
/* Exact Syntera identity assets extracted from the supplied reference. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.authentic-syntera-home{width:95%;max-width:none;margin:0 auto;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%);display:flex;flex-direction:column;height:100%;min-height:0}
.syntera-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.authentic-hero{display:grid;grid-template-columns:80% 18%;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%);border-bottom:1px solid rgba(255,255,255,.16);justify-content:start;gap:0 2%;height:67vh;align-items:stretch;position:relative}
@media(max-width:860px){.authentic-hero{grid-template-columns:1fr!important}.authentic-ecosystem{position:absolute!important;right:0!important;top:0!important;height:100%!important;width:22%!important;z-index:2!important}}
.exact-hero-scene{width:100%;height:100%;aspect-ratio:unset;overflow:hidden;background:rgb(1,2,6);position:relative}
.exact-hero-scene::before{content:'';position:absolute;top:0;left:0;bottom:0;width:30px;background:linear-gradient(to left,transparent,rgb(0,0,0));pointer-events:none;z-index:2}
.exact-hero-scene::after{content:'';position:absolute;top:0;right:0;bottom:0;width:30px;background:linear-gradient(to right,transparent,rgb(0,0,0));pointer-events:none;z-index:2}
.exact-hero-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.authentic-ecosystem{min-width:0;padding:0;display:block;align-self:stretch;width:100%;height:100%;position:relative;overflow:hidden}
.eco-logo-panel{position:absolute;inset:0;display:flex;flex-direction:column}
.eco-logo-panel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.6) 100%);z-index:0;pointer-events:none}
.eco-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.eco-logo{position:absolute;left:50%;transform:translateX(-50%);width:40%!important;height:auto!important;max-height:28%!important;object-fit:contain!important;z-index:1;transition:transform .25s ease,filter .25s ease,opacity .25s ease;cursor:pointer}
.eco-logo:hover{transform:translateX(-50%) scale(1.08);filter:brightness(1.25) drop-shadow(0 0 8px rgba(239, 173, 49,.6))}
.eco-logo-top{top:13%;max-height:24%}
.eco-logo-middle{top:49%;transform:translate(-50%,-50%);max-height:24%;width:42%!important}
.eco-logo-middle:hover{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.25) drop-shadow(0 0 8px rgba(239, 173, 49,.6))}
.eco-logo-bottom{bottom:16%;max-height:24%}
.authentic-section-label{margin:0 0 4px;text-align:center;color:#e3bd4f;font:700 13px/1.2 "Trebuchet MS",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.authentic-ecosystem a{display:block;border-radius:16px;transition:transform .2s ease,filter .2s ease}
.authentic-ecosystem a:hover{filter:brightness(1.12)}
.authentic-ecosystem img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.authentic-interface{padding:18px clamp(20px,3vw,48px);display:grid;grid-template-columns:minmax(230px,310px) minmax(230px,300px) minmax(420px,1fr);gap:clamp(20px,3vw,42px);align-items:center;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%);border-bottom:1px solid rgba(255,255,255,.15)}
.authentic-interface>img{display:block;width:100%;height:auto}
.authentic-pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:6px}
.authentic-pillar-grid img{display:block;width:100%;height:auto}
.authentic-applications{padding:18px clamp(20px,3vw,34px) 0;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)}
.authentic-applications h2{margin:0 0 10px;color:#dfb94d;font:700 13px/1.2 "Trebuchet MS",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.authentic-application-grid{display:grid;grid-template-columns:1.01fr 1fr 1.16fr .94fr;gap:1px;background:rgba(255,255,255,.18)}
.authentic-application-grid figure{position:relative;min-width:0;margin:0;background:#0b1016;overflow:hidden}
.authentic-application-grid figure img{display:block;width:100%;height:clamp(230px,18vw,277px);object-fit:cover;transition:transform .35s ease}
.authentic-application-grid figure:hover img{transform:scale(1.025)}
.authentic-application-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 15px 11px;color:#f3f4f5;font-size:11px;letter-spacing:.09em;text-transform:uppercase;background:linear-gradient(transparent,rgba(4,8,12,.92))}
.authentic-capabilities{display:grid;grid-template-columns:minmax(330px,530px) minmax(620px,1fr);align-items:center;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%);border-top:1px solid rgba(255,255,255,.16);flex:none}
.authentic-capabilities>img{display:block;width:100%;height:auto}
.authentic-capability-grid{display:grid;grid-template-columns:.92fr .99fr 1.06fr 1.03fr 2.28fr;align-items:center}
.authentic-capability-grid a{display:block;transition:filter .2s ease}
.authentic-capability-grid a:hover{filter:brightness(1.2)}
.authentic-capability-grid img{display:block;width:100%;height:auto}
@media(max-width:760px){.authentic-hero{grid-template-columns:1fr;min-height:0}.exact-hero-scene{width:100%;height:auto}.exact-hero-scene img{width:100%;height:auto}.authentic-ecosystem a{min-height:80px}.authentic-ecosystem{display:grid;grid-template-columns:repeat(3,1fr)}.authentic-section-label{grid-column:1/-1}.authentic-interface{grid-template-columns:1fr 1fr}.authentic-pillar-grid{grid-column:1/-1}.authentic-capabilities{grid-template-columns:1fr}.authentic-future-statement{max-width:530px}.authentic-capability-grid{border-top:1px solid rgba(255,255,255,.12)}}
@media(max-width:700px){.authentic-ecosystem{display:flex;padding:24px 20px}.authentic-interface{grid-template-columns:1fr;padding:25px 20px}.authentic-interface-logo{max-width:340px}.authentic-interface-intro{max-width:330px}.authentic-pillar-grid{grid-template-columns:repeat(2,1fr);width:100%}.authentic-application-grid{grid-template-columns:1fr 1fr}.authentic-application-grid figure img{height:auto;aspect-ratio:1.05/1}.authentic-capability-grid{grid-template-columns:1fr 1fr}.authentic-capability-grid a:last-child{grid-column:1/-1;max-width:330px}.authentic-future-statement{width:100%}}
@media(max-width:430px){.authentic-application-grid{grid-template-columns:1fr}.authentic-application-grid figure img{aspect-ratio:auto}.authentic-pillar-grid{grid-template-columns:1fr 1fr}.authentic-section-label{text-align:left}}
/* Unified blank gradient and fixed navigation across every route. */
html,body{min-height:100%;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important;background-image:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important;background-attachment:fixed!important}
body:before,body:after{content:none!important;display:none!important;background:none!important;background-image:none!important}
.site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:1000!important}
main{min-height:100vh!important;padding-top:76px!important;background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important;background-image:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important}
.wrap,.wrap:before,.wrap:after,body:not(:has(.component-home)) .wrap:before,body:not(:has(.component-home)) .wrap:after{background-image:none!important}
.wrap:before,.wrap:after,body:not(:has(.component-home)) .wrap:before,body:not(:has(.component-home)) .wrap:after{content:none!important;display:none!important}
body:not(:has(.authentic-syntera-home)) .wrap{padding-top:0!important;background:transparent!important}
body:not(:has(.authentic-syntera-home)),body:not(:has(.authentic-syntera-home)) main{background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important;background-image:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(8,15,25) 100%)!important}
body:has(.authentic-syntera-home) .wrap{padding-top:0!important}
@media(max-width:760px){main{padding-top:70px!important}body:not(:has(.authentic-syntera-home)) .wrap{padding-top:0!important}}
body:not(:has(.authentic-syntera-home)) .wrap>*{margin-bottom:0!important}
/* Use the homepage navigation treatment on every route. */
.site-header{height:76px!important;box-sizing:border-box!important;padding:0 clamp(18px,4vw,68px)!important;background:rgba(7,12,18,.94)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;backdrop-filter:blur(14px)!important}
.site-header nav{display:flex!important;flex:1!important;align-items:center!important;gap:clamp(17px,2.3vw,38px)!important;margin:0!important}
.site-header nav a{position:relative!important;padding:28px 0 25px!important;color:#cbd3dc!important;font:700 12px/1 "Trebuchet MS",Arial,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;white-space:nowrap!important}
.site-header nav a:hover,.site-header nav a.active{color:#fff!important}
.site-header nav a.active:after{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:18px!important;height:2px!important;background:linear-gradient(90deg,var(--syn-gold),var(--syn-cyan))!important}
.site-header .search{width:min(23vw,300px)!important;background:#101923!important;border:1px solid #2b3947!important;border-radius:22px!important;color:#fff!important}
.site-header .topbtn{border-color:rgba(212,175,55,.75)!important;color:#f2ca5b!important;border-radius:22px!important;white-space:nowrap!important}
@media(max-width:760px){.site-header{height:70px!important;padding:0 14px!important;gap:12px!important}.site-header nav{overflow-x:auto!important;scrollbar-width:none!important;gap:22px!important}.site-header nav::-webkit-scrollbar{display:none!important}.site-header nav a{font-size:10px!important;padding:27px 0 24px!important}.site-header .search,.site-header .topbtn{display:none!important}}

/* Let the page-wide gradient flow continuously behind the ecosystem block. */
.authentic-ecosystem{background:transparent!important;background-image:none!important}


/* Subtle edge mask to merge the homepage hero into the page gradient. */
.exact-hero-scene{position:relative;overflow:hidden}
.exact-hero-scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(1,2,6) 0,transparent 20px,transparent calc(100% - 20px),rgb(8,15,25) 100%)}


/* Remove CSS black fills while preserving every supplied image. */
.authentic-syntera-home,.authentic-hero,.exact-hero-scene,.authentic-interface,.authentic-applications,.authentic-capabilities,.authentic-application-grid figure{background-color:transparent!important}
.authentic-syntera-home,.authentic-hero,.authentic-interface,.authentic-applications,.authentic-capabilities{background-image:none!important}


/* Community and live hub. */
.community-page{max-width:1420px;margin:0 auto 90px;color:#e9edf1}.community-hero{display:grid;grid-template-columns:105px minmax(320px,1fr) minmax(420px,.95fr);align-items:center;min-height:122px;margin-bottom:13px;border:1px solid #2d465b;border-radius:11px;background:linear-gradient(100deg,rgba(8,20,31,.96),rgba(5,15,24,.91));overflow:hidden}.community-hero-icon{height:100%;display:grid;place-items:center;color:#e8af37;font-size:58px;text-shadow:0 0 22px rgba(234,174,53,.35);background:radial-gradient(circle,#4e361f66,transparent 68%)}.community-hero-copy{padding:18px}.community-hero-copy h1{margin:2px 0;color:#f1f2ef;font:500 33px/1.05 Georgia,serif;text-transform:uppercase;letter-spacing:.03em}.community-hero-copy h2{margin:7px 0 5px;color:#d9dde0!important;font:600 14px "Trebuchet MS",Inter,Arial,sans-serif!important}.community-hero-copy p{margin:0;color:#95a2af;font-size:11px}.community-jukebox{height:100%;display:grid;grid-template-columns:38px 1fr 120px;align-items:center;gap:10px;padding:15px 18px;border-left:1px solid #2d465b;background:radial-gradient(circle at 70% 35%,rgba(215, 122, 33,.3),transparent 30%),linear-gradient(115deg,#071825,#15112c 62%,#191021)}.community-jukebox>span{align-self:start;color:#e7aa2c;font-size:27px}.community-jukebox h2{margin:0 0 4px;color:#e7ebee!important;font:700 15px "Trebuchet MS",Inter,Arial,sans-serif!important}.community-jukebox p{margin:0 0 10px;color:#9ba7b2;font-size:10px;line-height:1.4}.community-jukebox a{display:inline-block;padding:6px 10px;border:1px solid #96631f;border-radius:5px;color:#e3a532;font-size:9px;text-transform:uppercase}.community-jukebox img{width:106px;height:106px;object-fit:contain;opacity:.8;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}.community-main-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(350px,.92fr) minmax(390px,1.18fr);gap:12px;align-items:stretch}.community-left-stack{display:grid;grid-template-rows:auto 1fr;gap:12px}.community-panel{border:1px solid #294356;border-radius:10px;background:linear-gradient(145deg,rgba(8,20,31,.96),rgba(5,13,22,.94));box-shadow:0 16px 40px rgba(0,0,0,.18)}.weekly-challenge,.community-top-entries,.community-live-rooms{padding:16px}.community-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #203546}.community-panel-heading h2{margin:0;color:#cbd2d8!important;font:700 12px "Trebuchet MS",Inter,Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.04em}.community-panel-heading h2 span{margin-right:7px;color:#d77a21;font-size:16px}.community-panel-heading a{color:#d77a21;font-size:9px}.community-panel-heading>small{color:#748493;font-size:9px}.challenge-title{display:flex;align-items:center;gap:10px;margin-top:14px}.challenge-title h3{margin:0;color:#f0f1ed;font:500 23px Georgia,serif}.challenge-title small{padding:3px 7px;border-radius:11px;background:#0c353c;color:#d77a21;font-size:8px;text-transform:uppercase}.weekly-challenge>p{min-height:46px;margin:6px 0 12px;color:#a0abb6;font-size:10px;line-height:1.45}.challenge-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:11px 0}.challenge-metrics>div{padding:4px 10px;border-right:1px solid #263b4d}.challenge-metrics>div:first-child{padding-left:0}.challenge-metrics>div:last-child{border-right:0}.challenge-metrics b,.challenge-metrics small{display:block}.challenge-metrics b{color:#d77a21;font-size:11px}.challenge-metrics small{margin-top:2px;color:#8795a2;font-size:8px;text-transform:uppercase}.challenge-actions{display:grid;grid-template-columns:1fr 42px;gap:9px}.challenge-actions button{padding:10px;border-radius:5px;color:#fff;background:linear-gradient(100deg,#d77a21,#d77a21);font-size:10px}.challenge-actions button:last-child{border:1px solid #31506b;background:#07131f;color:#d6dde3;font-size:18px}.challenge-actions button.saved{border-color:#d77a21;color:#efad31}.challenge-note{display:block;margin:9px 0 6px;color:#7f8c98;font-size:8px}.community-inline-link{color:#d77a21;font-size:9px}.artist-booking{min-height:158px;padding:17px;display:flex;align-items:center;overflow:hidden;background-image:linear-gradient(90deg,rgba(6,17,27,.98) 0%,rgba(6,17,27,.86) 48%,rgba(6,17,27,.18) 80%),url('assets/home-page-background.jpg');background-position:center,right 10% center;background-size:cover,auto 145%;background-repeat:no-repeat}.artist-booking>div{max-width:62%}.booking-label{color:#d77a21;font-size:10px;font-weight:700;text-transform:uppercase}.artist-booking h3{margin:8px 0 5px;color:#f0f1ee;font:500 20px Georgia,serif}.artist-booking h3 small{color:#d77a21;font:700 10px Arial}.artist-booking p{margin:0 0 11px;color:#9faab4;font-size:9px;line-height:1.45}.artist-booking a{display:inline-block;padding:7px 12px;border:1px solid #d77a21;border-radius:5px;color:#d77a21;font-size:9px;text-transform:uppercase}.community-entry-list{display:grid}.community-entry{display:grid;grid-template-columns:25px 52px minmax(0,1fr) 53px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #203546}.community-entry:last-child{border-bottom:0}.community-rank{width:23px;height:23px;display:grid;place-items:center;border:1px solid #5c6d7d;border-radius:50%;color:#c9d0d6;font-size:10px}.community-entry:first-child .community-rank{border-color:#daa72f;color:#e2ad32}.community-entry .cover-play-wrap{width:52px;height:52px}.community-entry-copy{min-width:0}.community-entry-copy b,.community-entry-copy small,.community-entry-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.community-entry-copy b{color:#eef1f2;font-size:11px}.community-entry-copy small{margin-top:2px;color:#9aa7b3;font-size:8px}.community-entry-copy span{margin-top:5px;color:#7d8a96;font-size:8px}.community-vote{padding:6px 8px;border:1px solid #d77a21;border-radius:14px;background:transparent;color:#efad31;font-size:9px}.community-vote.voted{border-color:#d77a21;background:#10332f;color:#efad31}.community-room-list{display:grid;gap:8px;margin-top:10px}.community-room{display:grid;grid-template-columns:150px minmax(0,1fr) 72px;gap:11px;align-items:center;padding:8px;border:1px solid #263e50;border-radius:8px;background:#07131e}.community-room-art{height:86px;position:relative}.community-room-art img{width:100%;height:100%;object-fit:cover;border-radius:5px}.community-live-badge{position:absolute;left:6px;top:6px;padding:3px 6px;border:1px solid #d77a21;border-radius:4px;background:#2b0716;color:#d77a21;font-size:7px;text-transform:uppercase}.community-room-art>small{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:4px;background:#05080dd9;color:#e6ebed;font-size:8px}.community-room-copy h3{margin:0 0 2px;color:#eef0ef;font:700 11px "Trebuchet MS",Inter,Arial,sans-serif}.community-room-copy p{margin:0;color:#8e9ba7;font-size:8px}.community-room-copy>span{display:block;margin:7px 0;color:#a5b0ba;font-size:8px;line-height:1.3}.community-room-copy div{display:flex;flex-wrap:wrap;gap:4px}.community-room-copy div small{padding:3px 5px;border:1px solid #233a53;border-radius:3px;color:#d77a21;font-size:7px}.community-join{padding:7px 9px;border:1px solid #d77a21;border-radius:16px;background:transparent;color:#d77a21;font-size:8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.genre-timetable{margin-top:12px;padding:14px 16px}.timetable-track{display:grid;grid-template-columns:repeat(12,minmax(80px,1fr));margin-top:10px;overflow-x:auto;padding-bottom:3px}.timetable-slot{min-width:80px;text-align:center}.timetable-slot b,.timetable-slot small{display:block}.timetable-slot b{color:#cbd2d7;font-size:9px}.timetable-slot span{display:block;height:9px;margin:6px 0 5px;border-top:1px solid #405263;border-right:1px dashed #263b4c}.timetable-slot small{color:#d77a21;font-size:8px;white-space:nowrap}.timetable-slot.highlighted b,.timetable-slot.highlighted small{color:#e3a833}.community-footer{display:grid;grid-template-columns:1.6fr repeat(3,.45fr) minmax(180px,.8fr);align-items:center;gap:13px;margin-top:12px;padding:14px 20px;border:1px solid #2a4357;border-radius:10px;background:linear-gradient(90deg,rgba(8,20,31,.96),rgba(5,13,22,.93))}.community-together{display:flex;align-items:center;gap:13px}.community-together>span{color:#e4a832;font-size:32px}.community-together b,.community-together small{display:block}.community-together b{color:#dca638;font-size:11px}.community-together small{margin-top:2px;color:#85939f;font-size:8px}.community-stat{padding-left:18px;border-left:1px solid #243a4b}.community-stat b,.community-stat small{display:block}.community-stat b{color:#d77a21;font-size:17px}.community-stat:nth-of-type(3) b{color:#d77a21}.community-stat:nth-of-type(4) b{color:#d77a21}.community-stat small{color:#82909c;font-size:8px}.community-footer>a{padding:10px 13px;border:1px solid #a46a21;border-radius:5px;color:#e3aa36;font-size:9px;text-align:center;text-transform:uppercase}.community-footer>a span{float:right}
@media(max-width:1180px){.community-hero{grid-template-columns:85px 1fr}.community-jukebox{grid-column:1/-1;border-top:1px solid #2d465b;border-left:0}.community-main-grid{grid-template-columns:1fr 1fr}.community-left-stack{grid-row:1/3}.community-live-rooms{grid-column:2}.community-footer{grid-template-columns:1.4fr repeat(3,.45fr)}.community-footer>a{grid-column:1/-1}}
@media(max-width:820px){.community-hero{grid-template-columns:1fr}.community-hero-icon{display:none}.community-hero-copy{padding:18px}.community-jukebox{grid-template-columns:34px 1fr 80px}.community-jukebox img{width:74px;height:74px}.community-main-grid{grid-template-columns:1fr}.community-left-stack,.community-live-rooms{grid-column:auto;grid-row:auto}.community-footer{grid-template-columns:1fr 1fr}.community-together{grid-column:1/-1}.community-stat{padding-left:0;border-left:0}.community-footer>a{grid-column:1/-1}.artist-booking>div{max-width:70%}}
@media(max-width:560px){.community-room{grid-template-columns:105px minmax(0,1fr)}.community-room-art{height:82px}.community-join{grid-column:2;justify-self:start}.community-entry{grid-template-columns:24px 46px minmax(0,1fr)}.community-entry .cover-play-wrap{width:46px;height:46px}.community-vote{grid-column:3;justify-self:start}.community-hero-copy h1{font-size:27px}.community-jukebox{grid-template-columns:30px 1fr}.community-jukebox img{display:none}.artist-booking{background-position:center,right center}.artist-booking>div{max-width:78%}}


/* Polished flat Fanclub registration. */
.supporter-signup-polished{max-width:1380px;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.supporter-signup-polished .supporter-form{padding:clamp(24px,3.2vw,42px);border:1px solid rgba(215, 122, 33,.28);border-radius:0;background:rgba(4,10,17,.38);box-shadow:0 24px 70px rgba(0,0,0,.22)}
.supporter-signup-polished .page-title{margin:7px 0 2px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(34px,4vw,54px);letter-spacing:-.035em;color:#fff}
.fanclub-why-link{display:block;margin:0 0 15px;padding:0;border:0;background:transparent;color:#d77a21;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.supporter-intro{max-width:680px;margin-bottom:24px!important;line-height:1.6}
.supporter-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.supporter-form-grid label{display:grid;gap:7px;color:#e2b451;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.supporter-form-grid input{width:100%;height:46px;margin:0;padding:0 14px;border:1px solid #365064;border-radius:0;background:rgba(2,7,13,.68);color:#fff;font:13px "Trebuchet MS",Arial,sans-serif;outline:none}
.supporter-form-grid input:focus{border-color:#d77a21;box-shadow:inset 0 -2px #d77a21}
.supporter-languages{margin:25px 0 20px;padding:0;border:0}
.supporter-languages legend,.supporter-genre>b{display:block;color:#e4b34b;font-size:13px;font-weight:800}
.supporter-languages>small,.supporter-genre>small{display:block;margin:4px 0 11px;color:#9eabb8}
.language-tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.language-tile{min-height:64px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;padding:9px 11px;border:1px solid #2d4659;border-radius:0;background:rgba(6,16,25,.7);color:#dce4e9;text-align:left;transition:border-color .16s,background-color .16s,transform .16s}
.language-tile:hover{border-color:#4a6f88;transform:translateY(-1px)}
.language-tile.selected{border-color:#d77a21;background:rgba(13,53,63,.72);box-shadow:inset 3px 0 #d77a21}
.language-picture{width:42px;height:42px;display:grid;place-items:center;background:#17374a;color:#efad31;font:800 10px "Trebuchet MS",Arial,sans-serif;letter-spacing:.03em}
.language-tile-1 .language-picture,.language-tile-7 .language-picture{background:#3d2d54;color:#efad31}.language-tile-2 .language-picture,.language-tile-8 .language-picture{background:#45361c;color:#f0c66a}.language-tile-3 .language-picture,.language-tile-9 .language-picture{background:#173f35;color:#efad31}.language-tile-4 .language-picture,.language-tile-10 .language-picture{background:#402b36;color:#eaa1be}.language-tile-5 .language-picture,.language-tile-11 .language-picture{background:#253155;color:#efad31}
.language-tile b{font-size:11px;line-height:1.25}
.supporter-signup-polished .supporter-genres{gap:7px;margin:0}
.supporter-signup-polished .supporter-genres button{border-radius:0;background:rgba(5,15,24,.74)}
.supporter-signup-polished .supporter-genres button.selected{background:#dca638;color:#07111a;border-color:#f0c66a}
.supporter-signup-polished .supporter-notice{border-radius:0;background:rgba(55,40,18,.34)}
.supporter-signup-polished .supporter-continue{width:100%;min-height:48px;border-radius:0;text-transform:uppercase;letter-spacing:.06em}
.supporter-signup-polished .artist-recommendations{border-radius:0;background:rgba(5,14,22,.48)}
.fanclub-why-modal{width:min(920px,92vw)!important;height:min(620px,78vh)!important;min-height:360px!important;padding:0!important;border-radius:0!important;background:linear-gradient(90deg,rgb(1,2,6),rgb(8,15,25))!important;border:1px solid rgba(215, 122, 33,.35)!important}
.fanclub-why-modal .close{right:16px;top:16px;border-radius:0;background:#fff;color:#07111a}
.fanclub-why-placeholder{width:100%;height:100%}
@media(max-width:1080px){.language-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.supporter-form-grid{grid-template-columns:1fr 1fr}.supporter-form-grid label:last-child{grid-column:1/-1}}
@media(max-width:700px){.supporter-signup-polished .supporter-form{padding:22px 16px}.supporter-form-grid{grid-template-columns:1fr}.supporter-form-grid label:last-child{grid-column:auto}.language-tile-grid{grid-template-columns:1fr 1fr}.language-tile{grid-template-columns:36px minmax(0,1fr);padding:8px}.language-picture{width:36px;height:36px}.fanclub-why-modal{height:76vh!important}}
/* Unified Syntera type system and Community chart pagination. */
body,button,input,textarea,select{font-family:"Trebuchet MS",Arial,sans-serif!important}
h2,h3{font-family:"Trebuchet MS",Arial,sans-serif!important;font-weight:700!important;letter-spacing:.045em!important}
.community-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid #203546}
.community-pagination button{min-width:31px;height:29px;padding:0 9px;border:1px solid #36516a;border-radius:0;background:rgba(5,16,26,.74);color:#b9c5ce;font:700 10px/1 "Trebuchet MS",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.community-pagination button:hover,.community-pagination button.active{border-color:#e0ad3b;background:linear-gradient(135deg,#e7bd51,#bf7e24);color:#080c12}
@media(max-width:560px){.community-pagination{justify-content:space-between}.community-pagination button{padding:0 7px;font-size:9px}}
/* Brand Applications: compact, consistently aligned presentation. */
.authentic-application-grid figure img{height:clamp(153px,calc(13.8vw - 23px),189px);object-position:center}
.authentic-application-grid figcaption{min-height:44px;display:flex;align-items:flex-end;padding:20px 16px 10px}
/* Creative Interface: full-width, aligned with Brand Applications edges. */
.authentic-interface{display:none!important}
@media(max-width:700px){.authentic-interface{width:auto;margin:0;padding:25px 20px;gap:20px}}/* Artist & Fan portals */
.artist-portal{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.artist-portal-sidebar{background:linear-gradient(145deg,#101926f4,#07111bf4);border:1px solid #294154;border-radius:10px;padding:18px}
.portal-sidebar-inner{position:sticky;top:84px}
.portal-sidebar-title h2{margin:4px 0 14px;font:600 20px Georgia,serif;color:#f2ca69}
.portal-artist-identity{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.portal-artist-identity .avatar{width:44px;height:44px;font-size:14px}
.portal-selected-plan{background:#0b1421;border:1px solid #294154;border-radius:8px;padding:10px;margin-bottom:14px;font-size:11px;display:block}
.portal-selected-plan b{display:block;color:#f2ca69;font-size:13px;margin:2px 0}
.portal-selected-plan button{margin-top:8px}
.artist-portal-sidebar nav{display:grid;gap:2px}
.artist-portal-sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:#c9d0da;font-size:13px;text-transform:none}
.artist-portal-sidebar nav a.active,.artist-portal-sidebar nav a:hover{background:#162335;color:#f2ca69}
.portal-sidebar-footer{margin-top:16px;padding-top:12px;border-top:1px solid #223347;display:grid;gap:8px}
.portal-sidebar-footer a,.portal-sidebar-footer button{color:#9aa7b3;font-size:12px;background:none;border:0;text-align:left;padding:0;cursor:pointer}
.artist-portal-main{min-width:0;padding-top:0!important}
.site-header nav{scrollbar-width:none}
.site-header nav::-webkit-scrollbar{display:none}
.admin-add-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #223347}
.admin-add-row input[type="text"]{flex:1 1 200px;min-width:120px;background:#0a1019;border:1px solid #38465a;border-radius:6px;padding:9px 11px;color:#ecf1f8}
.admin-add-status{font-size:12px;color:#f2a65b}
.admin-list{display:grid;gap:8px}
.admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;background:#0d151f;border:1px solid #263449;border-radius:8px}
.admin-row input[type="text"]{flex:1 1 160px;min-width:100px;background:#0a1019;border:1px solid #38465a;border-radius:6px;padding:8px 10px;color:#ecf1f8}
.admin-row select{background:#0a1019;border:1px solid #38465a;border-radius:6px;padding:8px 10px;color:#ecf1f8}
.admin-row-email{flex:1 1 180px;min-width:120px;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.admin-row-check{display:flex;align-items:center;gap:6px;font-size:12px;color:#c9d0da;white-space:nowrap}
.admin-sort-input{width:64px!important;flex:0 0 auto!important}
.admin-code-input{width:80px!important;flex:0 0 auto!important;text-transform:uppercase}
.admin-row-status{font-size:12px;color:#efad31;min-width:50px}
.portal-page-heading{margin-bottom:16px}
.portal-page-heading h1{margin:4px 0;font:600 28px Georgia,serif;color:#f0f1ed}
.portal-page-heading .sub{margin:0}
.portal-heading-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.portal-overview-grid{display:grid;grid-template-columns:1fr 240px;gap:16px}
.portal-photo-preview{width:200px;height:200px;border-radius:10px;overflow:hidden;display:grid;margin:0 auto}
.portal-photo-preview .avatar{width:200px;height:200px;border-radius:10px;font-size:34px}
.portal-upload-button{display:block;margin-top:10px;text-align:center;padding:9px;border:1px solid #3a485c;border-radius:6px;cursor:pointer;font-size:12px;color:#e0bf7b}
.portal-upload-button input{display:none}
.portal-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.portal-genre-editor{margin-top:6px}
.portal-genre-editor>b{display:block;font-size:11px;color:#d5bd87;text-transform:uppercase}
.portal-genre-editor>small{display:block;margin:2px 0 8px}
.portal-form-actions{display:flex;align-items:center;gap:12px;margin-top:14px}

/* Track price, checkout/cart, and superfan badge additions. */
.track-price{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:40px;padding:2px 6px;color:#f2ca69;font-size:11px;font-weight:700;white-space:nowrap}
.fan-checkout-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(215, 122, 33,.16)}
.fan-checkout-row>div>b{display:block}
.fan-checkout-row>div>small{color:#8e9baa}
.fan-checkout-row>strong{color:#efb23e;white-space:nowrap}
.fan-checkout-row .release-cart{width:28px;height:28px;font-size:14px}
.fan-superfan-checkout-row>div>b{color:#f2ca69}
.fan-checkout-empty{display:grid;place-items:center;gap:10px;padding:40px 10px;text-align:center;color:#9daab8}
.fan-checkout-empty h3{margin:0;color:#e7edf3}
.fan-checkout-success{display:grid;place-items:center;gap:10px;padding:40px 10px;text-align:center}
.fan-checkout-success h3{margin:0;color:#efb23e}
.fan-checkout-summary{margin-top:16px;padding-top:14px;border-top:1px solid #263544;display:grid;gap:12px}
.fan-checkout-summary>div{display:flex;justify-content:space-between;align-items:center}
.fan-checkout-summary>div>b{font-size:18px;color:#fff}
.fan-sidebar-checkout{font-weight:700}
.artist-browse-avatar-frame:has(>.fan-superfan-badge),
.home-artist-card .artist-art:has(>.fan-superfan-badge),
.artist-bio-avatar-frame:has(>.fan-superfan-badge){overflow:visible!important}
.fan-superfan-badge{display:none;position:absolute;z-index:5;top:-8px;left:-8px;width:65px;height:65px;min-width:65px;max-width:65px;min-height:65px;max-height:65px;object-fit:contain;border:0;border-radius:50%;background:transparent;box-shadow:none;pointer-events:none}
@media(max-width:620px){.fan-superfan-badge{width:52px;height:52px;min-width:52px;max-width:52px;min-height:52px;max-height:52px}}
.tpm-art-col{position:relative}
.tpm-superfan-badge{position:absolute;right:-5px;bottom:-5px;width:28px;height:28px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,205,63,.7))}
.artist-browse-avatar-frame,.home-artist-card .artist-art{position:relative}
.artist-bio-superfan-btn,.home-artist-superfan-btn{margin-top:8px}
.home-artist-superfan-btn{width:100%;padding-left:6px;padding-right:6px;font-size:10px;white-space:normal;line-height:1.3}
.live-round-action[data-go="checkout"]{position:relative}
.wire-chat.live-chat-system{opacity:.72}
.wire-chat.live-chat-system p{font-style:italic}
.portal-music-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.portal-upload-track-btn{padding:7px 14px!important;font-size:12px!important}
.portal-music-row{display:grid;grid-template-columns:44px 2fr 100px 80px 1fr 1fr 90px auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #1f3040;font-size:12px}
.portal-music-head{display:grid;grid-template-columns:44px 2fr 100px 80px 1fr 1fr 90px auto;gap:10px;font-size:10px;text-transform:uppercase;color:#8795a2;padding:10px 0 8px;border-bottom:1px solid #223347}
.portal-music-head span,.portal-music-row>b,.portal-music-row>.portal-tag-flat,.portal-music-row>.portal-mood-tag,.portal-music-row>strong,.portal-music-row>.portal-status-tag{text-align:left}
.portal-status-tag{display:inline-block;font-size:10px;font-weight:600;border-radius:20px;padding:3px 10px;white-space:nowrap;letter-spacing:.03em}
.portal-status-published{background:#0d2b1a;border:1px solid #1a5c30;color:#d77a21}
.portal-status-review{background:#1e1a0a;border:1px solid #5c4a10;color:#e0ad3b}
.portal-tag-flat{background:#0f1e2e;border:1px solid #263646;border-radius:20px;color:#a8b5c0;font-size:10px;padding:3px 10px;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}
.portal-mood-tag{font-size:11px;color:var(--muted);text-transform:capitalize}
.portal-upload-screen h3{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.portal-upload-screen h3 small{font-size:10px;font-weight:400;color:#556677;margin-left:6px;text-transform:none;letter-spacing:0}
.portal-upload-grid{display:grid;gap:16px;margin-top:20px}
.portal-upload-top{display:grid;grid-template-columns:1fr 170px;gap:16px;align-items:stretch}
.portal-upload-section{padding:18px;background:#0b1521;border:1px solid #1f3040;border-radius:10px}
.portal-upload-cover-side{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.portal-upload-cover-side small{font-size:10px;color:var(--muted)}
.portal-cover-preview{width:100%;aspect-ratio:1/1;border-radius:8px;border:2px solid #263646;background:#0d1826;display:flex;align-items:center;justify-content:center;font-size:36px;color:#374f66;background-size:cover;background-position:center;flex:1 1 auto;min-height:0}
.portal-audio-upload-area{display:flex;flex-direction:column;gap:10px}
.portal-audio-info{margin-top:4px}
.portal-audio-info [data-audio-filename]{display:block;font-size:12px;color:var(--gold);margin-bottom:10px;word-break:break-all}
.portal-bpm-length-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portal-bpm-length-row label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.portal-bpm-length-row input{font-size:13px;padding:7px 10px;background:#0d1826;border:1px solid #263646;border-radius:6px;color:#f3f0ea;width:100%;box-sizing:border-box}
.portal-bpm-length-row input[readonly]{color:var(--muted)}
.portal-upload-genre-row{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.portal-upload-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}
.upload-track-overlay{z-index:28}
.upload-track-overlay .modal-box{max-width:620px;width:90%;max-height:88vh;overflow-y:auto;padding:28px 28px 24px}
.portal-music-row .avatar{width:36px;height:36px;font-size:11px}
.portal-tag{background:#101d2d;border:1px solid #294154;border-radius:5px;padding:3px 7px;font-size:10px;text-align:center}
.portal-track-actions{display:flex;gap:4px;align-items:center}
.portal-track-delete{background:none;border:1px solid #4a3040;color:#e5798d;border-radius:5px;padding:5px 8px;font-size:10px}
.portal-track-edit{background:none;border:1px solid #2f4a52;color:#7fd8d0;border-radius:5px;padding:5px 8px;font-size:10px}
.portal-track-edit:hover{background:#123a3a;border-color:#00e6d2}
.portal-earning-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.portal-earning-cards article,.fan-stat-grid article{background:linear-gradient(145deg,#101926f4,#07111bf4);border:1px solid #294154;border-radius:10px;padding:14px;display:flex;gap:10px;align-items:flex-start}
.portal-earning-cards i,.fan-stat-grid i{font-style:normal;font-size:18px;color:#f2ca69}
.portal-earning-cards b,.fan-stat-grid b{display:block;font-size:18px;color:#f0f1ed}
.portal-earning-cards span,.fan-stat-grid span{font-size:10px;color:#8795a2}
.portal-earning-cards small,.fan-stat-grid small{font-size:10px;text-transform:uppercase;color:#8795a2}
.portal-period-control{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.portal-period-control button{padding:6px 12px;border:1px solid #35485a;border-radius:16px;background:#09131e;color:#cad3dc;font-size:11px}
.portal-period-control button.active{background:#e5a62e;color:#09101a;border-color:#f2be50}
.portal-chart-grid{display:flex;gap:10px;align-items:flex-end;height:160px;margin-top:12px}
.portal-bars{display:flex;gap:8px;align-items:flex-end;flex:1;height:100%}
.portal-bars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%;gap:4px}
.portal-bars i{display:block;width:100%;background:linear-gradient(180deg,#f2ca69,#df8c25);border-radius:4px 4px 0 0;height:var(--fan-height,10%)}
.portal-bars span{font-size:9px;color:#8795a2}
.portal-chart-y{display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:#8795a2;height:100%}
.fan-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.fan-filter-buttons{display:flex;gap:8px}
.fan-filter-buttons button{padding:6px 12px;border:1px solid #35485a;border-radius:16px;background:#09131e;color:#cad3dc;font-size:11px}
.fan-filter-buttons button.active{background:#e5a62e;color:#09101a;border-color:#f2be50}
.fan-music-card{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #1f3040}
.fan-music-card[hidden]{display:none}
.fan-track-actions{display:flex;gap:6px}
.track-preview-modal{width:min(420px,92vw);padding:26px;text-align:center}
.track-preview-player{display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:16px}
.track-preview-player .avatar{width:56px;height:56px;flex:none}
.track-preview-bar{height:6px;border-radius:3px;background:#1f3040;overflow:hidden}
.track-preview-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f9cc58,#df8c25);transition:width 1s linear}
.track-preview-modal time{display:block;margin-top:8px;font-size:11px;color:#8795a2}
.fan-music-card .avatar{width:44px;height:44px;font-size:12px}
.fan-music-card span{font-size:10px;color:#8795a2}
.fan-playlist-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fan-builder-grid{display:grid;gap:12px;margin:12px 0}
.fan-playlist-grid{display:grid;gap:8px;margin-top:10px}
.fan-playlist-card{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #223347;border-radius:8px}
.fan-playlist-card .portal-photo-preview{flex:none}
.fan-playlist-card small{display:block;color:#8795a2;font-size:10px}
.fan-playlist-card span{font-size:10px;color:#8795a2}
.fan-settings-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.fan-card-preview{background:linear-gradient(135deg,#1a2438,#0c1420);border-radius:10px;padding:16px;margin-bottom:12px;display:grid;gap:8px;font-size:11px;letter-spacing:.06em}
.fan-card-preview b{font-size:16px;letter-spacing:.1em}
@media(max-width:900px){.artist-portal,.portal-overview-grid,.fan-playlist-layout,.fan-settings-grid{grid-template-columns:1fr}.portal-sidebar-inner{position:static}}
@media(max-width:700px){.portal-music-row,.portal-music-head{grid-template-columns:36px 2fr 1fr 1fr}.portal-music-row .portal-tag-flat,.portal-music-row .portal-mood-tag,.portal-music-row .portal-status-tag,.portal-music-head span:nth-child(3),.portal-music-head span:nth-child(4),.portal-music-head span:nth-child(7){display:none}}
.form-grid .wide{grid-column:1/-1}
.form-grid label{font-size:11px;color:#d5bd87;text-transform:uppercase;display:block;margin:12px 0 5px}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;background:#0a1019;border:1px solid #38465a;border-radius:6px;padding:10px;color:#ecf1f8}
.release-cart[data-love].loved{color:#e5798d;border-color:#8a3a4a}
/* Unify block heading font with h2 site-wide, except the home page. */
body:not(:has(.authentic-syntera-home)) .page-title{font-family:"Trebuchet MS",Arial,sans-serif!important}
.release-actions{display:flex;gap:6px}
/* Unify all pop-up close buttons: red square, black X. */
.close{background:#c0392b!important;color:#000!important;border-radius:0!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
.close:hover{background:#e74c3c!important}
.playlist-modal{width:min(560px,92vw);padding:26px}
.playlist-modal h2{margin:6px 0 2px}
/* Live session conversation and history redesign. */
body:has(.live-session-redesign) .live-hero-wire{height:230px!important;grid-template-columns:minmax(0,1fr) 370px!important;background:radial-gradient(ellipse at 79% 47%,#0a7ea94f,transparent 30%),radial-gradient(ellipse at 56% 50%,#d9942738,transparent 31%),linear-gradient(100deg,#040a12,#07111b 66%,#03080e)!important;border:1px solid #273948;border-radius:9px 9px 0 0}
body:has(.live-session-redesign) .live-hero-wire:before{content:'';position:absolute;right:4%;top:12%;width:34%;height:76%;background:radial-gradient(ellipse,#96652232,transparent 68%);filter:blur(9px);pointer-events:none}
.live-session-redesign .live-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:24px 36px}
.live-session-redesign .live-hero-copy h1{font-size:41px}
.live-session-redesign .live-hero-copy h1 em{color:#e9ad35}
.live-session-redesign .live-hero-copy>p{margin:10px 0 15px}
.live-session-redesign .live-hero-actions{flex-wrap:wrap}
.live-session-listeners{padding:0 16px;border-left:1px solid #3c4a55;color:#97a5b0;font-size:10px}
.live-session-listeners b{display:block;color:#d77a21;font-size:15px}
.live-session-track{display:flex;flex-direction:column;gap:2px;color:#dbe1e4;font-size:10px}
.live-session-track small{color:#e4aa38;text-transform:uppercase;letter-spacing:.08em;font-size:8px}
.live-hero-equalizer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:100%;padding:42px 44px}
.live-hero-equalizer i{width:5px;height:var(--live-bar);max-height:120px;min-height:20px;border-radius:6px;background:linear-gradient(#d77a21,#d77a21 58%,#e2a52f);opacity:.78;box-shadow:0 0 8px #26b9d655;animation:live-session-bars 1.15s ease-in-out infinite alternate}
.live-hero-equalizer i:nth-child(3n){animation-delay:.18s}
.live-hero-equalizer i:nth-child(4n){animation-delay:.38s}
.live-hero-equalizer i:nth-child(5n){animation-delay:.56s}
@keyframes live-session-bars{to{transform:scaleY(.48);filter:brightness(1.3)}}
.live-session-grid{grid-template-columns:minmax(0,1.6fr) minmax(340px,.72fr)!important;gap:15px!important;margin-top:15px}
.live-session-grid .conversation-panel,.live-session-grid .history-panel{grid-column:auto!important;grid-row:auto!important;height:520px;min-height:520px;display:grid;background:rgb(3,8,14);border-color:#2a3d4c}
.live-session-grid .conversation-panel{grid-template-rows:55px 62px minmax(0,1fr)}
.live-session-grid .history-panel{grid-template-rows:55px minmax(0,1fr)}
.live-session-grid .wire-panel-title{height:55px;padding:0 17px;background:#07111a;border-bottom-color:#273b49}
.live-session-grid .wire-panel-title>span{display:flex;flex-direction:column;gap:3px;color:#eef0ed;font-size:13px}
.live-session-grid .wire-panel-title>span small{color:#82919c;font-size:9px;font-weight:400}
.live-session-grid .wire-panel-title>strong{display:flex;align-items:center;gap:6px;color:#d77a21;font-size:9px;font-weight:700}
.live-session-grid .wire-panel-title>strong i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e83d48;box-shadow:0 0 8px #e83d48}
.live-session-grid .wire-chat-feed{max-height:none;height:auto;padding:5px 17px 13px;overflow-y:scroll;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b17c28 #08121b}
.live-session-grid .wire-chat-feed::-webkit-scrollbar,.wire-history-list::-webkit-scrollbar{width:9px}
.live-session-grid .wire-chat-feed::-webkit-scrollbar-track,.wire-history-list::-webkit-scrollbar-track{background:#08121b;border-left:1px solid #1d303e}
.live-session-grid .wire-chat-feed::-webkit-scrollbar-thumb,.wire-history-list::-webkit-scrollbar-thumb{background:#9d7126;border:2px solid #08121b;border-radius:10px}
.live-session-grid .wire-chat{grid-template-columns:36px 1fr;gap:10px;padding:12px 2px}
.live-session-grid .wire-chat>span{width:36px;height:36px;background:linear-gradient(135deg,#d59c3b,#6f3970);font-size:9px}
.live-session-grid .wire-chat p{font-size:11px;line-height:1.48}
.live-session-grid .wire-chat p small{margin-left:10px}
.live-session-grid .wire-chat-compose{grid-template-columns:1fr 42px;gap:8px;padding:11px 17px;border-bottom:1px solid #243846;background:#060e16}
.live-session-grid .wire-chat-compose input{height:39px;padding:10px 12px;font-size:11px}
.live-session-grid .wire-chat-compose button{display:grid;place-items:center;border:1px solid #8e6726;border-radius:5px;background:#d99d2c;color:#071019;font-size:19px}
.wire-history-list{min-height:0;overflow-y:scroll;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b17c28 #08121b}
.live-session-grid .wire-history-row{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;min-height:61px;padding:9px 12px}
.live-session-grid .wire-history-row .cover-play-wrap{width:38px;height:38px}
.live-session-grid .wire-history-row .avatar{width:38px;height:38px;border-radius:5px;color:transparent}
.live-session-grid .wire-history-row .cover-play-btn{width:18px;height:18px;font-size:7px}
.live-session-grid .wire-history-row>div{min-width:0}
.live-session-grid .wire-history-row b,.live-session-grid .wire-history-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-session-grid .wire-history-row b{font-size:10px}
.live-session-grid .wire-history-row small{margin-top:3px;font-size:8px}
.live-session-grid .wire-history-row time{font-size:8px;white-space:nowrap}
@media(max-width:940px){body:has(.live-session-redesign) .live-hero-wire{grid-template-columns:1fr 260px!important}.live-hero-equalizer{padding:45px 25px}.live-session-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr)!important}}
@media(max-width:720px){body:has(.live-session-redesign) .live-hero-wire{height:auto!important;min-height:310px;grid-template-columns:1fr!important}.live-session-redesign .live-hero-copy{padding:27px 20px}.live-session-redesign .live-hero-copy h1{font-size:32px}.live-hero-equalizer{position:absolute;right:0;top:0;width:38%;padding:60px 18px;opacity:.28}.live-session-grid{grid-template-columns:1fr!important}.live-session-grid .conversation-panel{height:500px}.live-session-grid .history-panel{height:430px;min-height:430px}}
.live-session-grid .fan-comment{background:linear-gradient(90deg,#112330,#07111a);margin:0 -4px;padding-left:6px;padding-right:6px}
.live-session-grid .fan-comment>span{background:linear-gradient(135deg,#d77a21,#d77a21)}
.live-session-grid .wire-chat.fan-comment{margin-left:auto;border-color:rgba(234,178,61,.4);background:linear-gradient(135deg,rgba(191,128,24,.27),rgba(215, 122, 33,.23))}
.live-session-grid .wire-chat-compose{position:relative;grid-template-columns:minmax(0,1fr) 42px!important;overflow:visible;z-index:5}
.wire-chat-entry{position:relative;min-width:0}
.live-session-grid .wire-chat-entry input{width:100%;height:42px!important;padding:10px 45px 10px 14px!important;border-radius:22px!important;background:#111923!important;border-color:#344756!important}
.wire-emoji-toggle{position:absolute!important;right:5px;top:5px;width:32px!important;height:32px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#f1c654!important;font-size:21px!important;box-shadow:none!important}
.wire-emoji-toggle[aria-expanded="true"]{background:#263442!important;color:#fff!important}
.wire-emoji-picker{position:absolute;right:0;bottom:calc(100% + 9px);display:flex;flex-wrap:wrap;gap:4px;width:246px;padding:8px;border:1px solid #40505e;border-radius:12px;background:rgba(12,20,29,.98);box-shadow:0 16px 34px rgba(0,0,0,.55);z-index:20}
.wire-emoji-picker[hidden]{display:none!important}
.wire-emoji-picker button{display:grid!important;place-items:center!important;width:40px!important;height:36px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#fff!important;font-size:21px!important;box-shadow:none!important}
.wire-emoji-picker button:focus{outline:none;background:#2a3947!important;transform:scale(1.08)}
.live-session-grid .wire-chat-send{display:grid!important;place-items:center!important;width:42px;height:42px;border:1px solid #8e6726!important;border-radius:50%!important;background:#d99d2c!important;color:#071019!important;font-size:18px!important}
@media(max-width:520px){.wire-emoji-picker{right:-46px;width:220px}.wire-emoji-picker button{width:36px!important}}
.filter-heading b{font-family:"Trebuchet MS",Arial,sans-serif!important}
.genre-multiselect[hidden],.language-tile-grid[hidden]{display:none!important}
.genre-modal .language-tile-grid{margin-top:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.genre-open-btn{display:inline-flex;align-items:center;gap:6px;background:#1a2431;border:1px solid #3c4d61;border-radius:7px;padding:8px 13px;color:#f2ca69}.genre-open-btn:hover{border-color:#efad31;background:#22303f}.genre-open-btn b{font-family:"Trebuchet MS",Arial,sans-serif!important}
.genre-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.genre-chip{display:inline-flex;align-items:center;gap:6px;background:#182634;border:1px solid #35495c;border-radius:16px;padding:5px 6px 5px 12px;font-size:12px;color:#ecf1f8}
.genre-chip-empty{font-size:12px;color:var(--muted)}
.genre-chip-x{width:18px;height:18px;border-radius:4px;background:#c0392b;color:#000;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;font-size:12px}.genre-chip-x:hover{background:#e74c3c}
.genre-modal{width:min(640px,92vw)}
.genre-modal .genre-multiselect{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.genre-modal .genre-multiselect button{background:#0a1019;border:1px solid #38465a;border-radius:20px;padding:8px 14px;font-size:12px;color:#ecf1f8}
.genre-modal .genre-multiselect button.selected,.genre-modal .genre-multiselect button[aria-pressed="true"]{background:linear-gradient(100deg,#efad31,#d77a21);color:#ffffff;border-color:#8d4927}

/* About page: Syntera Ecosystem layout, recreated with SVG glow + real brand assets. */
.about-page.ecosystem-about{background:radial-gradient(ellipse at 50% 0%,#0c1626 0%,#050a12 60%);border-radius:14px;padding:36px clamp(16px,3vw,40px) 44px}
.ecosystem-about .ecosystem-header{text-align:center;margin:0 0 10px}
.ecosystem-about .ecosystem-header .page-title{margin:0 0 6px}
.ecosystem-subhead{color:var(--muted);text-align:center;letter-spacing:.24em;font-size:12px}
.ecosystem-hero{position:relative;max-width:1400px;margin:10px auto 20px;display:flex;align-items:center;justify-content:center;gap:0}
.ecosystem-glow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ecosystem-circle{position:relative;z-index:1;width:min(30vw,300px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:6px}
.ecosystem-mark{width:46px;height:auto;margin-bottom:4px}
.ecosystem-mark.small{width:64px}
.ecosystem-circle b{font:800 17px "Trebuchet MS",Arial,sans-serif;letter-spacing:.03em;color:#fff;line-height:1.15}
.ecosystem-circle small{color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.ecosystem-circle span{color:var(--muted);font-size:11.5px;margin-top:8px;line-height:1.4}
.ecosystem-arrow{position:relative;z-index:1;color:var(--gold);font-size:22px;opacity:.8;flex:none;margin:0 -6px}
.ecosystem-hotspots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:0 auto 30px}
.ecosystem-hotspot{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:linear-gradient(145deg,#111925,#0c121c);border:1px solid var(--line);border-radius:10px;padding:16px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ecosystem-hotspot:hover,.ecosystem-hotspot:focus-visible{transform:translateY(-6px);box-shadow:0 16px 32px #0007;border-color:#e0ad3b;outline:none}
.ecosystem-hotspot-icon{width:34px;height:34px;display:grid;place-items:center}
.ecosystem-hotspot-icon img{width:100%;height:100%;object-fit:contain}
.ecosystem-hotspot b{font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.ecosystem-pop{position:absolute;left:16px;right:16px;bottom:calc(100% + 10px);background:#0a121c;border:1px solid #e0ad3b;border-radius:10px;padding:12px 14px;font-size:12px;color:#dbe2ea;line-height:1.5;box-shadow:0 14px 30px #000a;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;z-index:5}
.ecosystem-hotspot:hover .ecosystem-pop,.ecosystem-hotspot:focus-visible .ecosystem-pop{opacity:1;transform:translateY(0);pointer-events:auto}
.ecosystem-tagline{text-align:center;margin:0 0 4px;font-size:15px;color:#e5e9ee;letter-spacing:.04em}
.ecosystem-tagline-sub{text-align:center;margin:0 0 30px;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:900px){.ecosystem-hero{flex-direction:column;gap:18px}.ecosystem-arrow{transform:rotate(90deg)}.ecosystem-circle{width:min(70vw,300px)}.ecosystem-glow{display:none}.ecosystem-hotspots{grid-template-columns:1fr}}

/* About page: static ecosystem image with cut-out hover-pop hotspot buttons. */
body:has(.about-static-image) .wrap{max-width:none!important;padding:0!important}
.about-page.about-static-image{background:#050a12;padding:0;border-radius:0;display:flex;align-items:flex-start;justify-content:center}
.about-hero-wrap{position:relative;width:100%;aspect-ratio:3200/1798}
.about-hero-wrap>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.about-hero-wrap:before,.about-hero-wrap:after{content:'';position:absolute;top:0;bottom:0;width:25px;z-index:1;pointer-events:none}
.about-hero-wrap:before{left:0;background:linear-gradient(90deg,#050a12,transparent)}
.about-hero-wrap:after{right:0;background:linear-gradient(270deg,#050a12,transparent)}
.about-hotspot{position:absolute;padding:0;border:0;background:none;border-radius:10px;cursor:pointer;transition:transform .2s ease,filter .2s ease;z-index:2}
.about-hotspot img{display:block;width:100%;height:100%;border-radius:10px}
.about-hotspot:hover,.about-hotspot:focus-visible{transform:translateX(-4px);filter:brightness(1.08);outline:none;z-index:3}
.hotspot-corporate{left:1.75%;top:68.08%;width:31.25%;height:18.35%}
.hotspot-tech{left:33.94%;top:68.08%;width:31.56%;height:18.35%}
.hotspot-creative{left:67.5%;top:68.08%;width:31.25%;height:18.35%}
@media(max-width:760px){.about-hero-wrap{aspect-ratio:auto}.about-hero-wrap>img{height:auto;object-fit:contain}.about-hotspot{display:none}}

/* Ecosystem header banner: shown at the top of every page except home. */
.page-eco-banner{display:block;width:100%;height:70px;object-fit:contain;object-position:center;margin:0 0 18px;border-radius:0}
body:has(.about-static-image) .page-eco-banner{margin:0;border-radius:0}

/* Round Syntera logo in the top nav, shown on every page. */
.site-logo{display:flex!important;align-items:center;flex:none;margin-right:6px}
.site-logo img{height:36px;width:36px;border-radius:50%;display:block}
@media(max-width:760px){.site-logo img{height:30px;width:30px}}

/* Artist bio: centered floating overlay, below the nav bar, with only the release list scrolling. */
.modal.artist-bio-overlay{background:#000a;align-items:flex-start;justify-content:center;padding:96px 20px 20px;z-index:1001;overflow:hidden}
.artist-bio-box{
  width:min(860px,94vw);
  height:calc(100vh - 132px);
  max-height:calc(100vh - 132px);
  display:flex;
  flex-direction:column;
  background-image:
  linear-gradient(rgba(4,9,16,.88),rgba(4,9,16,.92)),
  url('assets/background-syntera.png');
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
  border:1px solid #2a3c4c;
  border-radius:16px;
  padding:24px 24px 20px;
  position:relative;
  box-shadow:0 30px 90px #000a;
  animation:bioOverlayIn .2s ease;
  min-height:0;
  overflow:hidden;
}
@keyframes bioOverlayIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.artist-bio-box .close{position:absolute;right:18px;top:18px}
.artist-bio-top-grid{display:grid;grid-template-columns:auto 1fr auto;column-gap:16px;row-gap:8px;align-items:start;margin-bottom:14px;padding-right:40px}
.artist-bio-avatar-frame{grid-column:1;grid-row:1;flex:none;padding:4px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#8d4927,var(--cyan));box-shadow:0 6px 20px #0007}
.artist-bio-avatar-frame .avatar{height:74px;width:74px;border:3px solid #0d1520;border-radius:6px}
.artist-bio-namecol{grid-column:2;grid-row:1}
.artist-bio-namecol h2{margin:2px 0}
.artist-bio-box .statline{grid-column:1/3;grid-row:2;margin:0}
.artist-bio-box .btn{width:100%;text-align:center;margin:6px 0 14px}
.artist-bio-follow-btn{grid-column:3;grid-row:1;justify-self:start;align-self:start;width:auto!important;padding:9px 22px;font-size:12px;margin:0!important}
.artist-bio-social-row{grid-column:3;grid-row:2;justify-self:start;align-self:start;display:flex;gap:6px}
.social-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:13px;color:#fff;background:#2a3b52}
.social-icon.yt{background:#ff0000}
.social-icon.am{background:#fa233b}
.social-icon.sp{background:#1db954}
.social-icon.tt{background:#111}
@media(max-width:620px){.artist-bio-top-grid{grid-template-columns:auto 1fr;padding-right:0}.artist-bio-follow-btn{grid-column:1/3;grid-row:3;justify-self:stretch;margin:10px 0!important}.artist-bio-social-row{grid-column:1/3;grid-row:4}.artist-bio-box .statline{grid-column:1/3}}
.artist-bio-releases-head{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;flex:none}
.artist-bio-releases-head .section-head{justify-content:flex-start;flex-wrap:wrap;row-gap:8px}
.artist-bio-sort-inline{display:flex;align-items:center;gap:10px;margin-left:2cm}
.sort-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.artist-bio-sort-inline button{background:#0a1019;border:1px solid #38465a;color:#c8d0da;border-radius:20px;padding:7px 14px;font-size:11px}
.artist-bio-sort-inline button.active{background:linear-gradient(100deg,#efad31,#d77a21);color:#ffffff;border-color:#8d4927}
@media(max-width:620px){.artist-bio-sort-inline{margin-left:0;flex-wrap:wrap}}
.artist-bio-genre-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.artist-bio-genre-filter button{background:transparent;border:1px solid #38465a;color:#c8d0da;border-radius:6px;padding:6px 12px;font-size:11px}
.artist-bio-genre-filter button.active{background:#e5a62e;border-color:#f4c258;color:#09101a}
.artist-bio-releases-scroll{flex:1;min-height:0;overflow-y:auto;margin-top:4px}
.artist-bio-releases-scroll .release-list{display:grid;gap:10px}
@media(max-width:760px){.modal.artist-bio-overlay{padding:88px 12px 12px}.artist-bio-box{max-height:calc(100vh - 100px);padding:22px 16px 16px}}

/* Ambient Syntera background photo behind every page except Home, Login and About. */
body:not(:has(.authentic-syntera-home)):not(:has(.login-screen)):not(:has(.about-static-image)) .wrap:before{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:0 -12vw!important;
  z-index:-1!important;
  opacity:1!important;
  pointer-events:none!important;
  background-image:
    linear-gradient(rgba(5,10,18,.42),rgba(5,10,18,.42)),
    radial-gradient(ellipse at center, transparent 0%, transparent 55%, #050a12 100%),
    linear-gradient(90deg,#050a12 0%,transparent 10%,transparent 90%,#050a12 100%),
    linear-gradient(180deg,#050a12 0%,transparent 12%,transparent 85%,#050a12 100%),
    url('assets/background-syntera.png')!important;
  background-size:cover,cover,cover,cover,cover!important;
  background-position:center center,center center,center center,center center,center center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
body:not(:has(.authentic-syntera-home)):not(:has(.login-screen)):not(:has(.about-static-image)) .wrap:after{display:none!important}

/* Slight panel transparency everywhere except Home and About, so the ambient background shows through. */
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .panel,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .wire-panel,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .component-panel,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .artist-portal-sidebar,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .portal-selected-plan,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .portal-artist-identity,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .analytics-metrics article,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .artist-plan-card,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .payout-note,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .analytics-table,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .portal-earning-cards article,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .fan-stat-grid article,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .fan-card-preview,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .portal-music-row,
body:not(:has(.authentic-syntera-home)):not(:has(.about-static-image)) .fan-music-card {
  background:linear-gradient(145deg,rgba(11,22,33,.7),rgba(6,14,23,.66))!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}


/* Portal pages — stronger transparency overriding the general rule (higher specificity) */

/* Universal row hover highlight across all grid/list blocks */
.release-row:hover,.portal-music-row:hover,.community-entry:hover,
.wire-history-row:hover,.explore-release:hover,.fan-music-card:hover,
.fan-playlist-card:hover,.portal-earning-cards article:hover,
.analytics-metrics article:hover,.fan-stat-grid article:hover,
.artist-browse-card:hover,.home-song-card:hover {
  background:rgba(215, 122, 33,.07)!important;
  transition:background .15s ease;
}
.release-row,.portal-music-row,.community-entry,.wire-history-row,
.explore-release,.fan-music-card,.fan-playlist-card,.home-song-card {
  transition:background .15s ease;
}

/* Top 10: compact "last week's winner" block, image scaled to match. */
.winner-card{grid-template-columns:95px 1fr!important}
.winner-bottom-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.winner-cover{height:95px!important;font-size:30px!important;border-radius:8px!important}

/* Weekly Jukebox: framed artwork for last week's winning track. */
.winner-card .winner-cover{
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:12px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  background-image:
    linear-gradient(180deg,rgba(3,6,14,.05),rgba(3,6,14,.42)),
    url('https://images.unsplash.com/photo-1493676304819-0d7a8d026dcf?auto=format&fit=crop&w=500&q=85')!important;
  background-position:center!important;
  background-size:cover!important;
  border:3px solid rgba(239,190,73,.92)!important;
  color:#fff!important;
  font-family:Arial,sans-serif!important;
  font-weight:900!important;
  line-height:1!important;
  text-shadow:0 2px 8px #000,0 0 14px rgba(239,190,73,.9)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.62),0 0 24px rgba(239,190,73,.28)!important;
}
.winner-card .winner-cover::after{
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:4px;
  pointer-events:none;
}
.winner-card h2{font-size:26px!important;margin:2px 0!important}
.jukebox-winner-art{padding:0!important;display:grid!important;place-items:center!important;isolation:isolate}
.jukebox-winner-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.jukebox-winner-art>strong{position:absolute;top:8px;left:8px;z-index:3;font-size:22px;line-height:1;color:#fff;text-shadow:0 2px 8px #000}
.jukebox-winner-art .jukebox-winner-play{position:absolute!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;z-index:5!important;width:46px!important;height:46px!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:50%!important;background:rgba(2,7,16,.72)!important;color:#fff!important;display:grid!important;place-items:center!important;cursor:pointer!important;box-shadow:0 0 22px rgba(215, 122, 33,.72)!important}

/* Explore page: mood/bpm/length columns, shorter rows, white play button, round like/cart buttons. */
.explore-release{grid-template-columns:22px 44px minmax(160px,1fr) 84px 62px 56px 70px!important;padding:5px 7px!important;gap:10px!important}
.explore-release .release-art{height:44px!important;width:44px!important}
.explore-release .release-mood{font-size:11px;color:var(--muted);text-transform:capitalize}
.explore-release .release-bpm{font-size:11px;color:var(--muted);white-space:nowrap}
.explore-release .release-length{font-size:11px;color:var(--muted);white-space:nowrap}
.explore-release .release-preview button{background:#fff!important;color:#111!important}
.release-cart,.explore-release .release-cart{width:32px;height:32px;padding:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:14px}
.explore-release-head{display:grid!important;padding:0 7px 8px!important;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:0!important;align-items:end}
@media(max-width:620px){.explore-release,.explore-release-head{grid-template-columns:20px 40px 1fr 42px!important}.explore-release .release-mood,.explore-release .release-bpm,.explore-release .release-length,.explore-release-head span:nth-child(4),.explore-release-head span:nth-child(5),.explore-release-head span:nth-child(6){display:none}}

/* Fix: a later :root redefines --ink to a dark color, making dark modal text invisible. */
.modal-box.dark{color:#f7f3ec!important}

/* Play button on every row's cover art: opens the floating track-preview player. */
.cover-play-wrap{position:relative;display:block}
.explore-release .cover-play-wrap{width:44px;height:44px}
.chart-row .cover-play-wrap{width:48px;height:48px}
.cover-play-btn{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;background:#fff;color:#111;font-size:9px;display:grid;place-items:center;opacity:1;transition:transform .15s ease;padding:0;line-height:1;box-shadow:0 2px 6px #0008}
.cover-play-btn:focus-visible{transform:scale(1.12)}

/* Explore page: Tracks/Artists mode toggle and artist browse grid. */
.explore-mode-toggle{
  display:flex;
  gap:8px;
  margin:0;
}

.filter-primary-controls{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.filter-primary-controls > small{
  flex-basis:100%;
}

@media(max-width:620px){
  .filter-primary-controls{
    align-items:flex-start;
  }

  .explore-mode-toggle{
    width:100%;
    flex-wrap:wrap;
  }
}
.explore-mode-toggle button{background:#0a1019;border:1px solid #38465a;color:#c8d0da;border-radius:20px;padding:9px 18px;font-size:12px;font-weight:700}
.explore-mode-toggle button.active{background:linear-gradient(100deg,#efad31,#d77a21);color:#ffffff;border-color:#8d4927}
.artist-browse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.artist-browse-card{display:flex;flex-direction:row;align-items:center;gap:13px;text-align:left;background:#0b1521;border:1px solid #263646;border-radius:10px;padding:13px 14px;transition:transform .15s ease,border-color .15s ease;width:100%;cursor:pointer}
.artist-browse-card:hover{transform:translateY(-3px);border-color:#e0ad3b}
.artist-browse-avatar-frame{flex:none;padding:3px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#8d4927,var(--cyan));box-shadow:0 4px 14px #0007}
.artist-browse-avatar-frame .avatar{height:56px;width:56px;border:2px solid #0d1520;border-radius:5px;font-size:16px}
.artist-browse-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.artist-browse-info b{font-size:13px;color:#f3f0ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.artist-browse-info small{font-size:10px;color:var(--muted);display:block}
.artist-browse-followers{font-size:10px;color:#e5ab37;display:block;margin-top:2px}
.artist-sort-label{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.04em;margin-left:6px;vertical-align:middle}
@media(max-width:960px){.artist-browse-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.artist-browse-grid{grid-template-columns:1fr}}
[data-tracks-only][hidden],[data-artists-only][hidden]{display:none!important}

/* Artist bio releases: widen action column to fit the like + cart buttons, add Liked filter. */
.artist-bio-releases-scroll .release-row{grid-template-columns:26px 58px minmax(200px,1fr) 84px}
.artist-bio-sort-inline [data-release-liked-filter]{background:transparent;border:1px solid #38465a;color:#c8d0da}
.artist-bio-sort-inline [data-release-liked-filter].active{background:#e5798d;border-color:#e5798d;color:#fff}

/* Disabled social icon (no platform link saved): grey, non-interactive. */
.social-icon.disabled{background:#2a3b52;color:#6b7a8c;cursor:not-allowed}

/* Fan portal artist collection refinements. */
.fan-artist-panel{background:linear-gradient(145deg,rgba(11,22,33,.52),rgba(6,14,23,.46))!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fan-artist-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.fan-artist-panel-head h2{font:22px Georgia,serif;margin:0 0 4px;color:#f2ca69}
.fan-artist-panel-head .sub{margin:0}
.fan-artist-card .artist-browse-avatar-frame{width:100%;height:auto;aspect-ratio:1;padding:3px;overflow:hidden}
.fan-artist-card .artist-browse-avatar-frame .avatar{width:100%;height:100%;background-size:cover!important;background-position:center!important}
@media(max-width:620px){.fan-artist-panel-head{align-items:stretch;flex-direction:column}.fan-artist-panel-head .btn{align-self:flex-start}}

/* Explore release date filters. */
.release-window-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.release-window-filters button{padding:8px 11px;border:1px solid #35485a;border-radius:18px;background:#09131e;color:#cad3dc;font-size:11px;white-space:nowrap}
.release-window-filters button.active,.release-window-filters button:hover{background:#e5a62e;color:#09101a;border-color:#f4c258}
@media(max-width:620px){.release-window-filters{width:100%}.release-window-filters button{flex:1;padding:8px 7px;font-size:10px}}

/* Explore tracks: release date and non-interactive table heading. */
.explore-release{grid-template-columns:22px 44px minmax(160px,1fr) 94px 84px 62px 56px 70px!important}
.explore-release-head:hover{background:transparent!important}
.explore-release-head{cursor:default}
.release-date{font-size:11px;color:var(--muted);white-space:nowrap;font-style:normal}
@media(max-width:620px){.explore-release,.explore-release-head{grid-template-columns:20px 40px 1fr 42px!important}.explore-release .release-date,.explore-release .release-mood,.explore-release .release-bpm,.explore-release .release-length,.explore-release-head span:nth-child(4),.explore-release-head span:nth-child(5),.explore-release-head span:nth-child(6),.explore-release-head span:nth-child(7){display:none!important}}

/* Selected controls in the Explore filter bar. */
.filter-clear.selected,.my-style-filter.selected{background:#e5a62e!important;color:#09101a!important;border-color:#f4c258!important;box-shadow:0 0 0 1px rgba(242,190,80,.28)}

/* Keep the Syntera backdrop visible across the full viewport on every route. */
html,body{min-height:100%;min-height:100dvh}
body{min-height:100vh;min-height:100dvh}
main#app{min-height:100vh!important;min-height:100dvh!important;background-image:linear-gradient(rgba(3,8,14,.46),rgba(3,8,14,.58)),url('assets/background-syntera.png')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
main#app>.wrap{min-height:inherit}

/* The landing page deliberately uses colour only; every other route retains the site artwork. */
body:has(.component-home),
body:has(.component-home) .wrap,
body:has(.component-home) main#app{
  background-image:radial-gradient(ellipse at 78% 10%,#123754 0,transparent 32%),radial-gradient(ellipse at 16% 62%,#281737 0,transparent 27%),linear-gradient(135deg,#050a12,#101b2b)!important;
  background-color:#050a12!important;
}
/* The current Syntera landing page layout is also image-free. */
body:has(.authentic-syntera-home),
body:has(.authentic-syntera-home) .wrap,
body:has(.authentic-syntera-home) main#app{
  background-image:radial-gradient(ellipse at 78% 10%,#123754 0,transparent 32%),radial-gradient(ellipse at 16% 62%,#281737 0,transparent 27%),linear-gradient(135deg,#050a12,#101b2b)!important;
  background-color:#050a12!important;
}
/* Unified favourite / like controls. */
button[data-love],
button[data-artist-love],
button[data-liked-filter],
button[data-release-liked-filter],
.heart{
  color:#f2ca69!important;
  border-color:rgba(215, 122, 33,.58)!important;
}
.release-cart[data-love].loved,
.release-cart[data-artist-love].loved,
button[data-liked-filter].selected,
button[data-release-liked-filter].active{
  color:#f2ca69!important;
  border-color:#f2ca69!important;
  background:rgba(215, 122, 33,.14)!important;
  box-shadow:0 0 0 1px rgba(215, 122, 33,.16)!important;
}
/* Weekly Jukebox winner alignment. */
.winner-card .eyebrow{color:#d77a21!important;}
.artist-role-options [data-artist-role="Electronic Pop"]{display:none!important;}
.winner-card .lead{white-space:nowrap;}

/* Homepage alignment: navigation and hero copy share the Trending panel edge. */
body:has(.wireframe-home){--wf-aligned-edge:max(22px,calc((100vw - 1420px)/2));}
body:has(.wireframe-home) .wf-home-header-overlay,
body:has(.wireframe-home) .wf-hero-hotspots{
  left:var(--wf-aligned-edge)!important;
}
@media(min-width:981px){
  body:has(.wireframe-home) .site-header nav{
    position:absolute!important;
    left:var(--wf-aligned-edge)!important;
    width:auto!important;
    flex:none!important;
  }
}
@media(max-width:980px){
  body:has(.wireframe-home){--wf-aligned-edge:12px;}
}

/* Keep the complete homepage header in one responsive, non-overlapping row. */
body:has(.wireframe-home) .site-header{
  padding-left:var(--wf-aligned-edge)!important;
  padding-right:var(--wf-aligned-edge)!important;
  gap:18px!important;
}
body:has(.wireframe-home) .site-logo{
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  margin-right:12px!important;
}
body:has(.wireframe-home) .site-header nav{
  position:static!important;
  left:auto!important;
  width:auto!important;
  min-width:0!important;
  flex:1 1 auto!important;
  gap:clamp(18px,2.1vw,29px)!important;
}
body:has(.wireframe-home) .site-header .search{
  flex:0 1 244px!important;
  margin-left:auto!important;
}
body:has(.wireframe-home) .site-header .topbtn{flex:0 0 auto!important;}
@media(max-width:760px){
  body:has(.wireframe-home) .site-logo{margin-right:2px!important;}
  body:has(.wireframe-home) .site-header nav{gap:18px!important;overflow-x:auto!important;}
}
.winner-bottom-row{align-items:flex-end!important;flex-wrap:nowrap!important;}
.winner-bottom-row .winner-meta{margin:8px 0 0!important;}
@media(max-width:760px){.winner-card .lead{white-space:normal;}.winner-bottom-row{flex-wrap:wrap!important;}}
/* Fan create-playlist floating overlay */
.fan-create-playlist-overlay{position:fixed;inset:0;z-index:29;background:rgba(2,7,16,.78);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}
.fan-create-playlist-overlay[hidden]{display:none}
.fan-create-playlist-frame{width:min(620px,96vw);max-height:90vh;overflow-y:auto;padding:24px;border-radius:12px}
.fan-create-overlay-title{align-items:flex-start!important}
.fan-create-close-btn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #374f62;background:#0a1520;color:#a0b0bf;font-size:20px;line-height:1;display:grid;place-items:center;transition:border-color .15s,color .15s}
.fan-create-close-btn:hover{border-color:var(--gold);color:var(--gold)}
.fan-playlist-head-actions{display:flex;align-items:center;gap:14px}
.fan-playlist-head-actions span{font-size:12px;color:var(--muted)}
/* Fan playlist list and editor. */
.fan-playlist-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:14px;cursor:pointer;text-align:left;transition:border-color .16s,background .16s,transform .16s}
.fan-playlist-card:hover,.fan-playlist-card.selected{border-color:#f2ca69!important;background:linear-gradient(90deg,rgba(215, 122, 33,.16),rgba(12,27,39,.92))!important;box-shadow:inset 3px 0 #f2ca69}
.fan-playlist-name{min-width:0}.fan-playlist-name b,.fan-playlist-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fan-playlist-name b{color:#f4f6f8}.fan-playlist-name small{margin-top:3px}.fan-playlist-pagination{margin-top:14px}
.playlist-modal{width:min(760px,94vw)!important}.playlist-add-section{margin-top:18px;padding-top:16px;border-top:1px solid #30455a}.playlist-add-section h3{margin:0 0 12px;color:#f1c35d;font-size:16px}.playlist-add-filters{margin-bottom:12px}.playlist-artist-filter-label{display:block;font-size:10px;color:#d5bd87;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}.playlist-artist-filter-select{width:100%;max-width:280px;background:#07111b;border:1px solid #38516a;border-radius:6px;padding:9px 11px;color:#e9edf1;font-size:12px;cursor:pointer}.playlist-artist-filter-select:focus{outline:1px solid #e9b640;border-color:#e9b640}.playlist-add-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:210px;overflow:auto;padding-right:3px}.playlist-add-track{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #30475c;border-radius:7px;background:#08131e;cursor:pointer}.playlist-add-track:has(input:checked){border-color:#f2ca69;background:rgba(215, 122, 33,.11)}.playlist-add-track input{accent-color:#f2ca69}.playlist-add-track b,.playlist-add-track small{display:block}.playlist-add-track small{margin-top:3px;color:var(--muted);font-size:10px}.playlist-save-row{display:flex;align-items:center;gap:12px;margin-top:12px}.playlist-save-row .sub{margin:0}@media(max-width:620px){.fan-playlist-card{grid-template-columns:minmax(0,1fr) 32px;gap:8px}.fan-playlist-card>span{display:none}.playlist-add-list{grid-template-columns:1fr}.playlist-save-row{align-items:flex-start;flex-direction:column}}
/* Clean, left-aligned playlist creator. */
.fan-playlist-layout>.panel:first-child{padding:20px!important}.fan-playlist-layout>.panel:first-child .portal-panel-title{justify-content:flex-start}.fan-builder-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,260px))!important;justify-content:start!important;gap:12px!important}.fan-builder-grid label,.playlist-genre-picker{margin:0!important;text-align:left}.playlist-genre-picker{display:grid;justify-items:start;gap:6px;margin:15px 0!important}.playlist-genre-picker .genre-open-btn{min-width:180px;text-align:left;background:#08131e;border:1px solid #38516a;border-radius:6px;padding:10px 12px;color:#f1c35d}.playlist-genre-picker small{color:var(--muted);font-size:11px}.playlist-genre-picker .genre-chip-row{justify-content:flex-start}.fan-playlist-layout>.panel:first-child [data-create-playlist]{display:block;margin-top:16px;min-width:170px;text-align:left}.fan-playlist-layout>.panel:first-child [data-playlist-status]{text-align:left;margin:8px 0 0}@media(max-width:620px){.fan-builder-grid{grid-template-columns:1fr!important}.fan-playlist-layout>.panel:first-child [data-create-playlist]{width:100%}}
.fan-playlist-layout>.panel:nth-child(2){background:none!important}

/* Portal main areas use the site's ambient background instead of panel gradients. */
.artist-portal-main .panel,.artist-portal-main .wire-panel{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* The ecosystem banner begins directly below the site header on every non-home route. */
body:not(:has(.component-home)) .wrap{padding-top:0!important}

/* Home: keep the capability strip directly beneath Brand Applications and pinned while the home content scrolls. */
body:has(.authentic-syntera-home) .syntera-scroll{flex:0 1 auto!important;min-height:0!important;overflow-y:auto!important}
body:has(.authentic-syntera-home) .authentic-capabilities{position:static!important;bottom:auto!important;z-index:auto!important;display:none!important}

/* Home sticky capability strip follows the page gradient. */
body:has(.authentic-syntera-home) .authentic-capabilities,body:has(.authentic-syntera-home) .authentic-capability-grid{background:transparent!important;background-image:none!important}

.syntera-capabilities-strip{display:block;width:100%;height:auto}

/* Full-width, taller Home capabilities banner. */
body:has(.authentic-syntera-home) .authentic-capabilities{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important}
body:has(.authentic-syntera-home) .syntera-capabilities-strip{width:100%!important;height:auto!important;object-fit:contain!important}

/* Home-only background gradient. */
body:has(.authentic-syntera-home),body:has(.authentic-syntera-home) main,body:has(.authentic-syntera-home) .wrap,body:has(.authentic-syntera-home) .authentic-syntera-home{background:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(0,6,14) 100%)!important;background-image:linear-gradient(90deg,rgb(1,2,6) 0%,rgb(0,6,14) 100%)!important}

/* Home-only solid background. */
body:has(.authentic-syntera-home),body:has(.authentic-syntera-home) main,body:has(.authentic-syntera-home) .wrap,body:has(.authentic-syntera-home) .authentic-syntera-home,body:has(.authentic-syntera-home) .authentic-hero,body:has(.authentic-syntera-home) .exact-hero-scene,body:has(.authentic-syntera-home) .authentic-applications,body:has(.authentic-syntera-home) .authentic-capabilities{background:rgb(0,3,8)!important;background-image:none!important}
/* Ecosystem panel — preserve background image layering after home-only reset. */
body:has(.authentic-syntera-home) .authentic-ecosystem{background:transparent!important;background-image:none!important}
body:has(.authentic-syntera-home) .eco-bg{display:block!important}

/* Home canvas and capability strip alignment. */
html:has(.authentic-syntera-home),body:has(.authentic-syntera-home),body:has(.authentic-syntera-home)::before,body:has(.authentic-syntera-home) main,body:has(.authentic-syntera-home) .wrap{background:rgb(0,3,8)!important;background-image:none!important}
body:has(.authentic-syntera-home)::before{display:none!important}
body:has(.authentic-syntera-home) .authentic-capabilities{width:100%!important;max-width:none!important;margin-left:0!important}
body:has(.authentic-syntera-home) .syntera-capabilities-strip{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important}

body:has(.authentic-syntera-home) .authentic-capabilities{display:none!important}

/* Final Home solid canvas and proportionally smaller capability strip. */
html:has(.authentic-syntera-home),body:has(.authentic-syntera-home),body:has(.authentic-syntera-home)::before,body:has(.authentic-syntera-home)::after,body:has(.authentic-syntera-home) main#app,body:has(.authentic-syntera-home) main#app::before,body:has(.authentic-syntera-home) main#app::after,body:has(.authentic-syntera-home) .wrap,body:has(.authentic-syntera-home) .wrap::before,body:has(.authentic-syntera-home) .wrap::after{background:rgb(0,3,8)!important;background-image:none!important}
body:has(.authentic-syntera-home) .syntera-capabilities-strip{width:auto!important;max-width:100%!important;height:65px!important;object-fit:contain!important;margin:0 auto!important}

/* About-only solid canvas behind the transparent artwork. */
html:has(.about-static-image),body:has(.about-static-image),body:has(.about-static-image)::before,body:has(.about-static-image)::after,body:has(.about-static-image) main#app,body:has(.about-static-image) main#app::before,body:has(.about-static-image) main#app::after,body:has(.about-static-image) .wrap,body:has(.about-static-image) .wrap::before,body:has(.about-static-image) .wrap::after,body:has(.about-static-image) .about-page.about-static-image{background:rgb(6,10,17)!important;background-image:none!important}
body:has(.about-static-image) .about-hero-wrap:before,body:has(.about-static-image) .about-hero-wrap:after{display:none!important}

/* About artwork edge blend. */
body:has(.about-static-image) .about-hero-wrap:before,body:has(.about-static-image) .about-hero-wrap:after{display:block!important;top:0!important;bottom:0!important;width:30px!important;background-image:none!important}
body:has(.about-static-image) .about-hero-wrap:before{left:0!important;background:linear-gradient(90deg,rgb(6,10,17),transparent)!important}
body:has(.about-static-image) .about-hero-wrap:after{right:0!important;background:linear-gradient(270deg,rgb(6,10,17),transparent)!important}

/* Live session picker and broadcast-style conversation. */
.live-session-picker{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:15px;padding:16px 20px;border:1px solid #294050;border-radius:8px;background:#07111a}.live-session-picker h2{margin:4px 0 2px;color:#eef1ef;font:600 22px Georgia,serif}.live-session-picker p{margin:0;color:#84929c;font-size:10px}.live-session-choices{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.live-session-choice{display:grid;grid-template-columns:7px auto;column-gap:7px;align-items:center;padding:8px 11px;border:1px solid #344c5d;border-radius:4px;background:transparent;text-align:left;color:#d8e0e3}.live-session-choice b{font-size:10px;line-height:1.1}.live-session-choice small{grid-column:2;color:#8495a0;font-size:8px;white-space:nowrap}.live-session-choice:hover,.live-session-choice.selected{border-color:#d77a21;background:#0d2732}.live-session-choice.selected b{color:#d77a21}.live-choice-dot{width:6px;height:6px;border-radius:50%;background:#f04a5e;box-shadow:0 0 8px #f04a5e}.live-session-empty{display:grid;place-items:center;gap:6px;min-height:230px;margin-top:15px;border:1px dashed #31495a;border-radius:8px;background:linear-gradient(135deg,#06101a,#081620);color:#dce3e5;text-align:center}.live-session-empty span{color:#d9a12e;font-size:34px}.live-session-empty b{font:500 19px Georgia,serif}.live-session-empty small{color:#8796a0;font-size:10px}.live-session-grid[hidden]{display:none!important}.live-session-grid .wire-history-row{grid-template-columns:38px minmax(0,1fr) auto!important}.live-track-actions{display:flex;gap:5px;grid-column:2/4;justify-content:flex-end}.live-round-action{display:grid;place-items:center;width:25px;height:25px;padding:0;border:1px solid #405365;border-radius:50%;background:#0b1721;color:#dce7ea;font-size:12px}.live-round-action.loved{border-color:#f2ca69;color:#f2ca69;background:#0e2c30}.live-round-action.following{border-color:#f2ca69;color:#f2ca69}.live-session-grid .conversation-panel{background:radial-gradient(circle at 85% 10%,#7833a922,transparent 28%),#03080e}.live-session-grid .wire-chat-feed{background:linear-gradient(180deg,#07111a,#03080e)}.live-session-grid .wire-chat{border:0;margin:3px 0;padding:8px;border-radius:11px;background:#101d29}.live-session-grid .wire-chat:nth-child(3n){background:#14251f}.live-session-grid .wire-chat p{background:#162634;padding:7px 10px;border-radius:3px 12px 12px 12px}.live-session-grid .wire-chat.fan-comment{background:transparent}.live-session-grid .wire-chat.fan-comment p{background:#233a31}.live-session-grid .wire-chat>span{box-shadow:0 0 0 2px #2d4353}.live-session-grid .wire-chat-compose{border-top:1px solid #263d4c;border-bottom:0;background:#07111a}
@media(max-width:820px){.live-session-picker{align-items:flex-start;flex-direction:column}.live-session-choices{justify-content:flex-start}.live-session-choice{flex:1 1 145px}}
/* Fan notifications popover. */
.notifications-menu{position:relative;margin-left:12px;padding:7px 11px;border:1px solid #344858;border-radius:4px;background:transparent;color:#dce5e7;font-size:10px;font-weight:700}.notifications-menu:hover{border-color:#f2ca69;color:#f2ca69}.notifications-menu [data-notification-count]{display:inline-grid;place-items:center;min-width:15px;height:15px;margin-left:5px;border-radius:50%;background:#f2ca69;color:#041016;font-size:8px}.notifications-popover{position:fixed;z-index:1001;top:76px;right:26px;width:min(395px,calc(100vw - 26px));max-height:min(560px,calc(100vh - 96px));overflow:auto;border:1px solid #344b5a;border-radius:8px;background:#07111a;box-shadow:0 22px 60px #000b;color:#eaf0f1}.notifications-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid #263b48}.notifications-head b,.notifications-head small{display:block}.notifications-head b{font:600 18px Georgia,serif}.notifications-head small{margin-top:3px;color:#899aa4;font-size:9px}.notifications-head button,.notification-item>button{border:0;background:transparent;color:#92a1aa;font-size:20px}.notification-item{display:grid;grid-template-columns:32px 1fr 25px;gap:10px;align-items:start;padding:13px 15px;border-bottom:1px solid #1e3240}.notification-item:hover{background:#0c1b26}.notification-item b,.notification-item small,.notification-item time{display:block}.notification-item b{color:#edf1ef;font-size:11px}.notification-item small{margin:3px 0;color:#9aa8af;font-size:9px}.notification-item time{color:#f2ca69;font-size:8px;text-transform:uppercase}.notification-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid #3c5565;border-radius:50%;color:#e3aa32;font-size:14px}.notification-icon.live{border-color:#db4564;color:#f35272;box-shadow:0 0 12px #df365633}.notifications-empty{padding:24px 16px;color:#95a3ab;font-size:11px;text-align:center}@media(max-width:800px){.notifications-menu{margin-left:auto;margin-right:8px}.notifications-popover{top:65px;right:12px;width:calc(100vw - 24px)}}
.login-remember{display:flex!important;align-items:center;gap:7px;margin:13px 0 17px!important;color:#aebbc4!important;font-size:10px!important;text-transform:none!important}.login-remember input{width:auto!important;min-height:auto!important;margin:0}.login-register{margin:16px 0 0;text-align:center;color:#8797a2;font-size:10px}.login-register span{margin:0 7px;color:#60707c}

/* Dark right-edge overlay on the login artwork. */
body:has(.login-screen) .login-art:after{content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 35%,rgba(3,8,14,.3) 63%,rgba(3,8,14,.88) 100%)!important}
body:has(.login-screen) .login-art-logo{z-index:1!important}

/* Artist portal: flat right-hand content and framed sidebar portrait. */
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main,
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .panel,
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .portal-music-row,
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .analytics-metrics article,
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .portal-earning-cards article,
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .payout-note{background:#07111be0!important;background-image:none!important}
body:has([data-artist-portal]):not(:has([data-fan-portal])) .portal-sidebar-photo-frame{flex:none;width:52px;height:52px;padding:3px;border-radius:9px;background:linear-gradient(135deg,var(--gold),#8d4927,var(--cyan));box-shadow:0 4px 14px #0007}
body:has([data-artist-portal]):not(:has([data-fan-portal])) .portal-sidebar-photo-frame .avatar{width:100%;height:100%;border:2px solid #0d1520;border-radius:6px;font-size:16px}
/* Artist Music page: Likes sits between Plays and Purchases. */
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .portal-music-row,
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main .portal-music-head{grid-template-columns:44px 2fr 100px 80px 1fr 1fr 1fr 90px auto}
/* Remove the opaque blue canvas behind Artist and Fan portal blocks. */
body:has([data-artist-portal]) main#app,
body:has([data-fan-portal]) main#app,
body:has([data-artist-portal]) .artist-portal,
body:has([data-fan-portal]) .artist-portal,
body:has([data-artist-portal]) .artist-portal-main,
body:has([data-fan-portal]) .artist-portal-main{background:transparent!important;background-image:none!important}
body:has([data-artist-portal]) .portal-music-row[data-portal-track]{cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
body:has([data-artist-portal]) .portal-music-row[data-portal-track]:hover{background:#132433!important;border-color:#3b6477!important;transform:translateX(2px)}

/* Artist Music table: aligned status and compact remove column. */
body:has([data-artist-portal]) .portal-music-head span:nth-child(8),
body:has([data-artist-portal]) .portal-music-row>.portal-status-tag{justify-self:start;text-align:left}
body:has([data-artist-portal]) .portal-music-head span:nth-child(9),
body:has([data-artist-portal]) .portal-music-row>.portal-track-actions{justify-self:start;text-align:left}
body:has([data-artist-portal]) .portal-track-delete{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid #c94b5b;border-radius:3px;background:#7f1e2b;color:#fff;font-size:18px;line-height:1}
body:has([data-artist-portal]) .portal-track-delete:hover{background:#b32d40;border-color:#ff6879}
body:has([data-artist-portal]) .portal-track-edit{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid #2f6a66;border-radius:3px;background:#0d2f2c;color:#7fd8d0;font-size:13px;line-height:1}
body:has([data-artist-portal]) .portal-track-edit:hover{background:#134944;border-color:#00e6d2}
/* Keep every Artist Music table value aligned below its column heading. */
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-tag-flat,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-mood-tag,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>strong,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-status-tag{justify-self:start!important;text-align:left!important}
/* Exact Artist Music table column alignment. */
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(3),
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(4),
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(8),
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-tag-flat,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-mood-tag,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-status-tag{justify-self:start!important;text-align:left!important}
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(5),
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(6),
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(7),
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>strong{justify-self:end!important;text-align:right!important}
/* Artist Music: headers and values share the same right edge in each metric column. */
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(n+3),
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-tag-flat,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-mood-tag,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>strong,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-status-tag,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-track-actions{justify-self:end!important;text-align:right!important}
/* Let the normal site artwork show beneath the last portal block. */
body:has([data-artist-portal]) main#app,body:has([data-fan-portal]) main#app,
body:has([data-artist-portal]) .wrap,body:has([data-fan-portal]) .wrap,
body:has([data-artist-portal]) .artist-portal-main,body:has([data-fan-portal]) .artist-portal-main{background-color:transparent!important;background-image:none!important}
/* Artist music table: headers and cells use identical column edges. */
body:has([data-artist-portal]) .artist-portal-main .portal-music-head,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row[data-portal-track]{
  grid-template-columns:44px minmax(180px,2fr) 110px 100px 110px 110px 110px 120px 58px!important;
  column-gap:14px!important;
}
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span{
  width:100%!important;
  justify-self:stretch!important;
}
body:has([data-artist-portal]) .artist-portal-main .portal-music-head>span:nth-child(n+3){text-align:right!important}
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-tag-flat,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-mood-tag,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>strong,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-status-tag,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>.portal-track-actions{justify-self:end!important;text-align:right!important}
body:has([data-artist-portal]) .artist-portal-main .portal-music-row>strong{width:100%!important}
/* Artist Music: one database-backed featured release selector. */
body:has([data-artist-portal]) .artist-portal-main .portal-music-head,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row[data-portal-track]{grid-template-columns:44px minmax(180px,2fr) 100px 90px 90px 90px 90px 72px 100px 52px!important}
.portal-featured-check{display:grid;place-items:center;justify-self:end;width:100%;cursor:pointer}
.portal-featured-check input{position:absolute;opacity:0;pointer-events:none}
.portal-featured-check span{display:grid;place-items:center;width:20px;height:20px;border:1px solid #efad31;border-radius:4px;background:#071521;box-shadow:0 0 0 rgba(239, 173, 49,0);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.portal-featured-check input:checked+span{background:linear-gradient(135deg,#d77a21,#efad31);border-color:#d8f7ff;box-shadow:0 0 12px rgba(239, 173, 49,.65)}
.portal-featured-check input:checked+span:after{content:'\2713';color:#fff;font-size:13px;line-height:1}
.portal-featured-check input:focus-visible+span{border-color:#c9f7ff;box-shadow:0 0 12px rgba(239, 173, 49,.55)}
/* Portal columns end with their final block; the site artwork remains visible below. */
body:has([data-artist-portal]):not(:has([data-fan-portal])) .artist-portal-main,
body:has([data-fan-portal]) .artist-portal-main{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
/* Restore the standard site artwork behind transparent portal columns. */
body:has([data-artist-portal]) main#app,
body:has([data-fan-portal]) main#app{
  background-color:#050a12!important;
  background-image:linear-gradient(rgba(3,8,14,.46),rgba(3,8,14,.58)),url('assets/background-syntera.png')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
/* Fan Playlists: collection-led layout inspired by the Klankstal portal. */
.fan-playlists-reference{display:grid;gap:18px}
.fan-playlists-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:8px 2px 2px}
.fan-playlists-hero .eyebrow{color:#d7a83e;font-size:10px;letter-spacing:.16em}
.fan-playlists-hero h1{margin:5px 0 4px;color:#f5f1e8;font:700 34px/1.05 Georgia,serif}
.fan-playlists-hero p{margin:0;color:#9ba9b5;font-size:12px}
.fan-playlists-live{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border:1px solid #38536a;border-radius:6px;background:#08131dcc;color:#e8edf0;font-size:11px;font-weight:700}
.fan-playlist-layout{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
.fan-playlists-reference{display:grid;gap:0}
.fan-playlist-collection{width:100%}
.fan-playlist-create,.fan-playlist-collection{padding:22px!important;border:1px solid #2b4356!important;border-radius:10px!important;background:rgba(7,17,27,.76)!important}
.fan-playlist-new{padding:5px 9px;border:1px solid #83631e;border-radius:4px;background:#35280c;color:#f0bf50;font-size:9px;font-weight:800;letter-spacing:.12em}
.fan-builder-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:none!important;gap:12px!important}
.fan-builder-grid label,.fan-builder-grid>div{min-width:0}
.fan-playlist-create-btn{margin-top:14px!important;min-width:150px!important}
.fan-playlist-grid{gap:10px!important;margin-top:14px!important}
.fan-playlist-card{grid-template-columns:42px minmax(0,1fr) auto 38px!important;min-height:70px;padding:11px 13px!important;border-color:#2a4052!important;background:rgba(8,19,29,.72)!important}
.fan-playlist-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #3c5367;border-radius:7px;background:#101e2a;color:#e0ad42;font-size:18px}
.fan-playlist-name h3{margin:0 0 5px;color:#f0eee9;font-size:14px}
.fan-playlist-name small{color:#9daab5!important;font-size:10px!important}
.fan-playlist-card>span{color:#a7b2bc!important;font-size:10px!important}
.fan-playlist-card .release-cart{border-color:#496175;background:#0b1823;color:#f1c157}
.fan-playlist-pagination{margin-top:14px}
@media(max-width:900px){.fan-builder-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){.fan-playlists-hero{align-items:flex-start;flex-direction:column}.fan-builder-grid{grid-template-columns:1fr!important}.fan-playlist-card{grid-template-columns:38px minmax(0,1fr) 34px!important}.fan-playlist-card>span{display:none}.fan-playlist-create,.fan-playlist-collection{padding:16px!important}}
body:has([data-fan-portal]) .artist-portal-main .fan-playlist-create,
body:has([data-fan-portal]) .artist-portal-main .fan-playlist-collection{
  background:rgba(7,17,27,.76)!important;
  background-image:none!important;
}
/* Fan profile photo lives in the portal sidebar. */
body:has([data-fan-portal]) .fan-sidebar-identity{align-items:center}
body:has([data-fan-portal]) .fan-sidebar-photo-frame{flex:none;width:52px;height:52px;padding:3px;border-radius:9px;background:linear-gradient(135deg,var(--gold),#8d4927,var(--cyan));box-shadow:0 4px 14px #0007}
body:has([data-fan-portal]) .fan-sidebar-photo-frame .avatar{width:100%;height:100%;border:2px solid #0d1520;border-radius:6px;font-size:14px;background-color:#111c28;background-size:cover;background-position:center}
body:has([data-fan-portal]) .fan-sidebar-photo-button{display:block;width:max-content;margin:-5px 0 15px 2px;padding:6px 9px;border:1px solid #38536a;border-radius:5px;background:#08131d;color:#d8e2e8;font-size:9px;font-weight:700;cursor:pointer}
body:has([data-fan-portal]) .fan-sidebar-photo-button:hover{border-color:#f2ca69;color:#f2ca69}
body:has([data-fan-portal]) .fan-sidebar-photo-button input{display:none}
/* Flat fan notifications item in the top navigation. */
.notifications-menu{
  margin-left:12px!important;
  padding:7px 0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#f2ca69!important;
  text-transform:uppercase;
}
.notifications-menu:hover,.notifications-menu:focus-visible{border:0!important;background:none!important;color:#f2ca69!important;box-shadow:none!important;outline:none}
/* Keep every Fan Portal sidebar level with the first content block. */
body:has([data-fan-portal]) .fan-stat-grid{margin-top:0!important}

/* Notifications typography alignment. */
.notifications-menu{font-family:inherit!important;font-size:12px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.notifications-head b{font-family:"Trebuchet MS",Arial,sans-serif!important;font-size:20px!important;font-weight:700!important;letter-spacing:.045em!important;line-height:normal!important}

/* Reference-inspired fan artist profile viewed from the Fan Portal. */
.modal.artist-bio-overlay{padding-top:82px!important;background:rgba(0,0,0,.78)!important}
.artist-bio-box{width:min(1120px,96vw)!important;height:calc(100vh - 102px)!important;max-height:calc(100vh - 102px)!important;padding:22px 24px 18px!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(7,15,24,.97),rgba(4,10,17,.98))!important;border-color:#354b5d!important}
.artist-bio-box .close{z-index:3;width:34px;height:34px;background:#e8ecec;color:#09111a}
.artist-bio-profile-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:28px;padding:2px 42px 20px 0;border-bottom:1px solid #293d4d;flex:none}
.artist-bio-profile-rail{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.artist-bio-profile-rail .artist-bio-avatar-frame{display:block;padding:4px;border-radius:11px}
.artist-bio-profile-rail .artist-bio-avatar-frame .avatar{width:197px;height:197px;border-radius:7px;font-size:42px}
.artist-bio-profile-rail .artist-bio-follow-btn{width:100%!important;margin:0!important;padding:10px 14px!important;text-align:center}
.artist-bio-profile-rail .artist-bio-social-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:1px}
.artist-bio-profile-rail .social-icon{width:100%;height:33px;border-radius:5px}
.artist-bio-profile-main{min-width:0;padding-top:3px}
.artist-profile-label{display:block;margin-bottom:5px;color:#e8af37}
.artist-bio-profile-main .artist-bio-namecol h2{margin:0;color:#f3f3ef;font:500 36px/1.08 Georgia,serif}
.artist-verified{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#d77a21;color:#fff;font:700 13px Arial;vertical-align:5px}
.artist-profile-meta{display:flex;flex-wrap:wrap;gap:18px;margin:9px 0 13px;color:#9ba9b5;font-size:11px}
.artist-bio-profile-main>.lead{max-width:760px;margin:0 0 7px;color:#d5dce1;font-size:13px;line-height:1.55}
.artist-bio-secondary{max-width:760px;margin:0;color:#96a4af;font-size:11px;line-height:1.5}
.artist-role-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.artist-role-tags span{padding:5px 9px;border:1px solid #36516a;border-radius:4px;background:#0a1723;color:#b9c8d3;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.artist-profile-stats{display:grid!important;grid-template-columns:repeat(4,minmax(110px,1fr));gap:9px;margin:16px 0 0!important}
.artist-profile-stats article{display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:center;padding:10px 12px;border:1px solid #2e4659;border-radius:7px;background:#091521}
.artist-profile-stats article i{grid-row:1/3;color:#e7aa31;font-style:normal;font-size:18px}
.artist-profile-stats article b{font-size:17px;color:#edf0ee}
.artist-profile-stats article small{color:#83929d;font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.artist-bio-releases-head{margin-top:0!important;padding-top:14px!important;border-top:0!important}
.artist-bio-releases-head .section-head{margin:0 0 10px!important;justify-content:space-between!important}
.artist-bio-releases-head .section-head h2{margin:0;color:#f1c35d;font:500 22px Georgia,serif}
.artist-bio-sort-inline{margin-left:auto!important;gap:7px!important}
.artist-bio-sort-inline button,.artist-bio-genre-filter button{border-radius:4px!important}
.artist-bio-genre-filter{padding-bottom:9px;margin-bottom:0!important;border-bottom:1px solid #243746}
.artist-bio-releases-scroll{margin-top:0!important;padding-top:2px}
.artist-bio-releases-scroll .release-list{gap:0!important}
.artist-bio-releases-scroll .release-row{padding:9px 7px;border-bottom:1px solid #223543;background:transparent!important}
.artist-bio-releases-scroll .release-row:hover{background:rgba(215, 122, 33,.06)!important}
.artist-bio-box{padding-top:0!important}
.artist-bio-header-image{height:180px;flex:none;margin:0 -24px;border-radius:12px 12px 0 0;background-image:linear-gradient(180deg,rgba(2,7,14,.04),rgba(4,10,17,.5)),url('assets/artist-bio-header-background.png');background-position:center,center calc(50% - 20px);background-size:auto,cover;background-repeat:no-repeat;border:0}
.artist-bio-box>.close{top:15px!important;right:16px!important}
.artist-bio-profile-layout{position:relative;z-index:1;margin-top:-140px;padding-top:0!important;background:transparent!important}
.artist-bio-featured-slot{position:relative;isolation:isolate;flex:none;margin:14px 0 0;padding:13px 16px 15px;overflow:hidden;border:1px solid rgba(236,180,70,.55);border-radius:10px;background:#09131f;box-shadow:inset 0 0 24px rgba(215, 122, 33,.06)}
.artist-bio-featured-slot:before{content:'';position:absolute;z-index:-2;inset:0;background-image:linear-gradient(90deg,rgba(5,13,22,.95) 0%,rgba(5,13,22,.76) 38%,rgba(5,13,22,.38) 72%,rgba(5,13,22,.86) 100%),url('assets/featured-release-background.png');background-size:cover;background-position:center}
.artist-bio-featured-slot:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,rgba(255,178,32,.08),transparent 35%,rgba(215, 122, 33,.09))}
.artist-featured-label{margin-bottom:9px;color:#e9b43d;font-size:9px;font-weight:800;letter-spacing:.12em}
.artist-featured-content{display:grid;grid-template-columns:104px minmax(0,1fr) 172px;gap:18px;align-items:center}
.artist-featured-cover{width:104px;height:82px;overflow:hidden;border:1px solid rgba(238,181,63,.6);border-radius:7px;background:#08111c;display:grid;place-items:center}
.artist-featured-cover img{width:100%;height:100%;object-fit:cover}
.artist-featured-cover span{color:#efad31;font-size:30px}
.artist-featured-copy h3{margin:0 0 7px;color:#fff;font-size:20px;font-weight:600}
.artist-featured-copy p{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;color:#b7c0cb;font-size:10px}
.artist-featured-copy p span{padding:4px 9px;border:1px solid #354c60;border-radius:999px;background:rgba(9,23,35,.72);color:#d9e3ea}
.artist-featured-copy p i{color:#61717e;font-style:normal}
.artist-featured-wave{position:relative;z-index:8;display:block;width:min(460px,100%);height:58px;margin-top:3px;background-image:url('assets/featured-wave-pattern.png');background-position:center;background-size:100% 100%;background-repeat:no-repeat;opacity:1;pointer-events:none;isolation:isolate}
.artist-featured-wave i{display:none}
.artist-featured-actions{display:grid;gap:7px}
.artist-featured-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:33px;padding:7px 12px;border:1px solid #38516b;border-radius:5px;background:rgba(5,16,30,.78);color:#eff7fb;font-size:10px;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease}
.artist-featured-button.primary{border-color:#efad31;background:linear-gradient(100deg,#d77a21,#d77a21);color:#fff}
.artist-featured-button:hover,.artist-featured-button:focus-visible{transform:translateY(-1px);border-color:#efad31;background:linear-gradient(100deg,rgba(215, 122, 33,.92),rgba(215, 122, 33,.92));box-shadow:0 0 14px rgba(215, 122, 33,.35);outline:none}
.artist-featured-button.loved{border-color:#f2ca69;color:#f2ca69;box-shadow:0 0 12px rgba(239, 173, 49,.22)}
@media(max-width:760px){.artist-bio-header-image{height:118px;margin-left:-16px;margin-right:-16px}.artist-featured-content{grid-template-columns:78px 1fr}.artist-featured-cover{width:78px;height:70px}.artist-featured-actions{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.artist-featured-button{padding:7px 5px}.artist-featured-copy h3{font-size:17px}}
@media(max-width:520px){.artist-featured-content{grid-template-columns:64px 1fr;gap:10px}.artist-featured-cover{width:64px;height:60px}.artist-featured-actions{grid-template-columns:1fr}.artist-featured-wave{height:42px}}
@media(max-width:760px){.modal.artist-bio-overlay{padding-top:76px!important}.artist-bio-box{height:calc(100vh - 88px)!important;max-height:calc(100vh - 88px)!important}.artist-bio-profile-layout{grid-template-columns:112px 1fr;gap:16px;padding-right:34px}.artist-bio-profile-rail .artist-bio-avatar-frame .avatar{width:104px;height:104px;font-size:25px}.artist-bio-profile-main .artist-bio-namecol h2{font-size:27px}.artist-profile-stats{grid-template-columns:repeat(2,1fr)}.artist-bio-profile-rail .artist-bio-social-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.artist-bio-profile-layout{grid-template-columns:1fr;padding-right:30px}.artist-bio-profile-rail{display:grid;grid-template-columns:90px 1fr}.artist-bio-profile-rail .artist-bio-avatar-frame{grid-row:1/3}.artist-bio-profile-rail .artist-bio-avatar-frame .avatar{width:82px;height:82px}.artist-bio-profile-rail .artist-bio-social-row{grid-column:2;grid-template-columns:repeat(4,1fr)}.artist-profile-stats{grid-template-columns:1fr 1fr}.artist-profile-meta{gap:8px}.artist-bio-sort-inline{width:100%;flex-wrap:wrap}}
/* Fan Overview profile editor, reusing the Fanclub account form. */
body:has([data-fan-portal]) .fan-profile-editor{padding:clamp(24px,3vw,40px);border:1px solid rgba(215, 122, 33,.28);border-radius:10px;background:rgba(4,10,17,.25)!important;backdrop-filter:blur(10px)}
.fan-profile-editor .supporter-form-grid select,.supporter-signup-polished .supporter-form-grid select{width:100%;height:46px;margin:0;padding:0 14px;border:1px solid #365064;border-radius:0;background:rgba(2,7,13,.68);color:#fff;font:13px "Trebuchet MS",Arial,sans-serif;outline:none}
.fan-profile-editor .supporter-form-grid select:focus,.supporter-signup-polished .supporter-form-grid select:focus{border-color:#d77a21;box-shadow:inset 0 -2px #d77a21}
.fan-profile-editor .supporter-languages{margin-top:20px}
.fan-profile-editor .supporter-continue{width:100%;min-height:48px;border-radius:0;text-transform:none;letter-spacing:.02em}
.fan-profile-save-status{min-height:18px;margin:9px 0 0!important;color:#f2ca69!important}
/* Signup page background readability masks. */
body:not(:has(.authentic-syntera-home)):not(:has(.login-screen)):not(:has(.about-static-image)):has(.supporter-signup) .wrap:before,
body:not(:has(.authentic-syntera-home)):not(:has(.login-screen)):not(:has(.about-static-image)):has(.artist-signup-page) .wrap:before{
  background-image:
    linear-gradient(rgba(1,5,10,.68),rgba(1,5,10,.68)),
    radial-gradient(ellipse at center,transparent 0%,transparent 55%,#050a12 100%),
    linear-gradient(90deg,#050a12 0%,transparent 10%,transparent 90%,#050a12 100%),
    linear-gradient(180deg,#050a12 0%,transparent 12%,transparent 85%,#050a12 100%),
    url('assets/background-syntera.png')!important;
}
/* Fan Music uses the Explore Music grid and action placement. */
.fan-music-grid-head,.fan-music-grid-row{grid-template-columns:22px 44px minmax(160px,1fr) 94px 84px 62px 56px 82px!important}
.fan-music-grid-row .release-actions{justify-content:flex-end;align-items:center}
.fan-music-grid-row .fan-purchased-icon{cursor:default;border-color:#f2ca69;color:#f2ca69;background:rgba(215, 122, 33,.09);font-size:15px}
.fan-music-grid-row .cover-play-btn{background:#fff!important;color:#111!important}
@media(max-width:620px){.fan-music-grid-head,.fan-music-grid-row{grid-template-columns:20px 40px minmax(0,1fr) 76px!important}.fan-music-grid-row .release-date,.fan-music-grid-row .release-mood,.fan-music-grid-row .release-bpm,.fan-music-grid-row .release-length,.fan-music-grid-head span:nth-child(4),.fan-music-grid-head span:nth-child(5),.fan-music-grid-head span:nth-child(6),.fan-music-grid-head span:nth-child(7){display:none!important}}
/* Interactive My Music summary cards. */
.fan-music-stats article{cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;outline:none}
.fan-music-stats article:hover,.fan-music-stats article:focus-visible{transform:translateY(-2px);border-color:#f2ca69!important;background:rgba(215, 122, 33,.1)!important;box-shadow:0 0 0 1px rgba(215, 122, 33,.22),0 10px 24px rgba(0,0,0,.3)}
.fan-music-stats article.active{border-color:#e5ab37!important;background:rgba(229,171,55,.11)!important;box-shadow:inset 0 0 0 1px rgba(229,171,55,.15)}
/* Wider artist bio social links. */
.artist-bio-profile-rail .artist-bio-social-row{grid-template-columns:repeat(2,56px)!important;justify-self:start!important;width:auto!important}
.artist-bio-profile-rail .artist-bio-social-row .social-icon{width:56px!important}

/* Universal compact centred floating media player — tall card */
.universal-media-overlay{position:fixed!important;inset:0!important;z-index:12000!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:none!important}
.tpm-bar{display:flex;flex-direction:column;gap:0;padding:16px 20px 14px;width:min(500px,94vw);height:164px;background:linear-gradient(145deg,rgba(3,8,16,.97),rgba(5,13,24,.97));border:1px solid rgba(215, 122, 33,.4);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 0 1px rgba(239, 173, 49,.1);position:relative;pointer-events:auto;overflow:hidden}
.tpm-close-corner{position:absolute;top:10px;right:12px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);color:#9babb8;font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:1;transition:border-color .15s,color .15s}
.tpm-close-corner:hover{border-color:#f13e45;color:#f13e45}
.tpm-top-row{display:flex;align-items:flex-start;gap:14px;flex:1;min-height:0;padding-right:32px}
.tpm-art-col{flex:none;width:76px;height:76px;border-radius:10px;overflow:hidden;padding:2px;background:linear-gradient(145deg,#e5ab37,#d77a21 53%,#f2ca69)}
.tpm-art-col .tpm-art{display:block!important;width:100%!important;height:100%!important;border-radius:8px!important;object-fit:cover!important;background-size:cover!important;background-position:center!important;font-size:24px!important;line-height:72px!important;text-align:center!important}
.tpm-info-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tpm-track-name{font-size:15px;font-weight:700;color:#f0f1ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpm-genre{font-size:11px;color:#7a8c9e}
.tpm-artist-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tpm-artist{font-size:13px;color:#e5ab37;font-weight:600}
.tpm-follow-btn{flex-shrink:0;padding:3px 11px;border:1px solid #f2ca69;border-radius:20px;background:transparent;color:#f2ca69;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.tpm-follow-btn:hover:not(:disabled){background:#f2ca69;color:#041016}
.tpm-follow-btn:disabled{opacity:.55;cursor:default}
.tpm-right-actions{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;flex-shrink:0}
.tpm-action{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:filter .15s}
.tpm-purchased{width:36px;height:36px;display:grid;place-items:center}
.tpm-bottom-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.tpm-play{position:relative;flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid rgba(255,255,255,.96);border-radius:50%;background:#020816;color:transparent;font-size:0;line-height:0;cursor:pointer;box-shadow:0 0 0 1px rgba(40,216,255,.28),0 0 18px rgba(40,216,255,.18);transition:border-color .14s ease,box-shadow .14s ease}
.tpm-transport-icon{display:block;width:22px;height:22px;filter:drop-shadow(0 0 5px rgba(255,255,255,.7));pointer-events:none}
.tpm-play.playing .tpm-icon-play,.tpm-play:not(.playing) .tpm-icon-pause{display:none}
.tpm-play:not(.playing){padding-left:2px}

/* SignalWave-matching like/purchase icon contract: the button becomes an unstyled
   frame around a full-size neon icon image supplied by klankstalPaintActionIcons(). */
[data-love],[data-artist-love],[data-tpm-like],.tpm-action.tpm-like,
.fan-purchased-icon,.tpm-purchased,button.purchased[data-track-index],
[data-go="checkout"][data-track-index],[data-tpm-cart],.tpm-action.tpm-cart,.fan-cart-icon,.explore-cart-button{
  background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:transparent!important;font-size:0!important;padding:0!important;text-shadow:none!important;transform:none!important;gap:0!important;white-space:normal!important;min-height:0!important}
.explore-cart-button,.explore-like-button{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important}
img.signalwave-action-icon{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
button[data-follow],button.tpm-follow-btn{
  box-sizing:border-box!important;width:36px!important;min-width:36px!important;max-width:36px!important;
  height:36px!important;min-height:36px!important;max-height:36px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  background-image:none!important;box-shadow:none!important;color:transparent!important;font-size:0!important;
  overflow:visible!important;transform:none!important;transition:filter .18s ease!important
}
button[data-follow]:hover,button[data-follow]:focus-visible,button.tpm-follow-btn:hover{background:transparent!important;box-shadow:none!important;transform:none!important;filter:brightness(1.18)!important}
button[data-follow]::before,button[data-follow]::after,button.tpm-follow-btn::before,button.tpm-follow-btn::after{content:none!important}
button[data-follow] img.signalwave-action-icon,button.tpm-follow-btn img.signalwave-action-icon{width:100%!important;height:100%!important;object-fit:contain!important}
.discover-page .wf-grid-actions>button[data-love],.discover-page .wf-grid-actions>button.explore-cart-button,.discover-page .wf-grid-actions>.fan-purchased-icon{
  box-sizing:border-box!important;width:40px!important;min-width:40px!important;max-width:40px!important;
  height:40px!important;min-height:40px!important;max-height:40px!important;overflow:visible!important
}
.discover-page .wf-grid-actions>button[data-love] img.signalwave-action-icon{object-fit:cover!important}
[data-love]:hover,[data-artist-love]:hover,[data-go="checkout"][data-track-index]:hover,[data-tpm-cart]:hover{filter:brightness(1.18)!important}
.tpm-timeline{flex:1;display:flex;flex-direction:column;gap:5px}
.tpm-prog-bar{position:relative;display:block;width:100%;height:10px;padding:3px 0;border:0;border-radius:5px;background:transparent;overflow:hidden;cursor:pointer}
.tpm-prog-bar:before{content:"";position:absolute;inset:3px 0;border-radius:2px;background:#1f3040}
.tpm-prog-bar i{position:relative;z-index:1;display:block;height:100%;width:0;background:linear-gradient(90deg,#f2ca69,#d77a21);transition:width .15s linear;pointer-events:none}
.tpm-prog-bar[type="range"]{display:block;width:100%;height:18px;padding:0;border:0;border-radius:0;background:transparent!important;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:none;overflow:visible}
.tpm-prog-bar[type="range"]:before{display:none}
.tpm-prog-bar[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,#f2ca69 0,#d77a21 var(--seek-progress,0%),#1f3040 var(--seek-progress,0%),#1f3040 100%)}
.tpm-prog-bar[type="range"]::-webkit-slider-thumb{width:17px;height:17px;margin-top:-6px;border:2px solid #fff;border-radius:50%;background:#d77a21;box-shadow:0 0 10px rgba(239, 173, 49,.75);appearance:none;-webkit-appearance:none}
.tpm-prog-bar[type="range"]::-moz-range-track{height:5px;border-radius:3px;background:#1f3040}
.tpm-prog-bar[type="range"]::-moz-range-progress{height:5px;border-radius:3px;background:linear-gradient(90deg,#f2ca69,#d77a21)}
.tpm-prog-bar[type="range"]::-moz-range-thumb{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:#d77a21;box-shadow:0 0 10px rgba(239, 173, 49,.75)}

/* Clean, unfiltered editable fields on both public registration forms. */
.supporter-signup-polished .supporter-form input:not([type="checkbox"]),
.supporter-signup-polished .supporter-form select,
.supporter-signup-polished .supporter-form textarea,
.artist-signup-page input:not([type="checkbox"]),
.artist-signup-page select,
.artist-signup-page textarea{
  background-color:transparent!important;
  background-image:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  opacity:1!important;
  color:#fff!important;
}
.supporter-signup-polished .supporter-form input:not([type="checkbox"]):focus,
.supporter-signup-polished .supporter-form select:focus,
.supporter-signup-polished .supporter-form textarea:focus,
.artist-signup-page input:not([type="checkbox"]):focus,
.artist-signup-page select:focus,
.artist-signup-page textarea:focus{
  border-color:#efad31!important;
  outline:2px solid rgba(215, 122, 33,.22)!important;
  outline-offset:1px;
}
.supporter-signup-polished .supporter-form input::placeholder,
.supporter-signup-polished .supporter-form textarea::placeholder,
.artist-signup-page input::placeholder,
.artist-signup-page textarea::placeholder{color:#8f9cab!important;opacity:1!important}
.supporter-signup-polished .supporter-form input:-webkit-autofill,
.artist-signup-page input:-webkit-autofill{
  -webkit-text-fill-color:#fff!important;
  transition:background-color 9999s ease-out 0s;
}

/* Fan recommendations belong in the approved fan portal, not registration. */
.supporter-signup.supporter-signup-polished{display:block!important;max-width:1040px!important}
.supporter-signup-polished>.artist-recommendations{display:none!important}
.tpm-bar time{font-size:11px;color:#8795a2;text-align:right}
.tpm-login-btns{display:flex;gap:10px;justify-content:center}
@media(max-width:560px){.tpm-bar{width:94vw;padding:12px 14px 10px;height:150px}.tpm-art-col{width:60px;height:60px}.tpm-track-name{font-size:13px}}
/* ── Global & fan search overlay ── */
.search-overlay{position:fixed;z-index:50;background:linear-gradient(145deg,#0d1824fa,#07111bfa);border:1px solid #2a3d52;border-radius:11px;box-shadow:0 24px 70px #000b;display:flex;flex-direction:column;max-height:min(580px,80vh)}
.search-overlay-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1e3144;flex-shrink:0}
.search-overlay-label{font-size:13px;font-weight:700;color:#f0c35d;letter-spacing:.01em}
.search-overlay-close{background:#08131e;border:1px solid #374f62;border-radius:50%;width:28px;height:28px;color:#9baab8;font-size:18px;line-height:1;display:grid;place-items:center;flex-shrink:0;transition:border-color .15s,color .15s}
.search-overlay-close:hover{border-color:var(--gold);color:var(--gold)}
.search-results-wrap{flex:1;overflow-y:auto;padding:0}
.search-results-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.search-results-table colgroup col:first-child{width:46px}
.search-results-table colgroup col:last-child{width:110px}
.search-results-table thead tr{position:sticky;top:0;background:#0d1824}
.search-results-table th{padding:8px 12px;text-align:left;font-size:10px;color:#7a8fa3;font-weight:700;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid #1e3144}
.search-result-row:hover{background:rgba(215, 122, 33,.07)}
.search-result-row td{padding:8px 12px;border-bottom:1px solid #16273a;color:#d4dde6;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-result-row td:first-child{padding:6px 8px 6px 12px;overflow:visible}
.search-col-artist{color:#f1c35d;font-size:11px}
.search-col-date{color:#7a8fa3;font-size:11px}
.search-no-results{padding:22px 12px!important;color:#7a8fa3;text-align:center;font-size:12px;white-space:normal!important}
.search-play-btn{width:28px;height:28px;border-radius:50%;background:#ffffff;color:#111;font-size:9px;display:grid;place-items:center;border:0;box-shadow:0 2px 10px #0007;transition:transform .1s,box-shadow .1s;padding-left:2px}
.search-sort-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #1e3144;flex-shrink:0;flex-wrap:wrap}
.search-sort-label{font-size:10px;color:#7a8fa3;text-transform:uppercase;letter-spacing:.07em;margin-right:4px;white-space:nowrap}
.search-sort-btn{padding:5px 12px;border:1px solid #2e4459;border-radius:5px;background:#08131e;color:#9baab8;font-size:11px;font-weight:600;transition:all .15s;white-space:nowrap}
.search-sort-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.search-sort-btn.active{background:linear-gradient(100deg,#efad31,#d77a21);border-color:transparent;color:#fff;box-shadow:0 2px 10px rgba(215, 122, 33,.25)}
.search-hl{background:none;color:#d77a21;font-weight:700;font-style:normal}
.search-use-btn{padding:4px 10px;border:1px solid #38516a;border-radius:4px;background:#08131e;color:#f2ca69;font-size:10px;font-weight:700;white-space:nowrap;transition:all .15s}
.search-use-btn:hover{border-color:var(--gold);background:rgba(239,173,49,.12)}
.search-use-btn:disabled{opacity:.55;cursor:default}
.search-results-table th:last-child{width:60px}
.search-playlist-picker{background:linear-gradient(145deg,#0d1824,#07111b);border:1px solid #2a3d52;border-radius:8px;box-shadow:0 12px 40px #000b;overflow:hidden;display:flex;flex-direction:column;min-width:180px}
.picker-pl-btn{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:0;border-bottom:1px solid #1e3144;color:#d4dde6;font-size:12px;transition:background .12s}
.picker-pl-btn:last-child{border-bottom:0}
.picker-pl-btn:hover{background:rgba(215, 122, 33,.1);color:#d77a21}
.search-overlay-foot{padding:12px 16px;border-top:1px solid #1e3144;display:flex;justify-content:center;flex-shrink:0}
.search-overlay-foot .btn{min-width:80px;padding:5px 16px;font-size:11px}
/* Fan playlist search input inside create overlay */
.fan-playlist-search-wrap{margin:0 0 18px}
.fan-playlist-search-label{display:block;font-size:10px;color:#d5bd87;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.fan-playlist-search-input{width:100%;background:#07111b;border:1px solid #38516a;border-radius:6px;padding:9px 12px 9px 34px;color:#e9edf1;font-size:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa0b4' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
.fan-playlist-search-input:focus{outline:1px solid #e9b640;border-color:#e9b640}
/* Anchor the notifications panel directly below its top-bar heading. */
.notifications-popover{right:auto!important;transform:none!important}
@media(max-width:800px){.notifications-popover{right:auto!important;width:min(395px,calc(100vw - 24px))!important}}


/* === Full background image fills every page; dark overlay on non-home/non-about === */
/* Background image on all pages except home (home handles its own background) */
body:not(:has(.authentic-syntera-home)){background-color:rgb(1,2,6)!important;background-image:url('assets/home-page-background.jpg')!important;background-size:cover!important;background-position:center top!important;background-attachment:fixed!important;background-repeat:no-repeat!important}
/* Let main be transparent so body background shows through */
body:not(:has(.authentic-syntera-home)) main#app{background:transparent!important;background-image:none!important;background-color:transparent!important}
/* Dark overlay (fixed so it always covers the full viewport) on every page except home and about */
body:not(:has(.authentic-syntera-home)):not(:has(.about-page)) main::before{content:'';position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(1,3,9,.68) 0%,rgba(1,2,7,.76) 55%,rgba(1,2,6,.84) 100%);pointer-events:none}
/* Ensure wrap and its content sit above the overlay */
body:not(:has(.authentic-syntera-home)):not(:has(.about-page)) .wrap{position:relative;z-index:1}

/* Portal pages: lighter overlay so background shows through, matching the feel of other pages */
body:not(:has(.authentic-syntera-home)):has([data-artist-portal]) main::before,
body:not(:has(.authentic-syntera-home)):has([data-fan-portal]) main::before{background:linear-gradient(180deg,rgba(1,3,9,.32) 0%,rgba(1,2,7,.40) 55%,rgba(1,2,6,.46) 100%)!important}
/* Portal sidebar and panels: lighter blue tint so they don't read as pitch black */
body:has([data-artist-portal]) .artist-portal-sidebar,
body:has([data-fan-portal]) .artist-portal-sidebar{background:linear-gradient(145deg,rgba(18,42,72,.58),rgba(10,26,46,.54))!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
body:has([data-artist-portal]) .panel,
body:has([data-artist-portal]) .wire-panel,
body:has([data-fan-portal]) .panel,
body:has([data-fan-portal]) .wire-panel{background:linear-gradient(145deg,rgba(14,34,58,.62),rgba(8,22,40,.58))!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
/* === Creator-first Syntera landing page === */
:root{--creator-bg:#000308;--creator-surface:#071019;--creator-surface-2:#0a141f;--creator-cyan:#f2ca69;--creator-violet:#d77a21;--creator-gold:#e8b64d;--creator-text:#f5f7f8;--creator-muted:#8c9aa8;--creator-line:rgba(239, 173, 49,.18)}
html:has(.creator-landing){overflow-x:hidden!important;background:var(--creator-bg)!important;scroll-behavior:smooth}
body:has(.creator-landing){overflow-x:hidden!important;overflow-y:auto!important;background:var(--creator-bg)!important;color:var(--creator-text);font-family:Inter,"Segoe UI",Arial,sans-serif!important}
body:has(.creator-landing) main#app{height:auto!important;min-height:calc(100vh - 76px)!important;margin-top:76px!important;overflow:visible!important;background:var(--creator-bg)!important}
body:has(.creator-landing) .wrap{height:auto!important;min-height:0!important;overflow:visible!important}
body:has(.creator-landing) .site-header{height:76px!important;padding:0 clamp(22px,4vw,64px)!important;background:rgba(0,3,8,.86)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(18px)!important}
body:has(.creator-landing) .site-header nav a{font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:11px!important;letter-spacing:.11em!important}
body:has(.creator-landing) .site-header .search{height:38px!important;border-radius:19px!important;background:rgba(14,25,36,.72)!important;border-color:rgba(215, 122, 33,.24)!important}
body:has(.creator-landing) .site-header .topbtn{min-height:38px!important;padding:0 17px!important;border-color:rgba(232,182,77,.65)!important;color:#f1ca70!important;background:rgba(232,182,77,.04)!important}
.creator-landing{width:100%!important;height:auto!important;min-height:100vh!important;margin:0!important;background:var(--creator-bg)!important;font-family:Inter,"Segoe UI",Arial,sans-serif;overflow:hidden}
.creator-home-scroll{height:auto!important;min-height:0!important;overflow:visible!important;background:radial-gradient(circle at 78% 5%,rgba(215, 122, 33,.07),transparent 24%),radial-gradient(circle at 20% 22%,rgba(215, 122, 33,.055),transparent 25%),var(--creator-bg)}
.creator-home-scroll *{box-sizing:border-box}
.creator-home-scroll a{text-decoration:none}
.creator-hero{position:relative;display:grid;grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr);align-items:center;min-height:680px;max-width:1500px;margin:0 auto;padding:64px clamp(28px,5vw,76px) 72px;isolation:isolate}
.creator-hero:after{content:"";position:absolute;left:5%;right:5%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(215, 122, 33,.3),rgba(215, 122, 33,.24),transparent)}
.creator-hero-glow{position:absolute;right:3%;top:8%;width:58%;height:74%;border-radius:50%;background:radial-gradient(circle,rgba(215, 122, 33,.12),rgba(215, 122, 33,.035) 48%,transparent 70%);filter:blur(28px);z-index:-1;pointer-events:none}
.creator-hero-copy{position:relative;z-index:3;max-width:640px;padding-right:28px}
.creator-kicker,.creator-home-section>div>span,.creator-section-head>div>span,.creator-product-copy>span,.creator-spotlight-copy>span,.creator-final-cta>div>span{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--creator-cyan);font-size:11px;font-weight:750;letter-spacing:.19em;text-transform:uppercase}
.creator-kicker i{display:block;width:7px;height:7px;border-radius:50%;background:var(--creator-cyan);box-shadow:0 0 18px var(--creator-cyan)}
.creator-hero h1{margin:0;color:#f8fafb;font-size:clamp(58px,6.2vw,94px);font-weight:720;line-height:.94;letter-spacing:-.06em}
.creator-hero h1 em{position:relative;z-index:4;display:inline-block;color:transparent;font-style:normal;opacity:1;background:linear-gradient(98deg,#d77a21 0%,#efad31 100%);background-clip:text;-webkit-background-clip:text;text-shadow:0 0 18px rgba(215, 122, 33,.22),0 0 28px rgba(215, 122, 33,.17);isolation:isolate}

/* === Electric creator-home palette === */
body:has(.creator-landing){background:#02030b!important}
.creator-landing{background:radial-gradient(circle at 76% 13%,rgba(215, 122, 33,.19),transparent 22%),radial-gradient(circle at 40% 10%,rgba(215, 122, 33,.14),transparent 20%),#02030b!important}
.creator-home-scroll{background:radial-gradient(circle at 85% 7%,rgba(215, 122, 33,.16),transparent 25%),radial-gradient(circle at 20% 25%,rgba(215, 122, 33,.11),transparent 24%),linear-gradient(180deg,#02030b 0%,#030611 45%,#01030a 100%)!important}
body:has(.creator-landing) .site-header{background:rgba(2,3,11,.9)!important;border-bottom-color:rgba(215, 122, 33,.23)!important}
body:has(.creator-landing) .site-header nav a.active{color:#fff!important;position:relative}
body:has(.creator-landing) .site-header nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:linear-gradient(90deg,#d77a21,#efad31);box-shadow:0 0 12px #efad31}
body:has(.creator-landing) .site-header .topbtn{border-color:#d77a21!important;color:#fff!important;background:linear-gradient(100deg,#8d4927,#8d4927)!important;box-shadow:0 8px 24px rgba(215, 122, 33,.26)}
.creator-kicker{width:max-content;padding:7px 12px;border:1px solid rgba(239, 173, 49,.72);border-radius:18px;background:rgba(141, 73, 39,.14);color:#e4ccff!important;box-shadow:0 0 24px rgba(215, 122, 33,.14)}
.creator-kicker i{background:#efad31!important;box-shadow:0 0 16px #efad31!important}
.creator-hero{min-height:700px;background:radial-gradient(ellipse at 61% 47%,rgba(215, 122, 33,.08),transparent 42%)}
.creator-hero-glow{right:1%!important;width:64%!important;height:82%!important;background:radial-gradient(circle,rgba(215, 122, 33,.20),rgba(215, 122, 33,.11) 38%,transparent 69%)!important}
.creator-hero-visual{isolation:isolate}
.creator-hero-visual:before{content:"";position:absolute;z-index:1;left:12%;top:7%;width:74%;aspect-ratio:1;border:2px solid rgba(215, 122, 33,.75);border-radius:50%;background:radial-gradient(circle,rgba(8,10,33,.13) 0 54%,transparent 56%);box-shadow:0 0 20px rgba(215, 122, 33,.9),inset 0 0 30px rgba(215, 122, 33,.32),0 0 55px rgba(215, 122, 33,.64);pointer-events:none}
.creator-hero-visual:after{background:linear-gradient(90deg,#02030b 0%,rgba(2,3,11,.48) 20%,transparent 43%,rgba(2,3,11,.35) 80%,#02030b 100%),linear-gradient(180deg,#02030bcc 0%,transparent 22%,transparent 75%,#02030be6 100%)!important}
.creator-hero-visual>img{filter:saturate(1.25) contrast(1.12) brightness(1.08)!important}
.creator-primary-cta{background:linear-gradient(105deg,#8d4927,#efad31 48%,#efad31)!important;box-shadow:0 14px 34px rgba(215, 122, 33,.36)!important}
.creator-secondary-cta{border-color:rgba(239, 173, 49,.7)!important;background:rgba(20,8,43,.56)!important;box-shadow:inset 0 0 20px rgba(215, 122, 33,.09)}
.creator-proof-row b{color:#e0bcff!important;text-shadow:0 0 12px rgba(239, 173, 49,.5)}
.creator-section-head>div>span,.creator-value-intro>span,.creator-product-copy>span,.creator-spotlight-copy>span,.creator-trust>div>span,.creator-final-cta>div>span{color:#efad31!important}
.creator-release-art-wrap{border:1px solid rgba(215, 122, 33,.32);box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 0 1px rgba(215, 122, 33,.05)}
.creator-release-card:hover .creator-release-art-wrap{border-color:rgba(239, 173, 49,.8);box-shadow:0 16px 35px rgba(215, 122, 33,.22),0 0 26px rgba(215, 122, 33,.16)}
.creator-value-grid article{border-color:rgba(215, 122, 33,.26)!important;background:linear-gradient(145deg,rgba(23,14,52,.84),rgba(5,12,30,.74))!important}
.creator-value-grid article:hover{border-color:rgba(239, 173, 49,.74)!important;background:linear-gradient(145deg,rgba(44,17,80,.92),rgba(7,25,59,.84))!important;box-shadow:0 15px 35px rgba(215, 122, 33,.18)}
.creator-value-grid article>i{color:#efad31!important;background:rgba(215, 122, 33,.13)!important;border:1px solid rgba(239, 173, 49,.34);box-shadow:0 0 20px rgba(215, 122, 33,.13)}
.creator-product{background:linear-gradient(100deg,rgba(17,9,42,.94),rgba(4,13,38,.79)),radial-gradient(circle at 76% 45%,rgba(215, 122, 33,.27),transparent 42%)!important;border-color:rgba(215, 122, 33,.3)!important}
.creator-dashboard-preview{border-color:rgba(215, 122, 33,.46)!important;box-shadow:0 38px 90px rgba(0,0,0,.52),0 0 65px rgba(215, 122, 33,.19)!important}
.creator-chart-bars i{background:linear-gradient(180deg,#efad31,#efad31)!important}
.creator-final-cta{border-color:rgba(215, 122, 33,.45)!important;background:radial-gradient(circle at 12% 50%,rgba(215, 122, 33,.2),transparent 25%),linear-gradient(120deg,rgba(31,13,62,.95),rgba(8,14,42,.94))!important;box-shadow:0 20px 60px rgba(215, 122, 33,.15)}

/* Hero signal: reusable electric arcs, with the source banner temporarily suppressed. */
.creator-hero-visual{background:radial-gradient(circle at 50% 50%,#111530 0%,#060916 47%,transparent 48%)}
.creator-hero-visual>img{display:none!important}
.creator-hero-visual:after{z-index:1}
.creator-electric-arcs{position:absolute;z-index:2;inset:4%;border-radius:50%;pointer-events:none;filter:drop-shadow(0 0 7px rgba(215, 122, 33,.95)) drop-shadow(0 0 15px rgba(215, 122, 33,.75))}
.creator-electric-arcs:before,.creator-electric-arcs:after{content:"";position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(239, 173, 49,.62);box-shadow:0 0 16px rgba(215, 122, 33,.65),inset 0 0 18px rgba(215, 122, 33,.45)}
.creator-electric-arcs:after{inset:11%;border-color:rgba(239, 173, 49,.52);transform:rotate(17deg) scaleX(.94)}
.creator-electric-arcs i{position:absolute;left:50%;top:50%;width:31%;height:3px;transform-origin:0 50%;background:linear-gradient(90deg,transparent 0 5%,#efad31 12%,#efad31 42%,#f2ca69 54%,#efad31 75%,transparent 100%);clip-path:polygon(0 50%,13% 3%,25% 69%,36% 25%,48% 92%,60% 35%,73% 73%,86% 9%,100% 50%,86% 90%,73% 28%,60% 67%,48% 8%,36% 75%,25% 31%,13% 97%);opacity:.88}
.creator-electric-arcs i:nth-child(1){transform:rotate(2deg) translateX(40%)}.creator-electric-arcs i:nth-child(2){transform:rotate(46deg) translateX(52%);width:24%}.creator-electric-arcs i:nth-child(3){transform:rotate(94deg) translateX(47%);width:28%}.creator-electric-arcs i:nth-child(4){transform:rotate(137deg) translateX(49%);width:25%}.creator-electric-arcs i:nth-child(5){transform:rotate(182deg) translateX(44%);width:30%}.creator-electric-arcs i:nth-child(6){transform:rotate(226deg) translateX(51%);width:23%}.creator-electric-arcs i:nth-child(7){transform:rotate(272deg) translateX(46%);width:29%}.creator-electric-arcs i:nth-child(8){transform:rotate(318deg) translateX(50%);width:25%}
.creator-now-playing{z-index:4!important}
.creator-secondary-cta{border-color:rgba(239, 173, 49,.76)!important;color:#04121f!important;background:linear-gradient(100deg,#d77a21 0%,#efad31 100%)!important;box-shadow:0 10px 26px rgba(215, 122, 33,.25)!important}
.creator-secondary-cta .creator-play-dot{background:#fff!important;color:#8d4927!important}
/* Keep the release collection available in the markup for when the artist roster grows. */
.creator-featured{display:none!important}
.creator-home-section{padding:68px 0!important}
.creator-product{padding-top:74px!important;padding-bottom:74px!important}
.creator-final-cta{margin-bottom:34px!important}
@media(max-width:860px){.creator-home-section{padding:54px 0!important}.creator-product{padding-top:58px!important;padding-bottom:58px!important}.creator-hero-visual{margin-top:4px!important}}

/* === Component-based wireframe homepage === */
.wireframe-home{--wf-purple:#d77a21;--wf-violet:#d77a21;--wf-blue:#efad31;--wf-cyan:#f2ca69;--wf-panel:linear-gradient(145deg,rgba(13,12,35,.94),rgba(3,12,29,.94));--wf-line:rgba(215, 122, 33,.25);background:radial-gradient(circle at 72% 8%,rgba(215, 122, 33,.14),transparent 25%),radial-gradient(circle at 18% 48%,rgba(215, 122, 33,.07),transparent 24%),#02040c!important;color:#f7f5fb}
.wireframe-home *{box-sizing:border-box}.wireframe-home a{text-decoration:none}
.wf-home-canvas{width:min(1420px,calc(100% - 44px));margin:0 auto;padding:0 0 95px}
.wf-hero{position:relative;display:grid;grid-template-columns:minmax(380px,.82fr) minmax(520px,1.18fr);grid-template-rows:1fr auto;min-height:670px;padding:50px 28px 20px;overflow:hidden}
.wf-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 73% 42%,rgba(215, 122, 33,.16),transparent 27%),linear-gradient(90deg,rgba(2,4,12,.98) 0%,rgba(2,4,12,.78) 34%,transparent 62%);pointer-events:none}
.wf-hero-copy{position:relative;z-index:5;align-self:center;padding:15px 0 35px}
.wf-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 15px;border:1px solid rgba(239, 173, 49,.68);border-radius:18px;background:linear-gradient(110deg,rgba(141, 73, 39,.32),rgba(18,16,51,.45));color:#fff;font-size:10px;font-weight:800;letter-spacing:.05em}
.wf-hero h1{margin:22px 0 18px;color:#f7f7fa;font-size:clamp(48px,5vw,72px);font-weight:850;line-height:.91;letter-spacing:-.045em}
.wf-hero h1 em,.wf-hero h1 strong{font-style:normal;color:transparent;background-clip:text;-webkit-background-clip:text}
.wf-hero h1 em{background-image:linear-gradient(100deg,#d77a21,#d77a21)}
.wf-hero h1 strong{background-image:linear-gradient(100deg,#f2ca69,#efad31)}
.wf-hero-copy>p{margin:0;color:#bac0cd;font-size:14px;line-height:1.55}
.wf-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}.wf-actions a{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:48px;padding:0 24px;border-radius:6px;font-size:12px;font-weight:850;letter-spacing:.02em}.wf-primary{color:#fff;background:linear-gradient(100deg,#d77a21,#efad31 60%,#d77a21);box-shadow:0 13px 32px rgba(215, 122, 33,.28)}.wf-outline{color:#fff;border:1px solid rgba(215, 122, 33,.65);background:linear-gradient(110deg,rgba(26,13,56,.82),rgba(4,15,31,.8))}.wf-outline span{color:#efad31;font-size:17px}
.wf-hero-signal{position:relative;z-index:2;min-height:520px;align-self:center;overflow:visible}
.wf-supplied-ring{position:absolute;z-index:3;left:50%;top:49%;width:min(760px,118%);height:auto;max-width:none;object-fit:contain;transform:translate(-50%,-50%);opacity:.98;filter:drop-shadow(0 0 18px rgba(215, 122, 33,.46)) drop-shadow(0 0 34px rgba(215, 122, 33,.3));mix-blend-mode:screen;mask-image:radial-gradient(ellipse at center,#000 0 55%,rgba(0,0,0,.94) 66%,rgba(0,0,0,.5) 82%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0 55%,rgba(0,0,0,.94) 66%,rgba(0,0,0,.5) 82%,transparent 100%);animation:wf-ring-breathe 4.8s ease-in-out infinite}
@keyframes wf-ring-breathe{0%,100%{filter:drop-shadow(0 0 16px rgba(215, 122, 33,.42)) drop-shadow(0 0 30px rgba(215, 122, 33,.27))}50%{filter:drop-shadow(0 0 24px rgba(215, 122, 33,.58)) drop-shadow(0 0 44px rgba(215, 122, 33,.4))}}
.wf-electric-ring{position:absolute;left:50%;top:49%;width:min(470px,78%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:conic-gradient(from 35deg,#8d4927,#efad31,#d77a21,#d77a21,#d77a21,#efad31,#d77a21,#8d4927);padding:5px;box-shadow:0 0 20px rgba(215, 122, 33,.9),0 0 60px rgba(215, 122, 33,.62),inset 0 0 24px rgba(215, 122, 33,.72)}
.wf-electric-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle,#07091a 0 59%,#0a0b20 65%,#03040d 72%);box-shadow:inset 0 0 40px rgba(215, 122, 33,.45)}
.wf-electric-ring:after{content:"";position:absolute;inset:-28px;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0 7deg,rgba(215, 122, 33,.82) 8deg,transparent 9deg 17deg,rgba(215, 122, 33,.86) 18deg,transparent 20deg 29deg);filter:blur(.7px);mask:radial-gradient(circle,transparent 0 65%,#000 66% 69%,transparent 70%);-webkit-mask:radial-gradient(circle,transparent 0 65%,#000 66% 69%,transparent 70%);animation:wf-electric-pulse 3.6s ease-in-out infinite}
.wf-electric-ring i{position:absolute;z-index:2;left:50%;top:50%;width:30%;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,#efad31 26%,#efad31 68%,transparent);clip-path:polygon(0 45%,17% 0,30% 75%,46% 20%,63% 90%,78% 10%,100% 50%,78% 90%,63% 12%,46% 80%,30% 25%,17% 100%)}
.wf-electric-ring i:nth-child(1){transform:rotate(4deg) translateX(128%)}.wf-electric-ring i:nth-child(2){transform:rotate(48deg) translateX(126%)}.wf-electric-ring i:nth-child(3){transform:rotate(92deg) translateX(128%)}.wf-electric-ring i:nth-child(4){transform:rotate(137deg) translateX(125%)}.wf-electric-ring i:nth-child(5){transform:rotate(182deg) translateX(128%)}.wf-electric-ring i:nth-child(6){transform:rotate(226deg) translateX(126%)}.wf-electric-ring i:nth-child(7){transform:rotate(272deg) translateX(128%)}.wf-electric-ring i:nth-child(8){transform:rotate(318deg) translateX(126%)}
@keyframes wf-electric-pulse{0%,100%{opacity:.72;transform:rotate(0)}50%{opacity:1;transform:rotate(3deg)}}
.wf-logo-core{position:absolute;z-index:4;left:50%;top:49%;display:grid;place-items:center;width:min(250px,39%);aspect-ratio:1;border-radius:43% 57% 48% 52%/46% 43% 57% 54%;transform:translate(-50%,-50%) rotate(-5deg);background:linear-gradient(135deg,#f2ca69 0%,#efad31 38%,#efad31 72%,#d77a21 100%);box-shadow:0 0 35px rgba(215, 122, 33,.45),inset 0 0 30px rgba(255,255,255,.16)}
.wf-logo-core img{width:68%;height:68%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,255,255,.35));transform:rotate(5deg)}
.wf-hero-signal>button{position:absolute;z-index:5;left:61%;bottom:9%;display:grid;grid-template-columns:42px 1fr;gap:0 12px;align-items:center;width:190px;padding:8px;border:0;background:transparent;color:#fff;text-align:left}.wf-hero-signal>button>span{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;padding-left:2px;border:1px solid rgba(239, 173, 49,.75);border-radius:50%;background:rgba(7,6,26,.8)}.wf-hero-signal>button b{font-size:10px}.wf-hero-signal>button small{color:#9ea6b5;font-size:9px}
.wf-metrics{position:relative;z-index:5;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);width:82%;margin:0 auto;padding:17px 0;border-top:1px solid rgba(215, 122, 33,.15)}
.wf-metric{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;padding:0 26px;border-left:1px solid rgba(215, 122, 33,.18)}.wf-metric:first-child{border-left:0}.wf-metric>i{color:#efad31;font-size:25px;font-style:normal}.wf-metric b,.wf-metric small{display:block}.wf-metric b{color:transparent;background:linear-gradient(100deg,#efad31,#efad31);background-clip:text;-webkit-background-clip:text;font-size:18px}.wf-metric small{margin-top:5px;color:#a9afbb;font-size:8px;letter-spacing:.05em}
.wf-panel{margin-top:12px;border:1px solid var(--wf-line);border-radius:16px;background:var(--wf-panel);box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025)}
.wf-panel>header{display:flex;align-items:center;justify-content:space-between;padding:19px 22px 12px}.wf-panel h2{margin:0;font-size:16px;letter-spacing:.02em}.wf-panel>header a{color:#efad31;font-size:9px;font-weight:800}.wf-panel>header a span{margin-left:10px;color:#efad31;font-size:19px}
.wf-track-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0 16px 16px}.wf-track-card{min-width:0;overflow:hidden;border:1px solid rgba(215, 122, 33,.2);border-radius:10px;background:linear-gradient(160deg,rgba(10,13,31,.96),rgba(4,8,19,.95));transition:transform .2s,border-color .2s}.wf-track-card:hover{transform:translateY(-4px);border-color:rgba(215, 122, 33,.58)}.wf-track-art{position:relative;aspect-ratio:1.32;overflow:hidden}.wf-track-cover{width:100%;height:100%;background-position:center!important;background-size:cover!important}.wf-track-art>button{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:42px;height:42px;padding:0;line-height:1;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(2,4,12,.62);color:#fff;transform:translate(-50%,-50%)}.wf-track-art>span{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(2,4,12,.78);color:#fff}.wf-track-copy{padding:12px}.wf-track-copy>b,.wf-track-copy>a,.wf-track-copy>em{display:block}.wf-track-copy>b{font-size:13px}.wf-track-copy>a{margin-top:5px;color:#a8b0c0;font-size:10px}.wf-track-copy>a i{color:#efad31;font-style:normal}.wf-track-copy>div{display:flex;gap:13px;margin-top:10px;color:#b8bdc8}.wf-track-copy small{font-size:9px}.wf-track-copy>em{margin-top:10px;color:#818999;font-size:8px;font-style:normal}
.wf-collaborate{display:grid;grid-template-columns:.63fr 1.37fr;gap:35px;padding:16px 20px}.wf-collab-intro{align-self:center;padding:16px 6px}.wf-collab-intro>span{color:#efad31;font-size:9px;font-weight:800;letter-spacing:.08em}.wf-collab-intro h2{margin:17px 0 10px;font-size:25px}.wf-collab-intro p{max-width:410px;margin:0;color:#aab1bf;font-size:11px;line-height:1.6}.wf-collab-intro>a{display:inline-flex;margin-top:20px;padding:12px 17px;border-radius:5px;background:linear-gradient(100deg,#d77a21,#d77a21);color:#fff;font-size:9px;font-weight:800}
.wf-collab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.wf-collab-card{padding:14px;border:1px solid rgba(215, 122, 33,.35);border-radius:9px;background:linear-gradient(145deg,rgba(20,11,47,.82),rgba(4,13,28,.9))}.wf-collab-card.blue{border-color:rgba(215, 122, 33,.4)}.wf-collab-card.cyan{border-color:rgba(215, 122, 33,.4)}.wf-collab-card header{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:8px}.wf-collab-card header i{color:#efad31;font-size:24px;font-style:normal}.wf-collab-card.blue header i{color:#efad31}.wf-collab-card.cyan header i{color:#f2ca69}.wf-collab-card header b{font-size:11px;line-height:1.35}.wf-collab-card>div span{display:block;width:max-content;max-width:100%;margin:7px 0 0 38px;padding:3px 5px;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#abb2bf;font-size:7px}.wf-signal{margin:14px 0;color:#efad31;font-size:10px;letter-spacing:1px}.wf-collab-card.blue .wf-signal{color:#efad31}.wf-collab-card.cyan .wf-signal{color:#f2ca69}.wf-collab-card>button{width:100%;padding:8px;border:1px solid currentColor;border-radius:4px;background:transparent;color:#efad31;font-size:8px;font-weight:800}.wf-collab-card.blue>button{color:#efad31}.wf-collab-card.cyan>button{color:#d77a21}
.wf-why{padding:28px 16px 18px}.wf-why h2{margin:0 0 22px;text-align:center;font-size:17px}.wf-why>div{display:grid;grid-template-columns:repeat(4,1fr)}.wf-benefit{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:14px;padding:0 25px;border-left:1px solid rgba(215, 122, 33,.25)}.wf-benefit:first-child{border-left:0}.wf-benefit>i{display:grid;place-items:center;width:54px;height:54px;border:1px solid #efad31;border-radius:50%;background:radial-gradient(circle,rgba(215, 122, 33,.19),rgba(7,8,23,.9));color:#efad31;font-size:23px;font-style:normal;box-shadow:0 0 22px rgba(215, 122, 33,.22)}.wf-benefit:nth-child(even)>i{border-color:#efad31;color:#efad31;box-shadow:0 0 22px rgba(215, 122, 33,.22)}.wf-benefit:last-child>i{border-color:#f2ca69;color:#d77a21}.wf-benefit b{font-size:11px}.wf-benefit p{margin:7px 0 0;color:#a4acba;font-size:10px;line-height:1.5}
.wf-final{display:grid;grid-template-columns:310px 1fr auto;align-items:center;gap:35px;min-height:150px;margin-top:20px;overflow:hidden;border:1px solid var(--wf-line);border-radius:14px;background:linear-gradient(115deg,rgba(31,12,64,.92),rgba(4,13,32,.94) 45%,rgba(9,12,43,.96));box-shadow:inset 0 0 55px rgba(215, 122, 33,.08)}.wf-final-art{position:relative;align-self:stretch;background:radial-gradient(circle at 48% 50%,rgba(215, 122, 33,.4),transparent 42%),linear-gradient(135deg,#210b4d,#0b2253)}.wf-final-art>span{position:absolute;left:45%;top:50%;display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#efad31,#efad31);font-size:30px;transform:translate(-50%,-50%);box-shadow:0 0 38px rgba(215, 122, 33,.45)}.wf-final-art>i{position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 18px,rgba(215, 122, 33,.09) 19px,transparent 20px)}.wf-final h2{margin:0;font-size:28px;line-height:1.08}.wf-final h2 em{color:transparent;background:linear-gradient(100deg,#efad31,#efad31);background-clip:text;-webkit-background-clip:text;font-style:normal}.wf-final p{margin:12px 0 0;color:#abb2c0;font-size:11px}.wf-final>a{display:inline-flex;align-items:center;gap:20px;margin-right:42px;padding:14px 21px;border-radius:6px;background:linear-gradient(100deg,#d77a21,#d77a21);color:#fff;font-size:10px;font-weight:850}
.wf-player{position:fixed;z-index:16;left:0;right:0;bottom:0;display:grid;grid-template-columns:290px 1fr 220px;align-items:center;min-height:76px;padding:8px 25px;border-top:1px solid rgba(215, 122, 33,.27);background:rgba(2,4,13,.94);backdrop-filter:blur(18px)}.wf-player-track{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px}.wf-player-art{width:52px;height:52px;border-radius:5px;background-size:cover!important;background-position:center!important}.wf-player-track b,.wf-player-track small{display:block}.wf-player-track b{font-size:11px}.wf-player-track small{margin-top:5px;color:#efad31;font-size:8px}.wf-player-controls{display:grid;grid-template-columns:32px 32px 46px 32px 32px;align-items:center;justify-content:center;gap:9px}.wf-player-controls button{background:transparent;color:#fff;font-size:15px}.wf-player-play{display:grid!important;place-items:center;width:45px;height:45px;padding-left:3px;border:1px solid #efad31!important;border-radius:50%;box-shadow:0 0 16px rgba(215, 122, 33,.26)}.wf-player-progress{grid-column:1/-1;width:340px;height:3px;margin-top:2px;background:#2a2d3c}.wf-player-progress i{display:block;width:54%;height:100%;background:linear-gradient(90deg,#efad31,#efad31)}.wf-player-volume{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:#fff}.wf-player-volume>span{width:92px;height:4px;background:#303442}.wf-player-volume i{display:block;width:65%;height:100%;background:linear-gradient(90deg,#efad31,#efad31)}
@media(max-width:1050px){.wf-hero{grid-template-columns:.9fr 1.1fr}.wf-track-grid{grid-template-columns:repeat(3,1fr)}.wf-track-card:nth-child(n+4){display:none}.wf-collaborate{grid-template-columns:1fr}.wf-benefit{padding:0 13px}.wf-final{grid-template-columns:230px 1fr}.wf-final>a{grid-column:2;margin:0 30px 22px 0;justify-self:start}.wf-player{grid-template-columns:230px 1fr}.wf-player-volume{display:none}}
@media(max-width:760px){.wf-home-canvas{width:calc(100% - 24px)}.wf-hero{grid-template-columns:1fr;padding:35px 8px 10px}.wf-hero-copy{padding-bottom:0}.wf-hero-signal{min-height:410px}.wf-metrics{grid-template-columns:1fr 1fr;width:100%}.wf-metric{padding:12px 15px}.wf-metric:nth-child(3){border-left:0}.wf-track-grid{grid-template-columns:1fr 1fr}.wf-track-card:nth-child(3){display:none}.wf-collab-grid{grid-template-columns:1fr}.wf-why>div{grid-template-columns:1fr 1fr;gap:20px}.wf-benefit:nth-child(3){border-left:0}.wf-final{grid-template-columns:1fr;gap:22px;padding:0 20px 24px}.wf-final-art{height:130px;margin:0 -20px}.wf-final>a{grid-column:1;margin:0}.wf-player{grid-template-columns:1fr;padding:8px 13px}.wf-player-controls{display:none}.wf-hero h1{font-size:50px}.wf-actions{display:grid}.wf-actions a{width:100%}}

/* === Supplied-asset hero and reference navigation === */
.site-header{height:70px!important;padding:0 clamp(20px,3.2vw,52px)!important;gap:30px!important;background:rgba(2,5,12,.97)!important;border-bottom:1px solid rgba(215, 122, 33,.2)!important}
.site-logo{width:166px!important;margin-right:10px!important;overflow:visible}.site-logo img{width:43px!important;height:40px!important;border-radius:0!important;object-fit:contain!important;filter:drop-shadow(0 0 8px rgba(255,255,255,.1))}
.site-header nav{justify-content:flex-start!important;gap:29px!important}.site-header nav a{padding:27px 0 24px!important;color:#f3f1f6!important;font:650 12px/1 Inter,"Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important}.site-header nav a:hover{color:#fff!important}.site-header nav a.active{color:#fff!important}.site-header nav a.active:after{left:0!important;right:0!important;bottom:10px!important;height:2px!important;background:#efad31!important;box-shadow:0 0 10px rgba(215, 122, 33,.65)!important}
.site-header .search{width:min(244px,20vw)!important;height:42px!important;border:1px solid #26354a!important;border-radius:23px!important;background:#09121d!important;color:#aeb8c6!important}.site-header .topbtn{min-height:42px!important;padding:0 22px!important;border:1px solid #9a6b12!important;border-radius:23px!important;background:transparent!important;color:#f0bd54!important;box-shadow:none!important}
body:has(.creator-landing) main#app{margin-top:70px!important}.wireframe-home .wrap{padding:0!important}.wf-home-canvas{width:100%!important;padding-bottom:96px!important}
.wf-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.wf-asset-hero{position:relative!important;display:block!important;width:100%!important;min-height:0!important;aspect-ratio:2040/1042!important;margin:0!important;padding:0!important;overflow:hidden!important;background-image:url('assets/top-bakcgrounhd-banner.jpg')!important;background-repeat:no-repeat!important;background-position:center top!important;background-size:cover!important}
.wf-asset-hero:before,.wf-asset-hero:after{display:none!important}
.wf-home-header-overlay{position:absolute;z-index:3;left:2.55%;top:2.2%;width:42.45%;height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.wf-hero-logo{position:absolute;z-index:4;left:72.9%;top:48.2%;display:grid;place-items:center;width:18.2%;aspect-ratio:1;transform:translate(-50%,-50%);transition:transform .34s ease,filter .34s ease;will-change:transform}.wf-hero-logo:hover{transform:translate(-50%,-50%) scale(1.08) rotate(2deg);filter:drop-shadow(0 0 22px rgba(215, 122, 33,.65)) drop-shadow(0 0 38px rgba(215, 122, 33,.48))}.wf-hero-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,255,255,.1))}
.wf-hero-hotspots a{position:absolute;z-index:6;display:block;color:transparent!important;background:transparent!important}.wf-hotspot-explore{left:2.55%;top:72%;width:19.1%;height:9%}.wf-hotspot-join{left:22.35%;top:72%;width:22.6%;height:9%}.wf-hero-hotspots a:focus-visible{outline:2px solid #efad31;outline-offset:2px;border-radius:6px}
.wf-panel,.wf-why,.wf-final{width:min(1420px,calc(100% - 44px));margin-left:auto!important;margin-right:auto!important}.wf-trending{margin-top:-15px!important}.wf-collaborate{margin-top:12px!important}.wf-why{margin-top:0!important}.wf-final{margin-top:12px!important}
.wf-player{position:fixed!important;left:0!important;right:0!important;bottom:0!important;grid-template-columns:minmax(310px,.8fr) minmax(420px,1.4fr) minmax(220px,.7fr)!important;min-height:78px!important;padding:7px 25px!important;background:rgba(2,5,13,.97)!important;border-top-color:rgba(215, 122, 33,.28)!important;box-shadow:0 -12px 34px rgba(0,0,0,.4)}
.wf-player-track{grid-template-columns:52px minmax(120px,1fr) 34px 34px!important;gap:10px!important}.wf-player-track>button,.wf-player-volume>button{border:0;background:transparent;color:#d8dce4;font-size:21px}.wf-player-track small i{color:#efad31;font-style:normal}.wf-player-controls{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}.wf-player-controls>div{display:flex;align-items:center;justify-content:center;gap:18px}.wf-player-controls>div>button{width:28px;height:28px;background:transparent;color:#f3f4f7;font-size:16px}.wf-player-controls .wf-player-play{width:46px!important;height:46px!important;border:1px solid #efad31!important;border-radius:50%!important;background:rgba(12,10,29,.85)!important;box-shadow:0 0 18px rgba(215, 122, 33,.26)!important}.wf-player-timeline{display:grid;grid-template-columns:34px minmax(180px,360px) 34px;align-items:center;justify-content:center;gap:10px}.wf-player-timeline time{color:#949ca9;font-size:8px}.wf-player-timeline>span{height:3px;background:#2b3040}.wf-player-timeline>span i{display:block;width:54%;height:100%;background:linear-gradient(90deg,#efad31,#efad31)}.wf-player-volume{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important}.wf-player-volume>span{width:90px!important;height:4px!important;background:#303544!important}.wf-player-volume>span i{display:block;width:64%;height:100%;background:linear-gradient(90deg,#efad31,#efad31)}
@media(max-width:980px){.site-logo{width:auto!important}.site-header{gap:18px!important}.site-header nav{gap:18px!important}.site-header .search{display:none!important}.wf-player{grid-template-columns:260px 1fr!important}.wf-player-volume{display:none!important}}
@media(max-width:760px){.site-header{height:64px!important;padding:0 14px!important}.site-logo img{width:35px!important;height:33px!important}.wf-asset-hero{aspect-ratio:1.15!important;background-position:64% top!important}.wf-home-header-overlay{left:3%;top:7%;width:63%}.wf-hero-logo{left:72%;top:45%;width:24%}.wf-hotspot-explore{left:3%;top:69%;width:28%;height:10%}.wf-hotspot-join{left:32%;top:69%;width:33%;height:10%}.wf-panel,.wf-why,.wf-final{width:calc(100% - 24px)}.wf-player{grid-template-columns:1fr!important;padding:8px 13px!important}.wf-player-controls,.wf-player-volume,.wf-player-track>button{display:none!important}}

/* Proportional 60vh hero scaling. */
.wf-asset-hero{height:clamp(420px,60vh,650px)!important;aspect-ratio:auto!important;background-image:url('assets/top-bakcgrounhd-banner.jpg'),linear-gradient(100deg,#02040c 0%,#070518 48%,#020712 100%)!important;background-size:auto 100%,cover!important;background-position:center center,center!important;background-repeat:no-repeat!important;background-attachment:scroll!important}
.wf-home-header-overlay{left:2.55%!important;top:4%!important;width:auto!important;height:78%!important}
.wf-hero-logo{left:calc(50% + 27vh)!important;top:48.2%!important;width:auto!important;height:37%!important;aspect-ratio:1!important}
.wf-hero-hotspots{position:absolute;z-index:6;left:2.55%;top:4%;height:78%;aspect-ratio:433/402;pointer-events:none}.wf-hero-hotspots a{pointer-events:auto}.wf-hotspot-explore{left:0!important;top:89.2%!important;width:44.8%!important;height:10.8%!important}.wf-hotspot-join{left:46.7%!important;top:89.2%!important;width:53.3%!important;height:10.8%!important}
@media(max-width:760px){.wf-asset-hero{height:clamp(430px,60svh,590px)!important;aspect-ratio:auto!important;background-size:auto 100%,cover!important;background-position:62% center,center!important;background-attachment:scroll!important}.wf-home-header-overlay{left:3%!important;top:7%!important;height:68%!important}.wf-hero-logo{left:76%!important;top:44%!important;height:26%!important}.wf-hero-hotspots{left:3%;top:7%;height:68%}}

/* Align hero layers to the navigation and content grid. */
body:has(.wireframe-home),body:has(.wireframe-home) main#app,.wireframe-home,.wf-home-canvas{background:linear-gradient(100deg,#02040c 0%,#070518 48%,#020712 100%)!important}
.wireframe-home{--wf-grid-edge:max(22px,calc((100vw - 1420px)/2))}
.wf-asset-hero{background-position:right var(--wf-grid-edge) calc(50% + 12px),center!important}
.wf-home-header-overlay{left:calc(clamp(20px,3.2vw,52px) + 216px)!important}
.wf-hero-hotspots{left:calc(clamp(20px,3.2vw,52px) + 216px)!important}
.wf-hero-logo{left:calc(100% - var(--wf-grid-edge) - 31.7vh)!important}
.wf-asset-hero:after{content:""!important;display:block!important;position:absolute!important;z-index:5!important;top:0!important;right:var(--wf-grid-edge)!important;bottom:0!important;width:20px!important;background:linear-gradient(90deg,transparent,#020712)!important;pointer-events:none!important}
@media(max-width:980px){.wf-home-header-overlay,.wf-hero-hotspots{left:clamp(22px,8vw,72px)!important}.wf-hero-logo{left:75%!important}}

/* Homepage ecosystem heading and interactive logo placement. */
.wf-home-eco-banner{position:relative!important;z-index:7!important;width:min(1420px,calc(100% - 44px))!important;height:70px!important;margin:10px auto -3px!important;object-fit:contain!important;object-position:center!important;pointer-events:none!important}
.wf-hero-logo{left:calc(100% - var(--wf-grid-edge) - 31.7vh - clamp(35px,3vw,60px))!important;right:auto!important;top:calc(41% + 12px)!important;bottom:auto!important;height:68%!important;width:auto!important;transform:translate(-50%,-50%)!important;transform-origin:center!important}
.wf-hero-logo:hover{transform:translate(-50%,-50%) scale(1.05) rotate(2deg)!important}
@media(max-width:980px){.wf-hero-logo{left:60%!important;top:calc(43% + 12px)!important;height:56%!important}}
@media(max-width:760px){.wireframe-home{--wf-grid-edge:12px}.wf-home-eco-banner{width:calc(100% - 24px)!important;height:56px!important}.wf-hero-logo{left:60%!important;top:calc(43% + 12px)!important;height:52%!important}}

/* Keep the hero artwork on the same content grid as the panels below. */
.wf-asset-hero{background:linear-gradient(100deg,#02040c 0%,#070518 48%,#020712 100%)!important}
.wf-home-eco-banner+.wf-asset-hero{margin-top:-15px!important}
.wf-asset-hero:before{content:""!important;display:block!important;position:absolute!important;z-index:0!important;inset:0 var(--wf-grid-edge)!important;background:url('assets/top-bakcgrounhd-banner.jpg') right center/auto 100% no-repeat!important;transform:translateY(12px)!important;pointer-events:none!important}
.wf-hero-logo{left:calc(100% - var(--wf-grid-edge) - clamp(222px,31.7vh,343px))!important;top:calc(41% + 12px)!important}
.wf-hero-hotspots .wf-hotspot-explore,.wf-hero-hotspots .wf-hotspot-join{top:89.2%!important;height:10.8%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;background:linear-gradient(105deg,#8d4927,#efad31 48%,#efad31)!important;border:1px solid rgba(215, 122, 33,.72)!important;border-radius:6px!important;font:850 12px/1 Inter,"Segoe UI",Arial,sans-serif!important;text-transform:uppercase!important;box-shadow:0 10px 25px rgba(215, 122, 33,.24)!important;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease!important}
.wf-hero-hotspots .wf-hotspot-explore{left:0!important;width:33.1%!important}.wf-hero-hotspots .wf-hotspot-join{left:35.3%!important;width:37.5%!important}
.wf-hero-hotspots .wf-hotspot-explore:hover,.wf-hero-hotspots .wf-hotspot-join:hover{transform:translateY(-2px)!important;filter:brightness(1.16) saturate(1.1)!important;box-shadow:0 0 24px rgba(215, 122, 33,.48),0 0 16px rgba(215, 122, 33,.34)!important}
@media(max-width:980px){.wf-hero-logo{left:calc(100% - var(--wf-grid-edge) - clamp(222px,31.7vh,343px))!important}}
@media(min-width:1600px){.wf-hero-logo{left:calc(100% - var(--wf-grid-edge) - clamp(222px,31.7vh,343px) - 40px)!important}}

/* New background for internal pages; Home and About retain their own artwork. */
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)),body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app,body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) .wrap{background-color:#050b14!important;background-image:linear-gradient(90deg,rgba(5,11,20,.94),rgba(5,11,20,.62),rgba(5,11,20,.93)),url('assets/klankstal-page-background.png')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) .wrap:before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;inset:0!important;opacity:1!important;background-color:#050b14!important;background-image:linear-gradient(90deg,rgba(5,11,20,.94),rgba(5,11,20,.62),rgba(5,11,20,.93)),url('assets/klankstal-page-background.png')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important;pointer-events:none!important}
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) .wrap:after{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;inset:0!important;background:linear-gradient(180deg,rgba(2,5,12,.2),rgba(2,5,12,.5))!important;pointer-events:none!important}

/* Every internal route renders this banner; use it as the definitive page-background hook. */
body:has(.page-eco-banner),body:has(.page-eco-banner) main#app,body:has(.page-eco-banner) main#app>.wrap{background-color:#050b14!important;background-image:linear-gradient(90deg,rgba(5,11,20,.94),rgba(5,11,20,.62),rgba(5,11,20,.93)),url('assets/klankstal-page-background.png')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body:has(.page-eco-banner) main#app>.wrap:before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;inset:0!important;opacity:1!important;background-color:#050b14!important;background-image:linear-gradient(90deg,rgba(5,11,20,.94),rgba(5,11,20,.62),rgba(5,11,20,.93)),url('assets/klankstal-page-background.png')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important;pointer-events:none!important}

/* One full-viewport background layer prevents cropped or repeated page sections. */
body:has(.page-eco-banner),body:has(.page-eco-banner) main#app{background-color:#050b14!important;background-image:linear-gradient(90deg,rgba(5,11,20,.22),rgba(5,11,20,.03),rgba(5,11,20,.18)),url('assets/klankstal-page-background.png')!important;background-position:center center!important;background-size:100vw 100vh!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body:has(.page-eco-banner) main#app>.wrap{background:transparent!important}
body:has(.page-eco-banner) main#app>.wrap:before,body:has(.page-eco-banner) main#app>.wrap:after{display:none!important;background:none!important}

/* Remove decorative wave artwork from page-heading panels. */
img[src$="explore-wave-hero.png"]{display:none!important}
section:has(>img[src$="explore-wave-hero.png"]){background-color:rgba(8,11,31,.78)!important;background-image:none!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}

/* Compact Explore artist results. */
.discover-page .artist-browse-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.discover-page .artist-browse-card{min-height:66px!important;gap:9px!important;padding:8px 10px!important;border-radius:8px!important}
.discover-page .artist-browse-avatar-frame{padding:2px!important;border-radius:7px!important}
.discover-page .artist-browse-avatar-frame .avatar{width:46px!important;height:46px!important;font-size:14px!important}
.discover-page .artist-browse-info{gap:2px!important}.discover-page .artist-browse-info b{font-size:12px!important}.discover-page .artist-browse-info small,.discover-page .artist-browse-followers{font-size:9px!important}
@media(max-width:1100px){.discover-page .artist-browse-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:800px){.discover-page .artist-browse-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:520px){.discover-page .artist-browse-grid{grid-template-columns:1fr!important}}

/* Artist registration credentials, roles and plan confirmation. */
.artist-role-block,.artist-password-block{margin:8px 0 0;padding:18px;border:1px solid #32485d;border-radius:9px;background:rgba(5,13,25,.72)}
.artist-role-block legend,.artist-password-block legend{padding:0 7px;color:#e2b451;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.artist-role-block>small,.artist-password-block>p{display:block;margin:0 0 12px;color:#9eacba;font-size:11px}
.artist-role-options{display:flex;flex-wrap:wrap;gap:8px}.artist-role-options button{padding:8px 12px;border:1px solid #39536b;border-radius:4px;background:#08131f;color:#b9c6d2;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.artist-role-options button:hover,.artist-role-options button.selected{border-color:#efad31;background:linear-gradient(105deg,rgba(215, 122, 33,.78),rgba(215, 122, 33,.72));color:#fff;box-shadow:0 0 15px rgba(215, 122, 33,.2)}
.artist-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.artist-password-grid label{margin:0!important}.password-requirements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:14px 0 0;padding:0;list-style:none}.password-requirements li{color:#9aa7b5;font-size:10px}.password-requirements li:before{content:"○";margin-right:7px;color:#748596}.password-requirements li.valid{color:#f2ca69}.password-requirements li.valid:before{content:"✓";color:#f2ca69}
.artist-signup-actions{display:flex!important;align-items:center;flex-wrap:wrap;gap:18px!important;margin-top:20px}.artist-plan-choice{display:flex;align-items:center;min-height:42px}.selected-artist-plan{display:flex;flex-direction:column;gap:3px;min-width:190px;padding:9px 15px;border:1px solid rgba(215, 122, 33,.58);border-radius:7px;background:linear-gradient(110deg,rgba(48,16,86,.76),rgba(6,18,35,.88))}.selected-artist-plan small{color:#aab4c2;font-size:9px;text-transform:uppercase}.selected-artist-plan b{color:#fff;font-size:13px}.artist-signup-status{flex-basis:100%;min-height:18px;color:#f2ca69;font-size:11px}.artist-signup-status.error{color:#ff7781}.artist-signup-actions>[data-create-artist-profile]{margin-left:6px}
.artist-role-tags,.ap-skill-tags{display:flex;flex-wrap:wrap;gap:7px}.artist-role-tags span,.ap-skill-tag{padding:6px 9px;border:1px solid #39536b;border-radius:4px;background:rgba(7,18,31,.86);color:#bcd0df;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:680px){.artist-password-grid,.password-requirements{grid-template-columns:1fr}.artist-signup-actions{align-items:stretch;flex-direction:column}.artist-plan-choice,.artist-signup-actions button,.selected-artist-plan{width:100%}.artist-signup-actions>[data-create-artist-profile]{margin-left:0}}
.creator-hero-copy>p{max-width:600px;margin:28px 0 0;color:#aab6c2;font-size:18px;line-height:1.65}
.creator-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.creator-primary-cta,.creator-secondary-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 21px;border-radius:7px;font-size:13px;font-weight:750;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.creator-primary-cta{color:#041113;background:linear-gradient(100deg,var(--creator-cyan),#efad31);box-shadow:0 14px 34px rgba(215, 122, 33,.16)}
.creator-primary-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(215, 122, 33,.25)}
.creator-secondary-cta{color:#eef3f5;border:1px solid rgba(239, 173, 49,.26);background:rgba(8,16,25,.62)}
.creator-secondary-cta:hover{transform:translateY(-2px);border-color:var(--creator-cyan)}
.creator-play-dot{display:grid;place-items:center;width:25px;height:25px;padding-left:2px;border-radius:50%;background:#fff;color:#061018;font-size:9px}
.creator-proof-row{display:flex;flex-wrap:wrap;gap:0;margin-top:42px;color:#8493a1;font-size:11px}
.creator-proof-row span{padding:0 21px;border-left:1px solid rgba(255,255,255,.12)}
.creator-proof-row span:first-child{padding-left:0;border-left:0}
.creator-proof-row b{display:block;margin-bottom:4px;color:#e7edf1;font-size:15px}
.creator-hero-visual{position:relative;align-self:stretch;min-height:570px;margin-right:-4vw;overflow:hidden;border-radius:0 0 0 120px;mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 90%,transparent 100%)}
.creator-hero-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;filter:saturate(.9) contrast(1.08)}
.creator-hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--creator-bg) 0%,transparent 25%,transparent 78%,var(--creator-bg) 100%),linear-gradient(180deg,var(--creator-bg) 0%,transparent 18%,transparent 76%,var(--creator-bg) 100%)}
.creator-now-playing{position:absolute;z-index:2;right:8%;bottom:9%;display:grid;grid-template-columns:52px 1fr 42px;align-items:center;gap:12px;width:min(370px,80%);padding:11px;border:1px solid rgba(239, 173, 49,.24);border-radius:11px;background:rgba(4,10,17,.78);box-shadow:0 18px 60px rgba(0,0,0,.55);backdrop-filter:blur(16px)}
.creator-now-art{width:52px;height:52px;border-radius:7px;background-size:cover!important;background-position:center!important}
.creator-now-playing div:nth-child(2){min-width:0}
.creator-now-playing small,.creator-now-playing b,.creator-now-playing span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creator-now-playing small{color:var(--creator-cyan);font-size:8px;letter-spacing:.14em}
.creator-now-playing b{margin:4px 0 2px;font-size:14px}
.creator-now-playing span{color:#8f9eaa;font-size:10px}
.creator-now-playing button{display:grid;place-items:center;width:38px;height:38px;padding-left:3px;border:0;border-radius:50%;background:#fff;color:#051017;font-size:12px;cursor:pointer}
.creator-home-section{width:min(1400px,calc(100% - 56px));margin:0 auto;padding:105px 0}
.creator-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
.creator-section-head>div>span{margin-bottom:12px}
.creator-section-head h2,.creator-value-intro h2,.creator-product-copy h2,.creator-spotlight-copy h2,.creator-trust h2,.creator-final-cta h2{margin:0;color:#f4f7f8;font-size:clamp(34px,4vw,58px);font-weight:680;line-height:1.05;letter-spacing:-.045em}
.creator-section-head>a{flex:none;padding-bottom:7px;color:var(--creator-cyan);font-size:12px;font-weight:700}
.creator-release-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.creator-release-card{min-width:0;transition:transform .22s ease}
.creator-release-card:hover{transform:translateY(-7px)}
.creator-release-art-wrap{position:relative;aspect-ratio:1;overflow:hidden;border-radius:11px;background:#101b25}
.creator-release-art{width:100%;height:100%;background-size:cover!important;background-position:center!important;transition:transform .35s ease,filter .35s ease}
.creator-release-card:hover .creator-release-art{transform:scale(1.045);filter:brightness(.72)}
.creator-release-art-wrap>span{position:absolute;left:10px;top:10px;padding:5px 7px;border:1px solid rgba(255,255,255,.19);border-radius:13px;background:rgba(2,7,12,.66);color:#d8e0e6;font-size:8px;backdrop-filter:blur(8px)}
.creator-release-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;padding-left:4px;border:0;border-radius:50%;background:#fff;color:#071018;font-size:14px;opacity:1;transform:translate(-50%,-50%);cursor:pointer}
.creator-release-copy{display:grid;grid-template-columns:1fr 32px;align-items:center;gap:8px;padding:13px 2px 0}
.creator-release-copy a{min-width:0;color:#f4f6f7}
.creator-release-copy b,.creator-release-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creator-release-copy b{font-size:13px}
.creator-release-copy small{margin-top:5px;color:#83929e;font-size:10px}
.creator-release-love{width:30px;height:30px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;color:var(--creator-cyan);cursor:pointer}
.creator-release-love.loved{border-color:var(--creator-cyan);background:rgba(215, 122, 33,.1)}
.creator-value-section{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;border-top:1px solid var(--creator-line)}
.creator-value-intro>span{margin-bottom:14px}
.creator-value-intro p,.creator-product-copy>p{max-width:550px;margin:23px 0 0;color:#8f9eaa;font-size:15px;line-height:1.75}
.creator-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.creator-value-grid article{position:relative;min-height:230px;padding:28px;border:1px solid var(--creator-line);border-radius:12px;background:linear-gradient(145deg,rgba(11,23,34,.8),rgba(4,10,17,.58));transition:border-color .2s ease,transform .2s ease,background .2s ease}
.creator-value-grid article:hover{transform:translateY(-4px);border-color:rgba(215, 122, 33,.43);background:linear-gradient(145deg,rgba(11,29,39,.94),rgba(6,12,22,.74))}
.creator-value-grid article>i{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:rgba(215, 122, 33,.09);color:var(--creator-cyan);font-style:normal;font-size:20px}
.creator-value-grid article>small{position:absolute;right:22px;top:22px;color:#53616d;font-size:10px}
.creator-value-grid h3{margin:24px 0 10px;font-size:18px}
.creator-value-grid p{margin:0;color:#8796a3;font-size:12px;line-height:1.65}
.creator-product{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:80px;width:100%;max-width:none;padding:110px max(28px,calc((100% - 1400px)/2));background:linear-gradient(100deg,rgba(7,17,27,.92),rgba(4,9,16,.56)),radial-gradient(circle at 75% 50%,rgba(215, 122, 33,.1),transparent 35%);border-top:1px solid var(--creator-line);border-bottom:1px solid var(--creator-line)}
.creator-product-copy>span{margin-bottom:14px}
.creator-product-copy ul{display:grid;gap:11px;margin:25px 0;padding:0;list-style:none;color:#c8d0d6;font-size:12px}
.creator-product-copy li:before{content:"";display:inline-block;width:6px;height:6px;margin-right:11px;border-radius:50%;background:var(--creator-cyan);box-shadow:0 0 9px rgba(215, 122, 33,.55)}
.creator-product-copy>a{display:inline-flex;gap:12px;margin-top:8px;color:var(--creator-cyan);font-size:12px;font-weight:750}
.creator-dashboard-preview{position:relative;padding:18px;border:1px solid rgba(239, 173, 49,.25);border-radius:16px;background:rgba(3,9,15,.86);box-shadow:0 38px 90px rgba(0,0,0,.52),0 0 65px rgba(215, 122, 33,.06);transform:perspective(1300px) rotateY(-4deg) rotateX(2deg)}
.creator-dashboard-preview:before{content:"";position:absolute;inset:-1px;border-radius:16px;background:linear-gradient(125deg,rgba(215, 122, 33,.34),transparent 22%,transparent 76%,rgba(215, 122, 33,.3));z-index:-1}
.creator-dashboard-top{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:4px 2px 17px;border-bottom:1px solid var(--creator-line)}
.creator-dashboard-top>span{display:flex;gap:5px}.creator-dashboard-top i{width:7px;height:7px;border-radius:50%;background:#34434e}.creator-dashboard-top i:first-child{background:var(--creator-cyan)}
.creator-dashboard-top small{color:#73838e;font-size:8px;letter-spacing:.13em}.creator-dashboard-top b{font-size:12px}
.creator-dashboard-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.creator-dashboard-metrics article{padding:17px;border:1px solid var(--creator-line);border-radius:9px;background:#07121c}
.creator-dashboard-metrics small,.creator-dashboard-metrics b,.creator-dashboard-metrics span{display:block}.creator-dashboard-metrics small{color:#748591;font-size:8px;letter-spacing:.12em}.creator-dashboard-metrics b{margin:8px 0 5px;font-size:22px}.creator-dashboard-metrics span{color:var(--creator-cyan);font-size:9px}
.creator-dashboard-chart{padding:18px;border:1px solid var(--creator-line);border-radius:10px;background:#050d15}
.creator-chart-bars{display:flex;align-items:end;gap:7px;height:145px;padding:10px 4px 0;border-bottom:1px solid #1d2b36;background:repeating-linear-gradient(180deg,transparent 0,transparent 34px,rgba(255,255,255,.035) 35px)}
.creator-chart-bars i{flex:1;min-width:5px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--creator-cyan),rgba(141, 73, 39,.22))}
.creator-dashboard-track{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;margin-top:14px}
.creator-dashboard-art{width:38px;height:38px;border-radius:6px;background-size:cover!important;background-position:center!important}.creator-dashboard-track span b,.creator-dashboard-track span small{display:block}.creator-dashboard-track span b{font-size:11px}.creator-dashboard-track span small{margin-top:3px;color:#74838e;font-size:8px}.creator-dashboard-track strong{color:#e5b553;font-size:12px}
.creator-journey{border-bottom:1px solid var(--creator-line)}
.creator-journey ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;counter-reset:none}
.creator-journey li{position:relative;min-height:205px;padding:25px 30px 20px 0;border-top:1px solid rgba(255,255,255,.16)}
.creator-journey li:not(:last-child){margin-right:18px}
.creator-journey li:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--creator-cyan);box-shadow:0 0 12px var(--creator-cyan)}
.creator-journey li span{display:block;margin-bottom:35px;color:#52616d;font-size:11px}
.creator-journey li b{display:block;font-size:16px}
.creator-journey li p{max-width:245px;margin:11px 0 0;color:#81909c;font-size:11px;line-height:1.65}
.creator-spotlight{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:75px}
.creator-spotlight-art{position:relative;width:min(100%,540px);aspect-ratio:1.12;overflow:hidden;border-radius:16px;background:linear-gradient(145deg,rgba(215, 122, 33,.12),rgba(215, 122, 33,.13))}
.creator-spotlight-avatar{width:100%;height:100%;border-radius:0!important;background-size:cover!important;background-position:center!important;font-size:80px!important}
.creator-spotlight-art>span{position:absolute;left:20px;bottom:20px;padding:8px 11px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(1,7,12,.7);color:#fff;font-size:9px;letter-spacing:.14em;backdrop-filter:blur(9px)}
.creator-spotlight-copy>span{margin-bottom:13px}
.creator-spotlight-meta{margin:12px 0 24px;color:var(--creator-gold);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.creator-spotlight blockquote{max-width:660px;margin:0;color:#b9c3ca;font-size:clamp(19px,2vw,27px);line-height:1.5;font-weight:350}
.creator-spotlight-copy>div{display:flex;align-items:center;gap:22px;margin-top:31px}
.creator-spotlight-copy button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:0;border-radius:6px;background:#fff;color:#071018;font-weight:750;cursor:pointer}.creator-spotlight-copy button span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#071018;color:#fff;font-size:8px}.creator-spotlight-copy a{color:var(--creator-cyan);font-size:12px;font-weight:700}
.creator-trust{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding-top:80px;border-top:1px solid var(--creator-line)}
.creator-trust>div>span{margin-bottom:13px}.creator-trust h2{font-size:clamp(31px,3.3vw,49px)}
.creator-trust-grid{display:grid;gap:10px}
.creator-trust-grid article{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:13px;padding:16px;border:1px solid var(--creator-line);border-radius:9px;background:rgba(7,16,25,.58)}
.creator-trust-grid article>b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(215, 122, 33,.1);color:var(--creator-cyan)}
.creator-trust-grid strong,.creator-trust-grid small{display:block}.creator-trust-grid strong{font-size:12px}.creator-trust-grid small{margin-top:4px;color:#7f8f9b;font-size:10px;line-height:1.45}
.creator-final-cta{position:relative;display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:28px;width:min(1400px,calc(100% - 56px));margin:0 auto 58px;padding:42px;border:1px solid rgba(215, 122, 33,.25);border-radius:15px;background:radial-gradient(circle at 12% 50%,rgba(215, 122, 33,.09),transparent 25%),linear-gradient(120deg,rgba(9,23,33,.95),rgba(11,11,25,.9));overflow:hidden}
.creator-final-cta:after{content:"";position:absolute;right:-8%;top:-120%;width:45%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(215, 122, 33,.2);box-shadow:0 0 80px rgba(215, 122, 33,.08);pointer-events:none}
.creator-final-orb{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,rgba(215, 122, 33,.18),transparent 68%)}.creator-final-orb img{width:58px;height:58px;object-fit:contain}.creator-final-cta>div>span{margin-bottom:10px}.creator-final-cta h2{font-size:clamp(27px,3.2vw,45px)}.creator-final-cta p{margin:10px 0 0;color:#8c9aa5;font-size:13px}.creator-final-cta>a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 20px;border-radius:7px;background:var(--creator-cyan);color:#041013;font-size:12px;font-weight:800}
@media(max-width:1180px){.creator-hero{grid-template-columns:.95fr 1.05fr;padding-left:38px;padding-right:38px}.creator-hero h1{font-size:clamp(54px,6.4vw,76px)}.creator-release-grid{grid-template-columns:repeat(3,1fr);gap:22px}.creator-value-section,.creator-product,.creator-trust{gap:45px}.creator-home-section{width:min(100% - 42px,1400px)}.creator-final-cta{width:calc(100% - 42px)}}
@media(max-width:860px){body:has(.creator-landing) main#app{margin-top:70px!important}.creator-hero{grid-template-columns:1fr;min-height:0;padding:70px 24px 40px}.creator-hero-copy{max-width:700px;padding:0}.creator-hero-visual{min-height:430px;margin:20px -24px 0;border-radius:0;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}.creator-hero-visual>img{object-position:62% center}.creator-proof-row{margin-top:32px}.creator-home-section{padding:78px 0}.creator-value-section,.creator-product,.creator-spotlight,.creator-trust{grid-template-columns:1fr}.creator-product{width:100%;padding:80px 24px}.creator-dashboard-preview{transform:none}.creator-journey ol{grid-template-columns:1fr 1fr;gap:0 20px}.creator-final-cta{grid-template-columns:72px 1fr}.creator-final-orb{width:70px;height:70px}.creator-final-cta>a{grid-column:2;justify-self:start}}
@media(max-width:620px){body:has(.creator-landing) .site-header{height:70px!important}.creator-hero{padding:54px 17px 28px}.creator-hero h1{font-size:47px;letter-spacing:-.055em}.creator-hero-copy>p{font-size:15px}.creator-hero-actions{display:grid}.creator-primary-cta,.creator-secondary-cta{width:100%}.creator-proof-row{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.creator-proof-row span{padding:0 9px}.creator-proof-row b{font-size:13px}.creator-hero-visual{min-height:330px;margin-left:-17px;margin-right:-17px}.creator-now-playing{left:18px;right:18px;width:auto}.creator-home-section{width:calc(100% - 30px);padding:64px 0}.creator-section-head{align-items:start;flex-direction:column;margin-bottom:25px}.creator-section-head h2,.creator-value-intro h2,.creator-product-copy h2,.creator-spotlight-copy h2,.creator-trust h2{font-size:34px}.creator-release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 10px}.creator-release-play{opacity:1;width:40px;height:40px}.creator-value-grid{grid-template-columns:1fr}.creator-value-grid article{min-height:200px}.creator-dashboard-metrics{grid-template-columns:1fr 1fr}.creator-dashboard-metrics article:last-child{grid-column:1/-1}.creator-journey ol{grid-template-columns:1fr}.creator-journey li{min-height:170px;margin-right:0!important}.creator-spotlight{gap:35px}.creator-spotlight-copy>div{align-items:flex-start;flex-direction:column}.creator-trust{gap:32px}.creator-final-cta{grid-template-columns:1fr;width:calc(100% - 30px);padding:28px}.creator-final-orb{display:none}.creator-final-cta>a{grid-column:1;width:100%;justify-content:center}}
.wf-player-track{grid-template-columns:52px minmax(120px,1fr) 34px!important}

/* Internal-page artwork belongs to the page canvas, never to the content wrapper.
   This keeps the area below the final block on the default site background. */
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app,
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app>.wrap,
body:has(.page-eco-banner) main#app,
body:has(.page-eco-banner) main#app>.wrap{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
}

/* Stop the content tint at the final block and reveal the site artwork below. */
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app::before,
body:has(.page-eco-banner) main#app::before{display:none!important;content:none!important}
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app,
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app>.wrap{
  min-height:0!important;
  height:auto!important;
  box-shadow:none!important;
}
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)){
  background-color:#050b14!important;
  background-image:linear-gradient(180deg,rgba(2,5,12,.56) 0%,rgba(2,5,12,.66) 58%,rgba(2,5,12,.78) 100%),linear-gradient(90deg,rgba(5,11,20,.64),rgba(5,11,20,.42),rgba(5,11,20,.67)),url('assets/klankstal-page-background.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

/* Portal shells end with their content; only individual blocks carry blue tint. */
body:has([data-artist-portal]) .artist-portal,
body:has([data-fan-portal]) .artist-portal,
body:has([data-artist-portal]) .artist-portal-main,
body:has([data-fan-portal]) .artist-portal-main{
  min-height:0!important;
  height:auto!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Weekly Jukebox: square cover art with artist above the track title. */
.jukebox-row,
.jukebox-row-head{
  grid-template-columns:34px 68px minmax(180px,1fr) 90px 76px 60px 54px minmax(90px,180px) 60px 38px!important;
}
.jukebox-row{min-height:82px!important;align-items:center!important}
.jukebox-row .cover-play-wrap{width:68px!important;height:68px!important;align-self:center!important}
.jukebox-row .cover-play-wrap .avatar{
  display:block!important;
  width:68px!important;
  height:68px!important;
  aspect-ratio:1!important;
  object-fit:cover!important;
  border-radius:6px!important;
}
.jukebox-row>div:nth-child(3){
  display:flex!important;
  min-width:0!important;
  padding-left:8px!important;
  flex-direction:column!important;
  align-self:stretch!important;
  justify-content:flex-start!important;
  padding-top:7px!important;
}
.jukebox-row>div:nth-child(3)>small{order:1!important;display:block!important;margin:0 0 5px!important;color:#aeb9c7!important;font-size:11px!important}
.jukebox-row>div:nth-child(3)>b{order:2!important;display:block!important;color:#f5f6f8!important;font-size:13px!important}
@media(max-width:680px){
  .jukebox-row,.jukebox-row-head{grid-template-columns:28px 58px minmax(0,1fr) 54px!important}
  .jukebox-row .cover-play-wrap,.jukebox-row .cover-play-wrap .avatar{width:58px!important;height:58px!important}
}
/* Password reset and mandatory temporary-password replacement. */
.login-submit-row{display:flex;gap:10px;align-items:stretch}.login-submit-row .btn{flex:1;margin:0!important;white-space:normal;text-align:center;line-height:1.2;padding-top:10px;padding-bottom:10px}.password-flow-overlay{position:fixed;inset:0;z-index:14000;display:grid;place-items:center;padding:20px;background:rgba(1,4,12,.82);backdrop-filter:blur(7px)}.password-flow-card{position:relative;width:min(500px,calc(100vw - 32px));box-sizing:border-box;padding:30px;border:1px solid rgba(215, 122, 33,.48);border-radius:16px;background:linear-gradient(145deg,rgba(10,20,37,.98),rgba(4,9,20,.98));box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 32px rgba(239, 173, 49,.12);color:#f4f6fa}.password-flow-card h2{margin:7px 0 8px;font:700 29px/1.12 "Trebuchet MS",Arial,sans-serif}.password-flow-card>p{color:#aebdcb;line-height:1.5}.password-flow-card label{display:grid;gap:6px;margin-top:15px;color:#e9edf4;font-size:12px;font-weight:700}.password-flow-card input{width:100%;box-sizing:border-box;min-height:44px;padding:10px 14px;border:1px solid #36516a;border-radius:11px;background:#0b1725;color:#fff;font:inherit}.password-flow-card input:focus{outline:2px solid rgba(239, 173, 49,.55);border-color:#efad31}.password-flow-card input[readonly]{color:#9fb0c1;background:#08111d;cursor:not-allowed}.password-flow-close{position:absolute;right:14px;top:13px;width:32px;height:32px;border:1px solid #36516a;border-radius:50%;background:#08111d;color:#fff;font-size:22px;line-height:1;cursor:pointer}.password-flow-actions{display:flex;justify-content:center;gap:12px;margin-top:20px}.password-flow-actions .btn{min-width:120px}.password-flow-status{min-height:20px;margin:12px 0 0!important;color:#d77a21!important;font-weight:700}.password-rules{display:block;margin-top:9px;color:#94a8ba;line-height:1.45}.password-change-required .password-flow-card{border-color:rgba(239, 173, 49,.5)}@media(max-width:540px){.login-submit-row{flex-direction:column}.password-flow-card{padding:24px 18px}.password-flow-card h2{font-size:25px}.password-flow-actions{flex-direction:column}.password-flow-actions .btn{width:100%}}
/* Artist acceptance status displayed beneath the signed-in artist identity. */
.artist-acceptance-status{display:grid;gap:2px;margin-top:7px}.artist-acceptance-status small{color:#91a4b7;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.artist-acceptance-status strong{width:max-content;padding:4px 9px;border:1px solid #40556b;border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.artist-acceptance-status.status-verified strong{color:#d77a21;border-color:#8d4927;background:rgba(20,112,70,.2)}.artist-acceptance-status.status-review strong{color:#ffd45c;border-color:#ad7d18;background:rgba(143,97,8,.2)}.artist-acceptance-status.status-declined strong{color:#ff7893;border-color:#a63c55;background:rgba(128,25,48,.22)}.curator-review-art>img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fan-month-list{display:grid;gap:10px;margin-top:18px}.fan-month-row{display:grid;grid-template-columns:100px minmax(120px,1fr) 60px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid rgba(215, 122, 33,.14)}.fan-month-row>span{height:10px;border:1px solid rgba(239, 173, 49,.45);border-radius:999px;background:#efad31;overflow:hidden}.fan-month-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d77a21,#efad31)}.fan-month-row strong{text-align:right}.portal-business-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,1fr) 120px 120px;gap:16px;padding:13px 0;border-bottom:1px solid rgba(215, 122, 33,.16);align-items:center}.portal-business-row strong{text-align:right}@media(max-width:700px){.fan-month-row{grid-template-columns:78px minmax(80px,1fr) 42px}.portal-business-row{grid-template-columns:1fr 90px}.portal-business-row span:nth-of-type(2){display:none}}
.portal-sidebar-profile-large{align-items:stretch}.portal-sidebar-profile{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 16px}.portal-sidebar-profile>h2{align-self:stretch;margin:0 0 3px;font-size:22px;line-height:1.15;text-align:center;color:#fff}.portal-sidebar-profile .portal-sidebar-photo-frame{width:140px!important;height:140px!important;min-width:140px!important;border-radius:18px!important;overflow:hidden}.portal-sidebar-profile .portal-sidebar-photo-frame img,.portal-sidebar-profile .portal-sidebar-photo-frame .avatar{width:100%!important;height:100%!important;object-fit:cover!important;font-size:36px}.portal-sidebar-photo-button{display:block;width:140px!important;box-sizing:border-box;text-align:center;margin:0!important}.portal-sidebar-profile .artist-acceptance-status{justify-items:center;text-align:center}.portal-sidebar-profile .artist-acceptance-status strong{width:auto}.portal-overview-grid>.portal-profile-photo{display:none!important}@media(max-width:760px){.portal-sidebar-profile .portal-sidebar-photo-frame{width:112px!important;height:112px!important;min-width:112px!important}.portal-sidebar-photo-button{width:112px!important}.portal-sidebar-profile>h2{font-size:19px}}
.fan-default-syntera-logo{display:grid!important;place-items:center;background:radial-gradient(circle,rgba(22,28,51,.94),rgba(3,7,17,.98))!important}.fan-default-syntera-logo img{width:88%!important;height:88%!important;object-fit:contain!important}
.portal-sidebar-profile .artist-acceptance-status strong{padding:5px 14px;background:transparent!important}.portal-sidebar-profile .artist-acceptance-status.status-review strong{color:#f4bd38;border-color:#f4bd38}.portal-sidebar-profile .artist-acceptance-status.status-verified strong{color:#d77a21;border-color:#d77a21}.portal-sidebar-profile .artist-acceptance-status.status-declined strong{color:#ff516f;border-color:#ff516f}
.curator-artist-plan{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin-top:18px;padding:10px 16px;border:1px solid rgba(239, 173, 49,.6);border-radius:999px;background:rgba(7,14,28,.48)}
.curator-artist-plan small{color:#f2ca69;font-size:10px;letter-spacing:.13em}
.curator-artist-plan strong{color:#fff;font-size:13px}
.artist-bio-genres{margin-top:14px}
.artist-bio-genres>small{display:block;margin-bottom:8px;color:#f2ca69;font-size:10px;font-weight:800;letter-spacing:.14em}
.artist-bio-genres>div{display:flex;flex-wrap:wrap;gap:8px}
.artist-bio-genres span{padding:6px 11px;border:1px solid rgba(215, 122, 33,.55);border-radius:999px;background:rgba(10,22,43,.52);color:#dff7ff;font-size:11px}
.artist-card-verified{color:#efad31;font-style:normal}
.artist-browse-info>span:not(.artist-browse-followers){color:#9db1c8;font-size:11px}
.explore-view-tools{display:flex;align-items:center;gap:16px}.explore-view-toggle{display:flex;align-items:center;padding:3px;border:1px solid rgba(215, 122, 33,.35);border-radius:999px;background:rgba(5,16,31,.72)}.explore-view-toggle button{min-width:64px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;cursor:pointer}.explore-view-toggle button.active{background:linear-gradient(90deg,#d77a21,#efad31);box-shadow:0 0 16px rgba(239, 173, 49,.3)}.explore-track-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.explore-track-grid .wf-track-card{min-width:0}.track-artwork-missing{display:grid;place-items:center;background:rgba(8,21,38,.82);color:#8ea1b8}@media(max-width:1050px){.explore-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.explore-track-grid{grid-template-columns:1fr}.explore-view-tools{align-items:flex-end;flex-direction:column;gap:8px}}
.data-image-missing{display:grid!important;place-items:center;background:rgba(8,21,38,.82)!important;color:#8ea1b8;font-weight:700}

/* Explore cards mirror the fixed Trending-card footprint. */
.explore-track-grid{grid-template-columns:repeat(auto-fit,248px)!important;justify-content:center;align-items:start;gap:14px!important}
.explore-track-grid .wf-track-card{width:248px!important;height:294px!important;display:flex;flex-direction:column}
.explore-track-grid .wf-track-art{flex:0 0 152px;width:196px!important;height:152px!important;aspect-ratio:auto!important;margin:0 auto}
.explore-track-grid .wf-track-cover{width:196px!important;height:152px!important;object-fit:cover;object-position:center}
.explore-track-grid .wf-track-copy{flex:1;min-height:0;overflow:hidden}
.explore-track-grid .wf-track-copy{display:flex;flex-direction:column;padding:10px 12px 8px}
.explore-track-grid .wf-track-copy .wf-grid-metrics{margin-top:7px}
.explore-track-grid .wf-track-copy>em{margin-top:6px}
.wf-grid-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:6px!important;margin-top:auto!important;padding-top:6px}
.wf-grid-actions .release-cart,.wf-grid-actions .jukebox-add-round{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border-radius:50%;font-size:13px}
.wf-grid-actions .grid-follow-action{border-color:#efad31;color:#d77a21}

.discover-page [data-artists-only] .artist-browse-grid{grid-template-columns:repeat(5,248px)!important;justify-content:center;align-items:start;gap:14px!important}
.discover-page [data-artists-only] .artist-browse-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:248px!important;height:294px!important;min-height:294px!important;padding:0!important;gap:0!important;overflow:hidden;text-align:left}
.discover-page [data-artists-only] .artist-browse-avatar-frame{box-sizing:border-box;width:196px!important;height:152px!important;min-height:152px;padding:0!important;margin:0 auto!important;border-radius:8px 8px 0 0!important;overflow:hidden}
.discover-page [data-artists-only] .artist-browse-avatar-frame img,
.discover-page [data-artists-only] .artist-browse-avatar-frame .avatar{display:block;width:196px!important;height:152px!important;object-fit:cover;object-position:center;border:0!important;border-radius:0!important}
.discover-page [data-artists-only] .artist-browse-info{box-sizing:border-box;width:100%;padding:11px 12px;overflow:hidden}
@media(max-width:1400px){.discover-page [data-artists-only] .artist-browse-grid{grid-template-columns:repeat(3,248px)!important}}
@media(max-width:900px){.discover-page [data-artists-only] .artist-browse-grid{grid-template-columns:repeat(2,248px)!important}}
@media(max-width:590px){.discover-page [data-artists-only] .artist-browse-grid{grid-template-columns:248px!important}}

/* Unified engagement states and Explore artist actions. */
[data-love],.heart,.tpm-action.tpm-like{transition:color .16s ease,border-color .16s ease,background .16s ease}
[data-love].loved,.heart.loved,.tpm-action.tpm-like.loved{color:#f2ca69!important;border-color:#f2ca69!important;background:transparent!important;text-shadow:0 0 11px rgba(239, 173, 49,.72)}
.discover-page [data-artists-only] .artist-explore-card{height:auto!important;min-height:330px!important;padding:12px!important;gap:0!important;background:linear-gradient(150deg,rgba(10,18,37,.96),rgba(4,9,20,.96))!important}
.artist-card-open{display:flex;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.artist-card-open .artist-browse-avatar-frame{margin:0!important}.artist-card-open .artist-browse-info{padding:16px 3px 12px!important;gap:7px!important}.artist-card-open .artist-browse-info b{font-size:15px!important}.artist-card-open .artist-browse-info small,.artist-card-open .artist-browse-info span{font-size:11px!important}.artist-card-follow{align-self:flex-start!important;margin:0 3px 2px!important;padding:8px 14px!important}.artist-card-follow.following,.grid-follow-action.following{border-radius:999px!important;background:rgba(215, 122, 33,.18)!important;color:#bfeaff!important;border-color:#efad31!important;opacity:1!important}
.wf-grid-actions .grid-follow-action{width:auto!important;min-width:0!important;height:28px!important;padding:0 9px!important;border-radius:5px!important;font-size:9px!important;white-space:nowrap}
.jukebox-add-round{border:1px solid #efad31!important;background:transparent!important;color:#efad31!important;box-shadow:0 0 12px rgba(215, 122, 33,.34)!important}.jukebox-add-round:hover{background:transparent!important;color:#efad31!important}.jukebox-add-round.submitted,.jukebox-add-round:disabled{background:#d77a21!important;color:#fff!important;border-color:#efad31!important;opacity:1!important;box-shadow:0 0 17px rgba(215, 122, 33,.58)!important}
.wf-track-copy>a{font-size:13px!important;font-weight:800!important}.wf-track-copy>div small,.wf-track-copy>em{font-size:11px!important}

/* One visual language for Follow Artist controls everywhere. */
[data-follow],.tpm-follow-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:34px!important;padding:8px 14px!important;border:1px solid rgba(239, 173, 49,.86)!important;border-radius:7px!important;background:linear-gradient(105deg,#8d4927,#efad31 48%,#efad31)!important;color:#fff!important;font:800 11px/1 "Trebuchet MS",Arial,sans-serif!important;letter-spacing:.02em!important;box-shadow:0 8px 20px rgba(215, 122, 33,.27)!important;text-shadow:none!important;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;cursor:pointer!important}
[data-follow]:hover,.tpm-follow-btn:hover,[data-follow].following:hover,.tpm-follow-btn.following:hover{color:#fff!important;background:linear-gradient(105deg,#8d4927,#efad31 48%,#efad31)!important;filter:brightness(1.15) saturate(1.08)!important;transform:translateY(-1px)!important;box-shadow:0 0 22px rgba(215, 122, 33,.52),0 0 16px rgba(215, 122, 33,.32)!important}
[data-follow].following,.tpm-follow-btn.following{border-color:rgba(239, 173, 49,.9)!important;background:linear-gradient(105deg,#d77a21,#efad31 52%,#efad31)!important;color:#fff!important}
.live-round-action[data-follow]{width:auto!important;min-width:34px!important;height:28px!important;padding:6px 9px!important;border-radius:6px!important;font-size:0!important}.live-round-action[data-follow]:after{content:'Follow artist';font-size:9px}.live-round-action[data-follow].following:after{content:'Following'}

/* Artist names are a consistent, direct entry point to the BIO overlay. */
a[href^="#creator-"]{display:inline-block;color:#f2ca69!important;text-decoration:none!important;cursor:pointer!important;text-shadow:0 0 10px rgba(239, 173, 49,.24);transition:color .16s ease,text-shadow .16s ease,transform .16s ease,filter .16s ease}
a[href^="#creator-"]:hover{color:#f2ca69!important;text-decoration:none!important;text-shadow:0 0 8px #f2ca69,0 0 18px rgba(239, 173, 49,.5)!important;filter:brightness(1.12);transform:translateY(-1px)}
.wf-track-copy>a{margin-top:5px!important;color:#f2ca69!important;font-size:13px!important;font-weight:800!important;line-height:1.2!important}

/* Notification rows make their destination clear before they are opened. */
.notification-item{position:relative;cursor:pointer;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.notification-item:hover,.notification-item:focus-within{background:linear-gradient(90deg,rgba(141, 73, 39,.34),rgba(141, 73, 39,.2))!important;transform:translateX(3px);box-shadow:inset 3px 0 #f2ca69}.notification-item:hover b{color:#f2ca69}.notification-item:hover .notification-icon{border-color:#f2ca69;color:#f2ca69;box-shadow:0 0 14px rgba(239, 173, 49,.32)}

/* Artwork play controls respond consistently on Home, Explore list and grid cards. */
.wf-track-art>button,.cover-play-btn,[data-cover-play]{transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease!important}
.wf-track-art>button:focus-visible,.cover-play-btn:focus-visible,[data-cover-play]:focus-visible{background:linear-gradient(135deg,#8d4927,#efad31)!important;border-color:#f2ca69!important;color:#fff!important;transform:translate(-50%,-50%) scale(1.13)!important;box-shadow:0 0 15px #f2ca69,0 0 28px rgba(215, 122, 33,.64)!important;outline:none!important}
.cover-play-btn:focus-visible,[data-cover-play]:focus-visible{transform:scale(1.13)!important}

/* Home media player: optically centred control and a linked artist line. */
.wf-player-controls .wf-player-play{display:grid!important;place-items:center!important;padding:0!important;text-indent:2px!important;line-height:1!important}
.wf-player-controls .wf-player-play:focus-visible{background:linear-gradient(135deg,#8d4927,#efad31)!important;border-color:#f2ca69!important;color:#fff!important;transform:scale(1.13)!important;box-shadow:0 0 15px #f2ca69,0 0 28px rgba(215, 122, 33,.64)!important;outline:none!important}
.wf-player-meta b,.wf-player-meta small,.wf-player-track b,.wf-player-track small{font-size:11px!important}.wf-player-meta small{margin-top:5px!important}.wf-player-meta small a{font:inherit!important;color:#f2ca69!important}

/* Keep an incorrect public/login screen from flashing while the server restores
   an authenticated Remember Me session from its secure HttpOnly cookie. */
html.syntera-auth-restoring #app,
html.syntera-auth-restoring .site-header{visibility:hidden}
html.syntera-auth-restoring body::after{
  content:'Restoring your Klankstal session\2026';
  position:fixed;inset:0;display:grid;place-items:center;
  color:#d77a21;background:#020512;
  font:700 13px/1.4 system-ui,sans-serif;letter-spacing:.08em;
  z-index:99999
}

/* Match fan-portal artist cards and profile photos to Discover's artist view. */
.fan-artist-grid{grid-template-columns:repeat(auto-fit,248px)!important;justify-content:center;align-items:start;gap:14px!important}
.fan-artist-grid .fan-artist-card{box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:stretch!important;width:248px!important;height:294px!important;min-height:294px!important;padding:0!important;gap:0!important;overflow:hidden;text-align:left}
.fan-artist-grid .fan-artist-card .artist-browse-avatar-frame{box-sizing:border-box;width:196px!important;height:152px!important;min-height:152px!important;aspect-ratio:auto!important;padding:0!important;margin:0 auto!important;border-radius:8px 8px 0 0!important;overflow:hidden}
.fan-artist-grid .fan-artist-card .artist-browse-avatar-frame img,
.fan-artist-grid .fan-artist-card .artist-browse-avatar-frame .avatar{display:block;width:196px!important;height:152px!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:0!important;background-size:cover!important;background-position:center!important}
.fan-artist-grid .fan-artist-card .artist-browse-info{box-sizing:border-box;width:100%;padding:11px 12px;align-items:flex-start;text-align:left;overflow:hidden}
@media(max-width:590px){.fan-artist-grid{grid-template-columns:248px!important}}

/* Header account actions share the compact, selected Following treatment. */
.site-header .topbtn{min-height:36px!important;padding:0 16px!important;border:1px solid #efad31!important;border-radius:999px!important;background:linear-gradient(105deg,#8d4927 0%,#d77a21 100%)!important;color:#fff!important;font-size:10px!important;line-height:1!important;box-shadow:none!important}
.site-header .topbtn:hover{background:linear-gradient(105deg,#8d4927,#efad31 48%,#efad31)!important;filter:brightness(1.15) saturate(1.08)!important;transform:translateY(-1px)!important;box-shadow:0 0 22px rgba(215, 122, 33,.52),0 0 16px rgba(215, 122, 33,.32)!important}

/* Artist names stay readable without a bold treatment; the Artist Portal navigation remains unchanged. */
.artist-browse-info>b,.artist-link b,.home-artist-card>a>b,.recommendation-list b,.release-copy small a,.wf-player-meta small a,.wf-player-track small a,.tpm-artist{font-weight:400!important}

/* Keep each portal's left navigation block level with the start of its right-hand content. */
.artist-portal,.curator-portal{align-items:start!important}
.artist-portal-sidebar,.curator-sidebar{align-self:start!important;margin-top:0!important;transform:none!important}

/* The homepage has a more specific legacy account-button rule; retain the shared Following colour there too. */
body:has(.creator-landing) .site-header .topbtn,body:has(.wireframe-home) .site-header .topbtn{border-color:#efad31!important;background:linear-gradient(105deg,#8d4927 0%,#d77a21 100%)!important;color:#fff!important;box-shadow:none!important}

/* Compact, but still breathable, information spacing throughout the account portals. */
body:has([data-artist-portal]) .artist-portal-main .portal-panel-title,
body:has([data-fan-portal]) .artist-portal-main .portal-panel-title{margin-bottom:8px!important}
body:has([data-artist-portal]) .artist-portal-main .portal-panel-title h2,
body:has([data-fan-portal]) .artist-portal-main .portal-panel-title h2{margin:0 0 3px!important;line-height:1.2!important}
body:has([data-artist-portal]) .artist-portal-main .portal-panel-title .sub,
body:has([data-fan-portal]) .artist-portal-main .portal-panel-title .sub{margin:0!important;line-height:1.42!important}
body:has([data-artist-portal]) .artist-portal-main .form-grid,
body:has([data-fan-portal]) .artist-portal-main .form-grid{gap:9px 12px!important}
body:has([data-artist-portal]) .artist-portal-main .form-grid label,
body:has([data-fan-portal]) .artist-portal-main .form-grid label{margin:5px 0 3px!important}
body:has([data-artist-portal]) .artist-portal-main .portal-profile-section,
body:has([data-fan-portal]) .artist-portal-main .portal-profile-section{margin-top:12px!important}
body:has([data-artist-portal]) .artist-portal-main .portal-genre-editor,
body:has([data-fan-portal]) .artist-portal-main .portal-genre-editor{margin-top:4px!important}
body:has([data-artist-portal]) .artist-portal-main .portal-form-actions,
body:has([data-fan-portal]) .artist-portal-main .portal-form-actions{margin-top:11px!important}
body:has([data-curator-portal]) .curator-main{padding-top:22px!important}
body:has([data-curator-portal]) .curator-main>header{margin-bottom:16px!important}
body:has([data-curator-portal]) .curator-main>header h1{margin:3px 0!important;line-height:1.16!important}
body:has([data-curator-portal]) .curator-review-card{gap:12px!important;padding:12px!important}

/* Desktop portal columns share one exact top edge at full-HD and other desktop widths. */
@media(min-width:901px){
  body:has([data-artist-portal]) .artist-portal,
  body:has([data-fan-portal]) .artist-portal{align-items:start!important}
  body:has([data-artist-portal]) .artist-portal-sidebar,
  body:has([data-fan-portal]) .artist-portal-sidebar,
  body:has([data-artist-portal]) .artist-portal-main,
  body:has([data-fan-portal]) .artist-portal-main{align-self:start!important;margin-top:0!important;transform:none!important}
  body:has([data-artist-portal]) .artist-portal-main>:first-child,
  body:has([data-fan-portal]) .artist-portal-main>:first-child{margin-top:0!important}
}

/* A selected Follow state is deliberately compact and regular-weight. */
[data-follow].following,.tpm-follow-btn.following{min-height:30px!important;padding:6px 11px!important;font:400 10px/1 "Trebuchet MS",Arial,sans-serif!important;letter-spacing:.015em!important}

/* Artist-name typography is regular everywhere; portal navigation labels are intentionally excluded. */
.artist-browse-info>b,
.artist-link b,
.home-artist-card>a>b,
.recommendation-list b,
.release-copy small a,
.wf-player-meta small a,
.wf-player-track small a,
.wf-track-copy>a,
.tpm-artist,
.artist-bio-profile-main .artist-bio-namecol h2,
.artist-profile-card h2,
.portal-sidebar-profile>h2,
.ap-name{font-weight:400!important}

/* Explore artist grid: profile information is stacked under the image and actions align. */
.discover-page [data-artists-only] .artist-card-open{flex-direction:column!important;align-items:stretch!important}
.discover-page [data-artists-only] .artist-card-follow{align-self:stretch!important;margin-top:auto!important;margin-left:3px!important;margin-right:3px!important;text-align:center!important}

/* BIO track actions use the same neon-blue heart states as all other likes. */
.artist-bio-overlay [data-artist-love]{color:#d8dce4!important;border-color:rgba(215, 122, 33,.5)!important;background:transparent!important}
.artist-bio-overlay [data-artist-love].loved{color:#f2ca69!important;border-color:#f2ca69!important;background:transparent!important;text-shadow:0 0 11px rgba(239, 173, 49,.72)!important}

/* Klankstal rebrand: live-text home hero (replaces baked home-top-header.png overlay) */
.wf-home-header-overlay.wf-home-header-live{position:absolute!important;width:min(46%,540px)!important;max-width:540px!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important;pointer-events:none!important;filter:none!important}
.wf-home-header-live .wf-home-eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:#1b0f2e;color:#efad31;font:700 11px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.wf-home-header-live h1.wf-home-headline{display:block!important;width:100%!important;margin:0!important;font:800 clamp(26px,3.6vw,48px)/1.08 Georgia,serif!important;letter-spacing:normal!important;color:#f7f3ec}
.wf-home-header-live h1.wf-home-headline span{display:block!important;width:100%!important;white-space:normal!important}
.wf-home-header-live h1.wf-home-headline span.wf-hl-b{background:linear-gradient(90deg,#bd4fd1,#8d4927);-webkit-background-clip:text;background-clip:text;color:transparent}
.wf-home-header-live h1.wf-home-headline span.wf-hl-c{background:linear-gradient(90deg,#d77a21,#d77a21);-webkit-background-clip:text;background-clip:text;color:transparent}
.wf-home-header-live .wf-home-tagline{margin:0;max-width:34ch;font:400 clamp(13px,1.3vw,16px)/1.5 Arial,sans-serif;color:#adb9c8}
.wf-hotspot-explore,.wf-hotspot-join{display:flex!important;align-items:center;justify-content:center;text-align:center;border-radius:10px;font:700 13px/1 Arial,sans-serif;letter-spacing:.02em;text-decoration:none!important;color:#fff!important;transition:transform .2s ease,filter .2s ease;pointer-events:auto!important}
.wf-hotspot-explore{background:linear-gradient(90deg,#8d4927,#d77a21)}
.wf-hotspot-join{background:linear-gradient(90deg,#bd4fd1,#8d4927)}
.wf-hotspot-explore:hover,.wf-hotspot-join:hover{filter:brightness(1.1);transform:translateY(-1px)}

.wf-home-header-live .wf-hero-hotspots{position:static!important;display:flex!important;flex-direction:row!important;gap:12px!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin-top:6px!important;pointer-events:auto!important}
.wf-home-header-live .wf-hotspot-explore,.wf-home-header-live .wf-hotspot-join{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;padding:13px 24px!important}

.wf-asset-hero{aspect-ratio:auto!important;min-height:clamp(560px,55vw,680px)!important;overflow:visible!important}
.wf-home-header-overlay.wf-home-header-live{position:relative!important;left:auto!important;top:auto!important;margin:clamp(24px,4vw,50px) 0 0 clamp(20px,3.2vw,52px)!important}

.wf-home-header-live .wf-hero-hotspots{flex:none!important;align-self:flex-start!important}
.wf-home-header-live .wf-hotspot-explore,.wf-home-header-live .wf-hotspot-join{flex:none!important}

.wf-home-header-live .wf-hero-hotspots{aspect-ratio:auto!important;align-items:center!important}
.wf-home-header-live .wf-hotspot-explore,.wf-home-header-live .wf-hotspot-join{aspect-ratio:auto!important}

.wf-home-header-overlay.wf-home-header-live{z-index:11!important}
.wf-home-header-live .wf-hero-hotspots{z-index:11!important}
.wf-home-header-live h1.wf-home-headline{font:800 clamp(22px,3vw,38px)/1.1 Georgia,serif!important}
.wf-home-header-live{gap:10px!important}
.wf-home-header-live .wf-home-tagline{max-width:32ch;font-size:clamp(12px,1.1vw,14px)!important;line-height:1.4!important}
.wf-home-header-overlay.wf-home-header-live{margin:clamp(16px,2.6vw,32px) 0 0 clamp(20px,3.2vw,52px)!important}

/* === Explore/Discover reskin: adopt target .explore-catalogue visual language, keeping the existing (richer) filter set === */
.discover-page.explore-catalogue{max-width:1460px;margin:0 auto 24px}
.discover-page.explore-catalogue .explore-filters{padding:18px 20px;background:rgb(3,8,14);border-color:#273442}
.discover-page .filter-heading{padding-bottom:14px;border-bottom:1px solid #202e3b;flex-direction:column;align-items:flex-start;gap:10px}
.discover-page .filter-primary-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;width:100%}
.discover-page .genre-open-btn{background:#08121b;border:1px solid #2f3d4b;color:#e1af49;border-radius:6px;padding:10px 14px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.discover-page .genre-open-btn:hover{border-color:#efbd52}
.discover-page .explore-filter-actions{margin-left:auto}
.discover-page .genre-filter-label{color:#e1af49;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.discover-page .genre-filter-label small{margin-left:7px;color:#7f8b96;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none}
.discover-page .genre-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 0}
.discover-page .genre-multiselect{margin:10px 0 0;gap:7px}
.discover-page .genre-multiselect button{border-radius:20px;background:#08121b;border-color:#2f3d4b;color:#c5ced6;padding:7px 11px}
.discover-page .genre-multiselect button:hover,.discover-page .genre-multiselect button.selected{background:#e5a62e;border-color:#f4c258;color:#09101a}
.discover-page .explore-mode-toggle{display:flex;gap:6px;background:#08121b;border:1px solid #2f3d4b;border-radius:8px;padding:4px}
.discover-page .explore-mode-toggle button{padding:8px 14px;border-radius:6px;font-size:11px;font-weight:700;color:#aeb8c1;background:transparent}
.discover-page .explore-mode-toggle button.active{background:#e5a62e;color:#09101a}
.discover-page .artist-filter.explore-filter-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:16px 0 4px}
.discover-page .explore-filter-controls label{display:grid;gap:6px;color:#aeb8c1;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-width:190px}
.discover-page .explore-filter-controls select{width:100%;height:42px;padding:0 12px;border:1px solid #334250;border-radius:6px;background:#07111a;color:#eef2f4;font:12px Arial,sans-serif}
.discover-page .artist-filter .filter-clear{height:42px}
.discover-page .release-window-filters{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.discover-page .release-window-filters button{background:#09131e;color:#d6dde4;border:1px solid #324557;border-radius:20px;padding:7px 12px;font-size:11px}
.discover-page .release-window-filters button.active{background:#e5a62e;color:#09101a;border-color:#f4c258}
.discover-page.explore-catalogue .explore-results{margin-top:16px;padding:0;background:rgb(3,8,14);border-color:#273442;overflow:hidden}
.discover-page .explore-results-toolbar{padding:18px 20px;border-bottom:1px solid #273442;margin:0}
.discover-page .explore-results-toolbar h2{margin:0 0 3px;color:#f1f1ed;font:600 20px Georgia,serif}
.discover-page .explore-table-scroll{overflow-x:auto;scrollbar-color:#8e6727 #08121b}
.discover-page .release-row.explore-table-row,.discover-page .explore-release-head.explore-table-head{display:grid;grid-template-columns:26px 54px minmax(0,1fr) 92px 108px 66px 62px 150px;gap:10px;align-items:center;min-width:900px}
.discover-page .explore-release-head.explore-table-head{padding:12px 18px;background:#07111a;color:#798794;border-bottom:1px solid #253440;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.discover-page .release-row.explore-table-row{min-height:70px;padding:10px 18px;background:rgb(3,8,14);border-bottom:1px solid #1d2a35;color:#bec7cf;transition:background .2s,border-color .2s}
.discover-page .release-row.explore-table-row:last-child{border-bottom:0}
.discover-page .release-row.explore-table-row:hover{background:#07111a;border-color:#4c3b20}
.discover-page .release-copy b{display:block;overflow:hidden;color:#f1f1ed;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.discover-page .release-copy small{display:block;margin-top:4px;overflow:hidden;color:#8695a1;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.discover-page .release-copy small a{color:#22bdd5}
.discover-page .release-date{justify-self:center;color:#aeb8c1;font-size:12px}
.explore-chip{justify-self:center;max-width:110px;padding:7px 10px;border:1px solid #39434c;border-radius:18px;overflow:hidden;color:#bdc8d0;background:#101820;font-size:10px;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.mood-chip{border-color:#4b344c;background:#211725;color:#d2a7da}
.explore-number{justify-self:center;color:#aeb8c1;font-size:12px}
.explore-play{display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid #7d8993;border-radius:50%;background:#09131d;color:#f1f2ee;font-size:11px}
.explore-play.playing{border-color:#efb742;background:#e3a32d;color:#071019}
.discover-page .release-actions{display:flex;align-items:center;justify-content:center;gap:8px}
.explore-like{background:transparent;border:0;color:#dce2e6;font-size:22px;line-height:1;padding:2px 6px}
.explore-like.liked{color:#efb64a;transform:scale(1.08)}
.explore-add-cart{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 11px;border:1px solid #a97924;border-radius:5px;background:#0b121a;color:#efbd55;font-size:11px;font-weight:700;white-space:nowrap}
.explore-add-cart span{font-size:16px;font-weight:400;line-height:0}
.discover-page.explore-catalogue .explore-pagination{padding:16px 18px;margin:0;border-top:1px solid #273442;background:#050c13;justify-content:flex-start;overflow-x:auto}
.discover-page .empty-results{grid-column:1/-1;margin:0;padding:45px 20px}
.artist-browse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:950px){.discover-page .explore-filter-controls label{min-width:140px}.artist-browse-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.discover-page .release-row.explore-table-row,.discover-page .explore-release-head.explore-table-head{grid-template-columns:22px 44px minmax(0,1fr) 90px;min-width:0}.discover-page .release-row.explore-table-row .release-mood,.discover-page .release-row.explore-table-row .release-bpm,.discover-page .explore-release-head.explore-table-head span:nth-child(5),.discover-page .explore-release-head.explore-table-head span:nth-child(6),.discover-page .explore-release-head.explore-table-head span:nth-child(7){display:none}.artist-browse-grid{grid-template-columns:1fr}}

/* === Artist bio page reskin: adopt target .artist-bio-page visual language (existing .ap-* classes kept alongside for safety) === */
.artist-bio-page{--genre-1:#20c5df;--genre-2:#9b4de3;--genre-3:#e8ae31;--genre-4:#ee7140;max-width:1430px;margin:0 auto 88px;padding:24px;background:linear-gradient(145deg,rgba(3,8,14,.98),rgba(5,13,22,.96));border:1px solid #324554;border-radius:12px;box-shadow:0 22px 55px rgba(0,0,0,.45)}
.artist-bio-top{display:grid;grid-template-columns:270px minmax(330px,1fr) 400px;gap:26px;align-items:start}
.artist-bio-photo-column{min-width:0}
.artist-bio-photo{position:relative;height:290px;overflow:hidden;border:1px solid #293a4a;border-radius:9px;background:#07101a;box-shadow:0 18px 42px #0007}
.artist-bio-portrait{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.artist-photo-verified{position:absolute;right:13px;bottom:13px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#198ee9;color:#fff;font-weight:900;box-shadow:0 0 0 3px #07111b}
.artist-bio-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 4px 0}
.artist-primary-follow,.artist-collaborate{height:39px;border:1px solid #4b5b68;border-radius:5px;background:#07101a;color:#dce4e9;font-size:11px;font-weight:800}
.artist-primary-follow{border-color:#ebb746;background:linear-gradient(100deg,#f1bd4e,#d79524);color:#0b1016}
.artist-collaborate:hover{border-color:#e8ad37;color:#efbd58}
.artist-bio-socials{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:15px}
.artist-bio-socials a{display:grid;place-items:center;width:24px;height:24px;border:1px solid transparent;border-radius:50%;color:#cbd2d8;font-size:9px;font-weight:800}
.artist-bio-intro{align-self:center;padding:8px 0}
.artist-bio-intro h1{display:flex;align-items:center;gap:13px;margin:5px 0 9px;color:#f2f0e9;font:44px/1.08 Georgia,serif;letter-spacing:-.5px}
.artist-bio-intro h1 i{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#178de7;color:#fff;font:700 14px Arial,sans-serif}
.artist-bio-meta{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 16px;color:#b7c2ca;font-size:12px}
.artist-bio-copy{max-width:600px;color:#c3cbd1;font-size:14px;line-height:1.7}
.artist-bio-copy p{margin:0 0 4px}
.artist-role-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.artist-role-tags span{padding:7px 11px;border:1px solid #267086;border-radius:4px;background:#07141d;color:#31c7df;font-size:10px}
.artist-role-tags span.violet{border-color:#5b3180;color:#c27de2}
.artist-bio-insights{display:grid;gap:14px}
.artist-genre-row{margin-top:11px}
.artist-genre-row>div{display:flex;justify-content:space-between;margin-bottom:5px;color:#c3ccd2;font-size:10px}
.artist-genre-row small{color:#84919c}
.artist-genre-row>i{display:block;height:4px;border-radius:5px;background:#18232d;overflow:hidden}
.artist-genre-row>i:after{content:'';display:block;width:var(--genre-width);height:100%;border-radius:inherit;background:var(--genre-color);box-shadow:0 0 8px var(--genre-color)}
.artist-stat-panel{display:grid;grid-template-columns:repeat(4,1fr);padding:17px 10px}
.artist-stat-panel article{display:flex;flex-direction:column;align-items:center;gap:4px;border-left:1px solid #1e303e;text-align:center}
.artist-stat-panel article:first-child{border-left:0}
.artist-stat-panel b{height:22px;color:#26bdd9;font-size:21px;font-weight:400}
.artist-stat-panel article:nth-child(2) b{color:#9852db}
.artist-stat-panel article:nth-child(3) b{color:#ea684e}
.artist-stat-panel article:nth-child(4) b{color:#784ac9}
.artist-stat-panel strong{color:#eef0eb;font-size:17px}
.artist-stat-panel small{color:#8b98a3;font-size:10px}
.artist-genres-panel{padding:17px 18px 18px}
.artist-genres-panel h2{margin:0 0 13px;color:#e8ecee;font-size:13px}
.artist-bio-lower{display:grid;grid-template-columns:minmax(500px,1.3fr) minmax(360px,.9fr);gap:20px;margin-top:22px}
.artist-bio-section-title{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.artist-bio-section-title h2{margin:0;color:#ebece8;font:22px Georgia,serif;background:linear-gradient(100deg,#a965e8,#2ec2df);-webkit-background-clip:text;background-clip:text;color:transparent}
.artist-bio-section-title a{color:#43bcd7;font-size:10px}
.artist-bio-section-title p{margin:4px 0 0;color:#8895a1;font-size:10px}
.artist-bio-release-list{border-top:1px solid #1d2c37}
.artist-bio-release-row{border-bottom:1px solid #1d2c37}
.artist-bio-release-art{width:56px;height:56px;border-radius:5px}
.artist-release-play{display:grid;place-items:center;width:35px;height:35px;padding:0;border:1px solid #98a4ad;border-radius:50%;background:#07111a;color:#edf0ec;font-size:11px}
.artist-release-play.playing{background:#e5aa32;color:#081019;border-color:#f0c45b}
.artist-release-name b,.artist-release-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-release-name b{color:#eef0ed;font-size:13px}
.artist-release-name small{margin-top:5px;color:#86939e;font-size:9px}
.artist-release-tag{padding:6px 9px;border:1px solid #276779;border-radius:4px;color:#24bad1;background:#07151d;font-size:9px;white-space:nowrap}
.artist-release-tag.violet{border-color:#5b337d;color:#c479df}
.artist-release-cart{padding:7px 9px;border:1px solid #9c7123;border-radius:4px;background:#09121a;color:#e9b244;font-size:9px;font-weight:800;white-space:nowrap}
.artist-process-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:23px 0 22px}
.artist-process-steps:before{content:'';position:absolute;top:30px;left:8%;right:8%;border-top:1px dashed #8a6428}
.artist-process-steps article{position:relative;z-index:1;text-align:center}
.artist-process-steps i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 9px;border:1px solid #a1762e;border-radius:50%;background:#08111a;color:#e4e8e9;font:normal 22px Georgia,serif}
.artist-process-steps b{display:block;color:#e4e7e7;font-size:10px}
.artist-process-steps p{margin:6px 0 0;color:#9eaab3;font-size:9px;line-height:1.5}
.artist-process-note{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid #473061;border-radius:6px;background:#151126}
.artist-process-note>span{color:#ad65e1;font-size:24px}
.artist-process-note p{margin:0;color:#dce1e3;font-size:10px}
.artist-process-note b,.artist-process-note small{display:block}
.artist-process-note small{margin-top:3px;color:#9ca8b2}
@media(max-width:1100px){.artist-bio-top{grid-template-columns:230px 1fr}.artist-bio-insights{grid-column:1/-1;grid-template-columns:1fr 1fr}.artist-bio-lower{grid-template-columns:1fr}}
@media(max-width:680px){.artist-bio-top{grid-template-columns:1fr}.artist-bio-photo-column{max-width:360px}.artist-bio-insights{grid-template-columns:1fr}.artist-bio-intro h1{font-size:32px}.artist-process-steps{grid-template-columns:repeat(5,90px);overflow-x:auto;padding-bottom:8px}.artist-process-steps:before{display:none}.artist-bio-page{padding:14px;border-radius:9px}}
.home-hero-copy h1{text-align:left!important;display:block!important}
.home-hero-copy h1 .hero-line{display:block!important;text-align:left!important}
body:has(.component-home) .home-hero-component{min-height:0!important;height:auto!important;padding-bottom:0!important}
body:has(.component-home) .home-hero-copy{padding-bottom:16px!important}
body:has(.component-home) .home-content-grid{margin-top:0!important}
body:has(.component-home) .home-hero-copy{padding-top:10px!important}
@media(max-width:900px){body:has(.component-home) .home-hero-copy{padding-top:10px!important}}
@media(max-width:620px){body:has(.component-home) .home-hero-copy{padding-top:10px!important}}

/* Home media player polish: hover/active rings on the secondary controls, a matching gold/orange
   progress fill on the timeline and volume sliders (reusing the popup player's slider look), and a
   restored mobile layout so playback controls stay usable instead of disappearing under 760px. */
.wf-player button{transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease!important}
.wf-player-controls>div>button:not(.wf-player-play):hover,.wf-player-controls>div>button:not(.wf-player-play):focus-visible,.wf-player-track>button:hover,.wf-player-track>button:focus-visible,.wf-player-volume>button:hover,.wf-player-volume>button:focus-visible{border:1px solid rgba(242,202,105,.55)!important;border-radius:50%!important;background:rgba(215,122,33,.16)!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:0 0 12px rgba(215,122,33,.35)!important;outline:none!important}
.wf-player-track>button[aria-pressed="true"],.wf-player-volume>button[aria-pressed="true"]{border:1px solid #f2ca69!important;border-radius:50%!important;color:#f2ca69!important;background:rgba(215,122,33,.14)!important}
.wf-player-play.playing{box-shadow:0 0 16px rgba(215,122,33,.26),0 0 0 0 rgba(242,202,105,.5)!important;animation:wf-player-play-pulse 2.2s ease-out infinite}
@keyframes wf-player-play-pulse{0%{box-shadow:0 0 16px rgba(215,122,33,.26),0 0 0 0 rgba(242,202,105,.45)}70%{box-shadow:0 0 16px rgba(215,122,33,.26),0 0 0 9px rgba(242,202,105,0)}100%{box-shadow:0 0 16px rgba(215,122,33,.26),0 0 0 0 rgba(242,202,105,0)}}
.wf-player-timeline input[type="range"],.wf-player-volume input[type="range"]{appearance:none!important;-webkit-appearance:none!important;width:100%;height:7px!important;padding:0!important;margin:0;border:1px solid rgba(215,122,33,.4)!important;border-radius:4px!important;background:linear-gradient(90deg,#f2ca69 0,#d77a21 var(--seek-progress,0%),#1f2333 var(--seek-progress,0%),#1f2333 100%)!important;box-shadow:0 0 7px rgba(215,122,33,.3)!important;cursor:pointer!important}
.wf-player-timeline input[type="range"]::-webkit-slider-runnable-track,.wf-player-volume input[type="range"]::-webkit-slider-runnable-track{height:5px!important;border:0!important;background:transparent!important}
.wf-player-timeline input[type="range"]::-webkit-slider-thumb,.wf-player-volume input[type="range"]::-webkit-slider-thumb{appearance:none!important;-webkit-appearance:none!important;width:13px!important;height:13px!important;margin-top:-4px!important;border:2px solid #fff!important;border-radius:50%!important;background:#d77a21!important;box-shadow:0 0 9px rgba(239,173,49,.85)!important}
.wf-player-timeline input[type="range"]::-moz-range-track,.wf-player-volume input[type="range"]::-moz-range-track{height:5px!important;border:0!important;background:#1f2333!important}
.wf-player-timeline input[type="range"]::-moz-range-progress,.wf-player-volume input[type="range"]::-moz-range-progress{height:5px!important;background:linear-gradient(90deg,#f2ca69,#d77a21)!important}
.wf-player-timeline input[type="range"]::-moz-range-thumb,.wf-player-volume input[type="range"]::-moz-range-thumb{width:12px!important;height:12px!important;border:2px solid #fff!important;border-radius:50%!important;background:#d77a21!important;box-shadow:0 0 9px rgba(239,173,49,.85)!important}
@media(max-width:760px){body:has(.creator-landing) .wf-player{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:52px 44px!important;min-height:104px!important;gap:4px 10px!important;padding:8px 10px 7px!important}body:has(.creator-landing) .wf-player-track{grid-column:1;grid-row:1;grid-template-columns:44px minmax(60px,1fr) 34px!important;gap:6px!important;display:grid!important}body:has(.creator-landing) .wf-player-art{width:44px!important;height:44px!important}body:has(.creator-landing) .wf-player-track>button{display:inline-grid!important;width:32px!important;height:32px!important}body:has(.creator-landing) .wf-player-controls{grid-column:1/-1!important;grid-row:2;display:grid!important;grid-template-columns:minmax(150px,auto) minmax(90px,1fr)!important;align-items:center!important;gap:7px!important}body:has(.creator-landing) .wf-player-controls>div{display:flex!important;align-items:center;justify-content:center;gap:6px!important}body:has(.creator-landing) .wf-player-controls>div>button{display:inline-grid!important;width:30px!important;height:30px!important;font-size:13px!important}body:has(.creator-landing) .wf-player-controls .wf-player-play{width:38px!important;height:38px!important}body:has(.creator-landing) .wf-player-timeline{display:grid!important;grid-template-columns:26px minmax(50px,1fr) 26px!important;gap:4px!important}body:has(.creator-landing) .wf-player-timeline time{font-size:7px!important}body:has(.creator-landing) .wf-player-volume{display:none!important}}

/* Floating track-preview player upgrade: a subtle muted/looping background video behind
   the .tpm-bar card, a drag handle + pop-out button rail, and a volume slider on the
   bottom row -- ported from the reference codebase's dockable player and recoloured to
   Klankstal's gold/orange palette (matching the home player slider treatment above). The
   source divides its drag math by a CSS `zoom` factor because that layout scales whole
   pages with `zoom` under Full HD; Klankstal's style.css has no such `zoom` scaling at any
   breakpoint, so that correction is intentionally omitted here -- plain viewport pixels
   from getBoundingClientRect()/clientX|Y are already correct. */
.tpm-bar.klankstal-player-draggable{padding-top:36px}
.tpm-background-video{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;filter:saturate(1.15);pointer-events:none}
.tpm-background-shade{position:absolute;z-index:1;inset:0;border-radius:inherit;background:#030810;opacity:.45;pointer-events:none}
.tpm-bar .tpm-top-row,.tpm-bar .tpm-bottom-row,.tpm-bar .tpm-close-corner{position:relative;z-index:2}
.tpm-player-tools{position:absolute;z-index:3;left:10px;right:44px;top:8px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.tpm-player-tools button{display:grid;place-items:center;width:26px;height:24px;min-height:24px;padding:0;border:1px solid rgba(242,202,105,.4);border-radius:6px;background:rgba(5,10,18,.82);color:#f2ca69;font-size:13px;pointer-events:auto;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.tpm-drag-handle{cursor:move;touch-action:none}
.tpm-popout{font-size:13px}
.tpm-bar.is-dragging{cursor:grabbing;opacity:.97}
.tpm-volume-control{display:flex;align-items:center;gap:6px;flex:none;color:#f2ca69;font-size:12px}
.tpm-volume-control input{width:70px;accent-color:#efad31}
.universal-media-overlay .tpm-bar[data-player-centered="true"]:not([data-player-moved="true"]){position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none}
.universal-media-overlay .tpm-bar[data-player-centered="true"][data-player-moved="true"]{position:fixed;left:var(--klankstal-player-left);right:auto;top:var(--klankstal-player-top);bottom:auto;transform:none}
@media(max-width:560px){.tpm-bar.klankstal-player-draggable{padding-top:32px}.tpm-player-tools{left:8px;right:38px;top:6px}.tpm-player-tools button{width:23px;height:21px;min-height:21px}.tpm-volume-control{gap:4px}.tpm-volume-control input{width:52px}}
/* Theme match (klankstal.co.za reference): flat dark background on every page except Home, which keeps its own hero background image. Wins over the earlier universal photo-background rules by appearing last. */
body:not(:has(.component-home)):not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.page-eco-banner)),
body:not(:has(.component-home)):not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.page-eco-banner)) main#app,
body:not(:has(.component-home)):not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.page-eco-banner)) main#app>.wrap{
  background-color:rgb(3,8,14)!important;
  background-image:none!important;
}
body:has(.component-home){
  background-color:rgb(3,8,14)!important;
  background-image:linear-gradient(90deg,rgba(1,5,10,.78) 0%,rgba(1,5,10,.58) 34%,rgba(1,5,10,.22) 62%,rgba(1,5,10,.08) 100%),linear-gradient(180deg,rgba(1,5,10,.12),rgba(1,5,10,.05) 56%,rgb(3,8,14) 100%),url('assets/home-page-background.jpg')!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
body:has(.component-home) main#app,
body:has(.component-home) main#app>.wrap{
  background:transparent!important;
  background-image:none!important;
}
/* Theme match: flatten panel surfaces sitewide to the reference's solid dark tone (visible on #discover's filter/results panels). */
.panel,
.component-panel,
.wire-panel,
.form,
.login-card,
.supporter-form,
.artist-recommendations,
.plan,
.home-song-card,
.home-artist-card,
.community-quick>a,
.checkout-cart-panel,
.checkout-payment,
.checkout-song,
.licence-summary,
.supporter-library-note,
.payment-option,
.community-hero,
.community-jukebox,
.community-panel:not(.artist-booking),
.community-room,
.community-footer,
.broadcast-console,
.wave-panel,
.track-now,
.chat-msg,
.history-row,
.analytics-metrics article,
.artist-plan-card,
.payout-note,
.notice,
.sitemap-group{
  background:rgb(3,8,14)!important;
  background-image:none!important;
}
/* Header fix: force the logo link/image chain transparent (defends against any stray
   background on .logo/.component-logo/img regardless of source), and compensate page
   content for the fixed-position header so it stops rendering underneath it. */
.site-header,
.site-header .logo,
.site-header .component-logo,
.site-header a.logo,
.site-header .logo img{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
body{padding-top:92px!important}
@media(max-width:820px){body{padding-top:66px!important}}
/* Header fix: the nav now carries more items than the original layout was tuned for.
   Let it shrink/wrap instead of overflowing into the search box, and hide the search
   input at narrower widths (matches the reference site's own breakpoint). */
.site-header{flex-wrap:wrap!important;height:auto!important;min-height:68px!important;row-gap:6px!important}
.site-header nav{flex:1 1 auto!important;min-width:0!important;flex-wrap:wrap!important;row-gap:6px!important}
.site-header nav a{flex:0 0 auto!important;white-space:nowrap!important}
@media(max-width:1200px){.site-header .search{display:none!important}}
/* Database cover art and SignalWave playback/rating controls. */
.component-home .home-song-card .home-song-art-wrap{position:relative;display:block;padding:0;min-width:0}
.component-home .home-song-card .song-art{display:block;height:144px;overflow:hidden;background-image:none!important;background:#09111c!important;font-size:0!important}
.component-home .home-song-card .song-art img{display:block;width:100%;height:100%;object-fit:cover}
.component-home .home-song-card>div:not(.home-song-art-wrap){display:block;padding:10px}
.component-home .home-song-card .universal-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px!important;height:38px!important;border:1px solid #efad31;border-radius:50%;background:rgba(4,9,18,.88)!important;color:transparent!important;box-shadow:0 0 13px #efad3166!important;z-index:4}
.component-home .home-song-card .universal-play::before{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:white;font:17px Arial,sans-serif;padding-left:2px}
.component-home .home-song-card .universal-play.playing::before{content:'❚❚';font-size:15px;padding-left:0}
.component-home .home-song-card .universal-play:hover{filter:brightness(1.25);transform:translate(-50%,-50%) scale(1.08)}
.cover-play-btn.playing::before,.cover-play-btn.playing::after{content:none!important}
.cover-play-btn.playing{font-size:0!important}
.cover-play-btn.playing::before{content:'❚❚'!important;display:grid;place-items:center;font-size:14px!important;color:#fff}
.home-song-art-wrap>.sw-home-average-rating,.cover-play-wrap>.sw-home-average-rating,.wf-track-art>.sw-home-average-rating{position:absolute;z-index:6;left:7px;bottom:43px;display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border:1px solid rgba(255,190,42,.8);border-radius:999px;background:rgba(2,7,22,.88);color:#fff;font:700 10px Arial,sans-serif}
.home-song-art-wrap>.sw-home-average-rating i,.cover-play-wrap>.sw-home-average-rating i,.wf-track-art>.sw-home-average-rating i{color:#ffc22e;font-size:12px;font-style:normal;text-shadow:0 0 7px rgba(255,184,31,.9)}
.home-song-art-wrap>.sw-home-average-rating small,.cover-play-wrap>.sw-home-average-rating small,.wf-track-art>.sw-home-average-rating small{color:#b9c5d8;font-size:8px}
.home-song-art-wrap>.signalwave-track-rating-panel,.cover-play-wrap>.signalwave-track-rating-panel,.wf-track-art>.signalwave-track-rating-panel,.tpm-art-col>.signalwave-track-rating-panel{position:absolute;z-index:7;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:2px;width:max-content;max-width:calc(100% - 12px);padding:4px 6px;border:1px solid rgba(84,217,255,.55);border-radius:999px;background:rgba(2,7,22,.88);box-shadow:0 0 13px rgba(40,190,255,.32);backdrop-filter:blur(5px)}
.tpm-art-col{position:relative}
.signalwave-track-rating-panel button{width:17px;min-width:17px;height:17px;min-height:17px;padding:0;background:transparent;color:#526075;font:13px/1 Arial,sans-serif}
.signalwave-track-rating-panel button:is(.selected,:hover,:focus-visible){color:#ffc22e;text-shadow:0 0 7px rgba(255,184,31,.9);outline:0}
.signalwave-track-rating-panel.saving{opacity:.6}
.release-row .signalwave-track-rating-panel,.community-entry .signalwave-track-rating-panel,[data-artist-portal] .signalwave-track-rating-panel{display:none!important}
.klankstal-db-community{max-width:1100px;margin:auto;display:grid;gap:14px}
.klankstal-db-community-row{display:grid;grid-template-columns:58px minmax(0,1fr) 42px auto;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--line)}
.klankstal-db-community-row img{width:58px;height:58px;object-fit:cover;border-radius:6px}
.klankstal-db-community-row div{display:grid;gap:5px;min-width:0}.klankstal-db-community-row b,.klankstal-db-community-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.klankstal-db-community-row small{color:var(--muted)}
.klankstal-db-event{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:8px}.klankstal-db-event span,.klankstal-db-event time{color:var(--muted)}
.klankstal-db-artist-head{display:flex;align-items:center;gap:22px}.klankstal-db-artist-head img{width:130px;height:130px;object-fit:cover;border-radius:10px}.klankstal-db-artist-page .home-song-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.home-artist-card .artist-art{position:relative;overflow:hidden;background:#09111c!important}.home-artist-card .home-artist-photo{display:block;width:100%;height:100%;object-fit:cover}.home-artist-card .home-artist-initials{display:grid;place-items:center;width:100%;height:100%;font:700 28px Georgia,serif;color:#efad31}
.portal-music-row [data-track-purchases]{display:grid;gap:2px}.portal-music-row .portal-track-rating{font-size:10px;color:#ffc22e;white-space:nowrap}
@media(max-width:600px){.klankstal-db-community-row{grid-template-columns:52px minmax(0,1fr) 36px}.klankstal-db-community-row a{grid-column:2}.klankstal-db-artist-head{align-items:flex-start}.klankstal-db-artist-head img{width:90px;height:90px}}
.gooi-panel h2{margin:28px 0 10px}.gooi-balance{display:flex;justify-content:space-between;align-items:center;padding:24px;border:1px solid #d7a44d;border-radius:14px;background:linear-gradient(110deg,#251d11,#141d27);color:#f8d598}.gooi-balance strong{font-size:2rem}.gooi-pack,.gooi-event{display:flex;align-items:center;gap:16px;padding:14px;border-bottom:1px solid #3d4651}.gooi-pack>div{flex:1}.gooi-pack small,.gooi-event small{display:block;color:#aeb7c4}.gooi-event span{flex:1;text-transform:capitalize}.gooi-event b{color:#f8d598}.gooi-cart-row img,.gooi-cart-icon{width:52px;height:52px;object-fit:cover;border-radius:6px}.gooi-cart-icon{display:grid;place-items:center;color:#ffca72;background:#25313e}.fan-checkout-loyalty{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fan-checkout-loyalty small{color:#aeb7c4}.gooi-cart-row>div{flex:1}@media(max-width:600px){.gooi-pack,.gooi-event{flex-wrap:wrap}.gooi-balance{gap:8px;flex-direction:column;align-items:flex-start}}
[data-checkout-summary][hidden]{display:none!important}
/* Player rows follow SignalWave: track, artist, fan actions, then transport. */
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"]{box-sizing:border-box!important;width:min(736px,calc(100vw - 24px))!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 20px)!important;padding:42px 20px 18px!important;overflow:hidden!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{position:relative!important;z-index:2!important;display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;flex:none!important;min-height:88px!important;height:auto!important;padding:0 38px 0 0!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{position:relative!important;width:88px!important;height:88px!important;overflow:visible!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art{width:100%!important;height:100%!important;object-fit:cover!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-info-col{gap:7px!important}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-track-name{font-size:18px!important;line-height:1.25!important}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-genre{font-size:12px!important}
.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{position:relative;z-index:2;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:56px;margin-top:12px;padding:6px 10px;border:1px solid rgba(93,157,201,.45);border-radius:10px;background:rgba(3,12,28,.68)}
.universal-media-overlay .tpm-artist-avatar{width:42px;height:42px;border-radius:8px;overflow:hidden;background:#0b182b;color:#efad31;display:grid;place-items:center;font-weight:700}.universal-media-overlay .tpm-artist-avatar img{width:100%;height:100%;object-fit:cover}.universal-media-overlay .tpm-artist-card-copy{display:grid;gap:3px;min-width:0}.universal-media-overlay .tpm-artist-card-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}.universal-media-overlay .tpm-artist-card-copy small{color:#aebdcb}.universal-media-overlay .tpm-artist-card-actions{display:flex;align-items:center;gap:8px}.universal-media-overlay .tpm-view-artist{padding:7px 10px;border:1px solid #35cce9;border-radius:8px;background:#08182a;color:#86e8ff;font-size:11px;font-weight:700}.universal-media-overlay .tpm-view-artist:hover{background:#10314a}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{position:relative;z-index:2;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-height:42px!important;margin-top:12px!important;padding:0 8px!important}.universal-media-overlay .tpm-fan-actions .tpm-like-label,.universal-media-overlay .tpm-fan-actions .tpm-purchase-label{color:#d9e8f1;font:700 10px Arial,sans-serif;letter-spacing:.04em}.universal-media-overlay .tpm-fan-actions .track-price{margin-left:auto;color:#ffd07a;font-size:13px}.universal-media-overlay .tpm-fan-actions .tpm-action,.universal-media-overlay .tpm-fan-actions .tpm-purchased{width:32px!important;height:32px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{position:relative!important;z-index:2!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 104px!important;gap:12px!important;align-items:center!important;min-height:48px!important;margin-top:12px!important}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:44px!important;height:44px!important}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-timeline{position:relative;display:flex;align-items:center;min-width:0;height:48px;padding-bottom:13px}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-timeline time{position:absolute;right:0;bottom:0}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:center;width:104px;padding-bottom:13px}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control input{width:100%}
html body .universal-media-overlay .tpm-player-tools{left:16px!important;right:56px!important;top:10px!important}.universal-media-overlay .tpm-player-tools button,.universal-media-overlay .tpm-player-tools button.syntera-asset-icon{width:26px!important;height:24px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#f2ca69!important;font:700 18px Arial,sans-serif!important}.universal-media-overlay .tpm-player-tools button::before,.universal-media-overlay .tpm-player-tools button::after{content:none!important}.universal-media-overlay .tpm-player-tools button:hover{color:#fff!important}
/* Close controls belong at the top-right of their frame on every view. */
html body .universal-media-overlay .tpm-bar .tpm-close-corner,html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-close-corner{position:absolute!important;top:10px!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:20!important;width:28px!important;height:28px!important;border:1px solid #7c8b9b!important;border-radius:50%!important;background:rgba(2,8,19,.9)!important;color:#fff!important}
.modal :is(.close,button[data-close]),.fan-create-playlist-frame .fan-create-close-btn,.search-overlay .search-overlay-close,.notifications-popover [data-notifications-close],.password-flow-card .password-flow-close{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:20!important}.fan-create-playlist-frame,.password-flow-card{position:relative}
/* Like and basket sit together above the artist; artwork contains all five rating stars. */
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:102px minmax(0,1fr)!important;min-height:102px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:102px!important;height:102px!important;overflow:hidden!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{justify-content:flex-start!important;gap:9px!important;min-height:36px!important;margin-top:10px!important;padding:0!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions .track-price{margin-left:0!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions .tpm-purchase-label{display:none!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{margin-top:10px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel{box-sizing:border-box;max-width:calc(100% - 8px);gap:1px;padding:3px 5px;overflow:hidden}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel button{flex:0 0 15px;width:15px;min-width:15px;height:16px;min-height:16px;font-size:12px}
@media(max-width:600px){html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"]{padding:36px 12px 14px!important}html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:81px minmax(0,1fr)!important;gap:9px!important;min-height:81px!important}html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:81px!important;height:81px!important}html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{grid-template-columns:40px minmax(0,1fr) 76px!important;gap:7px!important}.universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{width:76px!important}.universal-media-overlay .tpm-artist-card{grid-template-columns:36px minmax(0,1fr) auto!important;gap:6px!important}.universal-media-overlay .tpm-artist-avatar{width:36px;height:36px}.universal-media-overlay .tpm-view-artist{padding:6px;font-size:10px}.universal-media-overlay .tpm-fan-actions .tpm-like-label,.universal-media-overlay .tpm-fan-actions .tpm-purchase-label{font-size:9px}html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel{gap:0;padding:2px 4px}html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel button{flex-basis:12px;width:12px;min-width:12px;font-size:11px}}
/* Reference player: track controls share the artwork row, followed by artist and transport. */
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"]{width:min(903px,calc(100vw - 24px))!important;padding:46px 17px 18px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:126px minmax(0,1fr) max-content!important;gap:18px!important;min-height:126px!important;padding:0!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:126px!important;height:126px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-info-col{align-self:center!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-track-name{font-size:22px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-genre{font-size:13px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{align-self:end!important;justify-self:end!important;justify-content:flex-end!important;gap:10px!important;min-height:34px!important;margin:0!important;padding:0!important;white-space:nowrap}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions .track-price{font-size:15px!important;font-weight:700!important;color:#ffd078!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions .tpm-like-label{font-size:12px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions .tpm-action{width:36px!important;height:36px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{min-height:70px!important;margin-top:16px!important;padding:8px 12px!important;border-radius:11px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-avatar{width:52px!important;height:52px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-view-artist{min-height:42px!important;padding:9px 15px!important;font-size:13px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{grid-template-columns:56px minmax(0,1fr) 128px!important;gap:16px!important;min-height:58px!important;margin-top:16px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:56px!important;height:56px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{width:128px!important}
@media(max-width:700px){
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"]{padding:42px 12px 14px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:92px minmax(0,1fr)!important;gap:10px!important;min-height:92px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:92px!important;height:92px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-track-name{font-size:17px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{grid-column:1/-1!important;justify-self:end!important;margin-top:6px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{min-height:58px!important;margin-top:10px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{grid-template-columns:44px minmax(0,1fr) 82px!important;gap:8px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:44px!important;height:44px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{width:82px!important}
}
/* Wide player: the artist card begins beside the artwork, as in the supplied layout. */
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"]{position:relative!important;width:min(1126px,calc(100vw - 12px))!important;padding:58px 22px 22px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:156px minmax(0,1fr) max-content!important;gap:21px!important;min-height:156px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:156px!important;height:156px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel{width:112px!important;max-width:calc(100% - 8px)!important;justify-content:space-around!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-info-col{align-self:start!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-track-name{font-size:26px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-genre{font-size:15px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{align-self:start!important;margin-top:23px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{position:absolute!important;top:130px!important;left:195px!important;width:calc(100% - 213px)!important;box-sizing:border-box!important;min-height:86px!important;margin:0!important;padding:10px 16px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-avatar{width:64px!important;height:64px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-view-artist{min-height:50px!important;padding:11px 20px!important;font-size:15px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{grid-template-columns:70px minmax(0,1fr) 156px!important;gap:20px!important;min-height:70px!important;margin-top:16px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:70px!important;height:70px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{width:156px!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:54px!important;height:54px!important;justify-self:start!important}
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-close-corner{width:36px!important;height:36px!important;top:14px!important;right:10px!important}
@media(max-width:900px){
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"]{width:calc(100vw - 24px)!important;padding:44px 16px 16px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:112px minmax(0,1fr) max-content!important;gap:12px!important;min-height:112px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:112px!important;height:112px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel{width:88px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-track-name{font-size:20px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{align-self:end!important;margin:0!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{position:relative!important;top:auto!important;left:auto!important;width:100%!important;min-height:62px!important;margin-top:12px!important;padding:7px 10px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-avatar{width:44px!important;height:44px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-view-artist{min-height:38px!important;padding:7px 10px!important;font-size:11px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{grid-template-columns:48px minmax(0,1fr) 105px!important;gap:10px!important;min-height:52px!important;margin-top:12px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:48px!important;height:48px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{width:105px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:42px!important;height:42px!important}
}
@media(max-width:600px){
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-top-row{grid-template-columns:92px minmax(0,1fr)!important;min-height:92px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col{width:92px!important;height:92px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-art-col>.signalwave-track-rating-panel{width:78px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-track-name{font-size:17px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-fan-actions{grid-column:1/-1!important;justify-self:end!important;margin-top:6px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-bottom-row{grid-template-columns:44px minmax(0,1fr) 78px!important;gap:7px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:44px!important;height:44px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-volume-control{width:78px!important}
  html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-play{width:38px!important;height:38px!important}
}
/* Moving starts at the card's current viewport position and stays there until the pointer moves. */
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"][data-player-moved="true"]{position:fixed!important;left:var(--klankstal-player-left)!important;top:var(--klankstal-player-top)!important;right:auto!important;bottom:auto!important;transform:none!important}
/* Follow states are shown by their icons without the old gold button fill. */
html body button[data-follow],html body button.tpm-follow-btn,
html body button[data-follow]:hover,html body button[data-follow]:focus-visible,
html body button.tpm-follow-btn:hover,html body button.tpm-follow-btn:focus-visible{
  box-sizing:border-box!important;width:36px!important;min-width:36px!important;max-width:36px!important;
  height:36px!important;min-height:36px!important;max-height:36px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  background-image:none!important;box-shadow:none!important;color:transparent!important;font-size:0!important;
  text-shadow:none!important;transform:none!important;overflow:visible!important
}
html body button[data-follow]::before,html body button[data-follow]::after,
html body button.tpm-follow-btn::before,html body button.tpm-follow-btn::after{content:none!important}
html body button[data-follow].following,html body button.tpm-follow-btn.following,
html body button[data-follow].following:hover,html body button.tpm-follow-btn.following:hover{
  background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;
  color:transparent!important;padding:0!important;transform:none!important
}
/* Featured-artist cards reserve enough width for the square database profile image. */
body:has(.component-home) .featured-artists .home-artist-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start}
body:has(.component-home) .featured-artists .home-artist-card{
  box-sizing:border-box;width:min(210px,100%);max-width:100%;grid-template-columns:minmax(0,1fr)!important;
  justify-self:start;min-width:0;overflow:hidden;padding:9px!important
}
body:has(.component-home) .featured-artists .home-artist-card .artist-art{
  box-sizing:border-box;display:block;width:100%!important;min-width:0!important;height:auto!important;
  aspect-ratio:1/1;overflow:hidden;border-radius:6px
}
body:has(.component-home) .featured-artists .home-artist-card .home-artist-photo{width:100%!important;height:100%!important;object-fit:contain!important}
body:has(.component-home) .featured-artists .home-artist-card>a:not(.artist-art){min-width:0}
@media(max-width:420px){body:has(.component-home) .featured-artists .home-artist-grid{grid-template-columns:minmax(0,210px)!important}}
/* The artist copy starts after the full avatar width at every player breakpoint. */
html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{
  grid-template-columns:64px minmax(0,1fr) auto!important;column-gap:12px!important
}
@media(max-width:900px){html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{grid-template-columns:44px minmax(0,1fr) auto!important;column-gap:10px!important}}
@media(max-width:600px){html body .universal-media-overlay .tpm-bar[data-signalwave-layout="true"] .tpm-artist-card{grid-template-columns:44px minmax(0,1fr) auto!important;column-gap:8px!important}}
/* Portal title keeps its icon; the profile name below it does not repeat it. */
.artist-portal-sidebar .portal-sidebar-profile h2::before{content:none!important;display:none!important;background-image:none!important}
/* Checkout remove comes first and stays alongside artwork, details and price. */
.fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row{
  display:grid!important;grid-template-columns:32px 52px minmax(0,1fr) auto!important;
  align-items:center!important;column-gap:12px!important;row-gap:0!important
}
.fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row>[data-gooi-remove]{
  box-sizing:border-box!important;grid-column:1!important;grid-row:1!important;
  display:grid!important;place-items:center!important;width:32px!important;height:32px!important;
  min-width:32px!important;min-height:32px!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:transparent!important;font-size:0!important;line-height:0!important
}
.fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row>[data-gooi-remove]::before{
  content:""!important;display:block!important;width:22px!important;height:22px!important;flex:none!important;
  background:var(--syntera-asset-icon) center/contain no-repeat!important
}
.fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row>:is(img,.gooi-cart-icon){grid-column:2;grid-row:1}
.fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row>div{grid-column:3;grid-row:1;min-width:0}
.fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row>strong{grid-column:4;grid-row:1}
@media(max-width:600px){
  .fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row{grid-template-columns:32px 44px minmax(0,1fr) auto!important;column-gap:8px!important}
  .fan-checkout [data-checkout-items] .fan-checkout-row.gooi-cart-row>:is(img,.gooi-cart-icon){width:44px;height:44px}
}
/* Home cards share one height; the follow control sits on the artist photo. */
body:has(.component-home) .home-song-card .song-art{height:184px!important}
body:has(.component-home) .featured-artists .home-artist-card{height:258px;grid-template-rows:154px minmax(0,1fr) auto;gap:6px!important}
body:has(.component-home) .featured-artists .home-artist-art-wrap{position:relative;min-width:0;height:154px}
body:has(.component-home) .featured-artists .home-artist-card .artist-art{height:154px!important;aspect-ratio:auto!important}
body:has(.component-home) .featured-artists .home-artist-card .home-artist-art-wrap>[data-follow]{position:absolute!important;right:5px!important;bottom:5px!important;z-index:7}
body:has(.component-home) .featured-artists .home-artist-card>a:not(.artist-art){align-self:start;min-width:0}
body:has(.component-home) .featured-artists .home-artist-superfan-btn{margin-top:0!important;align-self:end}

/* Notifications scroll within their list without exposing the gold browser scrollbar. */
.notifications-popover{display:flex;flex-direction:column;overflow:hidden!important;max-height:min(560px,calc(100vh - 96px));box-sizing:border-box}
.notifications-head{position:relative;flex:none;padding-right:52px!important}
.notifications-list{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none!important}
.notifications-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.notification-item{grid-template-columns:32px minmax(0,1fr) 24px!important;min-width:0;cursor:pointer}
.notification-item>div{min-width:0;overflow-wrap:anywhere}
.notifications-popover [data-notifications-close],.notifications-popover [data-dismiss-notification]{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:transparent!important;font-size:0!important;cursor:pointer}
.notifications-popover [data-notifications-close]::before,.notifications-popover [data-dismiss-notification]::before{width:20px!important;height:20px!important;flex-basis:20px!important;filter:none!important}
.notifications-popover [data-notifications-close]{top:11px!important;right:11px!important}
.notifications-popover [data-dismiss-notification]{align-self:start}
.notifications-popover [data-dismiss-notification]:disabled{opacity:.45;cursor:wait}

/* 3SA radio player in a stable, Klankstal-owned layout. */
.caster-radio-panel{width:100%;max-width:1440px;margin:0 auto!important;padding:14px!important;overflow:hidden}
.caster-radio-heading{margin-bottom:10px}
.caster-radio-heading h1{margin:4px 0 6px;color:#f2ca69;font:32px Georgia,serif}
.caster-radio-heading .sub{margin-bottom:0}
html body:has(.caster-radio-panel) main#app>.wrap{padding-top:10px!important;padding-bottom:0!important}
.radio-station-shell{max-width:1180px;margin:0 auto;border:1px solid #2a3b52;border-radius:12px;background:linear-gradient(145deg,#07111d 0%,#111a20 62%,#0a131c 100%);box-shadow:0 12px 32px #0007;overflow:hidden}
.radio-station-mast{min-height:104px;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(110deg,#17321b,#284719 62%,#0a1516);border-bottom:1px solid #384e2c}
.radio-station-mast img{display:block;width:min(310px,48vw);max-height:88px;object-fit:contain;object-position:left center}
.radio-station-mast .btn{white-space:nowrap}
.radio-station-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(270px,.9fr);gap:14px;padding:14px}
.radio-station-main,.radio-station-sidebar{display:grid;align-content:start;gap:14px}
.radio-player-card,.radio-station-intro,.radio-station-sidebar section{border:1px solid #26394b;border-radius:9px;background:#07111bcc;padding:16px}
.radio-player-card{min-height:224px;display:grid;place-items:center;overflow:hidden}
.radio-player-card .cstrEmbed{width:100%;min-height:190px;display:grid;place-items:center;color:#f6b52e}
.radio-player-card iframe{display:block;width:100%!important;max-width:100%;border:0}
.radio-station-intro h2,.radio-station-sidebar h2{margin:0 0 8px;color:#f2ca69;font:700 21px/1.2 Arial,sans-serif}
.radio-station-intro p,.radio-station-sidebar p{margin:0;color:#aeb9c7;line-height:1.55}
.radio-station-sidebar section{padding:15px}
.radio-station-sidebar section>a,.radio-contact-links a{display:inline-flex;margin-top:12px;color:#54d8ff;font-weight:800;text-decoration:none}
.radio-contact-links{display:flex;flex-wrap:wrap;gap:9px}
.radio-contact-links a{margin-top:4px;padding:8px 12px;border:1px solid #25bde8;border-radius:8px}
@media(max-width:900px){.radio-station-grid{grid-template-columns:1fr}.radio-player-card{min-height:205px}}
@media(max-width:600px){.caster-radio-panel{padding:10px!important}.radio-station-mast{align-items:flex-start;flex-direction:column;padding:14px}.radio-station-mast img{width:min(280px,80vw)}.radio-station-grid{padding:10px}.radio-player-card{padding:10px;min-height:190px}}

/* Home community footer: compact mic banner and four feature cards in a single row. */
body:has(.component-home) .home-join{box-sizing:border-box;width:calc(100% - 68px);margin:15px auto 0;display:grid;grid-template-columns:minmax(0,3fr) repeat(4,minmax(0,1fr));gap:14px;position:relative;z-index:1}
@media(min-width:821px){body:has(.component-home) .home-join{width:calc(100% - 136px);margin-left:68px;margin-right:68px}}
.home-join-banner{display:flex;align-items:stretch;min-width:0;min-height:230px;border:1px solid #1f3d63;border-radius:14px;overflow:hidden;background:#040b16;box-shadow:0 0 0 1px rgba(40,90,160,.18),0 10px 30px rgba(0,0,0,.35)}
.home-join-copy{flex:1 1 auto;align-self:center;min-width:0;padding:22px 0 22px 24px}
.home-join-eyebrow{display:block;margin-bottom:8px;color:#e8a93a;font:700 10px/1.2 "Trebuchet MS",Inter,Arial,sans-serif;letter-spacing:.14em}
.home-join-copy h2{display:block!important;margin:0 0 10px;color:#f4f6f8!important;font:400 26px/1.1 Georgia,"Times New Roman",serif!important;letter-spacing:0!important}
.home-join-copy p{margin:0 0 16px;color:#e2e8ee;font-size:12px;line-height:1.5}
.home-join-copy p span{display:block}
.home-join-button{display:inline-block;padding:11px 24px;border-radius:6px;background:linear-gradient(180deg,#f3b13d,#e2901c);color:#fff;font:700 13px/1 "Trebuchet MS",Inter,Arial,sans-serif;text-decoration:none;box-shadow:0 6px 18px rgba(226,144,28,.25);transition:filter .15s,transform .15s}
.home-join-button:hover,.home-join-button:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
.home-join-mic{flex:0 0 42%;background:url('assets/community-mic-banner.jpg') 40% center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%);mask-image:linear-gradient(90deg,transparent 0,#000 25%)}
.home-join-cards{display:contents}
.home-join-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:16px 12px;border:1px solid #1d3a5c;border-radius:12px;background:linear-gradient(180deg,rgba(7,18,34,.94),rgba(4,12,24,.94));color:inherit;text-align:center;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.home-join-card:hover,.home-join-card:focus-visible{border-color:#3470b8;box-shadow:0 0 18px rgba(52,112,184,.28);transform:translateY(-2px)}
.home-join-card img{width:40px;height:40px;margin-bottom:14px;object-fit:contain}
.home-join-card h3{display:block!important;margin:0 0 8px;color:#f4f6f8!important;font:700 14px/1.25 "Trebuchet MS",Inter,Arial,sans-serif!important}
.home-join-card p{margin:0;color:#c3d0e2;font-size:12px;line-height:1.45}
@media(max-width:1100px){body:has(.component-home) .home-join{grid-template-columns:repeat(4,minmax(0,1fr))}.home-join-banner{grid-column:1/-1}.home-join-copy h2{font-size:30px}.home-join-mic{flex-basis:340px}.home-join-card{min-height:150px}}
@media(max-width:760px){body:has(.component-home) .home-join{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body:has(.component-home) .home-join{width:calc(100% - 28px);gap:10px}.home-join-banner{flex-direction:column-reverse}.home-join-mic{flex:0 0 190px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}.home-join-copy{padding:4px 18px 22px}.home-join-copy h2{font-size:26px}.home-join-card{min-height:130px;padding:14px 10px}}