:root {
  --ink: #f1f4f0;
  --muted: #929c95;
  --line: #2b312d;
  --panel: #181c19;
  --panel-strong: #202621;
  --canvas: #0d100e;
  --green: #6fe49a;
  --green-dark: #173e26;
  --amber: #f1b95b;
  --red: #ef6a67;
  color-scheme: dark;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  letter-spacing: 0;
}

button, input, select { font: inherit; letter-spacing: 0; }

button { color: inherit; }

[hidden] { display: none !important; }

.lobby-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    var(--canvas);
  background-size: 42px 42px;
}

.lobby-panel { width: min(100%, 440px); }

.brand-mark {
  width: 56px;
  height: 56px;
  border: 1px solid #3d493f;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  padding: 13px;
  margin-bottom: 28px;
  background: #151a16;
}

.brand-mark span { width: 6px; background: var(--green); }
.brand-mark span:nth-child(1) { height: 14px; opacity: .55; }
.brand-mark span:nth-child(2) { height: 28px; }
.brand-mark span:nth-child(3) { height: 20px; opacity: .75; }
.brand-mark.small { width: 31px; height: 31px; padding: 7px; gap: 3px; margin: 0; }
.brand-mark.small span { width: 3px; }
.brand-mark.small span:nth-child(1) { height: 8px; }
.brand-mark.small span:nth-child(2) { height: 15px; }
.brand-mark.small span:nth-child(3) { height: 11px; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font: 600 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1.4px;
}

h1 { margin: 0; font-size: 54px; line-height: 1; font-weight: 690; }
.lobby-copy { margin: 13px 0 38px; color: var(--muted); font-size: 16px; }
.lobby-form label { display: block; margin-bottom: 8px; color: #bbc3bd; font-size: 13px; }

input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 14px;
  color: var(--ink);
  background: #151916;
  outline: none;
}

input:focus { border-color: #6c8673; box-shadow: 0 0 0 3px rgba(111,228,154,.08); }
input::placeholder { color: #59625c; }
.lobby-actions { display: grid; gap: 12px; margin-top: 16px; }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; }
#room-code { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.button {
  height: 48px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 650;
}

.button:disabled { opacity: .5; cursor: wait; }
.button.primary { color: #0c1910; background: var(--green); }
.button.primary:hover { background: #8aebab; }
.button.secondary { border-color: #3b443e; background: var(--panel-strong); }
.button.secondary:hover { border-color: #647269; }
.button-icon { display: inline-block; margin-right: 8px; font-size: 20px; vertical-align: -1px; }
.form-error { min-height: 21px; margin: 10px 0; color: var(--red); font-size: 13px; }
.privacy-note { display: flex; align-items: center; gap: 8px; color: #647069; font-size: 12px; }
.privacy-dot { width: 7px; height: 7px; border: 1px solid var(--green); border-radius: 50%; }

.room-shell { min-height: 100vh; display: grid; grid-template-rows: 58px minmax(0, 1fr) 82px; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); background: #121512; }
.brand-compact { display: flex; align-items: center; gap: 10px; }
.brand-compact strong { font-size: 15px; }
.room-identity { display: flex; align-items: center; gap: 9px; }
.room-label { color: var(--muted); font-size: 12px; }
.room-code { border: 0; padding: 5px 7px; border-radius: 3px; color: #d7ded9; background: transparent; cursor: pointer; font: 600 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.room-code:hover { background: var(--panel-strong); }
.copy-icon { margin-left: 7px; color: var(--muted); }
.network-state { justify-self: end; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.network-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.network-state.online span { background: var(--green); box-shadow: 0 0 0 3px rgba(111,228,154,.1); }

.workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.stage { min-height: 360px; position: relative; display: grid; place-items: center; overflow: hidden; background: #080a09; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.025); }
.stage video { width: 100%; height: 100%; object-fit: contain; background: #080a09; }
.stage-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.stage-empty p { margin: 21px 0 5px; color: #b6beb8; font-size: 14px; }
.stage-empty small { color: #5e6861; font-size: 12px; }
.screen-glyph { width: 68px; height: 44px; position: relative; border: 1px solid #3c443e; }
.screen-glyph::after { content: ""; position: absolute; left: 27px; bottom: -9px; width: 14px; height: 8px; border-bottom: 1px solid #3c443e; border-left: 1px solid #3c443e; border-right: 1px solid #3c443e; }
.screen-glyph span { position: absolute; left: 9px; bottom: 9px; width: 5px; height: 10px; background: #526058; box-shadow: 9px -8px #67816f, 18px -2px #6fe49a, 27px -13px #45604f, 36px -5px #5b7463; }
.live-badge { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 3px; background: rgba(10,13,11,.82); color: #dfe5e1; font-size: 11px; font-weight: 700; }
.live-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.icon-button { width: 36px; height: 36px; border: 1px solid #343b36; border-radius: 4px; background: rgba(18,22,19,.82); cursor: pointer; }
.stage-fullscreen { position: absolute; right: 16px; bottom: 16px; font-size: 20px; }

.sidebar { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #141815; }
.sidebar-heading { height: 76px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.sidebar-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }
.sidebar-heading h2 { margin: 0; font-size: 15px; font-weight: 650; }
.sidebar-actions { display: flex; align-items: center; gap: 10px; }
.topology-control { display: flex; align-items: center; gap: 6px; color: #778179; cursor: pointer; font-size: 10px; }
.topology-control select { max-width: 92px; padding: 4px; color: #b8c3ba; border: 1px solid #414a43; border-radius: 4px; background: #202521; font: inherit; cursor: pointer; }
.topology-control select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.member-count { min-width: 26px; height: 22px; display: grid; place-items: center; border: 1px solid #343c36; border-radius: 3px; color: var(--muted); font-size: 11px; }
.participant-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.participant { height: 52px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 10px; padding: 0 8px; border-radius: 4px; }
.participant:hover { background: #1b201c; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #3d4840; border-radius: 50%; color: #9cbaa6; background: #202822; font-size: 12px; font-weight: 700; }
.participant-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.participant-name small { display: block; margin-top: 2px; color: #667069; font-size: 10px; }
.participant-mic { width: 15px; height: 18px; position: relative; opacity: .6; }
.participant-mic::before, .mic-icon::before { content: ""; position: absolute; width: 6px; height: 10px; left: 4px; top: 1px; border: 1.5px solid currentColor; border-radius: 5px; }
.participant-mic::after, .mic-icon::after { content: ""; position: absolute; width: 12px; height: 8px; left: 1px; top: 7px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-radius: 0 0 8px 8px; }
.participant.muted .participant-mic { color: var(--red); opacity: .9; }
.participant.muted .participant-mic span, .control-button.off .mic-icon span { display: block; position: absolute; width: 18px; height: 1px; left: -2px; top: 8px; background: currentColor; transform: rotate(-45deg); }
.topology-panel { flex: 0 0 auto; max-height: 230px; overflow-y: auto; margin: 0 10px 10px; padding: 11px 12px; border: 1px solid #2d3931; background: #18231b; }
.topology-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topology-panel-heading .eyebrow { margin-bottom: 4px; font-size: 8px; }
.topology-panel-heading h3 { margin: 0; font-size: 12px; font-weight: 650; }
.topology-state { flex: 0 0 auto; padding: 3px 7px; border: 1px solid #394437; border-radius: 10px; color: #b8c3ba; font-size: 9px; font-weight: 650; }
.topology-state.tree { color: #9fe8b4; border-color: #477255; background: #1b3122; }
.topology-list, .topology-children { margin: 0; padding: 0; list-style: none; }
.topology-children { margin-top: 5px; margin-left: 17px; padding-left: 9px; border-left: 1px solid #333d36; }
.topology-node-row { height: 36px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 33px; align-items: center; gap: 7px; padding: 0 7px; border-radius: 4px; background: #1c231d; }
.topology-node-row:hover { background: #222a24; }
.topology-avatar { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #394437; border-radius: 50%; color: #cfd7d1; font-size: 10px; font-weight: 700; }
.topology-node-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d2dad3; font-size: 11px; }
.topology-node-tag { justify-self: end; color: #707b73; font-size: 9px; }
.topology-node.host .topology-avatar { color: #15231a; border-color: var(--green); background: var(--green); }
.topology-node.relay .topology-node-tag { color: var(--amber); font-weight: 700; }
.topology-node.self .topology-node-row { border-color: #477255; background: #1c3325; }
.topology-node.self .topology-node-tag { color: #a8ecb9; font-weight: 700; }
.topology-hint { display: block; margin-top: 9px; color: #758078; font-size: 9px; }
.connection-panel { flex: 0 0 auto; margin: 0 10px 10px; padding: 10px 12px; border: 1px solid #2d3931; background: #18231b; }
.connection-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 11px; }
.connection-row > span { color: var(--muted); }
.connection-row strong { font-weight: 500; text-align: right; }
.connection-details { max-height: 80px; overflow-y: auto; margin: 8px 0; color: var(--amber); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.connection-details:empty { display: none; }
.reconnect-button { width: 100%; margin-top: 8px; padding: 6px; border: 1px solid #414a43; border-radius: 4px; color: #b8c3ba; background: #202521; cursor: pointer; font-size: 11px; }
.reconnect-button:hover { border-color: var(--green); }
.reconnect-button:disabled { opacity: .6; cursor: wait; }

.controlbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-top: 1px solid var(--line); background: #121512; }
.session-info { display: flex; flex-direction: column; gap: 4px; }
.session-info span { color: var(--green); font: 600 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.session-info strong { font-size: 12px; }
.controls { display: flex; gap: 8px; }
.quality-control { width: 128px; height: 52px; display: grid; align-content: center; gap: 4px; padding: 5px 9px; border: 1px solid #303732; border-radius: 4px; background: #1a1f1b; }
.quality-control > span { color: #778179; font-size: 9px; }
.quality-control select { width: 100%; border: 0; padding: 0; color: #c7d0c9; background: transparent; outline: none; cursor: pointer; font-size: 10px; }
.quality-control select option { color: var(--ink); background: var(--panel); }
.control-button { min-width: 76px; height: 52px; padding: 6px 10px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid #303732; border-radius: 4px; color: #b9c2bb; background: #1a1f1b; cursor: pointer; }
.control-button:hover { border-color: #556159; background: #202621; }
.control-button:disabled { opacity: .45; cursor: not-allowed; }
.control-button.share { color: #15231a; border-color: var(--green); background: var(--green); }
.control-button.active { color: #d8f5e2; border-color: #477255; background: #1b3122; }
.control-button.off { color: #9ca39e; border-color: #493333; background: #281b1b; }
.control-button.danger { color: #d59290; }
.control-icon { height: 21px; position: relative; font-size: 19px; line-height: 20px; }
.control-label { font-size: 9px; }
.mic-icon { width: 16px; }
.sound-icon { width: 18px; }
.sound-icon::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 8px; background: currentColor; }
.sound-icon::after { content: "))"; position: absolute; left: 6px; top: 0; font: 14px/20px sans-serif; }
.control-button.off .sound-icon::after { content: "×"; left: 7px; top: 1px; }
.media-note { justify-self: end; display: flex; align-items: center; gap: 7px; color: #707a73; font-size: 10px; }
.media-note > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.toast { position: fixed; left: 50%; bottom: 100px; z-index: 20; max-width: min(90vw, 440px); padding: 10px 14px; border: 1px solid #3a443d; border-radius: 4px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); color: #dce3de; background: #202621; font-size: 12px; transition: .18s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .room-shell { grid-template-rows: 54px minmax(0, 1fr) 74px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 12px; }
  .room-identity { justify-self: end; }
  .network-state { display: none; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 56vh) minmax(0, 1fr); }
  .stage { min-height: 240px; }
  .sidebar { border-left: 0; border-top: 1px solid var(--line); }
  .sidebar-heading { height: 55px; }
  .participant-list { display: flex; flex-wrap: wrap; align-content: flex-start; }
  .participant { width: 50%; }
  .controlbar { grid-template-columns: 1fr; padding: 0 8px; }
  .session-info, .media-note { display: none; }
  .controls { justify-content: center; gap: 5px; }
  .control-button { min-width: 66px; height: 50px; padding: 4px 6px; }
  .quality-control { width: 104px; height: 50px; padding: 4px 7px; }
  .topbar .brand-compact strong { display: none; }
}

@media (max-width: 420px) {
  .lobby-shell { padding: 20px; align-items: start; padding-top: 11vh; }
  h1 { font-size: 46px; }
  .participant { width: 100%; }
  .workspace { grid-template-rows: minmax(220px, 49vh) minmax(0, 1fr); }
  .controlbar { grid-template-columns: minmax(0, 1fr); }
  .controls { min-width: 0; gap: 4px; }
  .control-button { min-width: 0; flex: 1; padding: 4px; }
  .quality-control { width: 96px; flex: 0 0 96px; }
}