:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-subtle: #fafbfc;
  --text: #17191f;
  --muted: #657080;
  --line: #dfe3ea;
  --accent: #0f766e;
  --accent-strong: #0b5f59;
  --link: #0b5cad;
  --bad: #b42318;
  --warn: #b26a00;
  --ok: #18794e;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #111318;
    --panel: #191d24;
    --panel-subtle: #202631;
    --text: #eef2f7;
    --muted: #9aa4b2;
    --line: #303846;
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --link: #93c5fd;
    --bad: #f97066;
    --warn: #fbbf24;
    --ok: #4ade80;
    --shadow: none;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #111318;
  --panel: #191d24;
  --panel-subtle: #202631;
  --text: #eef2f7;
  --muted: #9aa4b2;
  --line: #303846;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --link: #93c5fd;
  --bad: #f97066;
  --warn: #fbbf24;
  --ok: #4ade80;
  --shadow: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; background: #111827; color: #fff; padding: 18px 14px; }
.brand { font-weight: 750; letter-spacing: 0; white-space: nowrap; padding: 0 10px 14px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a { color: #d1d5db; padding: 10px 12px; border-radius: 6px; font-weight: 600; }
.side-nav a.active, .side-nav a:hover { background: #263244; color: #fff; text-decoration: none; }
.content-shell { min-width: 0; }
.topbar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow); }
.topbar-title { font-weight: 700; overflow-wrap: anywhere; }
.topbar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.logout-form, .inline-form { margin: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logout, .theme-toggle, .language-toggle { color: var(--text); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-subtle); }
.logout:hover, .theme-toggle:hover, .language-toggle:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.theme-toggle, .language-toggle { cursor: pointer; font: inherit; font-weight: 700; }
main { max-width: 1440px; margin: 0 auto; padding: 24px; }
.page-head { margin-bottom: 16px; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 18px 0 8px; font-size: 14px; }
p { margin: 0 0 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; overflow: auto; box-shadow: var(--shadow); }
.danger-panel { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--panel)); }
.grid { display: grid; gap: 12px; }
.metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-height: 82px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); }
.metric span { color: var(--muted); }
.metric b { font-size: 24px; overflow-wrap: anywhere; }
.metric.bad b { color: var(--bad); }
.metric.warn b { color: var(--warn); }
.metric.ok b { color: var(--ok); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.system-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.system-card { display: grid; gap: 6px; min-height: 104px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.system-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.system-card span { color: var(--muted); }
.vault-filters { display: grid; gap: 10px; margin: 0 0 16px; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vault-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.vault-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--panel-subtle); border-bottom: 1px solid var(--line); color: var(--muted); overflow: hidden; }
.vault-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-thumb-missing { background: repeating-linear-gradient(135deg, var(--panel-subtle), var(--panel-subtle) 10px, color-mix(in srgb, var(--line) 35%, var(--panel-subtle)) 10px, color-mix(in srgb, var(--line) 35%, var(--panel-subtle)) 20px); }
.vault-card-body { padding: 12px; min-width: 0; }
.vault-description { margin: 10px 0; overflow-wrap: anywhere; }
.vault-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.kv.vault-kv { grid-template-columns: 84px minmax(0, 1fr); font-size: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; background: var(--panel-subtle); position: sticky; top: 56px; z-index: 2; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-subtle) 65%, transparent); }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
th[data-sortable='true'] { cursor: pointer; user-select: none; }
th[data-sortable='true']::after { content: ' ↕'; color: var(--muted); font-weight: 400; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; padding: 10px; background: var(--panel-subtle); border: 1px solid var(--line); border-radius: 6px; }
.json-details summary { cursor: pointer; max-width: 560px; overflow-wrap: anywhere; }
.badge { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, var(--panel)); color: var(--text); font-size: 12px; vertical-align: middle; }
.badge.bad { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); color: var(--bad); }
.badge.warn { background: color-mix(in srgb, var(--warn) 16%, var(--panel)); color: var(--warn); }
.badge.ok { background: color-mix(in srgb, var(--ok) 15%, var(--panel)); color: var(--ok); }
.muted { color: var(--muted); }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.filterbar a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
.filterbar a.active { background: #111827; border-color: #111827; color: #fff; text-decoration: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 0; }
.pager a, .pager span { padding: 7px 10px; border-radius: 6px; }
.pager a { background: var(--panel); border: 1px solid var(--line); }
.pager .disabled { color: var(--muted); background: var(--panel-subtle); }
.media-blocked td { background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
.media-warning td { background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.media-uninspected td { background: var(--panel-subtle); }
.media-pending td { background: color-mix(in srgb, var(--link) 6%, var(--panel)); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.draft-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--panel); min-width: 0; }
.card-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 8px; }
.badges { margin-bottom: 10px; }
.translation { color: var(--text); background: var(--panel-subtle); border-left: 3px solid var(--accent); padding: 8px 10px; }
.messages { display: flex; flex-direction: column; gap: 8px; }
.message { max-width: 76%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-subtle); }
.message.outbound { margin-left: auto; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.message-meta { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.facts { padding-left: 18px; margin: 0; }
.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-shell { width: min(420px, 100%); padding: 24px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.login-card input, .table-search input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text); background: var(--panel); }
button, .small-button { background: var(--accent); color: #06211e; border: 0; border-radius: 6px; padding: 10px 12px; font-weight: 700; cursor: pointer; }
button:hover, .small-button:hover { background: var(--accent-strong); }
.small-button { padding: 7px 10px; font-size: 12px; }
.small-button.secondary { background: var(--panel-subtle); color: var(--text); border: 1px solid var(--line); }
.small-button.secondary:hover { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.alert { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); color: var(--bad); border-radius: 6px; padding: 8px 10px; }
.alert.small { font-size: 12px; margin-top: 12px; }
.table-search { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.table-search label { color: var(--muted); white-space: nowrap; }
.table-search input { max-width: 340px; }
.hidden-by-search { display: none; }
.live-status { color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 12px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-nav a { padding: 8px 10px; }
  .topbar { height: auto; align-items: flex-start; flex-direction: column; padding: 12px; gap: 8px; }
  .topbar-tools { justify-content: flex-start; }
  main { padding: 14px; }
  .two-col { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .message { max-width: 100%; }
  th { top: 0; }
  .table-search { align-items: stretch; flex-direction: column; }
  .table-search input { max-width: none; }
}