/* Extracted from the single-file page this replaced. Unchanged except for the
   login panel at the end, which had nowhere to live when the API served the
   page and there was no such thing as an account. */
  :root {
    color-scheme: light dark;
    --bg: #fbfbfa;
    --panel: #ffffff;
    --ink: #16181d;
    --muted: #6b7280;
    --line: #e3e3e0;
    --accent: #2f6f4f;
    --warn: #9a5b12;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #14161a;
      --panel: #1b1e24;
      --ink: #e8e8e6;
      --muted: #9aa1ac;
      --line: #2b2f37;
      --accent: #6fbf95;
      --warn: #d69a52;
    }
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  h1 { font-size: 15px; font-weight: 600; margin: 0; }
  h2 {
    font-size: 11px; font-weight: 600; margin: 0 0 10px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  }

  header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
  }
  header .sub { color: var(--muted); font-size: 13px; }

  main {
    display: grid; grid-template-columns: 280px 1fr; gap: 18px;
    padding: 18px; max-width: 1200px; margin: 0 auto; align-items: start;
  }
  @media (max-width: 820px) { main { grid-template-columns: 1fr; } }

  .panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; padding: 14px;
  }

  button, input[type=text], input[type=file] {
    font: inherit; color: inherit;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--bg); padding: 8px 10px;
  }
  button { cursor: pointer; }
  button:hover:not(:disabled) { border-color: var(--accent); }
  button:disabled { opacity: .5; cursor: default; }
  input[type=text] { width: 100%; }

  .videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .videos button {
    width: 100%; text-align: left; background: none; border: 1px solid transparent;
    padding: 7px 8px; border-radius: 6px;
  }
  .videos button.on { border-color: var(--accent); background: var(--bg); }
  .videos .name {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .videos .state { font-size: 12px; color: var(--muted); }
  .videos .state.failed { color: var(--warn); }

  video { width: 100%; border-radius: 6px; background: #000; display: block; }

  form.search { display: flex; gap: 8px; margin: 14px 0 0; }
  form.search input { flex: 1; }

  .status { font-size: 13px; color: var(--muted); min-height: 20px; margin-top: 10px; }

  ol.hits { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
  ol.hits li {
    border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px;
    display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline;
  }
  ol.hits li.verified { border-color: var(--accent); }
  ol.hits button.at {
    font-variant-numeric: tabular-nums; font-size: 13px;
    padding: 2px 6px; color: var(--accent);
  }
  .text { color: var(--muted); }
  .quote { color: var(--ink); }
  .meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .empty { color: var(--muted); font-style: italic; }

  .banner {
    display: none; margin: 0 18px; padding: 9px 12px;
    border: 1px solid var(--warn); border-radius: 6px;
    color: var(--warn); font-size: 13px;
  }
  .banner.show { display: block; }
  .banner code {
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--bg); padding: 1px 5px; border-radius: 4px;
  }

  .auth { display: flex; gap: 8px; align-items: center; margin-left: auto; }
  .auth input[type=text], .auth input[type=password] { width: 170px; }
  .auth .who { color: var(--muted); font-size: 13px; }
  .auth.hidden { display: none; }
  input[type=password] {
    font: inherit; color: inherit;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--bg); padding: 8px 10px;
  }