/* Streamworks brand: maroon #901731, crimson #c41f43 (from the original control.streamworks.video). */
:root {
  --brand:#901731; --brand-2:#c41f43; --brand-ink:#fff; --brand-soft:#fbe9ed;
  --ink:#16161b; --muted:#6c6c78; --bg:#f4f4f6; --card:#fff; --line:#e7e7ec; --field:#fff; --field-line:#d6d6de;
  --ok:#16a34a; --ok-soft:#e5f6ea; --warn:#c27803; --warn-soft:#fdf3dc; --err:#c41f43; --err-soft:#fbe9ed; --off-soft:#ececf0;
  --bar:#14090c; --shadow:0 1px 2px rgba(16,16,24,.04), 0 4px 16px rgba(16,16,24,.06);
  --radius:14px; --mono:"JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#ececf1; --muted:#9a9aa8; --bg:#0d0d11; --card:#17171d; --line:#26262f; --field:#111116; --field-line:#33333d;
    --brand-soft:#3a121c; --ok:#34d399; --ok-soft:#0f2e22; --warn:#fbbf24; --warn-soft:#33270b; --err:#f2577a; --err-soft:#3a121c; --off-soft:#24242c;
    --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
  }
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 Inter, system-ui, -apple-system, sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--brand-2); text-decoration:none; } a:hover { text-decoration:underline; }
code { font-family:var(--mono); font-size:.82rem; }
:focus-visible { outline:2px solid var(--brand-2); outline-offset:2px; }

