* { box-sizing: border-box; user-select: none; }
body {background: #0a0f1c;font-family: 'Segoe UI', system-ui, sans-serif;margin: 0;min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}
.chat-room {width: 1300px;max-width: 95vw;background: #141a26;border-radius: 32px;padding: 20px;box-shadow: 0 20px 35px rgba(0,0,0,0.5);}
.main-video {width: 100%;background: #000;border-radius: 24px;overflow: hidden;position: relative;aspect-ratio: 16 / 9;margin-bottom: 20px;box-shadow: 0 8px 20px rgba(0,0,0,0.3);}
.main-video video {width: 100%;height: 100%;object-fit: cover;}
.main-label {position: absolute;bottom: 12px;left: 12px;background: rgba(0,0,0,0.6);padding: 4px 12px;border-radius: 20px;color: white;font-size: 14px;pointer-events: none;backdrop-filter: blur(4px);}
.sub-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 16px;margin-bottom: 20px;}
.sub-video {background: #1e2a32;border-radius: 5px;overflow: hidden;position: relative;aspect-ratio: 16 / 9;cursor: pointer;border: 2px solid transparent;transition: 0.2s;width: 25%;}
.sub-video.active {border-color: #2c7da0;box-shadow: 0 0 0 2px #2c7da0;}
.sub-video video {width: 100%;height: 100%;object-fit: cover;}
.sub-label {position: absolute;bottom: 6px;left: 8px;background: rgba(0,0,0,0.6);padding: 2px 8px;border-radius: 12px;font-size: 11px;color: white;}
.controls {display: flex;justify-content: center;gap: 16px;margin-top: 12px;}
button {background: #2c7da0;border: none;color: white;padding: 10px 24px;border-radius: 40px;font-size: 16px;font-weight: bold;cursor: pointer;transition: 0.2s;}
button:disabled {background: #4a6272;cursor: not-allowed;opacity: 0.6;}
button:hover:not(:disabled) {background: #1f5e7a;transform: translateY(-2px);}
#status {text-align: center;margin-top: 16px;color: #aab4c2;font-size: 14px;}
.room-info {text-align: center;margin-bottom: 16px;color: #ccc;font-size: 14px;}