/* kc_ui.css v1 (#398 FUT-UI-1) — CSS DÙNG CHUNG cho dashboard chính (/ui/kc_ui.css) và terminal Futures (/kca/kc_ui.css).
   Quy ước + bảng tương phản: docs/ui_style_guide_v1.md. Khối 1–3 CHÉP NGUYÊN VĂN từ ~/agents/web/app.html (sha 110fecd2…, dòng 4–14,
   211–222) rồi XÓA khỏi app.html ⇒ một nguồn token duy nhất. Không thêm màu ngoài token; trạng thái dùng cặp --vz-*-fg/--vz-*-bg (AA). */

/* ---- 1. token lõi (sáng; tối qua data-theme=dark hoặc prefers-color-scheme) ---- */
:root{--bg:#f5f6f8;--panel:#fff;--panel2:#f9fafb;--line:#e4e7ec;--line2:#eef0f3;--text:#151a23;--muted:#667085;--faint:#98a2b3;
--acc:#3d5afe;--acc2:#2f47d9;--acc-soft:#eef1ff;
--ok:#12805c;--ok-bg:#e7f6ef;--warn:#a15c07;--warn-bg:#fff4e0;--err:#c0262d;--err-bg:#fdecec;--info:#2563eb;--info-bg:#e8f0fe;--vio:#7c3aed;--vio-bg:#f1eafe;--gray-bg:#f0f2f5;
--c-backlog:#98a2b3;--c-todo:#3b82f6;--c-in_progress:#f59e0b;--c-review:#8b5cf6;--c-rework:#f97316;--c-done:#16a34a;--c-blocked:#dc2626;--c-cancelled:#64748b;
--shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);--code-bg:#0f141c;--code-text:#d6dde8;color-scheme:light}
:root[data-theme=dark]{--bg:#0b0e13;--panel:#131820;--panel2:#171d27;--line:#232a36;--line2:#1c222c;--text:#e6e9ef;--muted:#8e98a9;--faint:#5f6b7d;
--acc:#6079ff;--acc2:#7a8dff;--acc-soft:#1b2246;--ok:#4ade80;--ok-bg:#0f2a1c;--warn:#fbbf24;--warn-bg:#2d2008;--err:#f87171;--err-bg:#2f1214;
--info:#60a5fa;--info-bg:#0f213d;--vio:#a78bfa;--vio-bg:#221a3d;--gray-bg:#1b212b;--shadow:none;--code-bg:#090c11;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b0e13;--panel:#131820;--panel2:#171d27;--line:#232a36;--line2:#1c222c;--text:#e6e9ef;--muted:#8e98a9;--faint:#5f6b7d;
--acc:#6079ff;--acc2:#7a8dff;--acc-soft:#1b2246;--ok:#4ade80;--ok-bg:#0f2a1c;--warn:#fbbf24;--warn-bg:#2d2008;--err:#f87171;--err-bg:#2f1214;
--info:#60a5fa;--info-bg:#0f213d;--vio:#a78bfa;--vio-bg:#221a3d;--gray-bg:#1b212b;--shadow:none;--code-bg:#090c11;color-scheme:dark}}
/* ---- 2. token trạng thái (badge; đạt WCAG AA 4.5:1 sáng + tối — test_t133_render, kiểm lại ở reports/task-398/contrast_t398.py) ---- */
:root{--vz-ok-fg:#0b6b4a;--vz-ok-bg:#e3f4ec;--vz-warn-fg:#8a4d00;--vz-warn-bg:#fff1d6;--vz-info-fg:#1d4ed8;--vz-info-bg:#e6eefe;--vz-vio-fg:#6d28d9;--vz-vio-bg:#efe7fe;
--vz-err-fg:#b42318;--vz-err-bg:#fde9e7;--vz-neu-fg:#475467;--vz-neu-bg:#eef0f3;--vz-miss-fg:#344054;--vz-miss-bg:#e4e7ec;--vz-ink:#151a23;--vz-sub:#5d6778;--vz-mark:#3d5afe;--vz-mark2:#1e2f9e;--vz-track:#e4e7ec;--vz-panel:#ffffff}
:root[data-theme=dark]{--vz-ok-fg:#4ade80;--vz-ok-bg:#0f2a1c;--vz-warn-fg:#fbbf24;--vz-warn-bg:#2d2008;--vz-info-fg:#7cb4fb;--vz-info-bg:#0f213d;--vz-vio-fg:#b9a2fc;--vz-vio-bg:#221a3d;
--vz-err-fg:#f88b8b;--vz-err-bg:#2f1214;--vz-neu-fg:#aab4c3;--vz-neu-bg:#1e2531;--vz-miss-fg:#d0d6e0;--vz-miss-bg:#2a313d;--vz-ink:#e6e9ef;--vz-sub:#a3adbd;--vz-mark:#7088ff;--vz-mark2:#c7d0ff;--vz-track:#2a313d;--vz-panel:#131820}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--vz-ok-fg:#4ade80;--vz-ok-bg:#0f2a1c;--vz-warn-fg:#fbbf24;--vz-warn-bg:#2d2008;--vz-info-fg:#7cb4fb;--vz-info-bg:#0f213d;--vz-vio-fg:#b9a2fc;--vz-vio-bg:#221a3d;
--vz-err-fg:#f88b8b;--vz-err-bg:#2f1214;--vz-neu-fg:#aab4c3;--vz-neu-bg:#1e2531;--vz-miss-fg:#d0d6e0;--vz-miss-bg:#2a313d;--vz-ink:#e6e9ef;--vz-sub:#a3adbd;--vz-mark:#7088ff;--vz-mark2:#c7d0ff;--vz-track:#2a313d;--vz-panel:#131820}}
/* ---- 3. huy hiệu .vb + chữ phụ .vz-sub ---- */
.vb{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:620;padding:1px 8px;border-radius:99px;white-space:nowrap;line-height:1.6;border:1px solid transparent}
.vb i{font-style:normal;font-weight:700}.vb .mono{font-size:11px}
.vb-ok{background:var(--vz-ok-bg);color:var(--vz-ok-fg)}.vb-warn{background:var(--vz-warn-bg);color:var(--vz-warn-fg)}.vb-info{background:var(--vz-info-bg);color:var(--vz-info-fg)}
.vb-vio{background:var(--vz-vio-bg);color:var(--vz-vio-fg)}.vb-err{background:var(--vz-err-bg);color:var(--vz-err-fg)}.vb-neu{background:var(--vz-neu-bg);color:var(--vz-neu-fg)}
.vb-miss{background:var(--vz-miss-bg);color:var(--vz-miss-fg);border:1px dashed var(--vz-miss-fg)}
.vz-sub{color:var(--vz-sub);font-size:12px}.vz-tz{color:var(--vz-sub);font-size:10.5px}
/* ---- 4. token bổ sung #398: chữ, cỡ, khoảng cách, bo góc (giá trị lấy từ app.html; terminal dùng cỡ "dense") ---- */
:root{--kc-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--kc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--kc-fs-xs:11px;--kc-fs-s:12px;--kc-fs-m:13px;--kc-fs:14px;--kc-fs-h:18px;--kc-fs-dense:12px;
--kc-s1:4px;--kc-s2:8px;--kc-s3:12px;--kc-s4:16px;--kc-s5:24px;--kc-r-s:6px;--kc-r:8px;--kc-r-l:12px;--kc-r-pill:99px;--kc-tap:36px}

/* ---- 5. thành phần chung #398 ---- */
/* badge trạng thái executor: <span class="kc-st" data-st="RUNNING">RUNNING</span> */
.kc-st{display:inline-flex;align-items:center;gap:5px;font:700 var(--kc-fs-xs)/1.6 var(--kc-mono);padding:1px 8px;border-radius:var(--kc-r-pill);white-space:nowrap;border:1px solid transparent;
 background:var(--vz-neu-bg);color:var(--vz-neu-fg)}
.kc-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.kc-st[data-st=RUNNING]{background:var(--vz-ok-bg);color:var(--vz-ok-fg)}
.kc-st[data-st=HALT],.kc-st[data-st=KILL],.kc-st[data-st=ERROR]{background:var(--vz-err-bg);color:var(--vz-err-fg);border-color:currentColor}
.kc-st[data-st=STALE]{background:var(--vz-warn-bg);color:var(--vz-warn-fg);border-color:currentColor}
/* nhãn bắt buộc: DEMO + RESEARCH/UNCALIBRATED */
.kc-demo{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--kc-fs-s);padding:2px 10px;border-radius:var(--kc-r-s);
 background:var(--vz-warn-bg);color:var(--vz-warn-fg);border:1px solid currentColor;white-space:nowrap}
.kc-research{display:inline-flex;align-items:center;font-weight:700;font-size:var(--kc-fs-xs);padding:1px 8px;border-radius:var(--kc-r-pill);
 background:var(--vz-vio-bg);color:var(--vz-vio-fg);white-space:nowrap}
/* khối trạng thái dữ liệu: data-kc-state = loading | empty | error | stale */
.kc-state{padding:var(--kc-s2) var(--kc-s3);border-radius:var(--kc-r);font-size:var(--kc-fs-s);border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.kc-state b:first-child{margin-right:4px}
.kc-state[data-kc-state=loading]{color:var(--vz-neu-fg);border-style:dashed}
.kc-state[data-kc-state=empty]{color:var(--vz-neu-fg)}
.kc-state[data-kc-state=error]{background:var(--vz-err-bg);color:var(--vz-err-fg);border-color:currentColor}
.kc-state[data-kc-state=stale]{background:var(--vz-warn-bg);color:var(--vz-warn-fg);border-color:currentColor}
/* nút nguy hiểm (KILL) — dùng ở terminal; nhãn rõ, vùng chạm ≥ --kc-tap */
.kc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--kc-tap);padding:0 14px;border-radius:var(--kc-r);border:1px solid var(--line);
 background:var(--panel);color:var(--text);font:600 var(--kc-fs-m)/1 var(--kc-font);cursor:pointer;text-decoration:none}
.kc-btn:disabled{opacity:.55;cursor:default}
.kc-btn.danger{background:var(--vz-err-bg);color:var(--vz-err-fg);border-color:currentColor}
.kc-btn:focus-visible,.kc-in:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kc-in{width:100%;min-height:var(--kc-tap);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--kc-r);padding:6px 10px;font:inherit}

