/* Base reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', sans-serif;
  background: #121212; color: #fff;
  display: flex; justify-content: center; padding: 2rem;
}
.container { width: 100%; max-width: 800px; }

/* Header */
header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.secondary {
  background: none; color: #bbb; border: none; font-size: 1rem;
  cursor: pointer; padding: .5rem;
}
.secondary:hover { color: #fff; }
.room-info { display: flex; gap: .5rem; align-items: center; }
.room-info input {
  width: 120px; text-align: center; border: 1px solid #444; border-radius: 4px;
  background: #1f1f2e; color: #fff; padding: .3rem;
}
.room-info button {
  background: #3f51b5; border: none; padding: .3rem .6rem; border-radius: 4px;
  cursor: pointer; color: #fff;
}

/* Members */
.members-panel {
  background: #1f1f2e; padding: 1rem; border-radius: 8px;
  margin-bottom: 1rem; max-height: 150px; overflow-y: auto;
}
.members-panel ul { list-style: none; }
.members-panel li {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #3f51b5; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: #fff;
}

/* Stream controls */
.stream-panel {
  display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem;
}
.stream-panel button {
  padding: .5rem 1rem; border: none; border-radius: 6px;
  background: #3f51b5; color: #fff; cursor: pointer;
  transition: background .2s;
}
.stream-panel button:disabled { opacity: .5; cursor: not-allowed; }
.stream-panel button:hover:not(:disabled) { background: #303f9f; }

/* Videos */
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.video-box {
  background: #1f1f2e; padding: 1rem; border-radius: 8px;
}
.video-box video {
  width: 100%; border-radius: 6px; background: #000;
}

/* Viewer controls */
.viewer-controls {
  display: flex; gap: .5rem; align-items: center; margin-top: .5rem;
}
.viewer-controls button, .viewer-controls label {
  background: #3f51b5; border: none; border-radius: 4px; padding: .3rem .6rem;
  cursor: pointer; color: #fff;
}
.viewer-controls input {
  vertical-align: middle;
}