:root{color-scheme:light;--ink:#101828;--muted:#596780;--line:#d0d5dd;--soft:#f2f4f7;--panel:#ffffff;--accent:#0f766e;--gold:#b7791f;--blue:#175cd3;--rose:#b42318}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:#f8fafc;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}button,select{font:inherit}button{cursor:pointer}.creator-shell,.listener-shell,.shell{width:100%;min-height:100vh}.shell{display:grid;grid-template-columns:248px minmax(0,1fr)}.creator-shell,.listener-shell{padding:20px;display:grid;grid-gap:22px;gap:22px}.sidebar{background:#111827;color:#fff;padding:22px;flex-direction:column;gap:28px}.brand-mark,.sidebar{min-width:0;display:flex}.brand-mark{align-items:center;gap:12px;text-decoration:none}.brand-mark>svg{flex:0 0 auto;color:#fbbf24}.brand-mark em,.brand-mark span,.brand-mark strong{min-width:0;display:block}.brand-mark em{color:#d0d5dd;font-style:normal}.brand-mark-light em{color:var(--muted)}.nav-list{min-width:0;display:grid;grid-gap:8px;gap:8px}.listener-nav a,.nav-list a{text-decoration:none}.nav-list a{color:#f9fafb;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;white-space:nowrap}.nav-list a:hover{background:rgba(255,255,255,.1)}.nav-list a.active{background:rgba(255,255,255,.14);box-shadow:inset 3px 0 0 #fbbf24}.side-panel{margin-top:auto;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:14px;display:grid;grid-gap:6px;gap:6px}.side-panel small{color:#d0d5dd}.workspace{min-width:0;padding:24px;display:grid;grid-gap:20px;gap:20px}.listener-actions,.listener-topbar,.now-playing,.panel-heading,.player-actions,.top-actions,.topbar{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px}.listener-topbar{padding:12px 0}.auth-panel,.listener-topbar{max-width:1480px;width:100%;margin:0 auto}.auth-panel{padding:14px;background:#fff;border:1px solid var(--line);border-radius:8px}.auth-control,.auth-panel{display:grid;grid-gap:10px;gap:10px}.account-actions,.auth-control{min-width:0;justify-items:end}.account-actions{display:grid;grid-gap:8px;gap:8px}.account-identity{margin:0;max-width:340px;color:var(--muted);font-size:13px;font-weight:700;overflow-wrap:anywhere;text-align:right}.compact-auth-panel{max-width:760px;margin:0}.operator-gate-wrap{width:100%;min-height:320px;display:grid;place-items:start center}.operator-auth-panel{max-width:760px;width:min(100%,760px);margin:18px auto 0;align-content:start;justify-items:start}.operator-auth-panel .auth-control{width:100%;justify-items:start}.operator-auth-panel .compact-auth-panel{max-width:100%}.operator-auth-panel .primary-action,.operator-auth-panel .secondary-action{width:auto}.operator-session-bar{width:100%;margin:0 0 14px;display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--muted);font-size:13px;font-weight:700}.operator-session-bar .auth-control{justify-items:end}.auth-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}.auth-form,.auth-sign-in-stack{display:grid;grid-gap:10px;gap:10px}.auth-sign-in-stack>.secondary-action{justify-self:end}.auth-form label{display:grid;grid-gap:6px;gap:6px;color:var(--muted);font-size:13px;font-weight:700}.auth-form input{min-height:42px;width:100%;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--ink);font:inherit}.status-message{margin:0;color:var(--muted);overflow-wrap:anywhere}.subscription-status-card{width:-moz-fit-content;width:fit-content;max-width:100%;margin-top:2px;padding:10px 12px;display:inline-flex;align-items:center;gap:8px;border:1px solid #99f6e4;border-radius:8px;background:#f0fdfa;color:var(--accent);font-size:14px;font-weight:800}.subscription-status-card-active{border-color:#5eead4;background:#ccfbf1}.listener-nav{display:flex;align-items:center;gap:6px}.listener-nav a{padding:9px 12px;border-radius:8px;color:var(--muted);font-weight:700}.listener-nav a.active,.listener-nav a:hover{background:var(--soft);color:var(--ink)}.listener-nav a.active{background:#ecfdf3;box-shadow:0 0 0 2px rgba(15,118,110,.18);color:var(--accent)}.creator-hero h1,.listener-copy h1,.now-playing h2,.panel-heading h2,.topbar h1{margin:0;line-height:1.05}.topbar h1{font-size:34px}.creator-hero h1{max-width:860px;font-size:clamp(34px,4.7vw,58px)}.listener-copy h1{max-width:760px;font-size:clamp(34px,4.7vw,58px)}.listener-copy{min-width:0;display:grid;justify-items:start;align-content:center;grid-gap:14px;gap:14px}.creator-hero p,.listener-copy p{max-width:720px;color:var(--muted);font-size:19px;line-height:1.45}.listener-copy>p{margin:0}.eyebrow{margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase}.icon-button,.listener-song,.play-button,.player-actions button,.primary-action,.secondary-action,.segmented button,.song-row{border:1px solid var(--line);background:#fff;border-radius:8px}.primary-action,.secondary-action{min-height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}.listener-actions{justify-content:flex-start;flex-wrap:wrap;gap:12px}.primary-action{background:var(--accent);color:#fff;border-color:var(--accent)}.secondary-action{color:var(--ink)}.icon-button,.play-button{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto}.play-button{width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;border-color:var(--ink)}.creator-grid,.creator-workspace,.main-grid,.operations-grid,.status-grid{min-width:0;display:grid;grid-gap:16px;gap:16px}.status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.main-grid{grid-template-columns:minmax(330px,.92fr) minmax(360px,1.08fr)}.operations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.creator-grid,.creator-hero,.creator-workspace,.listener-hero,.listener-leaderboard,.listener-library{max-width:1480px;width:100%;margin:0 auto}.listener-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(430px,600px);align-items:center;grid-gap:34px;gap:34px;min-height:auto;padding:clamp(28px,5vh,58px) 0 26px}.listener-player{min-width:0;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}.listener-leaderboard,.listener-library{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px}.leaderboard-grid{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px}.leaderboard-card{min-width:0;padding:14px;border:1px solid var(--line);border-radius:8px;background:#f8fafc}.leaderboard-card h3{margin:0 0 12px;font-size:18px}.leaderboard-list{display:grid;grid-gap:10px;gap:10px}.leaderboard-row{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;grid-gap:10px;gap:10px}.leaderboard-row>strong{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:#ecfdf3;color:var(--accent)}.leaderboard-row b,.leaderboard-row small,.leaderboard-row span{min-width:0;display:block}.leaderboard-row b,.leaderboard-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-row small{color:var(--muted)}.leaderboard-row em{color:var(--accent);font-style:normal;font-weight:800}.empty-state{margin:0;color:var(--muted)}.listener-song-grid{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}.listener-song{min-width:0;padding:12px;display:grid;grid-template-columns:64px minmax(0,1fr) 24px;grid-gap:12px;gap:12px;align-items:center;text-align:left}.listener-song.active{border-color:var(--accent);background:#f0fdf9}.creator-status-row,.listener-song span,.setup-list div,.song-row span{min-width:0}.listener-song small,.listener-song strong,.song-row small,.song-row strong{display:block}.listener-song small,.song-row em,.song-row small{color:var(--muted);font-style:normal}.mini-cover{position:relative;width:64px;aspect-ratio:1;border-radius:8px;display:block;overflow:hidden}.mini-cover-image,.mini-cover-uploaded{background:#101828}.mini-cover-image{width:100%;height:100%;display:block;object-fit:contain}.search-pill{min-height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}.approved-catalog-panel,.creator-panel,.creator-step,.metric,.player-panel,.queue-panel,.review-panel,.setup-panel,.upload-card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:8px}.metric{padding:16px;display:flex;gap:12px}.creator-step>span,.metric>span{width:36px;height:36px;display:grid;place-items:center;color:var(--accent);background:#ecfdf3;border-radius:8px;flex:0 0 auto}.metric em,.metric small,.metric strong{display:block}.metric strong{margin-top:3px;font-size:22px}.metric em,.metric small{color:var(--muted);font-style:normal}.approved-catalog-panel,.creator-panel,.creator-step,.player-panel,.queue-panel,.review-panel,.setup-panel,.upload-card{padding:18px}#creator-upload{width:min(100%,1288px);margin:0 auto}.cover-art{position:relative;min-height:400px;border-radius:8px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background-size:cover;background-position:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.cover-art-uploaded{background:#101828}.cover-art-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;background:#101828}.cover-art-uploaded:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,18,26,.05),rgba(5,18,26,.74))}.cover-art>:not(.cover-art-image){position:relative;z-index:2}.cover-sunrise{background:radial-gradient(circle at 22% 18%,rgba(255,230,128,.9),transparent 22%),radial-gradient(circle at 76% 30%,rgba(15,118,110,.78),transparent 24%),linear-gradient(135deg,#b7791f,#0f766e 48%,#101828)}.cover-forest{background:radial-gradient(circle at 26% 22%,rgba(167,243,208,.75),transparent 20%),radial-gradient(circle at 78% 22%,rgba(251,191,36,.5),transparent 18%),linear-gradient(135deg,#134e4a,#0f766e 50%,#101828)}.cover-sky{background:radial-gradient(circle at 22% 20%,rgba(191,219,254,.85),transparent 22%),radial-gradient(circle at 72% 32%,rgba(244,114,182,.52),transparent 20%),linear-gradient(135deg,#175cd3,#0f766e 46%,#111827)}.cover-badge{width:-moz-fit-content;width:fit-content;max-width:100%;padding:7px 10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.36);border-radius:999px;font-size:13px}.cover-title span,.cover-title strong{display:block;overflow-wrap:anywhere;text-shadow:0 1px 18px rgba(0,0,0,.32)}.cover-title span{font-size:30px;font-weight:800}.cover-title strong{margin-top:4px}.now-playing{margin-top:18px}.now-playing>div{min-width:0}.now-playing p:last-child{color:var(--muted);margin:6px 0 0}.waveform{max-width:100%;height:86px;margin:18px 0;display:flex;align-items:center;gap:4px;overflow:hidden;padding:0 2px}.waveform span{width:6px;min-width:4px;background:#98a2b3;border-radius:999px}.volume-control{min-width:0;display:grid;grid-template-columns:auto auto minmax(120px,1fr);align-items:center;grid-gap:8px;gap:8px;margin:14px 0 0;color:var(--muted);font-size:13px;font-weight:700}.volume-control svg{color:var(--accent)}.volume-control input{width:100%;accent-color:var(--accent)}.playback-progress{min-width:0;display:grid;grid-gap:7px;gap:7px;margin:10px 0 0;color:var(--muted);font-size:13px;font-weight:700}.playback-progress input{width:100%;accent-color:var(--accent)}.playback-progress input:disabled{opacity:.55}.empty-player-state{min-height:360px;display:grid;align-content:center;grid-gap:8px;gap:8px;text-align:center}.empty-player-state h2,.empty-player-state p{margin:0}.empty-player-state p,.preview-note{color:var(--muted)}.preview-note{margin:-8px 0 16px;font-size:14px;overflow-wrap:anywhere}.preview-note-success{color:var(--accent);font-weight:700}.player-actions button{min-height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.player-actions button:last-child{background:#fef3c7;border-color:#f6c453}.player-actions button:disabled{opacity:.55;cursor:not-allowed}.segmented{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}.segmented button{border:0;border-radius:0;min-height:36px;padding:0 12px}.segmented button.active{background:var(--ink);color:#fff}.check-list,.flow-list,.setup-list,.song-list{display:grid;grid-gap:10px;gap:10px}.song-list{margin-top:16px}.song-row{width:100%;min-width:0;display:grid;grid-template-columns:12px minmax(0,1fr) auto;grid-gap:12px;gap:12px;align-items:center;text-align:left;padding:12px}.song-row.active{border-color:var(--accent);background:#f0fdf9}.song-dot{width:12px;height:44px;border-radius:999px}.dot-sunrise{background:var(--gold)}.dot-forest{background:var(--accent)}.dot-sky{background:var(--blue)}.select-label{display:block;margin:16px 0 7px;color:var(--muted);font-size:13px;font-weight:700}select{width:100%;height:42px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}.rule-columns{margin-top:14px;display:grid;grid-gap:10px;gap:10px}.rule-columns div{min-width:0;padding:12px;border-radius:8px;background:var(--soft)}.creator-step p,.rule-columns p{margin:5px 0 0;color:var(--muted);overflow-wrap:anywhere}.flow-list{margin:14px 0 0;padding-left:22px}.flow-list li{min-width:0;padding:4px 0;overflow-wrap:anywhere}.setup-list{margin-top:14px}.setup-list div{display:grid;grid-template-columns:24px minmax(0,1fr);grid-column-gap:10px;column-gap:10px;grid-row-gap:2px;row-gap:2px;align-items:start}.setup-list span{width:24px;height:24px;display:grid;place-items:center;color:var(--muted)}.setup-list span.ready{color:var(--accent)}.setup-list small{grid-column:2;color:var(--muted);overflow-wrap:anywhere}.creator-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);align-items:center;grid-gap:28px;gap:28px;padding:38px 0 20px}.creator-hero-copy{min-width:0;display:grid;justify-items:start;grid-gap:16px;gap:16px}.creator-drop-zone{min-height:280px;padding:28px;display:grid;place-items:center;align-content:center;grid-gap:12px;gap:12px;text-align:center;border:2px dashed #14b8a6;border-radius:8px;background:radial-gradient(circle at 18% 18%,rgba(250,204,21,.22),transparent 30%),linear-gradient(135deg,#f0fdfa,#ffffff 56%,#ecfeff);box-shadow:0 18px 44px rgba(15,118,110,.13);transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.creator-drop-zone.dragging{border-color:#f59e0b;background:radial-gradient(circle at 18% 18%,rgba(250,204,21,.36),transparent 34%),linear-gradient(135deg,#ecfdf5,#fefce8);box-shadow:0 22px 52px rgba(20,184,166,.22);transform:translateY(-2px)}.creator-drop-input{display:none}.creator-drop-icon{width:62px;height:62px;display:grid;place-items:center;color:#0f766e;background:#ccfbf1;border-radius:999px}.creator-drop-zone strong{color:var(--ink);font-size:22px;line-height:1.15}.creator-drop-zone p{margin:0;color:var(--muted)}.creator-drop-zone small{color:#0f766e;font-weight:700}.creator-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.creator-step{display:grid;grid-gap:10px;gap:10px}.creator-workspace{grid-template-columns:1fr 1fr}.check-list{margin:16px 0 0;padding:0;list-style:none}.check-list li{display:flex;align-items:center;gap:9px}.check-list svg{color:var(--accent);flex:0 0 auto}.creator-status-row{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.creator-status-row:last-child{border-bottom:0}@media (max-width:1180px){.creator-grid,.operations-grid,.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.creator-workspace,.leaderboard-grid,.listener-hero,.main-grid{grid-template-columns:1fr}}@media (max-width:860px){.shell{grid-template-columns:1fr}.sidebar{position:-webkit-sticky;position:sticky;top:0;z-index:3;flex-direction:row;align-items:center;padding:12px 16px;gap:18px;overflow-x:auto}.nav-list{display:flex;grid-auto-flow:column;overflow-x:visible}.side-panel{display:none}.creator-hero,.listener-topbar{align-items:flex-start}.auth-form,.creator-hero{grid-template-columns:1fr}.account-actions,.auth-control{width:100%;justify-items:stretch}.account-identity{max-width:none;text-align:left}.listener-nav{order:3;width:100%;overflow-x:auto}.listener-song-grid{grid-template-columns:1fr}}@media (max-width:560px){.creator-shell,.listener-shell,.workspace{padding:12px}.listener-actions,.now-playing,.panel-heading,.player-actions,.top-actions,.topbar{align-items:stretch;flex-direction:column}.topbar h1{font-size:28px}.listener-copy h1{font-size:28px;line-height:1.12}.creator-hero h1{font-size:30px;line-height:1.12}.creator-hero p,.listener-copy p{font-size:15px}.creator-drop-zone{min-height:230px;padding:22px 16px}.creator-grid,.operations-grid,.status-grid{grid-template-columns:1fr}.sidebar{align-items:center;overflow-x:auto}.brand-mark{min-width:126px}.cover-art{min-height:260px}.cover-title span{font-size:28px}.player-actions{display:grid;grid-template-columns:1fr}.player-actions button,.primary-action,.secondary-action{width:100%}.song-row{grid-template-columns:12px minmax(0,1fr)}.song-row em{grid-column:2}.segmented{width:100%}.segmented button{flex:1 1}.search-pill{width:100%}}