/* Top bar */
.top { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 20px; background:linear-gradient(90deg, #6b0f23, var(--brand) 55%, var(--brand-2)); box-shadow:0 1px 0 rgba(0,0,0,.2); }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { display:block; } .brand .wordmark { height:20px; width:auto; }
.top nav { display:flex; gap:4px; align-items:center; }
.top nav a, .top nav button { color:#e9e3e5; font-weight:500; font-size:.9rem; padding:6px 12px; border-radius:8px; border:0; background:none; text-decoration:none; }
.top nav a:hover, .top nav button:hover { background:rgba(255,255,255,.14); color:#fff; }
.top form { margin:0; }

main { max-width:1040px; margin:0 auto; padding:24px 20px 48px; }
h1 { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin:.2em 0 .1em; }
h2 { font-size:1rem; font-weight:600; margin:0; letter-spacing:-.01em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:20px 0; box-shadow:var(--shadow); }
.narrow { max-width:400px; margin:56px auto; padding:28px; }
.narrow h1 { margin-bottom:.6em; }
.muted { color:var(--muted); font-size:.875rem; } .err { color:var(--err); }

/* Forms */
label { display:block; margin:12px 0; font-size:.85rem; font-weight:500; color:var(--muted); }
input, select { display:block; width:100%; padding:10px 12px; margin-top:6px; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--field); border:1px solid var(--field-line); border-radius:10px; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 22%, transparent); }
button { font:inherit; font-size:.9rem; font-weight:500; padding:9px 16px; border-radius:10px; border:1px solid var(--field-line);
  background:var(--card); color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s, transform .05s; }
button:hover { border-color:var(--muted); } button:active { transform:translateY(1px); }
button.primary { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
button.primary:hover { background:var(--brand-2); border-color:var(--brand-2); }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
button.link { border:0; background:none; padding:6px 10px; color:var(--muted); border-radius:8px; }
button.link:hover { background:var(--off-soft); color:var(--ink); }
button.danger, button.link.danger { color:var(--err); } button.link.danger:hover { background:var(--err-soft); }
.narrow button.primary { width:100%; margin-top:8px; padding:11px; }

.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row input, .row select { width:auto; margin:0; }
.between { justify-content:space-between; } .stack > * { display:block; }

.banner { padding:12px 16px; border-radius:12px; margin:12px 0; font-weight:500; font-size:.9rem; }
.banner.warn { background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.banner.err { background:var(--err-soft); color:var(--err); border:1px solid color-mix(in srgb, var(--err) 30%, transparent); }

/* Status pills: tinted background + dot */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--off-soft); color:var(--muted); white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill[data-state=live] { background:var(--ok-soft); color:var(--ok); }
.pill[data-state=live]::before { animation:pulse 1.6s ease-out infinite; }
.pill[data-state=error] { background:var(--err-soft); color:var(--err); }
.pill[data-state=connecting], .pill[data-state=waiting], .pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill[data-state=off] { background:var(--off-soft); color:var(--muted); }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow:0 0 0 7px transparent; } }

/* Ingest */
.ingest-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; margin-top:16px; }
.preview { background:#000; border-radius:12px; position:relative; aspect-ratio:16/9; overflow:hidden; }
.preview video { width:100%; height:100%; object-fit:contain; display:block; }
.preview-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:8px; text-align:center; color:#8d8d99; }
.preview [data-unmute] { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(6px); }
.details { display:grid; grid-template-columns:auto 1fr; gap:0 16px; margin:0; font-size:.9rem; align-content:start; }
.details dt, .details dd { padding:7px 0; border-bottom:1px solid var(--line); }
.details dt { color:var(--muted); } .details dd { margin:0; font-variant-numeric:tabular-nums; font-weight:500; }
.details dt:last-of-type, .details dd:last-of-type { border-bottom:0; }
.setup { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.setup summary { cursor:pointer; font-weight:600; font-size:.9rem; list-style:none; display:flex; align-items:center; gap:8px; }
.setup summary::before { content:"›"; display:inline-block; transition:transform .15s; color:var(--muted); font-size:1.1rem; }
.setup[open] summary::before { transform:rotate(90deg); }
.copy-row { display:grid; grid-template-columns:120px 1fr auto; gap:10px; align-items:center; padding:6px 0; }
.copy-row code { overflow-wrap:anywhere; background:var(--bg); border:1px solid var(--line); padding:6px 10px; border-radius:8px; }

/* Destinations */
.dests { list-style:none; padding:0; margin:12px 0 0; }
.dest { display:flex; gap:12px; align-items:center; padding:14px 4px; border-top:1px solid var(--line); flex-wrap:wrap; }
.dest:first-child { border-top:0; }
.dest-main { flex:1; min-width:160px; } .dest-main strong { display:block; font-weight:600; }
.dest-err { color:var(--err); font-size:.82rem; overflow-wrap:anywhere; margin-top:2px; }
.dest [data-bitrate] { min-width:64px; text-align:right; font-variant-numeric:tabular-nums; }
.dest form { margin:0; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:84px; padding:4px 8px; border-radius:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; background:var(--off-soft); color:var(--ink); }
.badge[data-preset=youtube] { background:#ff0033; color:#fff; } .badge[data-preset=facebook] { background:#0866ff; color:#fff; }
.badge[data-preset=vimeo] { background:#17d5ff; color:#0b2733; } .badge[data-preset=twitch] { background:#9146ff; color:#fff; }

/* On/off switch (the button keeps its text for screen readers) */
.toggle { position:relative; width:44px; height:26px; padding:0; border-radius:999px; border:0; background:var(--field-line); font-size:0; flex:none; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; }
.toggle[aria-pressed=true] { background:var(--ok); }
.toggle[aria-pressed=true]::after { transform:translateX(18px); }

dialog { border:1px solid var(--line); border-radius:var(--radius); max-width:460px; width:calc(100% - 32px); padding:24px;
  background:var(--card); color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(10,8,12,.55); backdrop-filter:blur(2px); }
dialog .row { justify-content:flex-end; margin-top:16px; }

table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 6px; }
td { padding:10px 6px; border-top:1px solid var(--line); vertical-align:top; }

@media (max-width:720px) {
  main { padding:16px; } .top { padding:10px 16px; } .brand .wordmark { height:16px; }
  .ingest-grid { grid-template-columns:1fr; } .copy-row { grid-template-columns:1fr auto; } .copy-row .muted { grid-column:1/-1; }
  /* phone: row 1 = service, name, switch; row 2 = status, bitrate, edit, remove */
  .dest { display:grid; grid-template-columns:auto auto 1fr auto auto; gap:8px; }
  .dest .badge { min-width:0; grid-area:1/1; } .dest-main { min-width:0; grid-area:1/2/2/5; }
  .dest > form:first-of-type { grid-area:1/5; }
  .dest [data-status] { grid-area:2/1; justify-self:start; } .dest [data-bitrate] { grid-area:2/2; min-width:0; text-align:left; }
  .dest > [data-edit] { grid-area:2/4; } .dest > form:nth-of-type(2) { grid-area:2/5; }
}
[hidden] { display:none !important; }