:root{--bg:#080b15;--card:rgba(20,26,45,.76);--card-strong:#161d34;--line:rgba(255,255,255,.1);--text:#f7f8ff;--muted:#9ba5bd;--accent:#8b7cff;--accent-2:#31d7b1;--danger:#ff6d89;--shadow:0 24px 70px rgba(0,0,0,.38)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:15px 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}.shell{width:min(1180px,calc(100% - 36px));margin:auto;position:relative;z-index:1}.ambient{position:fixed;width:40vw;height:40vw;border-radius:50%;filter:blur(100px);opacity:.18;pointer-events:none}.ambient-one{background:#6d5bff;top:-20vw;left:-15vw}.ambient-two{background:#00cda7;right:-20vw;bottom:-20vw}.home{min-height:100vh;display:grid;place-items:center}.home-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}.eyebrow{color:var(--accent-2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}.hero h1{font:700 clamp(48px,8vw,88px)/.95 'Space Grotesk';letter-spacing:-.07em;margin:18px 0}.hero h1 span{color:var(--accent)}.hero p{color:var(--muted);font-size:18px;max-width:530px;line-height:1.6}.glass{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);border-radius:28px}.entry-card{padding:30px}.entry-card h2{margin:0 0 8px;font:600 25px 'Space Grotesk'}.subtle{color:var(--muted);margin-top:0}.button-row{display:flex;gap:12px;margin-top:24px}.btn{border-radius:13px;padding:13px 18px;color:var(--text);background:var(--card-strong);border:1px solid var(--line);font-weight:700;transition:.2s transform,.2s background}.btn:hover{transform:translateY(-2px);background:#252e50}.btn.primary{background:linear-gradient(135deg,var(--accent),#5e56e9);border:0}.btn.small{padding:9px 12px;font-size:13px}.field{display:flex;gap:10px;margin-top:20px}.field input,.source-input{width:100%;background:#0d1222;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:13px 14px;outline:none}.field input:focus,.source-input:focus{border-color:var(--accent)}.hidden{display:none!important}.room-layout{padding:25px 0 36px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.brand{font:700 22px 'Space Grotesk';letter-spacing:-.06em}.brand span{color:var(--accent)}.room-code{color:var(--muted);font-size:13px}.room-code b{color:var(--text);letter-spacing:.12em}.status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2)}.dot.offline{background:var(--danger);box-shadow:none}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.player-card{overflow:hidden}.player-wrap{position:relative;aspect-ratio:16/9;background:#05060b}.player-wrap iframe,.player-wrap video{width:100%;height:100%;border:0;display:block}.player-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);text-align:center}.player-placeholder div{padding:20px}.now-playing{padding:18px 20px;border-top:1px solid var(--line)}.now-playing h2{font:600 19px 'Space Grotesk';margin:0 0 7px}.meta{display:flex;gap:15px;color:var(--muted);font-size:13px}.controls{display:flex;align-items:center;gap:11px;margin-top:15px}.control{background:#202943;color:var(--text);border-radius:10px;width:36px;height:34px}.control:hover{background:var(--accent)}.range{accent-color:var(--accent);width:100%}.select{background:#202943;color:var(--text);border:0;border-radius:9px;padding:8px}.side{display:flex;flex-direction:column;gap:18px}.side-card{padding:20px}.side-card h3{font:600 16px 'Space Grotesk';margin:0 0 15px}.person{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.person:last-child{border-bottom:0}.person-main{display:flex;align-items:center;gap:10px}.avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:700;font-size:12px}.badge{font-size:10px;color:#bdb8ff;background:rgba(139,124,255,.15);border-radius:99px;padding:4px 7px}.source-input{margin-bottom:10px}.dropzone{border:1px dashed #536080;border-radius:14px;padding:17px;text-align:center;color:var(--muted);font-size:13px;transition:.2s}.dropzone.dragging{border-color:var(--accent-2);background:rgba(49,215,177,.08)}.progress{height:5px;background:#27304b;border-radius:99px;margin-top:12px;overflow:hidden}.progress-bar{height:100%;background:var(--accent-2);width:0;transition:width .15s}.error{color:var(--danger);font-size:13px;margin-top:10px}.spinner{width:18px;height:18px;border:2px solid #4b5675;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading{display:flex;gap:10px;align-items:center;color:var(--muted)}
@media(max-width:850px){.home-grid,.room-grid{grid-template-columns:1fr}.hero{text-align:center}.hero p{margin-left:auto;margin-right:auto}.side{display:grid;grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;gap:10px}.room-code{margin-top:6px}}@media(max-width:520px){.shell{width:min(100% - 22px,1180px)}.entry-card{padding:22px}.button-row,.field{flex-direction:column}.side{display:flex}.topbar{flex-direction:column}.controls{flex-wrap:wrap}.range{order:5;flex-basis:100%}}
.file-list{display:flex;flex-direction:column;gap:7px;max-height:220px;overflow:auto}.file-row{display:flex;align-items:center;gap:5px;background:#0d1222;border:1px solid var(--line);border-radius:9px;padding:5px}.file-name{flex:1;background:none;border:0;color:var(--text);text-align:left;padding:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-file,.delete-file{background:transparent;color:var(--muted);border:0;font-size:18px;padding:3px 7px}.queue-file:hover,.delete-file:hover{color:var(--danger)}.volume{max-width:90px}
.signature{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.03em;padding:8px 12px 14px;position:relative;z-index:2}.signature span{color:#ff7892;font-size:14px;margin-left:2px}
.header-signature{color:var(--muted);font-size:11px;letter-spacing:.02em;margin-left:auto;margin-right:14px}.header-signature span{color:#ff7892;font-size:14px}
.home-screen .signature{position:fixed;left:0;right:0;bottom:10px;font-size:14px;padding:8px}
.room-tabs{border-top:1px solid var(--line);padding:16px 20px 20px}.tab-buttons{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:14px}.tab-button{background:transparent;color:var(--muted);padding:10px 14px;border-bottom:2px solid transparent;font-weight:700}.tab-button.active{color:var(--text);border-color:var(--accent)}.tab-panel{display:none}.tab-panel.active{display:block}.chat-messages{height:230px;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:4px 2px}.chat-empty{text-align:center;color:var(--muted);font-size:13px;margin:auto}.chat-message{display:flex;max-width:82%}.chat-message.own{align-self:flex-end;text-align:right}.chat-message.other{align-self:flex-start}.chat-bubble{padding:8px 11px;border-radius:14px;background:#202943;line-height:1.4}.chat-message.own .chat-bubble{background:linear-gradient(135deg,#6358e9,#806ef6)}.chat-bubble small,.chat-bubble time{display:block;font-size:10px;color:#b8bfd1}.chat-bubble time{margin-top:3px}.chat-form{display:flex;gap:8px;margin-top:10px}.chat-form input{flex:1;min-width:0;background:#0d1222;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:11px 12px}.tab-panel .side-card{background:transparent;border:0;box-shadow:none;padding:0}.tab-panel .side-card h3{margin-top:0}
.room-actions{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:flex;gap:8px;flex-wrap:wrap}.room-actions h3{width:100%;margin:0}.danger-button{color:#ff9aae;border-color:rgba(255,109,137,.35)}.mobile-room-code{display:none}
.control-toggle{background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:5px 0}.controls.collapsed{display:none}
.player-wrap.pseudo-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;z-index:9999;background:#000;display:grid;place-items:center;aspect-ratio:auto;border-radius:0}.player-wrap.pseudo-fullscreen iframe,.player-wrap.pseudo-fullscreen video{width:100%;height:100%;object-fit:contain}
.remote-upload{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.remote-upload .source-input{margin-bottom:8px}.remote-upload .subtle{font-size:12px}
.remote-progress{height:4px;background:#27304b;border-radius:99px;overflow:hidden;margin-top:10px}.remote-progress>div{height:100%;width:35%;background:var(--accent-2);animation:remote-progress 1.2s ease-in-out infinite}@keyframes remote-progress{0%{transform:translateX(-120%)}100%{transform:translateX(350%)}}.inline-spinner{display:inline-block;vertical-align:-3px;margin-right:5px;width:13px;height:13px}
 .player-wrap{flex:none}.chat-form input{font-size:16px}.chat-messages{overscroll-behavior:contain}
@media(max-width:520px){body{overflow-x:hidden}.player-wrap{aspect-ratio:16/9;min-height:0}.room-layout{padding-top:4px}.topbar{min-height:32px;margin-bottom:4px;padding:0 4px}.topbar .brand,.topbar .room-code{display:none}.header-signature{font-size:10px;margin-left:0;margin-right:auto}.mobile-room-code{display:block;padding:9px 14px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.chat-messages{height:180px}.chat-form{position:sticky;bottom:8px;background:var(--card);padding-top:7px}.chat-form.keyboard-open{position:fixed;left:11px;right:11px;z-index:20;margin:0;padding:8px;background:#11172a;border:1px solid var(--line);border-radius:13px;box-shadow:0 10px 35px rgba(0,0,0,.45)}.chat-form input{font-size:16px}.side-card{padding:16px}}