:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Yu Gothic UI", sans-serif;
  background: #090c12;
  color: #edf2ff;
  --panel: #121722;
  --panel-2: #1a2130;
  --line: #2a3549;
  --accent: #6c8cff;
  --good: #3bd49b;
  --bad: #ff647c;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.page-shell { display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at top, #182440, #090c12 60%); }
.card, .dock-card { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 55px #0008; }
.card { padding: 32px; }
.home-card { width: min(560px, 100%); text-align: center; }
.home-links, .form-stack { display: grid; gap: 14px; margin-top: 28px; }
.eyebrow { margin: 0 0 8px; color: #8fa8ff; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); }
h2 { font-size: 14px; color: #aebad0; }
a { color: inherit; text-decoration: none; }
.primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-weight: 700; color: white; }
.primary-button { background: var(--accent); }
.secondary-button { background: var(--panel-2); border-color: var(--line); }
.danger-button { background: #8d2f42; }
.sender-layout { display: grid; grid-template-columns: minmax(320px, 440px) minmax(420px, 800px); gap: 24px; width: min(1280px, 100%); }
.form-stack label:not(.toggle-row) { display: grid; gap: 7px; color: #bdc8dc; font-size: 13px; font-weight: 650; }
input, select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #0c111b; color: white; }
.toggle-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.toggle-row input { width: 18px; min-height: 18px; accent-color: var(--accent); }
.button-row { display: flex; gap: 10px; }
.button-row button { flex: 1; }
.status-pill { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: #282f3e; color: #d4dbea; font-size: 12px; font-weight: 750; }
.status-pill[data-state="ok"] { background: #153d32; color: #75edc0; }
.status-pill[data-state="error"] { background: #47202b; color: #ff9aac; }
.help { color: #8290a9; font-size: 12px; line-height: 1.6; }
.quality-readout { margin: 10px 0 0; color: #aab7cd; font-size: 12px; font-variant-numeric: tabular-nums; }
.preview-card { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 400px; border: 1px solid var(--line); border-radius: 18px; background: #05070b; }
.preview-card video { width: 100%; height: 100%; object-fit: contain; }
.preview-card span { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border-radius: 6px; background: #000a; font-size: 11px; }
.dock-shell { background: #0d1119; padding: 10px; }
.dock-card { padding: 14px; border-radius: 10px; box-shadow: none; }
.dock-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dock-card h1 { font-size: 22px; }
.connection-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 7px; margin: 16px 0 10px; }
.controls { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #0c111b; }
.controls > label { display: flex; align-items: center; gap: 8px; color: #bdc8dc; font-size: 13px; }
.controls select { width: auto; min-width: 140px; }
.auto-label { align-self: center; color: #8290a9; font-size: 12px; }
.member-list { display: grid; gap: 7px; }
.member-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: white; text-align: left; }
.member-row.selected { border-color: var(--good); background: #17352e; }
.member-row strong { color: #9fb1d1; font-size: 12px; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px #3bd49b88; }
.online-dot.pending { background: #e9b949; box-shadow: 0 0 10px #e9b94966; }
.empty-list, .link-box { color: #8390a7; font-size: 12px; }
.link-box { overflow-wrap: anywhere; line-height: 1.7; }
summary { margin-top: 16px; color: #9eabc1; cursor: pointer; font-size: 12px; }
code { color: #aebfff; }

@media (max-width: 850px) {
  .sender-layout { grid-template-columns: 1fr; }
  .preview-card { min-height: 260px; }
  .connection-row { grid-template-columns: 1fr; }
}