:root {
  --bg: #0f1216;
  --panel: #171c22;
  --panel-2: #1f252d;
  --line: #2c343e;
  --text: #e4e8ec;
  --muted: #8a949f;
  --accent: #4cc38a;
  --accent-text: #0c1a13;
  --warn: #e5a33d;
  --err: #e5534b;
  --info: #5aa9e6;
  --talk: #e5534b;
  --talk-text: #fff;
  --latch: #ff8a3d;
  --listen: #4cc38a;
  --tally: #e5c53d;

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 0.5em;
  --radius-sm: 0.3em;
  --radius-round: 999em;
  --gap: 1em;
  --gap-sm: 0.5em;
  --pad-panel: 1em 1.25em;
  --pad-card: 0.9em 1em;
  --pad-btn: 0.45em 0.9em;
  --pad-input: 0.35em 0.5em;
  --border: 1px solid var(--line);

  --fs-base: 100%;
  --fs-small: 0.85rem;
  --fs-tiny: 0.72rem;
  --fs-h1: 1.4rem;
  --fs-h2: 1.1rem;

  --meter-green: #4cc38a;
  --meter-yellow: #e5c53d;
  --meter-red: #e5534b;
  --meter-yellow-start: 75%;
  --meter-red-start: 92%;
  --meter-gradient: linear-gradient(to right,
    var(--meter-green) 0 var(--meter-yellow-start),
    var(--meter-yellow) var(--meter-yellow-start) var(--meter-red-start),
    var(--meter-red) var(--meter-red-start));
  --hm-h: 0.6em;
  --vm-h: 5em;
  --vm-w: 1.4em;

  --talk-size: 4.5em;
  --tally-size: 0.8em;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.45;
}
main { max-width: 84em; margin: 0 auto; padding: 1.5em 1em 4em; }
h1 { font-size: var(--fs-h1); margin: 0; }
h2 { font-size: var(--fs-h2); margin: 0 0 0.75em; }
h3 { font-size: 1rem; margin: 0; }
p { margin: 0.4em 0; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }

header.top { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); flex-wrap: wrap; margin-bottom: var(--gap); }
.chips { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.chip {
  font-size: var(--fs-small);
  padding: 0.2em 0.7em;
  border-radius: var(--radius-round);
  border: var(--border);
  background: var(--panel-2);
}
.chip.ok { border-color: var(--accent); color: var(--accent); }
.chip.warn { border-color: var(--warn); color: var(--warn); }

section.panel {
  background: var(--panel);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--pad-panel);
  margin-bottom: var(--gap);
}
.hint {
  border-left: 0.25em solid var(--info);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.9em;
  font-size: var(--fs-small);
  margin: 0.6em 0;
}
.hint.warn { border-left-color: var(--warn); }

.row { display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap); align-items: end; margin: 0.5em 0; }
label.field { display: flex; flex-direction: column; gap: 0.2em; font-size: var(--fs-small); color: var(--muted); }
label.check { display: flex; gap: 0.4em; align-items: center; font-size: var(--fs-small); }

select, input[type=number], input[type=text] {
  background: var(--panel-2);
  color: var(--text);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--pad-input);
  font: inherit;
  font-size: 0.95rem;
}
select { max-width: 24em; }
input[type=range] { width: 8em; }

button {
  background: var(--panel-2);
  color: var(--text);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--pad-btn);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.danger { border-color: var(--err); color: var(--err); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

table.kv { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
table.kv td { border-bottom: var(--border); padding: 0.3em 0.5em; vertical-align: top; }
table.kv td:first-child { color: var(--muted); white-space: nowrap; width: 1%; }

/* Kanal-Karten */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: var(--gap); }
.card {
  background: var(--panel-2);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.card-head { display: flex; align-items: center; gap: var(--gap-sm); }
.card-head input { flex: 1; min-width: 0; font-weight: 600; }
.card .row { margin: 0; }
.card select { max-width: 100%; }

.tally {
  width: var(--tally-size);
  height: var(--tally-size);
  border-radius: var(--radius-round);
  background: var(--line);
  flex: none;
}
.tally.on { background: var(--tally); box-shadow: 0 0 0.6em var(--tally); }

/* Horizontale Meter */
.hm { display: grid; grid-template-columns: 7em 1fr 2.5em; align-items: center; gap: var(--gap-sm); font-size: var(--fs-tiny); }
.hm-label { color: var(--muted); }
.hm-val { font-family: var(--mono); color: var(--muted); text-align: right; }
.hm-track {
  position: relative;
  height: var(--hm-h);
  background: var(--bg);
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hm-fill {
  --lvl: 0;
  position: absolute; inset: 0;
  background: var(--meter-gradient);
  clip-path: inset(0 calc((1 - var(--lvl)) * 100%) 0 0);
}
.hm-peak { --pk: 0; position: absolute; top: 0; bottom: 0; left: calc(var(--pk) * 100%); width: 2px; background: var(--text); opacity: 0.8; }

/* DVS-Übersicht */
.vms { display: flex; flex-wrap: wrap; gap: 0.3em; }
.vm { display: flex; flex-direction: column; align-items: center; width: var(--vm-w); gap: 0.1em; }
.vm-track {
  position: relative;
  width: 100%;
  height: var(--vm-h);
  background: var(--bg);
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.vm-fill {
  --lvl: 0;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--lvl) * 100%);
  background: linear-gradient(to top,
    var(--meter-green) 0 var(--meter-yellow-start),
    var(--meter-yellow) var(--meter-yellow-start) var(--meter-red-start),
    var(--meter-red) var(--meter-red-start));
  background-size: 100% var(--vm-h);
  background-position: bottom;
}
.vm-num { font-size: var(--fs-tiny); font-family: var(--mono); color: var(--muted); }
.vm.signal .vm-num { color: var(--accent); font-weight: 700; }
.vm-tag { font-size: 0.6rem; font-family: var(--mono); color: var(--tally); min-height: 1em; }
.vm.assigned .vm-track { border-color: var(--tally); }

/* Client-Strips */
.strips { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: var(--gap); }
.strip {
  background: var(--panel-2);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  align-items: stretch;
}
.strip.nolisten { opacity: 0.6; }
.strip-head { display: flex; align-items: center; gap: var(--gap-sm); justify-content: space-between; }
.talk-btn {
  height: var(--talk-size);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  user-select: none;
  touch-action: none;
}
.talk-btn.on { background: var(--talk); color: var(--talk-text); border-color: var(--talk); }
.talk-btn.latched { background: var(--latch); border-color: var(--latch); }
.talk-btn:disabled { opacity: 0.3; }
.perm { display: flex; gap: var(--gap); font-size: var(--fs-small); }

/* Log */
#log { max-height: 14em; overflow: auto; font-family: var(--mono); font-size: var(--fs-tiny); }
.log-line { padding: 0.15em 0; border-bottom: var(--border); }
.log-line .t { color: var(--muted); }
.log-line.warn { color: var(--warn); }
.log-line.err { color: var(--err); }
.log-line.ok { color: var(--accent); }

.hl { color: var(--warn); font-weight: 600; }

/* Einladungen / Rechte */
:root {
  --dot-size: 0.7em;
  --rt-size: 1.9em;
  --inv-min: 22em;
}
.inv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--inv-min), 1fr)); gap: var(--gap); margin-top: var(--gap); }
.inv-card {
  background: var(--panel-2);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.inv-card.disabled { opacity: 0.55; }
.inv-card .row { margin: 0; }
.inv-head { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.inv-head input { flex: 1; min-width: 8em; font-weight: 600; }
.inv-card input.link { flex: 1; min-width: 0; font-size: var(--fs-tiny); }
.dot { width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-round); background: var(--line); flex: none; }
.dot.ok { background: var(--accent); box-shadow: 0 0 0.5em var(--accent); }
.dot.warn { background: var(--warn); }
.rights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3em 1em; }
.rt-row { display: flex; align-items: center; gap: 0.35em; }
.rt-name { flex: 1; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-name.unused { color: var(--muted); text-decoration: line-through; }
button.rt { width: var(--rt-size); height: var(--rt-size); padding: 0; font-weight: 700; font-size: var(--fs-small); }
button.rt.listen.on { background: var(--listen); border-color: var(--listen); color: var(--accent-text); }
button.rt.talk.on { background: var(--talk); border-color: var(--talk); color: var(--talk-text); }
.talking { width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-round); background: transparent; border: 1px solid var(--line); }
.talking.on { background: var(--talk); border-color: var(--talk); box-shadow: 0 0 0.6em var(--talk); }

.mic-meter { width: 10em; }
main.join { max-width: 60em; }