:root {
  color-scheme: dark;
  --ink: #edf3f1;
  --muted: #91a29f;
  --line: #263936;
  --panel: #12201e;
  --panel-bright: #172b27;
  --bg: #091210;
  --accent: #d9f85d;
  --accent-ink: #17210e;
  --danger: #ff7564;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 85% 5%, #1e3b32 0, transparent 28%), var(--bg); font-family: "DM Sans", sans-serif; }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 24px; }
.topbar, .brand, .connection, .control-strip, .matrix-heading, footer { display: flex; align-items: center; }
.topbar { justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.brand { gap: 13px; }.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent-ink); background: var(--accent); font: 700 17px "Barlow Condensed", sans-serif; letter-spacing: .08em; transform: skew(-7deg); }
.eyebrow { margin: 0 0 5px; color: var(--muted); font: 600 11px "Barlow Condensed", sans-serif; letter-spacing: .16em; }.brand h1 { margin: 0; font: 600 34px/1 "Barlow Condensed", sans-serif; letter-spacing: .01em; }
.connection { gap: 8px; color: var(--muted); font-size: 13px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }.status-dot.online { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.control-strip { gap: 14px; margin: 38px 0 0; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }.name-field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; }.name-field input { width: 180px; border: 1px solid var(--line); padding: 12px 13px; outline: none; color: var(--ink); background: var(--panel); font: inherit; }.name-field input:focus { border-color: var(--accent); }.primary-button { align-self: end; border: 0; padding: 13px 18px; cursor: pointer; color: var(--accent-ink); background: var(--accent); font: 700 13px "DM Sans", sans-serif; }.primary-button:disabled { cursor: default; opacity: .45; }.hint { align-self: end; margin: 0 0 2px; color: var(--muted); font-size: 12px; }
.audio-settings { display: grid; grid-template-columns: minmax(190px, .8fr) repeat(2, minmax(220px, 1fr)); gap: 14px; align-items: end; margin: 38px 0 0; padding: 18px; border: 1px solid var(--line); background: rgba(18, 32, 30, .72); }.audio-settings h2 { margin: 0; font: 600 25px/1 "Barlow Condensed", sans-serif; }.device-field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; }.device-field select { width: 100%; min-width: 0; border: 1px solid var(--line); padding: 12px 13px; color: var(--ink); background: var(--panel); font: inherit; }.device-field select:focus { border-color: var(--accent); outline: none; }.device-hint { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: 11px; }.bitrate-field { grid-column: 2 / -1; }
.matrix-heading { justify-content: space-between; align-items: end; margin-bottom: 18px; }.matrix-heading h2 { margin: 0; font: 600 31px/1 "Barlow Condensed", sans-serif; }.count { color: var(--muted); font-size: 13px; }.matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }.channel { min-height: 206px; padding: 18px; border: 1px solid var(--line); background: linear-gradient(145deg, var(--panel-bright), var(--panel)); display: flex; flex-direction: column; justify-content: space-between; transition: border-color .2s, transform .2s; }.channel:hover { border-color: #46665e; transform: translateY(-2px); }.channel.talking { border-color: var(--accent); }.channel-top { display: flex; justify-content: space-between; gap: 12px; }.operator { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }.channel-id { color: var(--muted); font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .1em; }.channel-state { min-height: 18px; margin: 26px 0 10px; color: var(--muted); font-size: 12px; }.channel.talking .channel-state { color: var(--accent); }.talk-button { width: 100%; border: 1px solid #415750; padding: 13px 10px; cursor: pointer; color: var(--ink); background: transparent; font: 700 13px "DM Sans", sans-serif; }.talk-button:disabled { cursor: not-allowed; opacity: .45; }.talk-button:not(:disabled):hover, .channel.talking .talk-button { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }.empty-state { padding: 40px 0; color: var(--muted); text-align: center; border: 1px dashed var(--line); }.empty-state.hidden { display: none; }footer { justify-content: space-between; margin-top: 50px; color: var(--muted); font: 11px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.channel { cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.channel:hover, .channel:focus-visible { border-color: #46665e; transform: translateY(-2px); outline: none; }
.channel.talking { border-color: var(--accent); background: #20352d; }
.channel-all { border-color: #4d7064; }
.channel-all .operator { color: var(--accent); }
.channel[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.channel-state { pointer-events: none; }
.vu-meter { height: 6px; margin: 10px 0 4px; overflow: hidden; border: 1px solid #38534b; background: #0b1714; pointer-events: none; }
.vu-fill { display: block; width: 0; height: 100%; background: var(--accent); transition: width 80ms linear; }
.channel-actions { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: stretch; }
.direct-button { min-height: 34px; padding: 0 5px; border: 1px solid #415750; cursor: pointer; color: var(--muted); background: transparent; font: 700 11px "DM Sans", sans-serif; }
.direct-button:hover, .channel.direct .direct-button { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.direct-button:disabled { cursor: wait; opacity: .55; }
.channel.direct { border-color: var(--accent); background: #20352d; }
.channel.direct .channel-state { color: var(--accent); }
.talk-button { display: block; width: 100%; min-height: 34px; padding: 0; border: 1px solid var(--accent); background: var(--accent); color: transparent; pointer-events: none; }
@media (max-width: 760px) { .audio-settings { grid-template-columns: 1fr; margin-top: 30px; }.device-hint { grid-column: auto; } }
@media (max-width: 600px) { .shell { width: min(100% - 28px, 1120px); padding-top: 22px; }.control-strip { margin-bottom: 38px; }.name-field, .name-field input, .primary-button { width: 100%; }.primary-button { margin-top: 2px; }.hint { width: 100%; }.matrix-heading h2 { font-size: 26px; }.matrix-heading { align-items: start; gap: 10px; flex-direction: column; } footer { gap: 12px; align-items: start; flex-direction: column; } }