:root {
  --bg: #101018;
  --fg: #e8e8f0;
  --accent: #5b8cff;
  --muted: #8a8a9a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #2a2a38;
}

.brand { font-weight: 700; letter-spacing: 0.02em; }

.status {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.25rem 0.6rem;
  border: 1px solid #2a2a38;
  border-radius: 999px;
}
.status.ok { color: #6bd98a; border-color: #2f5c3a; }

main { max-width: 76rem; margin: 1.5rem auto; padding: 0 1.25rem; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.muted { color: var(--muted); }
.error { color: #ff7a7a; font-size: 0.85rem; }
.notice { color: #6bd98a; font-size: 0.9rem; }

.panel {
  max-width: 26rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: #17171f;
  border: 1px solid #2a2a38;
  border-radius: 10px;
}
.panel form { display: flex; flex-direction: column; gap: 1rem; }
.panel label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.panel input {
  padding: 0.6rem 0.75rem;
  border: 1px solid #2a2a38;
  border-radius: 6px;
  background: #101018;
  color: var(--fg);
  font-size: 1rem;
}

.btn {
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.ghost { background: transparent; border: 1px solid #2a2a38; color: var(--fg); }

/* Studio layout */
.studio { display: grid; grid-template-columns: 16rem 1fr; gap: 1.25rem; }
.studio .main { min-width: 0; }
.studio .program-status, .studio .program-preview { max-width: none; margin: 1rem 0; }
.studio .program-preview video { border-radius: 6px; border: 1px solid #2a2a38; }
@media (max-width: 800px) { .studio { grid-template-columns: 1fr; } }
.sidebar {
  background: #17171f; border: 1px solid #2a2a38; border-radius: 10px; padding: 1rem;
}
.source-list, .scene-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.source-list li, .scene-list li { padding: 0.4rem 0.5rem; font-size: 0.9rem; }
.scene-list li { cursor: pointer; border-radius: 6px; }
.scene-list li.active { background: #242433; }
.scene-list li .onair { color: #ff5b5b; margin-left: 0.35rem; }
.kind { color: var(--accent); }
.state { color: var(--muted); margin-left: 0.5rem; font-size: 0.8rem; }
.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.presets .btn { font-size: 0.8rem; padding: 0.35rem 0.6rem; }

.studio-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.studio-bar .btn { margin-left: auto; }

/* Scene editor */
.editor-toolbar { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.source-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.8rem; }
.source-gallery-item { min-width: 0; }
.source-gallery-item .program-preview { padding: 0.6rem; margin: 0 0 0.5rem; }
.source-gallery-item .program-preview h2 { font-size: 0.95rem; }
.source-gallery-item .program-preview video { width: 100%; max-width: none !important; }
.dynamic-controls { margin: 0.9rem 0; padding: 0.75rem; border: 1px solid #2a2a38; border-radius: 6px; }
.dynamic-controls h3 { margin: 0.4rem 0; }
.dynamic-controls label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.3rem 1rem 0.3rem 0; }
.dynamic-controls select { background: #101018; color: var(--fg); border: 1px solid #2a2a38; padding: 0.35rem; }
.dynamic-choices { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; }
.dynamic-zone { position: absolute; box-sizing: border-box; display: grid; place-items: center; border: 2px dashed #6d96d9; background: rgba(30, 56, 99, 0.35); color: #d4e5ff; font-size: 1rem; }
.dynamic-zone.screen-zone { border-color: #baa071; background: rgba(68, 53, 31, 0.35); }
.dynamic-tile { display: grid; place-items: center; box-sizing: border-box; cursor: default; background: rgba(91, 140, 255, 0.45); text-align: center; font-weight: 600; font-size: 0.85rem; }
.canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid #2a2a38;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
}
.canvas-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.layer {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: rgba(91, 140, 255, 0.12);
  cursor: move;
}
.layer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 6px; font-size: 0.72rem; background: rgba(16, 16, 24, 0.7);
}
.layer-actions button {
  background: none; border: none; color: var(--fg); cursor: pointer; font-size: 0.9rem; padding: 0 2px;
}
.layer-actions select { max-width: 9rem; background: #101018; color: var(--fg); border: 1px solid #2a2a38; }
.resize-handle {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  background: var(--accent); cursor: nwse-resize; border-radius: 2px 0 0 0;
}

/* Guest room */
.guest { max-width: 34rem; }
.guest-controls { display: flex; flex-direction: column; gap: 1.25rem; margin: 1rem 0; }
.guest-source { display: flex; flex-direction: column; gap: 0.6rem; }
.guest-source h2 { margin: 0; }
.preview {
  width: 100%; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid #2a2a38; border-radius: 6px;
}
.meter { height: 6px; background: #242433; border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; background: #6bd98a; transition: width 0.1s linear; }
.row { display: flex; gap: 0.5rem; }

/* Sources audio controls */
.mini {
  background: none; border: 1px solid #2a2a38; color: var(--fg);
  border-radius: 4px; cursor: pointer; padding: 0 0.35rem; margin-left: 0.4rem;
}
.mini.on { color: #ff5b5b; border-color: #5c2f2f; }
.gain { width: 3.5rem; vertical-align: middle; margin-left: 0.4rem; }
.source-list li { display: flex; align-items: center; }
.invite-roster li { display: block; border: 1px solid #30303b; border-radius: 6px; margin-bottom: 0.45rem; color: var(--muted); }
.invite-roster li.connected { border-color: #347350; background: #14261e; color: #e3ffea; }
.invite-roster-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.invite-roster-source { display: flex; align-items: center; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.8rem; }
.invite-roster p { margin: 0.3rem 0; font-size: 0.8rem; }
.source-list li { flex-wrap: wrap; gap: 0.2rem; }

/* Destinations */
.destinations { max-width: none; margin: 1.25rem 0 0; }
.dest-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.dest-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; }
.dest-list .check { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.dest-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dest-form input, .dest-form select {
  padding: 0.5rem 0.6rem; border: 1px solid #2a2a38; border-radius: 6px;
  background: #101018; color: var(--fg);
}
.dest-form input { flex: 1; min-width: 9rem; }
.check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }