:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1e232b;
  --line: #2a313b;
  --text: #e6e9ee;
  --muted: #8d97a6;
  --accent: #4f8cff;
  --ok: #3ecf8e;
  --warn: #e6b450;
  --bad: #f26d6d;
  --radius: 10px;
}
* { box-sizing: border-box; }

/* An author `display` rule beats the UA stylesheet's [hidden] { display: none },
   so .gate{display:grid} kept the lock screen painted over the unlocked app
   even with hidden=true. Every toggle in this panel uses the hidden attribute,
   so this has to win globally. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2 { margin: 0 0 .6rem; font-weight: 600; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1rem; letter-spacing: .01em; }
code { background: var(--panel-2); padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* gate */
.gate { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.gate-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; width: min(24rem, 100%); }
.gate-card input { width: 100%; margin: .75rem 0; }
.gate-card button { width: 100%; }

/* chrome */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 600; }
.pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.pill.live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

.tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: .5rem .9rem; cursor: pointer; white-space: nowrap; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

main { padding: 1.25rem; max-width: 1500px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1rem; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; }

/* controls */
button, .file-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: .45rem .9rem; cursor: pointer; font: inherit;
}
button:hover, .file-btn:hover { border-color: var(--muted); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }
button.ok { background: var(--ok); border-color: var(--ok); color: #04170f; font-weight: 600; }
button.danger { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad); }
button.arm { background: var(--bad); border-color: var(--bad); color: #1b0505; font-weight: 700; }
button.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 .3rem; }

input, textarea, select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: .45rem .6rem; font: inherit;
}
textarea { width: 100%; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .45rem 0; }
.field.inline { justify-content: flex-start; }
.field > span:first-child { color: var(--muted); }
.field input { width: 8rem; }
.check { display: flex; align-items: center; gap: .5rem; margin: .45rem 0; cursor: pointer; }
.check.big { margin: 1rem 0 .5rem; padding: .6rem .8rem; background: var(--panel-2); border-radius: 7px; border: 1px solid var(--line); }

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.error { color: var(--bad); min-height: 1.2em; }

/* stats */
.stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .8rem 0; }
.stat { display: flex; flex-direction: column; }
.stat span { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.stat label { color: var(--muted); font-size: .78rem; }
.stat.ok span { color: var(--ok); }
.stat.warn span { color: var(--warn); }
.stat.bad span { color: var(--bad); }

.progress { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* log + tables */
.log {
  background: #0b0e12; border: 1px solid var(--line); border-radius: 7px;
  padding: .6rem .75rem; height: 22rem; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.55;
}
.log div { white-space: pre-wrap; word-break: break-word; }
.log .lv-warn { color: var(--warn); }
.log .lv-error { color: var(--bad); }
.log .ts { color: var(--muted); }

.table { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .85rem; display: block; overflow-x: auto; }
.table th, .table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { color: var(--muted); font-weight: 500; }
.table td.wrap { white-space: normal; min-width: 18rem; }
.s-sent { color: var(--ok); }
.s-failed, .s-unconfirmed { color: var(--bad); }
.s-dry-run { color: var(--warn); }
.s-skip { color: var(--muted); }

/* remote pane */
.remote { margin-top: 1rem; }
.remote-bar { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
.remote-bar .url, .remote-bar input:not([type=checkbox]) { flex: 1; min-width: 0; }
.remote-stage { background: #000; border: 1px solid var(--line); border-radius: 7px; overflow: auto; }
/* width + aspect-ratio reserve the box BEFORE any frame decodes. Without this
   the element collapses to zero height between src swaps and springs back on
   every decode, which reads as the pane zooming in and out once a second. */
#remote-img {
  display: block;
  width: 100%;
  /* Never scale ABOVE the captured size. Upscaling a quality-72 JPEG makes text
     shimmer as each new frame lands, which reads as flicker on a static page. */
  max-width: var(--remote-natural-width, 1280px);
  height: auto;
  aspect-ratio: var(--remote-aspect, 16 / 10);
  object-fit: contain;
  background: #000;
  cursor: crosshair;
  margin: 0 auto;
}
#remote-img:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.file-btn { display: inline-block; }
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem 1rem; z-index: 20; max-width: 90vw;
}
.toast.bad { border-color: var(--bad); color: var(--bad); }
.toast.ok { border-color: var(--ok); color: var(--ok); }