:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0d12;
  color: #f7f8fb;
  --accent: #65e6b5;
  --panel: rgba(23, 27, 37, 0.94);
  --muted: #a5acba;
  --border: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: radial-gradient(circle at top, #1b2634, #0b0d12 55%); }
button, input { font: inherit; }
button {
  border: 0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: #07120e;
  font-weight: 750;
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary { background: #303746; color: #fff; }
button.danger { background: #ff6b72; color: #250609; }

.landing-page { display: grid; place-items: center; padding: 2rem 1rem; }
.panel { width: min(46rem, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 1.25rem; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.35); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .65rem; font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: -.04em; }
.eyebrow { margin-bottom: .5rem; color: var(--accent); text-transform: uppercase; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.lede, .hint { color: var(--muted); line-height: 1.6; }
label { display: block; margin: 1.75rem 0 .5rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.room-row { display: flex; gap: .65rem; }
input { min-width: 0; flex: 1; border: 1px solid var(--border); border-radius: .75rem; padding: .75rem 1rem; background: #0d1016; color: #fff; }
.toggle-row { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: .9rem; background: rgba(0,0,0,.16); cursor: pointer; }
.toggle-row input { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { color: #fff; font-size: .85rem; }
.toggle-row small { margin-top: .18rem; color: var(--muted); font-size: .72rem; font-weight: 500; }
.link-card { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(0,0,0,.18); }
.link-card > div { min-width: 0; flex: 1; }
.link-card span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.link-card code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.obs-setup { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(101,230,181,.3); border-radius: 1rem; background: rgba(101,230,181,.06); }
.obs-setup h2 { margin-bottom: .8rem; font-size: 1.1rem; }
.obs-setup p:last-child { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.format-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.format-badges span { padding: .45rem .65rem; border: 1px solid var(--border); border-radius: .65rem; background: rgba(0,0,0,.2); color: var(--muted); font-size: .72rem; }
.format-badges strong { margin-left: .25rem; color: #fff; }
.hint { margin: 1.4rem 0 0; font-size: .86rem; }

.media-page { position: fixed; inset: 0; overflow: hidden; background: #050608; touch-action: manipulation; }
.media-page video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.media-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,.58), transparent 34%, transparent 65%, rgba(0,0,0,.7)); }
.media-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) .8rem max(.8rem, env(safe-area-inset-left)); pointer-events: none; }
.media-header h1 { max-width: 12rem; margin: 0; overflow: hidden; font-size: 1rem; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.sender-title .eyebrow { margin-bottom: .25rem; font-size: .62rem; }
.status { max-width: 55%; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(5,7,10,.76); font-size: .68rem; text-align: right; }
.status[data-state="live"] { color: var(--accent); }
.status[data-state="error"], [data-state="error"] { color: #ff8b91; }
.status-cluster { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; max-width: min(75%, 43rem); }
.status-cluster .status { max-width: 100%; }
.connection-health-row { display: flex; align-items: stretch; gap: .35rem; pointer-events: auto; }
.connection-health { display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(5,7,10,.8); color: #8d96a6; }
.connection-health .wifi-icon { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.connection-health .wifi-icon circle { fill: currentColor; stroke: none; }
.connection-health strong, .connection-health small { display: block; white-space: nowrap; }
.connection-health strong { font-size: .68rem; }
.connection-health small { margin-top: .1rem; color: #c1c6d0; font-size: .58rem; font-variant-numeric: tabular-nums; }
.connection-health[data-health="excellent"] { color: #51e39f; }
.connection-health[data-health="fair"] { color: #f4d35e; }
.connection-health[data-health="weak"] { color: #ff9f43; }
.connection-health[data-health="critical"] { color: #ff646c; }
.connection-health[data-health="offline"] { color: #8d96a6; }
.connection-reconnect { display: grid; width: 2.5rem; min-width: 2.5rem; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: .75rem; background: rgba(5,7,10,.8); color: #fff; touch-action: manipulation; }
.connection-reconnect:hover, .connection-reconnect:focus-visible { background: rgba(38,45,57,.94); }
.connection-reconnect svg { width: 1.05rem; height: 1.05rem; pointer-events: none; }
.connection-reconnect.is-spinning svg { animation: control-spin .7s ease; }
.battery-status { display: flex; align-items: center; gap: .3rem; min-height: 2rem; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: .7rem; background: rgba(5,7,10,.8); color: #d9dee7; font-size: .68rem; font-variant-numeric: tabular-nums; font-weight: 750; }
.battery-status svg { width: 1.1rem; height: 1.1rem; }
.battery-status.is-low { color: #ff646c; }
.setup-card { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(24rem, calc(100% - 2rem)); transform: translate(-50%, -50%); padding: 1.35rem; border: 1px solid var(--border); border-radius: .5rem; background: rgba(17,20,27,.96); text-align: center; box-shadow: 0 1.25rem 4rem rgba(0,0,0,.42); }
.setup-card h2 { margin-bottom: .6rem; font-size: 1.2rem; letter-spacing: 0; }
.setup-card p { color: var(--muted); line-height: 1.5; }
.setup-card button { width: 100%; }
.setup-card .setup-settings-button { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .65rem; border: 1px solid var(--border); background: #242a35; color: #fff; }
.setup-settings-button svg { width: 1rem; height: 1rem; }
.setup-card .warning { margin: 1rem 0 0; color: #ffc36b; font-size: .82rem; }
.camera-controls { position: absolute; z-index: 4; top: 50%; display: flex; flex-direction: column; gap: .45rem; transform: translateY(-50%); }
.media-page[data-controls-position="left"] .camera-controls { left: max(.7rem, env(safe-area-inset-left)); }
.media-page[data-controls-position="right"] .camera-controls { right: max(.7rem, env(safe-area-inset-right)); }
.media-page[data-controls-position="bottom"] .camera-controls { top: auto; bottom: max(.75rem, env(safe-area-inset-bottom)); left: 50%; max-width: calc(100% - 10rem); flex-direction: row; flex-wrap: wrap; justify-content: center; transform: translateX(-50%); }
.camera-control { display: grid; width: 2.85rem; height: 2.85rem; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(11,14,19,.78); color: #fff; box-shadow: 0 .35rem 1rem rgba(0,0,0,.25); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.camera-control:hover, .camera-control:focus-visible { background: rgba(38,45,57,.94); }
.camera-control.is-active { background: #f5cf55; color: #141006; }
.camera-control.is-off { background: #ef626b; color: #fff; }
.camera-control svg { width: 1.2rem; height: 1.2rem; pointer-events: none; }
.camera-control.is-spinning svg { animation: control-spin .7s ease; }
.stop-camera { position: absolute; z-index: 5; right: max(.8rem, env(safe-area-inset-right)); bottom: max(.8rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .4rem; min-height: 2.85rem; padding: .6rem .85rem; border-radius: 999px; background: #ef626b; color: #fff; box-shadow: 0 .35rem 1rem rgba(0,0,0,.28); }
.media-page[data-controls-position="right"] .stop-camera { right: auto; left: max(.8rem, env(safe-area-inset-left)); }
.stop-camera svg { width: .9rem; height: .9rem; fill: currentColor; }
.zoom-indicator { position: absolute; z-index: 4; bottom: 4.4rem; left: 50%; transform: translateX(-50%); padding: .4rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(5,7,10,.8); font-size: .72rem; font-weight: 800; }
.mobile-chat-overlay { position: absolute; z-index: 4; right: max(.8rem, env(safe-area-inset-right)); bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.7rem)); width: min(28rem, 48vw); pointer-events: none; }
.media-page[data-controls-position="right"] .mobile-chat-overlay { right: auto; left: max(.8rem, env(safe-area-inset-left)); }
.media-page[data-controls-position="bottom"] .mobile-chat-overlay { bottom: max(5.2rem, calc(env(safe-area-inset-bottom) + 4.5rem)); }
.mobile-chat-messages { display: grid; gap: .25rem; }
.mobile-chat-message { padding: .42rem .58rem; border-radius: .35rem; background: rgba(7,9,13,.58); color: #fff; font-size: clamp(.66rem, 1.35vw, .82rem); line-height: 1.35; text-shadow: 0 1px 2px #000; backdrop-filter: blur(3px); overflow-wrap: anywhere; }
.mobile-chat-message strong { margin-right: .35rem; color: #8bf0c8; }
.mobile-chat-message span { color: rgba(255,255,255,.94); }
.sender-dialog { width: min(35rem, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); padding: 0; border: 1px solid var(--border); border-radius: .5rem; background: #131720; color: #fff; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.6); }
.sender-dialog::backdrop { background: rgba(2,4,7,.78); backdrop-filter: blur(4px); }
.sender-dialog-panel { padding: 1.2rem; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dialog-header h2 { margin: 0; font-size: 1.25rem; letter-spacing: 0; }
.dialog-header .eyebrow { margin-bottom: .25rem; font-size: .62rem; }
.dialog-close { display: grid; width: 2.35rem; height: 2.35rem; flex: none; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: #252b36; color: #fff; }
.dialog-close svg { width: 1.05rem; height: 1.05rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.setting-field { min-width: 0; margin: 0; color: #dce1e9; }
.setting-field > span { display: block; margin-bottom: .4rem; font-size: .72rem; }
.setting-field select, .setting-field input[type="text"] { width: 100%; min-height: 2.7rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: .35rem; background: #090c11; color: #fff; font: inherit; }
.settings-wide { grid-column: 1 / -1; }
.settings-section-title { margin: .4rem 0 -.1rem; padding-top: .9rem; border-top: 1px solid var(--border); color: #fff; font-size: .9rem; letter-spacing: 0; }
.setting-toggle { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .35rem; background: #0c1016; cursor: pointer; }
.setting-toggle input { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }
.setting-toggle strong, .setting-toggle small { display: block; }
.setting-toggle strong { color: #fff; font-size: .78rem; }
.setting-toggle small { margin-top: .2rem; color: var(--muted); font-size: .67rem; font-weight: 500; line-height: 1.35; }
.microphone-options { display: grid; gap: .55rem; margin-top: .8rem; }
.audio-meter-section { margin-top: .9rem; padding: .8rem; border: 1px solid var(--border); border-radius: .35rem; background: #0c1016; }
.audio-meter-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; color: #fff; font-size: .76rem; }
.audio-meter-heading output { color: var(--muted); font-variant-numeric: tabular-nums; }
.audio-level-meter { position: relative; height: .85rem; overflow: hidden; border: 1px solid #343d49; border-radius: .2rem; background: #07090d; }
.audio-level-meter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 70%, rgba(255,255,255,.16) 70% 71%, transparent 71% 88%, rgba(255,255,255,.16) 88% 89%, transparent 89%); pointer-events: none; }
.audio-level-meter > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #35d39a 0 70%, #ffc14d 70% 88%, #ff5a5f 88%); transition: width 80ms linear; }
.audio-level-meter.is-disabled { opacity: .38; }
.audio-meter-scale { display: flex; justify-content: space-between; margin-top: .35rem; color: #727d8c; font-size: .58rem; font-variant-numeric: tabular-nums; }
.settings-note { margin: .9rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.warning-custom-preview { display: flex; align-items: center; gap: .55rem; min-height: 4rem; padding: .75rem; border: 1px solid rgba(255,190,70,.55); border-radius: .35rem; background: rgba(5,7,10,.88); color: #fff1cc; overflow: hidden; }
.warning-custom-preview strong { min-width: 0; font-family: var(--warning-preview-font, Inter, system-ui, sans-serif); font-size: var(--warning-preview-size, 16px); overflow-wrap: anywhere; }
.warning-preview-dot { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: #ffbd46; box-shadow: 0 0 0 .25rem rgba(255,189,70,.16); }
.warning-custom-preview[data-style="outline"] { border-width: 2px; background: rgba(5,7,10,.18); box-shadow: none; }
.warning-custom-preview[data-style="stroke"] { border-color: transparent; background: transparent; box-shadow: none; }
.warning-custom-preview[data-style="stroke"] .warning-preview-dot { display: none; }
.warning-custom-preview[data-style="stroke"] strong { color: #fff; -webkit-text-stroke: 1px #000; text-shadow: 0 2px 3px #000, 1px 1px 0 #000, -1px -1px 0 #000; }
.compact-dialog { width: min(28rem, calc(100% - 1.5rem)); }
.obs-control-dialog { width: min(34rem, calc(100% - 1.5rem)); }
.obs-control-dialog .sender-dialog-panel { max-height: calc(100vh - 1.5rem); overflow-y: auto; }
.obs-control-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: 1rem 0; padding: .3rem; border: 1px solid var(--border); border-radius: .4rem; background: #090c11; }
.obs-control-tab { min-width: 0; padding: .65rem .35rem; border: 0; border-radius: .3rem; background: transparent; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.obs-control-tab.is-active { background: #29313d; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.obs-control-panel > h3, .obs-rule-block h3 { margin: 0 0 .35rem; font-size: .9rem; letter-spacing: 0; }
.obs-control-panel > p, .obs-rule-block > p { margin: 0 0 .8rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.obs-rule-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.browser-timeout-field { margin-top: .8rem; }
.browser-timeout-field > div { display: flex; align-items: center; gap: .5rem; }
.browser-timeout-field input { width: 8rem; min-height: 2.7rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: .35rem; background: #090c11; color: #fff; font: inherit; }
#schedule-browser-source, #cancel-browser-switch, #schedule-scene-switch, #cancel-scene-switch { width: 100%; margin-top: .8rem; }
#save-stream-info { width: 100%; margin-top: .8rem; }
@keyframes control-spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }

.receiver-page { position: fixed; inset: 0; overflow: hidden; background: transparent; }
.receiver-page video { width: 100vw; height: 100vh; display: block; object-fit: cover; object-position: center center; background: transparent; }
.format-warning { position: absolute; z-index: 5; top: 1rem; left: 50%; width: min(38rem, calc(100% - 2rem)); transform: translateX(-50%); padding: .8rem 1rem; border: 2px solid #ffb454; border-radius: .8rem; background: rgba(24,14,3,.94); color: #ffe1b5; text-align: center; line-height: 1.4; box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); }
.format-warning strong, .format-warning > span { display: block; }
.format-warning strong { color: #fff; font-size: .9rem; }
.format-warning > span { margin-top: .2rem; font-size: .75rem; }
.receiver-connection-warning { position: absolute; z-index: 6; right: clamp(1rem, 2vw, 2.5rem); bottom: clamp(1rem, 3vh, 2.5rem); display: flex; align-items: center; gap: .7rem; max-width: min(70rem, calc(100% - 2rem)); padding: .85rem 1.05rem; border: 1px solid rgba(255,190,70,.55); border-radius: .45rem; background: rgba(12,14,18,.9); color: #fff1cc; box-shadow: 0 .8rem 2.5rem rgba(0,0,0,.38); opacity: 0; transform: translateX(calc(100% + 3rem)); transition: transform .4s ease, opacity .3s ease; pointer-events: none; }
.receiver-connection-warning.is-visible { opacity: 1; transform: translateX(0); }
.receiver-connection-warning strong { min-width: 0; font-family: var(--warning-font-family, Inter, system-ui, sans-serif); font-size: var(--warning-font-size, 24px); letter-spacing: 0; overflow-wrap: anywhere; }
.receiver-warning-dot { width: .65rem; height: .65rem; flex: none; border-radius: 50%; background: #ffbd46; box-shadow: 0 0 0 .3rem rgba(255,189,70,.16); animation: warning-pulse 1.5s ease-in-out infinite; }
.receiver-connection-warning[data-style="outline"] { border-width: 2px; background: rgba(5,7,10,.18); box-shadow: none; }
.receiver-connection-warning[data-style="stroke"] { border-color: transparent; background: transparent; box-shadow: none; }
.receiver-connection-warning[data-style="stroke"] .receiver-warning-dot { display: none; }
.receiver-connection-warning[data-style="stroke"] strong { color: #fff; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 0 3px 5px #000, 2px 2px 0 #000, -2px -2px 0 #000; }
.receiver-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #0b0d12; }
.receiver-state { text-align: center; color: var(--muted); }
.receiver-state p { margin: 1rem 0 .4rem; }
.receiver-state small { opacity: .65; }
.pulse { width: 1rem; height: 1rem; margin: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(101,230,181,.6); animation: pulse 1.7s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 1rem rgba(101,230,181,0); } 100% { box-shadow: 0 0 0 0 rgba(101,230,181,0); } }
@keyframes warning-pulse { 50% { opacity: .45; } }

@media (max-width: 520px) {
  .room-row { flex-direction: column; }
  .link-card { align-items: stretch; flex-direction: column; }
  .link-card button { width: 100%; }
  .media-header { align-items: flex-start; }
  .sender-title { max-width: 26%; }
  .status-cluster { max-width: 74%; }
  .connection-health small { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-wide { grid-column: auto; }
  .sender-dialog-panel { padding: 1rem; }
  .camera-control { width: 2.65rem; height: 2.65rem; }
  .media-page[data-controls-position="bottom"] .camera-controls { max-width: calc(100% - 8rem); }
  .mobile-chat-overlay { width: min(22rem, 62vw); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .media-header { padding-top: max(.55rem, env(safe-area-inset-top)); }
  .sender-title .eyebrow { display: none; }
  .connection-health small { max-width: 19rem; overflow: hidden; text-overflow: ellipsis; }
  .camera-controls { gap: .32rem; }
  .camera-control { width: 2.55rem; height: 2.55rem; }
  .setup-card { width: min(23rem, calc(100% - 2rem)); padding: 1rem 1.2rem; }
  .setup-card p { margin-bottom: .75rem; font-size: .78rem; }
}