:root{--background: #09090b;--foreground: #fafafa;--card: #09090b;--card-foreground: #fafafa;--popover: #09090b;--popover-foreground: #fafafa;--primary: #fafafa;--primary-foreground: #18181b;--secondary: #27272a;--secondary-foreground: #fafafa;--muted: #27272a;--muted-foreground: #a1a1aa;--accent: #27272a;--accent-foreground: #fafafa;--destructive: #7f1d1d;--destructive-foreground: #fafafa;--border: #27272a;--input: #27272a;--ring: #d4d4d8;--radius: 6px;--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);color:var(--foreground);font-family:var(--font);display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;flex:1}.join-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:1rem}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:400px;display:flex;flex-direction:column;gap:1.5rem}h1{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;text-align:center}h2{font-size:1.25rem;font-weight:600;letter-spacing:-.025em}h3{font-size:1rem;font-weight:600;letter-spacing:-.025em}.input-group{display:flex;flex-direction:column;gap:.5rem}label{font-size:.875rem;font-weight:500;color:var(--muted-foreground)}input{font-family:inherit;font-size:.875rem;padding:.5rem .75rem;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--foreground);outline:none;transition:border-color .2s,box-shadow .2s}input:focus{border-color:var(--ring);box-shadow:0 0 0 2px #d4d4d833}button{font-family:inherit;font-size:.875rem;padding:.5rem 1rem;border-radius:var(--radius);font-weight:500;cursor:pointer;transition:background-color .2s,opacity .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}button[type=submit],button:not(.btn-secondary){background:var(--primary);color:var(--primary-foreground);border:none}button[type=submit]:hover,button:not(.btn-secondary):hover{opacity:.9}.btn-secondary{background:transparent;color:var(--foreground);border:1px solid var(--border)}.btn-secondary:hover{background:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}.app-container{display:grid;grid-template-columns:1fr 360px;height:100vh;overflow:hidden}@media (max-width: 768px){.app-container{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;overflow:auto}}.main-content{display:flex;flex-direction:column;padding:1.5rem;gap:1.5rem;overflow-y:auto}.player-container{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.player-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.chat-container{background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;height:100%}@media (max-width: 768px){.chat-container{border-left:none;border-top:1px solid var(--border);height:400px}}.chat-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.chat-messages{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.message{display:flex;flex-direction:column;gap:.25rem}.message-sender{font-size:.75rem;font-weight:500;color:var(--muted-foreground)}.message-text{background:#18181b;border:1px solid var(--border);padding:.5rem .75rem;border-radius:var(--radius);font-size:.875rem;line-height:1.25rem;display:inline-block;max-width:95%;word-break:break-word}.message.system .message-text{background:transparent;border:none;color:var(--muted-foreground);font-style:italic;padding:0;font-size:.75rem}.chat-input-form{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:.5rem}.chat-input-form input{flex:1}.controls-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem}.controls-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.url-input-group{display:flex;flex:1;gap:.5rem}.url-input-group input{flex:1}.user-list{display:flex;gap:.5rem;flex-wrap:wrap;padding:.25rem 0}.user-badge{background:#18181b;border:1px solid var(--border);padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:.25rem}.user-badge.admin{border-color:var(--foreground);color:var(--foreground)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--secondary);height:6px;border-radius:9999px;border:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--primary);width:14px;height:14px;border-radius:50%;border:1px solid var(--border);box-shadow:0 1px 3px #0003;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}