@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{--bg:#0b0b10;--panel:#14141b;--panel2:#1a1922;--line:#2a2933;--text:#f7f4ee;--muted:#9795a2;--accent:#ff5f56;--yellow:#f4ca64;--green:#66d19e;--radius:22px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:32px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:12px;font-family:"Space Grotesk";letter-spacing:.08em}.brand small{display:block;color:var(--accent);font-size:11px;letter-spacing:.32em}.brand-mark{width:38px;height:38px;border:1px solid #393844;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:3px}.brand-mark span{display:block;width:3px;border-radius:3px;background:var(--accent)}.brand-mark span:nth-child(1){height:10px}.brand-mark span:nth-child(2){height:20px}.brand-mark span:nth-child(3){height:14px}.brand-mark.large{width:70px;height:70px;margin-bottom:22px}.brand-mark.large span{width:5px}.brand-mark.large span:nth-child(1){height:18px}.brand-mark.large span:nth-child(2){height:35px}.brand-mark.large span:nth-child(3){height:24px}nav{margin-top:58px;display:grid;gap:8px}.nav-item{border:0;background:transparent;color:var(--muted);padding:12px 14px;border-radius:11px;text-align:left;font:600 14px inherit;cursor:pointer}.nav-item span{margin-right:10px}.nav-item:hover,.nav-item.active{background:var(--panel2);color:var(--text)}.sidebar-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between}.live-chip{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.live-chip i,.on-air-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-right:7px}.text-button{border:0;background:none;color:var(--muted);font:600 12px inherit;cursor:pointer}.text-button:hover{color:var(--text)}main{padding:34px clamp(28px,5vw,72px) 60px;max-width:1500px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.eyebrow{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.18em;margin:0 0 8px;text-transform:uppercase}select,input{font:500 14px inherit;color:var(--text);background:#111117;border:1px solid var(--line);border-radius:11px;outline:none}select:focus,input:focus{border-color:#5a5868}#guildSelect{border:0;background:transparent;font:bold 21px "Space Grotesk";padding:0 28px 0 0}.user-badge{width:38px;height:38px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:700;color:var(--yellow)}.play-grid{display:grid;grid-template-columns:minmax(460px,1.25fr) minmax(350px,.75fr);gap:20px}.now-card,.tune-card,.settings-card{background:linear-gradient(145deg,#17171e,#111117);border:1px solid var(--line);border-radius:var(--radius)}.now-card{padding:22px;display:grid;grid-template-columns:210px 1fr;gap:28px;min-height:258px}.artwork{border-radius:14px;background:radial-gradient(circle at 30% 20%,#5d302d,#191820 58%);display:grid;place-items:center;overflow:hidden;background-size:cover;background-position:center}.vinyl{width:130px;height:130px;border-radius:50%;background:repeating-radial-gradient(circle,#15151a 0 3px,#24232b 4px 5px);display:grid;place-items:center;box-shadow:0 14px 40px #0008}.vinyl i{width:42px;height:42px;border-radius:50%;background:var(--accent);border:5px solid #19191f}.track-copy{padding:10px 8px;min-width:0}.track-copy h2{font:700 28px "Space Grotesk";margin:28px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.muted{color:var(--muted)}.track-copy>p.muted{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{height:3px;background:#34333d;border-radius:3px;margin:28px 0 7px}.progress div{height:100%;width:0;background:var(--accent);border-radius:3px}.time-row{display:flex;justify-content:space-between;color:#777581;font-size:10px}.transport{display:flex;align-items:center;gap:12px;margin-top:18px}.transport button{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer;width:35px;height:35px;border-radius:50%}.transport button:hover{color:var(--text);background:#22212a}.transport .play-button{background:var(--text);color:#111;font-size:14px;width:42px;height:42px}.tune-card{padding:30px}.tune-card h3,.queue-section h3{font:600 20px "Space Grotesk";margin:0 0 22px}.search-wrap{height:47px;display:flex;align-items:center;background:#101016;border:1px solid var(--line);border-radius:12px;padding:0 14px}.search-wrap span{color:var(--muted);font-size:20px}.search-wrap input{border:0;background:none;width:100%;height:100%;padding-left:10px}.form-row{display:grid;grid-template-columns:1fr 1.15fr auto;gap:8px;margin-top:9px}.form-row select{min-width:0;padding:0 10px}.button{border:0;border-radius:11px;padding:13px 18px;color:#17151a;font:700 13px inherit;cursor:pointer}.button.primary{background:var(--yellow)}.button.primary:hover{filter:brightness(1.08)}.button.wide{display:block;width:100%;text-align:center;text-decoration:none;margin-top:30px}.services{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}.services span{font-size:10px;color:#b0aeba;background:#202029;border:1px solid #2e2d38;padding:6px 9px;border-radius:20px}.hint{font-size:11px;line-height:1.5;color:#777581;margin:14px 0 0}.queue-section{margin-top:38px}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.section-title h3{margin:0}.section-title h3 span{font:500 10px inherit;background:#282731;color:var(--muted);padding:4px 7px;border-radius:10px;vertical-align:middle}.queue-list{display:grid;gap:3px}.queue-item{display:grid;grid-template-columns:30px 42px 1fr auto auto;gap:13px;align-items:center;padding:9px 12px;border-radius:12px}.queue-item:hover{background:#14141b}.queue-index{font-size:11px;color:#686672}.queue-art{width:42px;height:42px;border-radius:8px;background:#24232c center/cover}.queue-info{min-width:0}.queue-info strong,.queue-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-info strong{font-size:13px}.queue-info small{font-size:11px;color:var(--muted);margin-top:3px}.queue-duration{font-size:11px;color:var(--muted)}.remove{border:0;background:none;color:#696773;cursor:pointer;font-size:17px}.empty-state{border:1px dashed var(--line);border-radius:15px;padding:40px;text-align:center;color:var(--muted);font-size:13px}.settings-heading{max-width:600px;margin-bottom:30px}.settings-heading h2{font:700 38px "Space Grotesk";margin:0 0 8px}.settings-card{padding:28px;max-width:680px;display:grid;gap:25px}.settings-card label:not(.toggle-row){display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px 22px}.settings-card label span,.toggle-row span{font-weight:600;font-size:14px}.settings-card small{font-size:11px;color:var(--muted)}.settings-card select{grid-column:2;grid-row:1/3;padding:12px}.settings-card .button{justify-self:start}.toggle-row{display:flex;justify-content:space-between;align-items:center}.toggle-row div{display:grid;gap:4px}.toggle-row input{display:none}.toggle-row i{width:44px;height:24px;background:#33323b;border-radius:20px;position:relative;cursor:pointer}.toggle-row i:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#85838e;transition:.2s}.toggle-row input:checked+i{background:#315d4a}.toggle-row input:checked+i:after{left:23px;background:var(--green)}.login-card{position:relative;width:min(460px,calc(100% - 36px));margin:12vh auto;background:linear-gradient(145deg,#191820,#111117);border:1px solid var(--line);border-radius:28px;padding:44px}.login-card h1{font:700 44px/1.04 "Space Grotesk";letter-spacing:-.035em;margin:0 0 18px}.login-card .muted{line-height:1.6}.fineprint{text-align:center;color:#66646f;font-size:10px;margin:16px 0 0}#toast{position:fixed;right:24px;bottom:24px;padding:13px 18px;background:#f7f4ee;color:#14131a;border-radius:11px;font-size:12px;font-weight:700;transform:translateY(90px);opacity:0;transition:.25s;z-index:5}#toast.show{transform:none;opacity:1}#toast.error{background:#ff746b}
.player-options{display:flex;align-items:center;gap:10px;margin-top:15px}.player-options>label{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:7px}.player-options input[type=range]{width:65px;height:3px;accent-color:var(--accent)}.player-options select{font-size:9px;padding:5px 7px;border-radius:7px}.mini-toggle input{accent-color:var(--green)}
@media(max-width:1050px){.play-grid{grid-template-columns:1fr}.sidebar{width:82px;padding:28px 14px}.app-shell{grid-template-columns:82px 1fr}.brand>div:last-child,.nav-item:not(.active){font-size:0}.nav-item span{font-size:18px}.sidebar-bottom{display:none}}@media(max-width:700px){.app-shell{display:block}.sidebar{height:66px;width:100%;position:fixed;bottom:0;top:auto;z-index:4;background:#0d0d12;flex-direction:row;padding:10px 18px;border:0;border-top:1px solid var(--line)}.brand{display:none}nav{margin:0;display:flex;width:100%;justify-content:space-around}.nav-item,.nav-item:not(.active){font-size:11px}.nav-item span{font-size:14px}main{padding:24px 16px 90px}.topbar{margin-bottom:25px}.now-card{grid-template-columns:1fr}.artwork{height:220px}.form-row{grid-template-columns:1fr}.form-row select,.form-row button{height:43px}.queue-item{grid-template-columns:22px 38px 1fr auto}.queue-duration{display:none}.settings-card label:not(.toggle-row){grid-template-columns:1fr}.settings-card select{grid-column:1;grid-row:auto;margin-top:7px}}

/* Signal FM Control Center upgrade */
.dashboard-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 22px}.dashboard-title h1{margin:0;font:700 clamp(28px,3.4vw,48px)/1 "Space Grotesk";letter-spacing:-.04em}.dashboard-title h1 em{color:var(--yellow);font-style:normal}.player-state{border:1px solid var(--line);padding:8px 11px;border-radius:999px;color:var(--muted);font-size:11px;font-weight:700}.player-state.live{color:#b9f0d5;border-color:#315d4a;background:#13291f}.track-meta{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:11px;color:var(--muted)}.track-meta a{color:var(--yellow);text-decoration:none;font-weight:700}.track-meta a:hover{text-decoration:underline}.player-options output{font-size:10px;color:var(--text);min-width:30px}.queue-summary{display:grid;grid-template-columns:1fr 110px;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.queue-summary small{display:block;color:var(--muted);font-size:9px;letter-spacing:.12em;margin-bottom:5px}.queue-summary strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-section{margin-top:42px}.history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.history-item{background:#111117}.history-item .queue-index{font-size:8px;letter-spacing:.08em}.history-item .queue-info small{overflow:hidden;text-overflow:ellipsis}.remove{font-size:9px;letter-spacing:.06em;font-weight:700;padding:6px;color:#817e8d}.remove:hover{color:var(--accent)}.queue-more{padding:12px 15px;color:var(--muted);font-size:11px;text-align:center}.empty-state.compact{padding:24px}.transport button{width:auto;min-width:40px;padding:0 8px;font:700 9px "DM Sans";letter-spacing:.06em}.transport .play-button{width:auto;min-width:58px;border-radius:999px;font-size:10px}.player-options{flex-wrap:wrap}.artwork{position:relative}.artwork:after{content:"SIGNAL FM";position:absolute;bottom:10px;left:10px;font-size:8px;letter-spacing:.14em;color:#fff9;text-shadow:0 1px 6px #000}.hidden{display:none!important}@media(max-width:700px){.dashboard-title{align-items:start;flex-direction:column}.history-list{grid-template-columns:1fr}.queue-summary{grid-template-columns:1fr 95px}.track-meta{flex-wrap:wrap}.now-card{min-height:0}.transport{gap:5px}.player-options{gap:8px}.player-options>label{font-size:10px}.queue-item{padding:9px 5px}.history-item .queue-index{display:none}}