:root {
  --bg: #f7f7f5; --fg: #1d1d1b; --muted: #6b6b66; --line: #dedcd6; --card: #ffffff;
  --accent: #2455d6; --accent-fg: #ffffff; --ok: #1f7a3a; --warn: #9a6100; --err: #b3261e;
  --tag: #ecebe6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --fg: #ececea; --muted: #a09f9a; --line: #33332f; --card: #1f1f1d;
          --accent: #7fa1ff; --accent-fg: #0d1633; --tag: #2a2a27; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
code, pre { font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { background: var(--tag); padding: 10px 12px; border-radius: 6px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
h1 { font-size: 24px; margin: 0 0 12px; } h2 { font-size: 17px; margin: 0 0 10px; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
header.top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
             border-bottom: 1px solid var(--line); background: var(--card); }
header.top nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--fg); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 16px 0; }
.card.narrow { max-width: 460px; margin: 40px auto; }
.card.highlight { border-color: var(--ok); }
.row { display: flex; gap: 8px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
label { display: block; margin: 0 0 12px; } label input { display: block; width: 100%; margin-top: 4px; }
label.check, label.small { display: inline-flex; gap: 6px; align-items: center; margin: 0; } label.check input { width: auto; margin: 0; }
input[type=text], input[type=email], input[type=password], select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); min-width: 0; }
input.small { padding: 3px 6px; font-size: 13px; width: 150px; }
textarea { width: 100%; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 8px; resize: vertical; }
button, .button { font: inherit; padding: 7px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; display: inline-block; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.danger, .link.danger { color: var(--err); } button.danger { border-color: var(--err); }
button.link { border: 0; padding: 0; background: none; color: var(--accent); }
button.link.danger { color: var(--err); }
form.inline { display: inline; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin: 8px 0 16px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: 13px; color: var(--muted); } tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; } td.actions { white-space: nowrap; }
table.kv th { width: 160px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--tag); font-size: 12px; }
.tag.warn { color: var(--warn); }
.status-ready { background: #dff3e4; color: var(--ok); } .status-failed { background: #f9dedc; color: var(--err); }
.status-pending, .status-parsing, .status-structuring, .status-embedding { background: #fff1d6; color: var(--warn); }
@media (prefers-color-scheme: dark) { .status-ready { background: #1b3323; } .status-failed { background: #3a1e1c; }
  .status-pending, .status-structuring, .status-parsing, .status-embedding { background: #3a2e14; } }
.muted { color: var(--muted); } .small { font-size: 13px; } .empty { color: var(--muted); font-style: italic; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.flash.ok { background: #dff3e4; color: var(--ok); } .flash.err { background: #f9dedc; color: var(--err); }
@media (prefers-color-scheme: dark) { .flash.ok { background: #1b3323; } .flash.err { background: #3a1e1c; } }
.notice { background: var(--tag); padding: 10px 12px; border-radius: 6px; }
.crumbs { color: var(--muted); margin: 0 0 6px; }
details.section { border-top: 1px solid var(--line); padding: 8px 0; } details.section summary { cursor: pointer; }
details.section pre { margin-top: 8px; max-height: 360px; }
details.danger-zone { margin-top: 32px; color: var(--muted); } details.danger-zone summary { cursor: pointer; }
pre.key { font-size: 15px; user-select: all; }

/* diagnostics */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.stat-label { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.stat-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.stat-unit { font-size: 13px; font-weight: 400; color: var(--muted); }
.stat-detail { font-size: 12px; color: var(--muted); }
.stat-chart { margin-top: 6px; line-height: 0; }
.nowrap { white-space: nowrap; }
.scroll { overflow-x: auto; } .scroll table { min-width: 640px; }
td.num, .num { font-variant-numeric: tabular-nums; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.chartbox { min-width: 0; } .chartbox.wide { grid-column: 1 / -1; }
.chartbox h3 { font-size: 13px; margin: 0 0 6px; font-weight: 600; }
.chartbox p { margin: 4px 0 0; }
svg.chart { display: block; overflow: visible; }
svg.timeline { width: 100%; }
.axis-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px; }
.chart .axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .hit { fill: transparent; } .chart g:hover .hit { fill: var(--tag); }
.chart .bar { fill: var(--accent); }
.chart .track { fill: var(--tag); }
.chart .tick { font: 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; fill: var(--muted); }
.chart .spark { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.chart .pt { fill: var(--accent); opacity: .5; } .chart .last { fill: var(--accent); }
.f-toc { fill: #2455d6; background: #2455d6; } .f-section { fill: #1f7a3a; background: #1f7a3a; } .f-search { fill: #c27c0e; background: #c27c0e; }
.f-db { fill: #2455d6; background: #2455d6; } .f-embed { fill: #c27c0e; background: #c27c0e; } .f-other { fill: var(--line); background: var(--line); }
.f-sum { fill: #2455d6; background: #2455d6; } .f-vec { fill: #7a5bd6; background: #7a5bd6; } .f-fts { fill: #1f7a3a; background: #1f7a3a; }
.f-parse { fill: #9aa3b5; background: #9aa3b5; } .f-structure { fill: #7a5bd6; background: #7a5bd6; } .f-summarize { fill: #c2508f; background: #c2508f; }
.f-write { fill: #1f7a3a; background: #1f7a3a; }
@media (prefers-color-scheme: dark) {
  .f-toc, .f-db, .f-sum { fill: #7fa1ff; background: #7fa1ff; } .f-section, .f-fts, .f-write { fill: #5cc77d; background: #5cc77d; }
  .f-search, .f-embed { fill: #e2b45c; background: #e2b45c; } .f-vec, .f-structure { fill: #a68bff; background: #a68bff; }
  .f-summarize { fill: #ec7fbf; background: #ec7fbf; }
}
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.legend i, i.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.split { display: flex; height: 10px; width: 160px; border-radius: 3px; overflow: hidden; background: var(--tag); }
.split span { display: block; height: 100%; }
.windows a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; }
.windows a.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
td.plan { max-width: 380px; }