:root{color-scheme:dark;font-family:Inter,Pretendard,Noto Sans KR,system-ui,-apple-system,sans-serif;color:#f8fafc;background:#0a0d14;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 14% 0%,rgba(81,196,111,.16),transparent 35rem),radial-gradient(circle at 90% 20%,rgba(88,101,242,.15),transparent 30rem),#0a0d14}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{border:1px solid #303746;border-radius:12px;padding:.72rem 1rem;color:#f8fafc;background:#1b2130;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}button:hover:not(:disabled){border-color:#667085;background:#252d3e}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:wait;opacity:.55}a{color:#9cb7ff}.app-shell{width:100%;margin:0;padding:0 0 42px}.legal-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:28px 0 42px}.section-heading,.control-status-row,.room-actions,.input-row,.transport-row,footer,footer nav,.queue-item,.now-playing{display:flex;align-items:center}.section-heading,.control-status-row,footer{justify-content:space-between;gap:20px}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.04em}h2{margin-bottom:0;font-size:1.2rem}.eyebrow{margin-bottom:5px;color:#65d985;font-size:.72rem;font-weight:800;letter-spacing:.16em}.status-pill{flex:0 0 auto;border:1px solid #3b455a;border-radius:999px;padding:.42rem .75rem;color:#aeb8cb;background:#141924d9;font-size:.82rem}.status-pill.connected{border-color:#57f28773;color:#76f29c}.room-actions{gap:8px}.copy-button{border:0;padding:.42rem .6rem;color:#9cb7ff;background:transparent;font-size:.82rem}.player-card,.control-card,.queue-card,.legal-shell{border:1px solid rgba(148,163,184,.17);border-radius:20px;background:#121722eb;box-shadow:0 24px 70px #0000003d}.player-card{position:relative;overflow:hidden;margin:0;border-width:0 0 1px;border-radius:0;aspect-ratio:16 / 9;min-height:220px;background:#050609}.youtube-player,.youtube-player iframe{width:100%;height:100%;min-width:200px;min-height:200px}.empty-player{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:8px;padding:30px;color:#8d98ac;text-align:center;pointer-events:none}.empty-player strong{color:#dbe3f1;font-size:1.08rem}.follow-button{width:min(1120px,calc(100% - 32px));margin:12px auto 0;border-color:#ff000075;background:#b91c1c;font-weight:800}.control-card,.queue-card{width:min(1120px,calc(100% - 32px));margin:16px auto 0;padding:20px}.control-status-row{margin-bottom:14px}.add-form label{display:block;margin-bottom:9px;color:#cdd5e4;font-size:.9rem;font-weight:700}.input-row{gap:10px}input{width:100%;min-width:0;border:1px solid #343d50;border-radius:12px;padding:.82rem .95rem;outline:none;color:#f8fafc;background:#0e131d}input:focus{border-color:#65d985;box-shadow:0 0 0 3px #65d9851f}.primary-button{flex:0 0 auto;border-color:#4bc96e;background:#249348;font-weight:800}.transport-row{flex-wrap:wrap;gap:9px;margin-top:14px}.notice{min-height:1.3rem;margin:12px 0 0;color:#9eabc0;font-size:.88rem}.notice.error{color:#ff8791}.section-heading{margin-bottom:16px}.text-button{border:0;padding-inline:0;color:#9eabc0;background:transparent}.now-playing{gap:13px;border:1px solid rgba(101,217,133,.3);border-radius:14px;padding:14px;background:#23703b1f}.now-playing.empty{border-color:#303746;color:#7d889b;background:#0e131d}.track-index{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:10px;color:#71e692;background:#65d98521;font-weight:900}.track-copy{min-width:0}.track-title,.track-channel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-title{color:#edf2fa;font-weight:750}.track-channel{margin-top:3px;color:#8f9bb0;font-size:.8rem}.queue-list{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}.queue-item{gap:12px;border-radius:12px;padding:11px 12px;background:#0e131d}.queue-item .track-copy{flex:1}.remove-button{border:0;padding:.4rem .55rem;color:#8f9bb0;background:transparent}footer{width:min(1120px,calc(100% - 32px));align-items:flex-start;margin:18px auto 0;padding:0 4px;color:#778297;font-size:.76rem}footer nav{flex-wrap:wrap;justify-content:flex-end;gap:12px}.legal-shell{margin-top:28px;padding:clamp(24px,5vw,48px);line-height:1.75}.legal-shell h1{margin-bottom:32px}.legal-shell h2{margin:28px 0 7px}.legal-shell p{color:#bac4d5}.legal-links{display:flex;flex-wrap:wrap;gap:15px;margin-top:32px}@media(max-width:640px){.app-shell{width:100%;padding-top:0}footer{align-items:flex-start;flex-direction:column}.control-card,.queue-card,.follow-button,footer{width:calc(100% - 20px)}.input-row{align-items:stretch;flex-direction:column}.primary-button{width:100%}footer nav{justify-content:flex-start}}