:root { --bg:#0f1115; --card:#171a21; --border:#262b35; --fg:#e6e8ee; --muted:#8a92a6;
        --accent:#4f8cff; --ok:#3fb47f; --bad:#e05d5d; --warn:#e0a04f; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--fg); }
a { color: var(--accent); text-decoration:none; }

.topbar { display:flex; gap:18px; align-items:center; padding:14px 22px; background:var(--card);
          border-bottom:1px solid var(--border); position:sticky; top:0; }
.brand { font-weight:700; margin-right:8px; }
main.container { max-width:1200px; margin:0 auto; padding:24px; }
h1 { font-size:1.4rem; margin:8px 0 14px; }
h2 { font-size:1.05rem; margin:22px 0 10px; }
.muted { color:var(--muted); font-weight:400; font-size:.85rem; }
.back { font-size:.85rem; }

.stats { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:.85rem; }

.columns { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.col { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; min-width:210px; flex:1 1 210px; }
.chip { display:inline-block; padding:4px 10px; border-radius:999px; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; }
.chip span { opacity:.7; margin-left:4px; }
.chip-produced, .chip-drafted { background:rgba(224,160,79,.18); color:#ffcf8a; }
.chip-approved { background:rgba(79,140,255,.16); color:#a9c8ff; }
.chip-published, .chip-replied { background:rgba(63,180,127,.16); color:#8fe6c0; }
.chip-measured { background:rgba(79,140,255,.12); color:#c3d6ff; }
.chip-planned, .chip-new { background:rgba(138,146,166,.16); color:#aab3c8; }
.chip-skips, .chip-skipped, .chip-rejected { background:rgba(224,93,93,.16); color:#ffb3b3; }
.chip-advisory { background:rgba(138,146,166,.2); color:#c4cde0; }
.chip-revision { background:rgba(224,160,79,.22); color:#ffcf8a; }
.chip-brand_ok, .chip-brand-ok { background:rgba(63,180,127,.2); color:#8fe6c0; }
.chip-brand_conflict, .chip-brand-conflict { background:rgba(224,93,93,.2); color:#ffb3b3; }
.banner.bad { background:rgba(224,93,93,.14); color:#ffb3b3; border:1px solid rgba(224,93,93,.3); }
.doclist { margin:6px 0; padding-left:18px; }
.revision-note { width:100%; background:#0e1116; color:var(--fg); border:1px solid var(--border);
  border-radius:8px; padding:10px 12px; font-size:.9rem; resize:vertical;
  font-family:ui-monospace, Menlo, Consolas, monospace; margin-bottom:8px; }
.revision-note:focus { outline:none; border-color:var(--warn); }
.preview { background:#0e1116; border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.preview img { max-width:100%; max-height:360px; border-radius:6px; display:inline-block; }
.preview-empty { background:#0e1116; border:1px dashed var(--border); border-radius:10px; padding:26px 14px;
  text-align:center; color:var(--muted); font-size:.9rem; }
.direction { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin:10px 0; }
.direction p { margin:6px 0; }
.dir-head { margin-bottom:6px; }
.card { display:block; background:#13161d; border:1px solid var(--border); border-radius:8px;
        padding:10px 12px; margin:8px 0; color:var(--fg); }
.card:hover { border-color:var(--accent); }
.card .meta { display:block; color:var(--muted); font-size:.8rem; margin-top:4px; }

table.kv { border-collapse:collapse; margin:10px 0; }
table.kv th, table.kv td { text-align:left; padding:6px 14px; border-bottom:1px solid var(--border); font-size:.9rem; }
table.kv th { color:var(--muted); font-weight:500; }
table.tbl { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
table.tbl th, table.tbl td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); font-size:.85rem; }
table.tbl thead th { color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:.72rem; }

pre.caption { background:#13161d; border:1px solid var(--border); border-radius:8px; padding:14px;
              white-space:pre-wrap; line-height:1.55; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.9rem; }
blockquote { border-left:3px solid var(--accent); padding:8px 14px; background:#13161d; border-radius:6px; }

.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
button { font-size:.95rem; padding:10px 18px; border-radius:8px; border:1px solid var(--border);
         background:var(--card); color:var(--fg); cursor:pointer; }
button:hover { transform:translateY(-1px); }
button.primary { background:var(--accent); color:#08101f; border-color:transparent; }
button.bad { background:var(--bad); color:#fff; border-color:transparent; }
button.warn { background:var(--warn); color:#14100a; border-color:transparent; }
button.ghost { background:transparent; border:1px dashed var(--border); color:var(--muted); padding:8px 14px; }
button.slot-remove { padding:2px 9px; font-size:.85rem; background:transparent; border:1px solid var(--border); color:var(--muted); }
a.cancel { align-self:center; color:var(--muted); text-decoration:none; margin-left:4px; }

.cfg-section { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin:16px 0; }
.cfg-section h2 { margin:0 0 12px; }
.field { display:block; margin:14px 0; }
.field-label { display:block; font-weight:500; margin-bottom:5px; font-size:.9rem; }
.field-path { color:var(--muted); font-weight:400; font-size:.72rem; margin-left:6px; }
.field-help { display:block; color:var(--muted); font-size:.78rem; margin-top:4px; }
.field input, .field textarea, .field select, .slot-row input {
  width:100%; background:#0e1116; color:var(--fg); border:1px solid var(--border);
  border-radius:8px; padding:9px 12px; font-size:.9rem; font-family:ui-monospace, Menlo, Consolas, monospace; }
.field textarea { resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .slot-row input:focus { outline:none; border-color:var(--accent); }
.slot-row { display:flex; gap:10px; margin:8px 0; align-items:center; }
.slot-row .s-w { width:150px; }
.slot-row .s-t { width:120px; }
.banner { padding:12px 14px; border-radius:8px; margin-bottom:14px; font-size:.9rem; }
.banner.ok { background:rgba(63,180,127,.14); color:#8fe6c0; border:1px solid rgba(63,180,127,.3); }