* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin: 0; background: #f7f8fa; }
.container { max-width: 980px; margin: 40px auto; padding: 0 20px; }
h1 { margin: 0 0 20px; font-size: 22px; }
.controls { margin-bottom: 16px; }
.join-btn { padding: 10px 18px; font-size: 16px; background: #2f80ed; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.join-btn:hover { background: #2567c4; }
.leave-btn { padding: 10px 18px; font-size: 16px; background: #ef4444; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.leave-btn:hover { background: #dc2626; }
.status { margin-top: 14px; color: #333; }
.channel-info { margin-top: 8px; color: #4b5563; font-size: 14px; }
.panel { margin-top: 24px; padding: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
#local-player, #remote-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 12px; }
.video-slot { width: 100%; height: 180px; background: #000; border-radius: 6px; overflow: hidden; }