:root {
  --bg: #f6f5f2; --panel: #ffffff; --ink: #1d1f24; --muted: #6b6f78; --line: #e3e1dc;
  --accent: #1f5f8b; --accent-ink: #ffffff; --ok: #2e7d4f; --warn: #b7791f; --bad: #b83232;
  --chip: #eef1f5; --boss: #eef4f9; --owner: #f7f1e8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #15171b; --panel: #1d2026; --ink: #e8e9ec; --muted: #9aa0aa; --line: #2d3139;
    --accent: #5aa2d6; --accent-ink: #0d1116; --ok: #5cc38a; --warn: #e0a84a; --bad: #e46a6a;
    --chip: #262a31; --boss: #1f2a35; --owner: #2c261d; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.25rem; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
header .brand { font-weight: 700; letter-spacing: .02em; }
header nav { display: flex; gap: .9rem; flex-wrap: wrap; }
header nav a { color: var(--muted); } header nav a.on { color: var(--ink); font-weight: 600; }
header .right { margin-left: auto; color: var(--muted); font-size: .85rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.4rem; margin: .2rem 0 1rem; } h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.stat .n { font-size: 1.7rem; font-weight: 700; } .stat .l { color: var(--muted); font-size: .85rem; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.chip { display: inline-block; padding: .05rem .5rem; border-radius: 99px; background: var(--chip);
  font-size: .78rem; margin: 0 .2rem .2rem 0; }
.chip.block, .chip.high_risk, .chip.rejected, .chip.L3 { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.chip.warn, .chip.L2 { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.chip.qualified, .chip.verified, .chip.active, .chip.L1, .chip.executed { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.muted { color: var(--muted); } .small { font-size: .85rem; }
button, .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: .45rem .9rem; font: inherit; font-weight: 600; cursor: pointer; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.bad { background: var(--bad); color: #fff; }
input, textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; }
textarea { min-height: 6rem; resize: vertical; }
label { display: block; font-size: .85rem; color: var(--muted); margin: .5rem 0 .2rem; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; } .row > * { flex: 1 1 160px; }
.chat { display: flex; flex-direction: column; gap: .7rem; max-height: calc(100vh - 260px); overflow-y: auto;
  padding: .5rem; }
.msg { padding: .7rem .9rem; border-radius: 10px; max-width: 85%; border: 1px solid var(--line); }
.msg.owner { background: var(--owner); align-self: flex-end; } .msg.boss { background: var(--boss); }
.msg.system { background: var(--chip); align-self: center; font-size: .85rem; }
.msg p:first-child { margin-top: 0; } .msg p:last-child { margin-bottom: 0; }
.msg table, .prose table { font-size: .9rem; }
.prose { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.4rem; }
pre { white-space: pre-wrap; background: var(--chip); padding: .6rem; border-radius: 8px; font-size: .85rem; }
.feed li { margin-bottom: .35rem; } .feed { padding-left: 1rem; }
.alert { border-left: 4px solid var(--bad); } .notice { border-left: 4px solid var(--warn); }
.thinking { color: var(--muted); font-style: italic; }
@media (max-width: 640px) { main { padding: .75rem; } .msg { max-width: 100%; } th, td { padding: .4rem; } }