*{box-sizing:border-box} :root{color-scheme:dark;--bg:#10131d;--surface:#191e2c;--line:#30374b;--text:#f0f2f8;--muted:#aeb8cf;--accent:#8ba5ff;--side:220px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 'Segoe UI',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button,input,select,textarea{border:1px solid var(--line);border-radius:8px}input,select,textarea{background:#101521;color:var(--text);padding:12px;width:100%}textarea{min-height:100px;resize:vertical}input[type=checkbox]{width:19px;height:19px;accent-color:var(--accent)}input[type=file]{padding:10px;font-size:13px}button{padding:10px 17px;background:var(--surface);color:var(--text);font-weight:600;min-height:44px}button:hover,.button:hover{filter:brightness(1.12)}button.primary,.button.primary{background:var(--accent);color:#10131d;border-color:transparent}button.secondary,.button.secondary{background:transparent;color:var(--text)}button.small,.button.small{font-size:13px;padding:8px 12px;min-height:38px}button.danger{color:#ffb5bc}.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;border-radius:8px;min-height:44px;font-weight:650;background:var(--surface);border:1px solid var(--line)}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-1.1px;font-weight:650;margin-bottom:16px}h2{font-size:23px;line-height:1.25;letter-spacing:-.5px;font-weight:650}h3{font-size:17px;line-height:1.35;font-weight:650}p{max-width:75ch}small,.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);padding:34px 22px;background:#141824;border-right:1px solid #232a3b;z-index:20}.brand{display:flex;align-items:center;gap:12px;font-size:29px;font-weight:750;letter-spacing:-1px}.brand img{width:38px;height:38px}.brand-caption{font-size:12px;color:var(--muted);margin:17px 0 35px}.sidebar nav{display:grid;gap:7px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:7px;font-size:13px;color:var(--muted)}.sidebar nav a span{font-size:22px;line-height:24px;width:24px;color:#c4cee5}.sidebar nav a.active,.sidebar nav a:hover{background:#26314c;color:#dce4ff}.nav-divider{height:1px;background:var(--line);margin:24px 9px}.sidebar-foot{position:absolute;bottom:30px;font-size:12px;color:var(--muted)}.sidebar-foot .location{color:#e1e6f3}.sidebar-foot p{margin-top:9px}.sidebar-foot a{text-decoration:underline}.page-shell{margin-left:var(--side)}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 40px;border-bottom:1px solid #242a3b}.topbar form{display:flex;align-items:center;gap:10px;max-width:530px;flex:1}.topbar form>span{font-size:30px;color:var(--muted)}.topbar input{border:0;background:transparent;padding-left:0;outline-offset:0}.account-button{border:0;background:transparent;white-space:nowrap}.account-button span{color:var(--accent);margin-left:12px}.mobile-brand,.mobile-nav{display:none}.demo-banner{padding:9px 40px;font-size:12px;color:#d1dcff;background:#1e2943;display:flex;gap:18px}.demo-banner span{color:#b1bedb}main{padding:30px 40px 40px;max-width:1510px;margin:auto;min-height:70vh}main:focus{outline:none}.section-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:32px 0 18px}.section-title h2{margin:0}.section-title a,.text-button{font-size:13px;color:var(--accent)}.hero{display:grid;grid-template-columns:1.2fr .8fr;background:#1d2945;border-radius:15px;overflow:hidden;min-height:260px}.hero-copy{padding:34px;align-self:center}.hero-copy p{color:#c4cfe6;font-size:14px;max-width:390px;margin-bottom:22px}.hero-copy h1{max-width:400px;font-size:37px;letter-spacing:-1.2px;margin:0 0 15px}.hero-art{display:flex;justify-content:center;align-items:center;padding:22px;position:relative;background:#273555;overflow:hidden;min-height:260px}.hero-art:before{content:'';width:215px;height:215px;border-radius:50%;background:repeating-radial-gradient(circle,#151c2a 0 4px,#303b51 5px 6px);position:absolute;right:10%;box-shadow:0 12px 28px #0a101e50}.hero-art img{width:215px;height:215px;position:relative;transform:rotate(-7deg) translateX(-26px);box-shadow:5px 13px 20px #080f2940}.featured-note{font-size:12px;color:#c3cee8;display:block;margin-bottom:12px}.hero-actions{display:flex;align-items:center;gap:15px}.hero-actions .price{font-size:19px}.price{white-space:nowrap;font-weight:650}.discovery-tools{display:flex;gap:10px;align-items:center;margin:25px 0 22px;flex-wrap:wrap}.filter-chip{padding:8px 16px;border-radius:30px;font-size:13px;min-height:38px;background:transparent}.filter-chip.active{background:#dce4fb;border-color:#dce4fb;color:#1d2844}.discovery-tools select{width:auto;font-size:13px;padding:8px 30px 8px 12px;min-height:38px}.discovery-tools .spacer{flex:1}.release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}.release-card{min-width:0}.artwork{display:block;aspect-ratio:1;position:relative;border-radius:10px;overflow:hidden;background:var(--surface)}.artwork img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.artwork:hover img{transform:scale(1.035)}.artwork .type-tag{position:absolute;bottom:10px;left:10px;background:#111928db;padding:3px 9px;border-radius:5px;color:#e7edff;font-size:11px;backdrop-filter:blur(6px)}.release-card h3{margin:12px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.release-card p{font-size:13px;color:var(--muted);margin-bottom:12px}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-bottom .price{font-size:14px}.card-bottom button,.card-bottom .button{font-size:12px;min-height:35px;padding:6px 11px}.owned{color:#a9dbbf;font-size:12px}.artists-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.artist-mini{display:flex;align-items:center;gap:13px;padding:15px 0;border-top:1px solid var(--line)}.artist-avatar{height:50px;width:50px;display:grid;place-items:center;border-radius:50%;background:#2b3854;color:#bbccff;font-size:17px;flex:none}.artist-mini strong{font-size:14px}.artist-mini small{display:block;font-size:12px}.artist-mini>span:last-child{margin-left:auto;color:var(--muted)}.merch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.merch-card{display:flex;gap:22px;align-items:center;background:var(--surface);border-radius:12px;padding:15px}.merch-card img{width:140px;height:140px;object-fit:cover;border-radius:7px}.merch-card p{font-size:13px;margin-bottom:12px;color:var(--muted)}.merch-card h3{margin-bottom:6px}.merch-note{display:flex;flex-direction:column;justify-content:center;padding:20px 28px;color:var(--muted);border-left:1px solid var(--line);font-size:14px}.merch-note h3{color:var(--text)}footer{padding:22px 40px 32px;border-top:1px solid #232a3b;color:var(--muted);font-size:12px;display:flex;gap:10px 20px;flex-wrap:wrap}footer a{color:#d0daf0}footer>span{margin-left:auto}.page-heading{margin-bottom:24px}.page-heading h1{font-size:32px;margin-bottom:10px}.page-heading p{color:var(--muted)}.detail{display:grid;grid-template-columns:minmax(230px,340px) 1fr;gap:40px}.detail-cover{width:100%;border-radius:12px}.detail h1{margin:6px 0 10px}.detail .artist-label{color:var(--accent)}.detail .description{color:var(--muted);margin:20px 0}.detail-summary{display:flex;gap:16px;align-items:center;margin:20px 0}.detail-summary .price{font-size:27px}.pill{display:inline-flex;padding:3px 9px;border:1px solid var(--line);border-radius:25px;font-size:12px;color:var(--muted)}.terms{padding:17px 20px;background:var(--surface);border-radius:10px;font-size:13px;color:var(--muted);margin:20px 0}.terms strong{color:var(--text)}.track-list{margin:20px 0}.track{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding:12px 0}.track>span:first-child{width:22px;font-size:13px;color:var(--muted)}.track strong{font-weight:500;flex:1}.track .time{color:var(--muted);font-size:13px}.track button{font-size:13px;min-width:40px;padding:7px}.library-tools{display:flex;gap:12px;max-width:650px;margin-bottom:25px}.empty{padding:45px 20px;background:var(--surface);border-radius:12px;text-align:center}.empty p{color:var(--muted);margin:0 auto 20px;max-width:480px}.empty h2{margin-bottom:10px}.empty .symbol{font-size:36px;color:var(--accent);margin-bottom:10px}.loading{padding:50px 20px;color:var(--muted)}.error{color:#ffb5bc;background:#3a202c;border:1px solid #743f51;padding:12px 15px;border-radius:8px;margin:12px 0}.success{color:#b5e9ce;background:#1c352f;border:1px solid #2c6353;padding:12px 15px;border-radius:8px;margin:12px 0}.notice{padding:13px 16px;background:#202d48;border-radius:8px;color:#c4d1f3;font-size:13px;margin:15px 0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:flex;flex-direction:column;gap:6px;font-size:13px}.full{grid-column:1/-1}.field small{font-size:12px}.check{display:flex;align-items:center;gap:10px;font-size:13px}.field input[type=checkbox]{width:auto}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}.split{display:grid;grid-template-columns:1fr 340px;gap:30px}.panel{padding:24px;background:var(--surface);border-radius:12px}.panel h2{font-size:21px}.summary-line{display:flex;justify-content:space-between;gap:15px;margin:10px 0;font-size:14px}.summary-line.total{padding-top:15px;border-top:1px solid var(--line);font-weight:700;font-size:20px}.countdown{font-size:44px;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1.2;margin:15px 0}.state-box{padding:25px;border:1px solid var(--line);border-radius:12px;margin:18px 0}.state-box h2{margin-bottom:8px}.state-box p{color:var(--muted)}.state-box button{margin:4px 5px 4px 0}.order-row{padding:20px;background:var(--surface);border-radius:10px;margin:14px 0;display:flex;justify-content:space-between;gap:20px;align-items:center}.order-row h3{margin-bottom:4px}.order-row small{display:block}.badge{font-size:12px;padding:4px 8px;border-radius:5px;display:inline-block;background:#2b354e;color:#c6d6ff}.badge.confirmed,.badge.approved,.badge.published,.badge.completed{background:#1e4136;color:#b5e7cd}.badge.failed,.badge.rejected{background:#462637;color:#ffb5bc}.badge.pending{background:#3c3524;color:#e8d5a5}.dashboard-tabs{display:flex;gap:8px;overflow:auto;margin:20px 0 24px;padding-bottom:6px}.dashboard-tabs button{white-space:nowrap;border-radius:25px;min-height:38px;font-size:13px}.dashboard-tabs button.active{background:#dce4fb;color:#1d2844}.mobile-menu{display:none}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}.metric{padding:20px;background:var(--surface);border-radius:10px}.metric small{display:block}.metric strong{font-size:26px;display:block;margin-top:8px;white-space:nowrap}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:13px 10px;vertical-align:middle}th{font-weight:500;color:var(--muted)}td .price{font-size:13px}td button{margin:3px;min-height:35px;padding:6px 10px;font-size:12px}td small{display:block}.onboarding{display:flex;gap:12px;margin:20px 0}.onboarding span{padding:7px 12px;background:#25304a;border-radius:6px;font-size:13px}.onboarding span.active{color:#10131d;background:var(--accent)}.upload-track{padding:12px;border:1px solid var(--line);border-radius:9px;margin:10px 0}.upload-track .form-grid{grid-template-columns:2fr 1fr}.status-line{display:flex;align-items:center;gap:12px;margin:15px 0}.dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.dashboard-header h1{font-size:30px;margin:0}.account-menu{display:grid;gap:12px}.account-menu button{text-align:left}.demo-account-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.demo-account-list button{font-size:13px;padding:10px 5px}dialog{color:var(--text);background:#1a2030;border:1px solid #3b4662;border-radius:16px;width:min(530px,calc(100vw - 28px));padding:30px;max-height:90dvh;overflow:auto;box-shadow:0 28px 90px #0008}dialog::backdrop{background:#070a16b0;backdrop-filter:blur(6px)}dialog h2{padding-right:20px}.close-dialog{position:absolute;right:12px;top:10px;padding:0;width:38px;min-height:38px;font-size:26px;border:0;background:transparent}.large-cover{display:block;width:min(300px,100%);aspect-ratio:1;margin:25px auto;border-radius:10px}#expanded-player{text-align:center}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);max-width:90vw;border:1px solid #6177aa;background:#263654;color:#edf2ff;padding:13px 20px;border-radius:10px;box-shadow:0 10px 30px #0005;z-index:100}.mini-player{position:fixed;bottom:0;left:var(--side);right:0;z-index:40;background:#20283bee;border-top:1px solid #3b4869;backdrop-filter:blur(20px);display:flex;align-items:center;padding:13px 25px;gap:20px;height:89px}.now-playing{display:flex;align-items:center;gap:12px;min-width:210px;max-width:300px;border:0;background:transparent;padding:0;text-align:left}.now-playing img{width:52px;height:52px;border-radius:6px}.now-playing span{min-width:0}.now-playing strong,.now-playing small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.transport{display:flex;gap:8px;align-items:center}.transport button{border:0;background:transparent;padding:5px 8px;font-size:17px}.transport .play-circle{border-radius:50%;background:#dce4fb;color:#18213a;width:42px;min-height:42px}.seek{display:flex;gap:10px;align-items:center;flex:1;color:var(--muted);font-size:12px}.seek input{padding:0;accent-color:var(--accent);height:4px}.mini-player>button{border:0;background:transparent;font-size:24px;padding:5px;color:var(--muted)}.mini-player>button[aria-pressed=true]{color:var(--accent)}body.playing .page-shell{padding-bottom:89px}.icon-button{font-size:18px!important}.inline-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline-form .field{flex:1;min-width:160px}.preview-thumb{width:80px;height:80px;border-radius:8px;object-fit:cover}.restricted{max-width:650px;margin:35px auto}.auth-tabs{display:flex;gap:8px;margin-bottom:22px}.auth-tabs button.active{background:var(--accent);color:#10131d}.form-note{margin:15px 0;color:var(--muted);font-size:12px}.link-button{border:0;background:transparent;color:var(--accent);padding:4px 0;min-height:32px}.about{max-width:800px}.about li{margin-bottom:10px}.about h2{margin-top:30px}.about a{text-decoration:underline;color:var(--accent)}
@media(min-width:1500px){.release-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.hero-copy h1{font-size:43px}.hero{min-height:290px}}
@media(max-width:1150px){:root{--side:195px}.sidebar{padding:30px 14px}.topbar{padding:0 26px}main{padding:26px}.demo-banner{padding:8px 26px}.release-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-copy{padding:26px}.hero-copy h1{font-size:32px}.hero-art img{width:190px;height:190px}.hero-art:before{width:190px;height:190px}.merch-grid{grid-template-columns:1fr 1fr}.merch-card{gap:15px}.merch-card img{width:100px;height:120px}.merch-note{padding:15px}.split{grid-template-columns:1fr 280px;gap:20px}.mini-player{gap:12px;padding:13px 20px}.now-playing{min-width:160px;max-width:210px}.seek{min-width:80px}.mini-player>button{padding:2px}.detail{gap:25px;grid-template-columns:minmax(190px,270px) 1fr}}
@media(max-width:800px){:root{--side:0px}.sidebar{display:none}.page-shell{margin:0;padding-bottom:70px}.topbar{height:72px;padding:0 20px;gap:10px}.mobile-brand{display:flex;font-size:23px;flex-shrink:0}.mobile-brand img{width:32px;height:32px}.topbar form{max-width:300px}.topbar input{font-size:13px}.account-button{padding:8px;font-size:13px}.account-button span{display:none}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:66px;z-index:45;background:#161d2ded;border-top:1px solid var(--line);backdrop-filter:blur(15px);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav a{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:20px;color:var(--muted);line-height:1.2;gap:4px}.mobile-nav a span{font-size:10px}.mobile-nav a.active{color:var(--accent)}main{padding:24px 20px}.demo-banner{padding:7px 20px;gap:10px;font-size:11px}.hero-copy h1{font-size:30px}.hero-art img{width:180px;height:180px}.hero-art:before{height:180px;width:180px;right:4%}.hero-art{padding:20px 10px;min-height:245px}.hero-copy{padding:24px}.artists-row{gap:15px}.artist-mini{gap:9px}.artist-avatar{width:42px;height:42px;font-size:13px}.artist-mini strong{font-size:12px}.artist-mini>span:last-child{display:none}.artist-mini small{font-size:11px}.mini-player{bottom:66px;height:77px;padding:10px 18px;gap:12px}.mini-player .seek{display:none}.mini-player .now-playing{flex:1;max-width:none}.mini-player>button{font-size:21px}.now-playing img{width:44px;height:44px}.now-playing{min-width:100px}.transport{gap:4px}.transport button{padding:5px;min-width:30px}.mini-player .transport #previous{display:none}body.playing .page-shell{padding-bottom:153px}footer{padding:24px 20px;display:block}footer>*{display:block;margin:7px 0}.detail{grid-template-columns:240px 1fr;gap:25px}.detail h1{font-size:28px}.split{grid-template-columns:1fr}.split>.panel{order:-1}.metrics{grid-template-columns:repeat(3,1fr)}.metric{padding:15px}.metric strong{font-size:22px}.mobile-menu{display:block}.dashboard-tabs{display:none;flex-wrap:wrap;overflow:visible}.dashboard-tabs.open{display:flex}.dashboard-header h1{font-size:27px}#toast{bottom:160px}}
@media(max-width:540px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:14px 18px 10px;gap:8px}.topbar form{order:3;min-width:100%;border-top:1px solid #252d40;padding-top:4px}.topbar form input{padding:8px 0}.topbar form>span{font-size:25px}.demo-banner{padding:8px 18px;display:block}.demo-banner span{display:block;font-size:10px}main{padding:20px 18px}.hero{grid-template-columns:1fr 135px;min-height:235px}.hero-copy{padding:22px 0 22px 20px}.hero-copy h1{font-size:26px;letter-spacing:-.7px;max-width:230px}.hero-copy p{font-size:12px;margin-bottom:15px}.featured-note{font-size:10px;margin-bottom:8px}.hero-art{min-height:235px;padding:0;overflow:visible}.hero-art img{width:142px;height:142px;transform:rotate(-7deg) translateX(11px)}.hero-art:before{width:145px;height:145px;right:-50px}.hero-actions{gap:10px}.hero-actions .button{font-size:12px;padding:9px 12px}.hero-actions .price{font-size:14px}.hero-copy{position:relative;z-index:1}.discovery-tools{gap:7px;margin:20px 0}.filter-chip{padding:7px 12px;font-size:12px}.discovery-tools select{font-size:12px;max-width:48%;flex:1}.discovery-tools .spacer{flex-basis:100%;height:0}.section-title{margin:26px 0 16px}.section-title h2{font-size:21px}.release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.release-card h3{font-size:15px}.release-card p{font-size:12px;margin-bottom:10px}.card-bottom{flex-wrap:wrap;gap:8px}.card-bottom .price{font-size:14px}.card-bottom button,.card-bottom .button{font-size:11px;padding:6px 10px}.artists-row{grid-template-columns:1fr;gap:0}.artist-mini{padding:14px 0}.artist-mini strong{font-size:14px}.artist-mini small{font-size:12px}.artist-mini>span:last-child{display:block}.merch-grid{grid-template-columns:1fr}.merch-card img{width:110px;height:125px}.merch-note{border-left:0;border-top:1px solid var(--line);padding:18px 0}.detail{grid-template-columns:1fr;gap:22px}.detail-cover{max-width:320px;display:block;margin:auto}.detail h1{font-size:32px}.detail .description{font-size:14px}.page-heading h1{font-size:28px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.panel{padding:20px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric strong{font-size:22px}.metric{padding:15px}.order-row{align-items:start;padding:16px;gap:14px;flex-wrap:wrap}.order-row .actions{margin-top:4px}.onboarding{gap:5px}.onboarding span{padding:7px;font-size:11px}.mini-player{padding:9px 12px;gap:9px}.now-playing strong,.now-playing small{font-size:11px}.mini-player>button{display:none}.transport .play-circle{width:38px;min-height:38px}.library-tools{flex-wrap:wrap}.library-tools input{flex:1;min-width:150px}.dashboard-header h1{font-size:25px}dialog{padding:25px 20px}.demo-account-list{gap:5px}.demo-account-list button{font-size:11px}.upload-track .form-grid{grid-template-columns:1fr}.detail-summary{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.expanded-transport{display:flex;justify-content:center;gap:9px;align-items:center;margin-top:20px}.expanded-transport button{font-size:20px;padding:7px 12px}.expanded-transport button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.expanded-transport .primary{border-radius:50%;width:50px;height:50px}#expanded-player .seek{display:flex}
.mini-player>.now-playing{display:flex;font-size:inherit;padding:0;color:var(--text)}

.access-mode{display:block;margin-top:4px;font-size:11px;color:#b3c3e5}.card-bottom{flex-wrap:wrap}.track{flex-wrap:wrap}.track strong{min-width:100px}
.release-page{position:relative;isolation:isolate;min-height:calc(100dvh - 150px)}
.release-backdrop{position:fixed;inset:88px 0 0 var(--side);z-index:-1;overflow:hidden;pointer-events:none;background:#10131d}
.release-backdrop img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:blur(12px) saturate(.85);transform:scale(1.06);opacity:.62}
.release-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,18,32,.48),rgba(13,18,32,.78)),linear-gradient(0deg,#10131d 0%,rgba(16,19,29,.12) 85%)}
.release-page .detail{padding:24px 0 30px}.release-page .detail-cover{box-shadow:0 22px 55px #0006;border:1px solid #ffffff24}
.release-page .terms{background:#151d30d9;border:1px solid #ffffff1a}.release-page .track-list{background:#151d30b8;padding:0 16px;border-radius:10px}.release-page .description,.release-page .muted{color:#d0d9eb}.release-page .track{border-color:#ffffff22}.release-page .text-button{color:#d8e3ff}
@media(max-width:800px){.release-backdrop{inset:0}.release-backdrop img{object-position:center top;opacity:.53}.release-page .detail{padding-top:8px}.release-page .detail-cover{max-width:310px}.release-backdrop:after{background:linear-gradient(0deg,#10131d,rgba(16,19,29,.35))}}
/* Keep the release artwork recognisable behind the content. */
.release-backdrop img{filter:blur(3px) saturate(.9);opacity:.8}.release-backdrop:after{background:linear-gradient(90deg,rgba(13,18,32,.42),rgba(13,18,32,.62)),linear-gradient(0deg,#10131d 0%,rgba(16,19,29,.08) 90%)}
@media(max-width:800px){.release-backdrop img{opacity:.65}.release-backdrop:after{background:linear-gradient(0deg,#10131d,rgba(16,19,29,.40))}}

.demo-account-list.two{grid-template-columns:repeat(2,1fr)}
.terms-box{max-height:240px;overflow:auto;padding:14px 16px;background:#101521;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--muted);margin-bottom:12px}.terms-box h3{color:var(--text);margin-bottom:8px}.terms-box ol{padding-left:20px;margin:0}.terms-box li{margin-bottom:6px}.terms-box strong{color:var(--text)}.artist-terms .check{align-items:flex-start}.artist-terms .check input{flex:none;margin-top:2px}
.report-link{font-size:13px;color:#c7d2ef}.report-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:14px 0}.report-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.report-card dl{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin:0;font-size:13px}.report-card dt{color:var(--muted)}.report-card dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.badge.open{background:#3c3524;color:#e8d5a5}.badge.reviewing{background:#2b354e;color:#c6d6ff}.badge.upheld{background:#462637;color:#ffb5bc}.badge.dismissed{background:#1e4136;color:#b5e7cd}
@media(max-width:800px){.report-card dl{grid-template-columns:1fr}.report-card dt{margin-top:6px}}
/* Artists carousel */
.artist-carousel{position:relative;overflow:hidden;margin:0 -6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.artist-track{display:flex;gap:18px;width:max-content;padding:6px}
.artist-clone{display:flex;gap:18px}
.artist-carousel.is-looping .artist-track{animation:artist-marquee 30s linear infinite;animation-duration:var(--dur,30s)}
.artist-carousel:hover .artist-track,.artist-carousel:focus-within .artist-track{animation-play-state:paused}
@keyframes artist-marquee{to{transform:translateX(calc(-50% - 9px))}}
.artist-card{display:flex;flex-direction:column;align-items:center;text-align:center;width:168px;padding:16px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:transform .25s,border-color .25s,background .25s}
.artist-card:hover,.artist-card:focus-visible{transform:translateY(-4px);border-color:#4c5a80;background:#1f2638}
.artist-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:12px;box-shadow:0 8px 20px #0006;transition:transform .35s}
.artist-card:hover .artist-photo{transform:scale(1.06) rotate(-3deg)}
.artist-initials{display:grid;place-items:center;background:#2b3854;color:#bbccff;font-size:28px;font-weight:650}
.artist-card strong{font-size:14px}.artist-card small{font-size:12px;color:var(--muted);margin-top:2px}
/* Genre suggestions */
.genre-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.suggest-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.suggest-row>*{flex:none;scroll-snap-align:start}.suggest-release{width:190px}.suggest-artist .artist-card{height:100%;justify-content:center}
/* Release card hover */
.release-card{transition:transform .25s}.release-card:hover{transform:translateY(-4px)}
.artwork{box-shadow:0 6px 16px #0004;transition:box-shadow .25s}.release-card:hover .artwork{box-shadow:0 14px 30px #0008}
.artwork:after{content:'';position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2310131d' d='M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5Z'/%3E%3C/svg%3E") 55% 50%/16px no-repeat;color:#10131d;font-size:15px;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .25s,transform .25s;box-shadow:0 6px 16px #0007}
.release-card:hover .artwork:after,.artwork:focus-visible:after{opacity:1;transform:none}
/* Hero vinyl */
.hero-art:before{animation:vinyl-spin 14s linear infinite}
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
.hero-art img{transition:transform .5s}.hero-art:hover img{transform:rotate(-2deg) translateX(-34px)}
/* Scroll reveal (only when JS enables .motion) */
.motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*60ms)}
.motion .reveal.is-visible{opacity:1;transform:none}
@media(max-width:800px){.artist-card{width:140px}.artist-photo{width:78px;height:78px}.suggest-release{width:160px}}
@media(prefers-reduced-motion:reduce){.artist-carousel .artist-track{animation:none!important}.artist-carousel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.artist-clone{display:none}.hero-art:before{animation:none}.release-card,.artist-card,.artwork:after,.artist-photo{transition:none}}
.seo-content{max-width:700px}.seo-content img{width:220px;height:auto;border-radius:10px}
.track-slots-title{font-size:15px;margin:6px 0 4px}.track-slots-title small{font-weight:400;font-size:12px}.track-slot{display:grid;grid-template-columns:28px 1fr 1fr;gap:12px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#141a28}.track-slot-n{align-self:center;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#25304a;color:var(--accent);font-size:13px;font-weight:650}@media(max-width:600px){.track-slot{grid-template-columns:28px 1fr}.track-slot .field:last-child{grid-column:2}}
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.genre-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:72px;padding:14px;border-radius:12px;border:1px solid hsl(var(--h) 35% 32%);background:linear-gradient(135deg,hsl(var(--h) 45% 22%),hsl(calc(var(--h) + 40) 40% 14%));transition:transform .2s,filter .2s,border-color .2s}
.genre-tile strong{font-size:14px}.genre-tile small{font-size:11px;color:#c9d2ea;font-weight:400}
.genre-tile:hover{transform:translateY(-3px)}.genre-tile.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.genre-tile.is-empty{opacity:.55}.genre-tile.is-empty:hover{opacity:.8}
@media(max-width:800px){.genre-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.genre-tile{transition:none}}
.notif-button{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:18px;margin-left:auto}.notif-button:hover{background:var(--surface)}
.notif-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff6b7a;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.notif-list{display:grid;gap:10px;max-width:760px}.notif-item{display:grid;gap:4px;padding:16px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}.notif-item span{color:var(--muted);font-size:14px}.notif-item small{color:var(--muted);font-size:12px}.notif-item.unread{border-color:var(--accent);background:#1d2540}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid #2b3550;border-top-color:var(--accent);animation:vinyl-spin 1s linear infinite;margin:12px 0}
.terms-check{flex-basis:100%;margin-bottom:6px}.legal h2{font-size:19px;margin-top:26px}.legal ul{padding-left:20px}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.demo-account-list.one{grid-template-columns:1fr}
.pay-method{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--accent);border-radius:10px;background:#141a28}.pay-method img{width:68px;height:58px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}.pay-method strong{display:block;font-size:14px}.pay-method small{color:var(--muted);font-size:12px}

/* Icons (inline SVG sprite) */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon.fill{fill:currentColor}
.sidebar nav a .icon,.mobile-nav .icon{width:20px;height:20px}
.transport button .icon,.expanded-transport button .icon,#shuffle .icon,#repeat .icon{width:20px;height:20px}
.play-circle .icon,#large-play .icon{width:22px;height:22px}
.close-dialog .icon{width:20px;height:20px}
.empty .symbol .icon{width:36px;height:36px;stroke-width:1.6}
#global-search>.icon{width:18px;height:18px;opacity:.75}
.notif-button .icon{width:20px;height:20px}
.account-button .icon{width:16px;height:16px;margin-left:2px}
/* Upload progress (1-100 %) */
.upload-progress{margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#141a28}
.upload-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px;font-size:13px}
.upload-progress-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.upload-progress-value{font-variant-numeric:tabular-nums;color:var(--text)}
.upload-progress progress{display:block;width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:#2a3145;appearance:none;-webkit-appearance:none}
.upload-progress progress::-webkit-progress-bar{background:#2a3145;border-radius:99px}
.upload-progress progress::-webkit-progress-value{background:var(--accent);border-radius:99px;transition:width .2s}
.upload-progress progress::-moz-progress-bar{background:var(--accent);border-radius:99px}
/* Studio: release and track management */
.row-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.row-actions button{display:inline-flex;align-items:center;gap:6px}
button.danger,.button.danger{color:#ffb4b4;border-color:#6b3540;background:#2a1820}
button.danger:hover:not(:disabled){background:#3a1f29}
button:disabled{opacity:.45;cursor:not-allowed}
button.icon-button{width:38px;padding:0;justify-content:center}
.track-manage{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
.track-manage li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#141a28}
.track-manage-n{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.track-manage-title{display:grid;min-width:0}
.track-manage-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.current-cover{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.current-cover img{width:72px;height:72px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
#confirm-ok{display:inline-flex;align-items:center;gap:6px}

/* Account pages (#/entrar, #/criar-conta, #/recuperar) */
body.auth-mode .sidebar,body.auth-mode .topbar,body.auth-mode .mobile-nav,body.auth-mode footer,body.auth-mode .mini-player{display:none}
body.auth-mode .page-shell{margin-left:0;padding-bottom:0}
body.auth-mode main{padding:0;max-width:none;min-height:100vh}
.auth-page{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);min-height:100vh}
.auth-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px 44px;background:radial-gradient(120% 90% at 0% 0%,#2a3a7a 0%,#161c33 55%,#10131d 100%);border-right:1px solid #232a3b}
.auth-brand{position:relative;z-index:1}
.auth-pitch{position:relative;z-index:1;max-width:400px}
.auth-pitch h2{font-size:34px;line-height:1.15;margin:0 0 26px;letter-spacing:-.02em}
.auth-pitch ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.auth-pitch li{display:flex;gap:12px;align-items:flex-start;color:#d5ddf2}
.auth-pitch li .icon{width:22px;height:22px;color:var(--accent);margin-top:1px}
.auth-art{position:absolute;right:-60px;bottom:-40px;display:flex;align-items:flex-end;gap:10px;opacity:.55}
.auth-art span{width:22px;border-radius:12px 12px 0 0;background:linear-gradient(#8ba5ff,#8ba5ff00);animation:auth-eq 2.4s ease-in-out infinite}
.auth-art span:nth-child(1){height:120px}.auth-art span:nth-child(2){height:200px;animation-delay:-.6s}.auth-art span:nth-child(3){height:150px;animation-delay:-1.2s}.auth-art span:nth-child(4){height:240px;animation-delay:-.3s}.auth-art span:nth-child(5){height:170px;animation-delay:-.9s}
@keyframes auth-eq{50%{transform:scaleY(.7)}}
.auth-art span{transform-origin:bottom}
.auth-main{display:flex;flex-direction:column;align-items:center;padding:28px 24px 24px}
.auth-top{width:100%;max-width:460px;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.auth-brand-mobile{display:none}
.auth-back{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.auth-card{width:100%;max-width:460px;margin:auto 0;padding:28px 0}
.auth-card h1{font-size:28px;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.auth-card>.muted{margin:0 0 22px}
.auth-form{display:grid;gap:14px}
.auth-form .form-grid{gap:14px}
.auth-form input:not([type=checkbox]):not([type=radio]){min-height:46px}
.auth-submit{width:100%;min-height:48px;font-size:15px;font-weight:600;margin-top:4px}
.auth-forgot{justify-self:end;font-size:13px;margin-top:-4px}
.auth-switch{text-align:center;color:var(--muted);margin:18px 0 0}
.auth-legal{display:flex;gap:18px;font-size:12px;color:var(--muted)}
.auth-legal a{color:var(--muted)}
.auth-step-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px}
.auth-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#8ba5ff1f;color:var(--accent);margin-bottom:16px}
.auth-icon .icon{width:26px;height:26px}
.role-picker{border:0;padding:0;margin:0 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-picker legend{font-size:13px;margin-bottom:8px;padding:0}
.role-option{position:relative;cursor:pointer}
.role-option input{position:absolute;opacity:0;pointer-events:none}
.role-card{display:grid;gap:3px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#141a28;transition:border-color .15s,background .15s;height:100%;box-sizing:border-box}
.role-card .icon{width:22px;height:22px;color:var(--muted);margin-bottom:4px}
.role-card small{color:var(--muted);font-size:12px;line-height:1.35}
.role-option input:checked+.role-card{border-color:var(--accent);background:#8ba5ff14}
.role-option input:checked+.role-card .icon{color:var(--accent)}
.role-option input:focus-visible+.role-card{outline:2px solid var(--accent);outline-offset:2px}
.password-wrap,.phone-wrap{position:relative;display:flex;align-items:center}
.password-wrap input{flex:1;padding-right:48px}
.password-toggle{position:absolute;right:4px;width:40px;height:40px;min-height:0;padding:0;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
.password-toggle:hover{color:var(--text)}
.phone-prefix{position:absolute;left:12px;color:var(--muted);font-size:14px;pointer-events:none}
.phone-wrap input{flex:1;padding-left:56px}
.password-hint{margin:-4px 0 0;font-size:12px;color:var(--muted)}
.password-hint.ok{color:#8fd6a6}.password-hint.bad{color:#ffb4b4}
.artist-extra{display:grid;gap:10px}
.terms-details{border:1px solid var(--line);border-radius:10px;background:#141a28}
.terms-details summary{cursor:pointer;padding:11px 14px;font-size:13px}
.terms-details .terms-box{max-height:220px;overflow:auto;padding:0 14px 12px;font-size:13px}
.code-input{font-size:24px;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:900px){.auth-page{grid-template-columns:1fr}.auth-aside{display:none}.auth-brand-mobile{display:flex}.auth-main{padding:16px 16px 20px}.auth-card{padding:22px 0}.auth-card h1{font-size:25px}}
@media(max-width:420px){.role-picker{grid-template-columns:1fr 1fr;gap:8px}.role-card{padding:12px}.auth-form .form-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.auth-art span{animation:none}}

/* Follow bell */
.follow-button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--accent);background:var(--accent);color:#10131d;white-space:nowrap}
.follow-button .icon{width:16px;height:16px}
.follow-button.is-following{background:transparent;color:var(--text);border-color:var(--line)}
.follow-button.is-following .icon{color:var(--accent)}
.follow-button:hover:not(:disabled){filter:brightness(1.08)}
.artist-card-wrap{position:relative;flex:none;display:flex}
.artist-card-wrap .artist-card{padding-bottom:62px}
.artist-card-wrap .follow-button{position:absolute;left:50%;bottom:16px;transform:translateX(-50%)}
.suggest-artist .artist-card-wrap{height:100%}
.artist-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.form-grid .span-2{grid-column:1/-1}
.auth-aside{position:sticky;top:0;height:100vh;box-sizing:border-box;justify-content:flex-start;gap:0}
.auth-pitch{margin:auto 0}
.auth-art{opacity:.35}
.auth-form .check{align-items:flex-start;line-height:1.45}
.auth-form .check a{display:inline;padding:0;margin:0;min-height:0}
@media(max-width:900px){.auth-aside{position:static;height:auto}}
.terms-details summary{list-style:none;display:flex;align-items:center;gap:8px}
.terms-details summary::-webkit-details-marker{display:none}
.terms-details summary .icon{width:16px;height:16px;transition:transform .2s;transform:rotate(-90deg)}
.terms-details[open] summary .icon{transform:none}
/* Follow from the player */
.mini-follow{display:flex;flex:none}
.follow-button.compact{width:40px;height:40px;min-height:0;padding:0;justify-content:center;border-radius:50%}
.follow-button.compact .icon{width:18px;height:18px}
.large-follow{display:flex;justify-content:center;margin:-6px 0 14px}
.large-follow:empty{display:none}

/* Profile photos */
.avatar{display:inline-grid;place-items:center;flex:none;border-radius:50%;object-fit:cover;background:#2a3350;color:#dfe6ff;font-weight:700;overflow:hidden;width:36px;height:36px;font-size:13px;border:1px solid #ffffff1a}
.avatar.xs{width:22px;height:22px;font-size:9px}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.lg{width:120px;height:120px;font-size:38px;border-width:2px}
.artist-row{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle}
.artist-row>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-button{display:inline-flex;align-items:center;gap:8px}
#large-artist .artist-row{justify-content:center}
.avatar-editor{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.avatar-editor-actions{display:grid;gap:10px;min-width:0}
.avatar-editor-actions .row-actions{gap:8px}
.avatar-editor-actions button,.avatar-editor-actions label.button{display:inline-flex;align-items:center;gap:8px}
.avatar-panel{margin:12px 0 18px}
.profile-page{max-width:640px;margin:0 auto}
.profile-card{display:grid;gap:22px}
.profile-facts{display:grid;gap:4px;margin:0}
.profile-facts dt{font-size:12px;color:var(--muted)}
.profile-facts dd{margin:0 0 10px}
@media(max-width:540px){.avatar-editor{flex-direction:column;align-items:flex-start}}

/* Share */
.share-button{display:inline-flex;align-items:center;gap:8px}
.share-button .icon{width:18px;height:18px}
.large-follow{gap:10px;flex-wrap:wrap}
.large-follow .share-button{min-height:36px;border-radius:999px;font-size:13px;font-weight:600}
.share-preview{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#141a28;margin:6px 0 16px}
.share-preview img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.share-preview span{display:grid;min-width:0}
.share-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-targets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.share-targets .button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.share-link{display:flex;gap:8px}
.share-link input{flex:1;min-width:0}
.share-link button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
@media(max-width:420px){.share-targets{grid-template-columns:1fr}}

/* Device notifications panel */
.push-panel{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.push-panel-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#8ba5ff1f;color:var(--accent);flex:none}
.push-panel-icon .icon{width:22px;height:22px}
.push-panel-text{display:grid;gap:2px;flex:1;min-width:0}
.push-panel button{flex:none}
@media(max-width:540px){.push-panel{flex-wrap:wrap}.push-panel button{width:100%}}

/* Mobile hides the name in the account button, but keeps the photo/initials */
.account-button .avatar{display:inline-grid}

/* M-Pesa USSD: 60-second countdown and failure reason */
.ussd-timer{position:relative;width:132px;height:132px;margin:8px auto 16px;display:grid;place-items:center}
.ussd-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ussd-track,.ussd-left{fill:none;stroke-width:9}
.ussd-track{stroke:#2a3145}
.ussd-left{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.ussd-timer span{display:grid;justify-items:center;line-height:1}
.ussd-timer strong{font-size:38px;font-variant-numeric:tabular-nums}
.ussd-timer small{color:var(--muted);font-size:12px;margin-top:4px}
.fail-reason{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid #6b3540;border-radius:12px;background:#2a1820;color:#ffd6d6;margin:10px 0 14px}
.fail-reason .icon{width:22px;height:22px;flex:none;color:#ff9b9b;margin-top:1px}
.fail-reason p{margin:0}

/* Payment page: on phones the payment state (USSD countdown / reason) comes before the summary */
@media(max-width:800px){.payment-split>.panel{order:0}}
/* Bottom bar on phones: listeners see 3 options, artists 4 (with Studio); on very narrow screens it scrolls
   sideways so no option is ever cut off */
.mobile-nav{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mobile-nav::-webkit-scrollbar{display:none}
.mobile-nav a{flex:1 0 72px;min-width:72px;scroll-snap-align:start;white-space:nowrap}

/* Album track list: the track that is playing */
.track-n{position:relative;display:inline-grid;place-items:center;min-width:22px}
.track .eq{display:none;align-items:flex-end;gap:2px;height:14px}
.track .eq i{display:block;width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;animation:eq-bar .9s ease-in-out infinite}
.track .eq i:nth-child(2){animation-delay:-.3s}.track .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.track.is-current .track-num{display:none}
.track.is-current .eq{display:flex}
.track.is-current:not(.is-playing) .eq i{animation-play-state:paused}
.track.is-current{background:#8ba5ff1a;border-radius:10px;box-shadow:inset 3px 0 0 var(--accent)}
.track.is-current strong{color:var(--accent)}
.track .now-label{display:none;margin-left:8px;padding:1px 7px;border-radius:999px;background:#8ba5ff26;color:var(--accent);font-size:11px;font-weight:600;vertical-align:middle}
.track.is-current .now-label{display:inline-block}
.track.is-current [data-action=play-track]{background:var(--accent);color:#10131d;border-color:transparent}
@media(prefers-reduced-motion:reduce){.track .eq i{animation:none;transform:scaleY(.7)}}

/* Payouts */
.payout-error{display:block;color:#ffb4b4;margin-top:4px;max-width:340px}
.badge.sending{background:#3a3320;color:#f1d68a}

/* Credits in the footer */
footer .credits{flex-basis:100%;margin-top:6px;line-height:1.6}
footer .credits strong{color:var(--text)}

/* Library like Spotify: saved songs, playlists, kept albums */
.library-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.library-actions button{display:inline-flex;align-items:center;gap:8px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin:0 0 26px}
.pl-card{display:grid;gap:4px;color:var(--text);text-decoration:none;padding:10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.pl-card:hover{border-color:#4c5a80}
.pl-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-cover{aspect-ratio:1;border-radius:8px;overflow:hidden;background:#232b40;display:grid;place-items:center;margin-bottom:6px}
.pl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pl-cover.is-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.pl-cover.is-empty .icon{width:36px;height:36px;color:var(--muted)}
.pl-cover.is-liked{background:linear-gradient(135deg,#5b6fd6,#8ba5ff)}
.pl-cover.is-liked .icon{width:40px;height:40px;color:#fff}
.pl-hint{margin:-6px 0 22px}
.pl-hint .icon{width:15px;height:15px;vertical-align:-3px}
.playlist-page .pl-head{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 22px}
.playlist-page .pl-head .pl-cover{width:180px;margin:0;flex:none}
.playlist-page .pl-info{display:grid;gap:4px;min-width:0}
.playlist-page h1{margin:0;font-size:34px;line-height:1.1}
.playlist-page .row-actions button{display:inline-flex;align-items:center;gap:7px}
.pl-sub{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px}
.pl-edit{flex:none}
.icon.flip-up{transform:rotate(180deg)}
.pl-pick{display:grid;gap:8px;max-height:46vh;overflow:auto;margin:6px 0 16px}
.pl-pick button{display:flex;gap:12px;align-items:center;text-align:left;padding:8px;border-radius:10px;background:#141a28;border:1px solid var(--line);color:var(--text)}
.pl-pick button:hover{border-color:var(--accent)}
.pl-pick .pl-cover{width:48px;margin:0;flex:none}
.pl-pick span{display:grid;min-width:0}
.pl-new{display:grid;gap:10px}
.pl-new button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.save-track.is-saved{color:var(--accent);border-color:var(--accent)}
.album-save,.offline-button{display:inline-flex;align-items:center;gap:8px}
.album-save.is-saved,.offline-button.is-saved{border-color:var(--accent);color:var(--accent);background:transparent}
.offline-dot{color:var(--accent)}
.offline-dot .icon{width:12px;height:12px;vertical-align:-2px}
.offline-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;background:#3a3320;color:#f1d68a;font-size:13px}
.offline-banner .icon{width:16px;height:16px}
.track .icon-button{width:36px;min-width:36px;padding:0;display:inline-grid;place-items:center}
@media(max-width:600px){.playlist-page .pl-head .pl-cover{width:120px}.playlist-page h1{font-size:26px}.pl-grid{grid-template-columns:repeat(2,1fr);gap:10px}.track .pl-edit .icon-button{width:32px;min-width:32px}}

.detail-summary{flex-wrap:wrap;row-gap:10px}
.album-save,.offline-button,.share-button,.detail-summary .primary{white-space:nowrap}

/* 30 s samples */
.preview-btn{display:inline-flex;align-items:center;gap:4px;border-color:var(--accent);color:var(--accent)}
.preview-btn small{font-size:11px;font-weight:600}
.preview-toggle{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.preview-toggle .icon{width:14px;height:14px}
.preview-toggle.is-on{border-color:var(--accent);color:var(--accent);background:#8ba5ff1a}
.slot-preview{grid-column:2/-1;font-size:13px}

.about.sobre .button{text-decoration:none}

/* Home highlights: artist of the month + most played song */
.highlights{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
.hl-card{padding:16px;border-radius:14px;background:linear-gradient(135deg,#1f2742,#171c2b);border:1px solid var(--line);display:grid;gap:12px;min-width:0}
.hl-label{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.hl-label .icon{width:14px;height:14px}
.hl-body{display:flex;gap:14px;align-items:center;min-width:0}
.hl-photo,.hl-cover{width:92px;height:92px;flex:none;object-fit:cover;box-shadow:0 8px 20px #0006}
.hl-photo{border-radius:50%}
.hl-cover{border-radius:10px;display:block}
.hl-initials{display:grid;place-items:center;background:#2a3350;color:#dfe6ff;font-size:28px;font-weight:700}
.hl-text{display:grid;gap:4px;min-width:0}
.hl-text h3{margin:0;font-size:19px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-text h3 a{color:var(--text)}
.hl-text p{margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-text .row-actions .button,.hl-text .row-actions button{display:inline-flex;align-items:center;gap:6px}
@media(max-width:800px){.highlights{grid-template-columns:1fr}.hl-photo,.hl-cover{width:76px;height:76px}}