/* Palette and control treatment matched to Forma's sage dark theme:
   https://gpthumanize.pages.dev/ — inspected November 7, 2026. */
:root {
  color-scheme: dark;
  --bg: #171717;
  --surface: #202021;
  --raised: #28282a;
  --border: #303034;
  --line: #2a2a2d;
  --text: #edece9;
  --muted: #aaa8a5;
  --subtle: #93918d;
  --accent: #b8d4bd;
  --accent-ink: #1d3325;
  --accent-soft: #2b302d;
  --accent-line: #536358;
  --green: var(--accent);
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}
body, .workspace { background: var(--bg); color: var(--text); }
aside { background: #1b1b1d; border-color: var(--line); }
header, footer, .filter-row { border-color: var(--line); }
.brand-icon { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; }
.brand, .card h3, .result-line h2 { color: var(--text); }
.dot, .eyebrow, .collection-stamp strong, .save.on { color: var(--accent); }
.online, .eyebrow span, .free:before { background: var(--accent); }
.rail-label, .rail-footer small, .category b, footer, .breadcrumb, .sort,
.collection-stamp, .result-line > span, .card-category { color: var(--subtle); }
.nav, .category, .rail-footer, .rail-footer p, .intro p, .quiet,
.breadcrumb strong, .pill, .sort select { color: var(--muted); }
.nav.active, .category.active, .category:hover, .pill.active {
  background: var(--accent-soft); color: var(--accent);
}
.nav:hover, .quiet:hover { background: var(--raised); color: var(--text); }
.breadcrumb span { color: var(--subtle); }
.quiet { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 8px 11px; }
h1, dialog h2 { font-family: Arial, Helvetica, sans-serif; }
h1 span { color: var(--muted); }
.collection-stamp { border-color: var(--border); }
.search { background: var(--surface); border-color: var(--border); border-radius: 9px; box-shadow: none; }
.search > span { color: var(--muted); }
.search input { color: var(--text); }
.search input::placeholder { color: var(--subtle); }
.search kbd { color: var(--accent); border-color: var(--border); background: var(--raised); }
.pill { border-color: var(--border); background: var(--surface); }
.pill.active { border-color: var(--accent-line); }
.sort select, .mobile-category { color: var(--text); background: #252527; border-color: var(--border); border-radius: 5px; }
.result-line h2 span { color: var(--subtle); border-color: var(--border); }
.card { background: var(--surface); border-color: var(--border); border-radius: 9px; }
.card:hover { box-shadow: 0 10px 24px #0003; border-color: var(--accent-line); }
.media { background: var(--raised); }
.preview-tag { background: #202021ed; color: var(--accent); border-color: var(--accent-line); }
.play { background: var(--accent); color: var(--accent-ink); }
.save { color: var(--subtle); }
.card-bottom { border-color: var(--border); }
.free { color: var(--accent); }
.copy-small { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); border-radius: 6px; }
.copy-small:hover { background: var(--accent); color: var(--accent-ink); }
.copy, #more, #reset { color: var(--accent-ink); background: var(--accent); border: 1px solid transparent; border-radius: 6px; font-weight: 600; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
dialog { background: #202022; color: var(--text); border-color: #444449; border-radius: 12px; box-shadow: 0 30px 100px #0008; }
dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.dialog-top { color: var(--subtle); }
.dialog-top button { color: var(--muted); background: var(--raised); border-radius: 6px; }
.dialog-actions a { color: var(--accent); }
#detailMedia video, #detailMedia img { background: var(--bg); }
pre { background: var(--bg); color: var(--text); border-color: var(--border); }
#toast { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent-line); box-shadow: 0 8px 28px #0004; }
#empty { color: var(--muted); }
#error { background: #342a20; color: #e7cda8; border: 1px solid #66513a; }
.no-preview { color: var(--subtle); background: var(--raised); }
@media (max-width: 700px) {
  aside { border-color: var(--line); }
  .mobile-category { color: var(--text); background: #252527; border-color: var(--border); }
}

.brand-icon{font:700 17px monospace;letter-spacing:-2px}.brand{letter-spacing:-.6px}.dialog-actions{flex-wrap:wrap;gap:10px}.quiet:disabled{opacity:.4;cursor:not-allowed}header>div{display:flex;gap:8px;flex-wrap:wrap}.quiet{text-decoration:none}