:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #fdf7ed;
  --muted: #bbaebd;
  --plum: #35102f;
  --plum-2: #571348;
  --gold: #ffbf2f;
  --rose: #ff6f9f;
  --green: #2ee6a6;
  --panel: #19141e;
  --line: #403547;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1080px; background: #0c0a0e; color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, #240b22, #0e0c10); border-bottom: 1px solid #4d2445; }
.brand { color: var(--gold); font-size: 24px; font-weight: 900; letter-spacing: .03em; }
.brand small { color: #e4d7df; margin-left: 10px; font-size: 11px; letter-spacing: .18em; }
.status-line { display: flex; gap: 10px; }
.presenter-link, .viewer-link { padding: 8px 12px; border: 1px solid #9c7422; border-radius: 999px; color: var(--gold); font-size: 12px; font-weight: 900; text-decoration: none; letter-spacing: .04em; }
.viewer-link { border-color: #4a7066; color: #62e9be; }
.presenter-link:hover { background: #4c350c; }
.viewer-link:hover { background: #153a31; }
.status-pill { padding: 8px 12px; border: 1px solid #55485b; border-radius: 999px; background: #28202d; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.status-pill.connected { border-color: #176a52; color: var(--green); }
.status-pill.disconnected, .status-pill.pending { border-color: #7d334c; color: var(--rose); }
.off-air { color: #c9bdc7; }
main { padding: 22px; }
.monitors { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); align-items: center; gap: 18px; }
.monitor { overflow: hidden; border: 2px solid #55505b; background: #050506; box-shadow: 0 18px 45px #0008; }
.preview-monitor { border-color: #21c68f; }
.program-monitor { border-color: #f04b62; }
.monitor h2 { height: 38px; margin: 0; padding: 9px 12px; font-size: 13px; letter-spacing: .11em; display: flex; justify-content: space-between; background: #18151b; }
.preview-monitor h2 { color: #45e6ae; }
.program-monitor h2 { color: #ff667b; }
.monitor iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #050506; }
.take-button { width: 130px; min-height: 108px; padding: 12px 8px; border: 1px solid #a07a1c; border-radius: 12px; background: linear-gradient(#653f05, #332006); box-shadow: inset 0 0 20px #ffb51f22; cursor: pointer; }
.take-button:hover { border-color: var(--gold); transform: translateY(-1px); }
.take-button span { display: block; font-size: 8px; line-height: 1.4; letter-spacing: .1em; }
.take-button strong { display: block; margin-top: 9px; color: var(--gold); font-size: 19px; line-height: 1.05; }
.workspace { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr; gap: 18px; margin-top: 20px; }
.panel { min-height: 260px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, #211a25, #151218); }
.panel h2 { margin: 0 0 16px; font-size: 15px; letter-spacing: .07em; }
.panel h3 { margin: 18px 0 10px; color: #cdbdcc; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.system-explanation { margin: -6px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.scene-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scene-grid .live-system { grid-column: 1 / -1; border-color: #23785e; background: #173c33; }
.scene-grid button, form button { border: 1px solid #5f4b60; border-radius: 9px; background: #312438; padding: 13px; text-align: left; cursor: pointer; }
.scene-grid button span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 6px; background: #4b354c; color: var(--gold); font-weight: 900; }
.scene-grid button.selected { border-color: var(--green); background: #153c34; box-shadow: 0 0 0 2px #24d59c24; }
.end-countdown-button { width: 100%; margin-top: 14px; padding: 15px 18px; border: 1px solid #ffc23b; border-radius: 9px; background: linear-gradient(100deg, #7a4b08, #472906); color: #fff3cf; font-weight: 900; letter-spacing: .04em; cursor: pointer; }
.end-countdown-button:disabled { cursor: not-allowed; opacity: .45; }
.intro-hint { margin-bottom: 4px; color: #e8d4a6; }
button.danger { border-color: #8a304b; background: #451827; }
.hint { color: var(--muted); line-height: 1.45; font-size: 13px; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.message-source { margin: -8px 0 13px; color: var(--muted); font-size: 12px; }
.message-source.ready { color: var(--green); font-weight: 800; }
.control-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: -6px 0 16px; padding: 4px; border-radius: 10px; background: #0d0a0e; }
.control-tabs button { border: 0; border-radius: 7px; padding: 10px 7px; background: transparent; color: #ac9daa; font-size: 11px; font-weight: 900; cursor: pointer; }
.control-tabs button.active { background: #4d173f; color: #fff4d7; box-shadow: inset 0 0 0 1px #7d3366; }
.control-tabs span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 999px; background: #ffbf2f; color: #281704; font-size: 9px; }
.control-pane { display: none; }
.control-pane.active { display: block; }
.queue-heading h2 { margin-bottom: 4px; }
.queue-heading p, .queue-empty { color: var(--muted); font-size: 12px; }
.promo-queue { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.promo-queue-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) 42px 34px; gap: 8px; align-items: center; padding: 7px; border: 1px solid #4b3a4a; border-radius: 9px; background: #100c11; }
.promo-queue-item img { width: 52px; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; }
.promo-queue-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.promo-play, .promo-remove, .media-queue { border: 1px solid #81621f; border-radius: 7px; background: #60420b; color: #ffd66b; font-weight: 900; cursor: pointer; }
.promo-play { height: 34px; font-size: 18px; }
.promo-remove { height: 34px; border-color: #713249; background: #3c1724; color: #ff83a8; }
.guest-heading h2{margin-bottom:4px}.guest-heading p{margin:0 0 12px;color:var(--muted);font-size:11px}.guest-workspace{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px}.guest-list{display:grid;align-content:start;gap:6px;max-height:410px;overflow:auto}.guest-list-item{display:grid;grid-template-columns:9px 1fr;gap:8px;align-items:center;padding:10px 8px;border:1px solid #4b3a4a;border-radius:8px;background:#100c11;text-align:left;cursor:pointer}.guest-list-item.selected{border-color:var(--gold);background:#39270b}.guest-list-item i{width:8px;height:8px;border-radius:50%;background:#9b8998}.guest-list-item i.connected{background:var(--green);box-shadow:0 0 8px var(--green)}.guest-list-item span{min-width:0;display:grid;gap:3px}.guest-list-item strong{overflow:hidden;text-overflow:ellipsis;font-size:10px}.guest-list-item small{color:var(--muted);font-size:7px}.guest-detail{min-width:0}.guest-regie-preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #654b64;border-radius:9px;background:radial-gradient(circle,#413442,#100d11)}.guest-regie-preview .OT_subscriber{position:absolute!important;inset:0;width:100%!important;height:100%!important}.guest-audio-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:36px}.guest-regie-preview.connected:not(.audio-only) .guest-audio-placeholder{display:none}.guest-name-row{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:7px}.guest-name-row input,.guest-name-row button,.guest-chat-regie-form input,.guest-chat-regie-form button{padding:8px;font-size:9px}.guest-name-row button{border:1px solid #655064;border-radius:7px;background:#302433}.guest-chat-regie{display:flex;flex-direction:column;gap:5px;height:92px;overflow:auto;margin-top:7px;padding:7px;border:1px solid #493849;border-radius:8px;background:#0d0a0e}.guest-chat-message{max-width:85%;padding:6px 8px;border-radius:7px;background:#372a38;font-size:9px}.guest-chat-message.regie{align-self:flex-end;background:#60420b}.guest-chat-message small{display:block;margin-top:3px;color:#b7a6b4;font-size:7px}.guest-chat-regie-form{display:grid;grid-template-columns:1fr auto;gap:5px;margin-top:6px}.guest-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.guest-actions button,.guest-alarm{padding:9px;border:1px solid #665165;border-radius:7px;background:#302333;font-size:9px;font-weight:900;cursor:pointer}.guest-actions .guest-live{border-color:#278466;background:#164b3e;color:#75f3c7}.guest-detail.is-live{box-shadow:0 0 0 2px #ffbf2f33}.guest-alarm{width:100%;margin-top:7px;border-color:#ff4e70;background:#8f1537;color:#fff;font-size:10px}.guest-alarm:hover{background:#c11647}.guest-actions button:disabled{opacity:.35;cursor:not-allowed}
.media-queue { flex: none; padding: 4px 7px; font-size: 9px; }
label { display: grid; gap: 6px; color: #d8cbd6; font-size: 12px; font-weight: 700; }
label.wide, form button { grid-column: 1 / -1; }
input, textarea, select { width: 100%; border: 1px solid #514255; border-radius: 8px; background: #0f0c11; color: white; padding: 10px 12px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { min-height: 66px; resize: vertical; }
form button { text-align: center; color: #231205; background: linear-gradient(90deg, #f2a914, #ffd167); border-color: #ffcf64; font-weight: 900; }
.media-panel { min-width: 0; }
.media-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.media-heading h2 { margin-bottom: 4px; }
.media-heading p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.media-add { width: 38px; height: 38px; flex: none; border: 1px solid #ffcf64; border-radius: 10px; background: linear-gradient(135deg, #f2a914, #ffd167); color: #261604; font-size: 25px; font-weight: 900; cursor: pointer; }
.media-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 9px; background: #0e0b10; }
.media-tabs button { border: 0; border-radius: 7px; padding: 9px 8px; background: transparent; color: #aa9ba8; font-size: 11px; font-weight: 900; cursor: pointer; }
.media-tabs button.active { background: #4c173f; color: #fff2d1; box-shadow: inset 0 0 0 1px #783162; }
.media-tools { display: grid; grid-template-columns: 1fr 118px; gap: 7px; margin: 9px 0; }
.media-tools input, .media-tools select { min-width: 0; padding: 8px 9px; font-size: 11px; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 285px; overflow: auto; padding-right: 3px; scrollbar-color: #7b3b68 #160f17; }
.media-item { position: relative; overflow: hidden; min-width: 0; border: 1px solid #4d3c4c; border-radius: 9px; background: #100d11; cursor: pointer; }
.media-item:hover, .media-item.selected { border-color: var(--gold); box-shadow: 0 0 0 2px #ffbf2f1f; }
.media-thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #09070a; }
.media-item.card .media-thumb { aspect-ratio: 2/3; object-fit: contain; max-height: 150px; }
.media-item-copy { display: flex; gap: 5px; align-items: center; justify-content: space-between; padding: 7px; }
.media-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.media-delete { flex: none; border: 0; background: transparent; color: #ff7298; cursor: pointer; font-size: 15px; }
.media-empty { grid-column: 1 / -1; padding: 25px 8px; color: var(--muted); text-align: center; font-size: 11px; }
.media-dialog { width: min(520px, 90vw); border: 1px solid #78516e; border-radius: 14px; padding: 0; background: #181219; color: var(--ink); box-shadow: 0 30px 120px #000e; }
.media-dialog::backdrop { background: #070408c9; backdrop-filter: blur(4px); }
.media-dialog form { display: grid; grid-template-columns: 1fr; padding: 20px; }
.media-dialog form > * { grid-column: 1; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.dialog-heading h2 { margin: 0; }
.dialog-heading button { border: 0; background: transparent; color: #d9c8d6; font-size: 25px; cursor: pointer; }
.conversion-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
#toast { position: fixed; right: 24px; bottom: 24px; padding: 13px 18px; border-radius: 8px; background: #173b32; border: 1px solid #31c796; opacity: 0; transform: translateY(12px); transition: .2s; pointer-events: none; }
#toast.show { opacity: 1; transform: none; }
#toast.error { background: #471b29; border-color: #db4e73; }