:root { color-scheme: dark; --bg:#101114; --panel:#1a1c21; --fg:#e8e9ec; --dim:#8b8f98; --accent:#4f8cff; --stop:#e5484d; }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body { background: var(--bg); color: var(--fg); font: 15px/1.4 system-ui, sans-serif; display: flex; flex-direction: column; }
  header { display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: var(--panel); flex-wrap: wrap; }
  header .title { font-weight: 600; }
  header .info { color: var(--dim); flex: 1; min-width: 120px; }
  input { background: var(--bg); color: var(--fg); border: 1px solid #2c2f36; border-radius: 6px; padding: 6px 10px; width: 130px; font: inherit; }
  button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
  button.stop { background: var(--stop); }
  button.ghost { background: #2c2f36; }
  button:disabled { opacity: .5; cursor: default; }
  main { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
  video { width: 100%; height: 100%; object-fit: contain; background: #000; }
  .idle { position: absolute; text-align: center; color: var(--dim); padding: 24px; pointer-events: none; }
  .idle b { color: var(--fg); display: block; font-size: 20px; margin-bottom: 6px; }
  #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid #2c2f36;
           padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .3s; pointer-events: none; }
  #toast.show { opacity: 1; }
  .hidden { display: none !important; }