/* ---- 6. board Futures (#255) trong tab "Thị trường" của terminal — thành phần của app.html, GIỚI HẠN trong .kc-board ---- */
.kc-board{font:var(--kc-fs-m)/1.5 var(--kc-font);color:var(--text);display:grid;gap:var(--kc-s3);min-width:0}
.kc-board>*{min-width:0}
.kc-board .mono{font-family:var(--kc-mono)}.kc-board .num{font-variant-numeric:tabular-nums}
.kc-board .small{font-size:var(--kc-fs-s)}.kc-board .muted{color:var(--muted)}
.kc-board .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--kc-r-l)}
.kc-board .card-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:var(--kc-s3) var(--kc-s4);border-bottom:1px solid var(--line2)}
.kc-board .card-h h2,.kc-board .card-h h3{font-size:13.5px;margin:0;font-weight:620}.kc-board .card-h .sub{color:var(--muted);font-size:var(--kc-fs-s)}
.kc-board .card-b{padding:var(--kc-s3) var(--kc-s4)}
.kc-board summary.card-b{cursor:pointer;font-weight:600}
.kc-board .banner{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:10px}
.kc-board .banner.warn{background:var(--vz-warn-bg);color:var(--vz-warn-fg)}.kc-board .banner.err{background:var(--vz-err-bg);color:var(--vz-err-fg)}
.kc-board .banner.info{background:var(--vz-info-bg);color:var(--vz-info-fg)}
.kc-board .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kc-board table{width:100%;border-collapse:collapse;font-size:var(--kc-fs-m)}
.kc-board th{text-align:left;font-size:var(--kc-fs-xs);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap;position:static}
.kc-board td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top;white-space:normal}.kc-board tr:last-child td{border-bottom:0}
.kc-board td.r,.kc-board th.r{text-align:right}
.kc-board .vz-intro{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}.kc-board .vz-intro h2{margin:0;font-size:15px}
.kc-board .vz-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--kc-s3)}
.kc-board .vz-kpi{padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}.kc-board .vz-kpi .l{color:var(--vz-sub);font-size:var(--kc-fs-s);font-weight:600}
.kc-board .vz-kpi .vb{white-space:normal;overflow-wrap:anywhere}
.kc-board .fu-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.kc-board .fu-tags .vb{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.kc-board .fu-tbl td,.kc-board .fu-tbl th{vertical-align:top;padding-left:9px;padding-right:9px}.kc-board .fu-tbl td:first-child,.kc-board .fu-tbl th:first-child{padding-left:16px}
.kc-board .fu-tbl td .num{white-space:nowrap}
.kc-board .fu-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;font-size:var(--kc-fs-m);padding:12px 16px}.kc-board .fu-kv>div{min-width:0;overflow-wrap:anywhere}
.kc-board .fu-kv>div:nth-child(odd){color:var(--vz-sub)}
.kc-board .fu-h{font-weight:650;font-size:var(--kc-fs-m);margin:12px 16px 4px}.kc-board .fu-note{font-size:var(--kc-fs-s);color:var(--vz-sub);padding:6px 16px 12px;overflow-wrap:anywhere}
.kc-board .fu-list{margin:6px 0;padding-left:20px;font-size:var(--kc-fs-m)}.kc-board .fu-list li{margin:3px 0;overflow-wrap:anywhere}
.kc-board .fu-src .mono,.kc-board .banner code,.kc-board .kc-wrap{overflow-wrap:anywhere}
.kc-board .kc-nowrap{white-space:nowrap}.kc-board .kc-b{font-weight:650}.kc-board .kc-mt{margin-top:6px}.kc-board .kc-m0{margin:12px 16px 0}
@media(max-width:560px){.kc-board .fu-kv{grid-template-columns:minmax(0,1fr);gap:0}.kc-board .fu-kv>div:nth-child(even){margin-bottom:6px}}