/* ============ Chế độ thu thập dữ liệu + Bộ não cũ/mới ============
   Dùng lại design token của app.css (:root). KHÔNG khai báo token mới.
   Tiền tố .cm- (collection mode) và .bv- (brain verdict) để không đụng phần khác. */

.cm-panel, .bv-panel { min-width: 0; }
.cm-panel *, .bv-panel * { min-width: 0; }

/* ---------- Băng cảnh báo: thứ to nhất, đỏ nhất, không né được ---------- */
/* audit/52 — băng này nay là MỘT DÒNG (xem .one-line trong app.css). Nó không
   còn là một khối đỏ 15 dòng ở đầu màn hình: khối đó bị lướt qua, và một cảnh
   báo bị lướt qua thì bằng không có. Toàn bộ phần giải thích chuyển sang thẻ
   chi tiết ở tab Hệ thống AI. Các class .cm-banner-* bên dưới GIỮ LẠI cho
   những nơi còn dựng băng dài (tab Thành tích thật gọi lại cùng hàm). */
.cm-banner {
  margin: 12px 0;
}
.cm-banner.one-line {
  border-color: rgba(234, 57, 67, .5);
  background: linear-gradient(180deg, rgba(234, 57, 67, .14), rgba(234, 57, 67, .04));
}
.cm-banner.one-line b { color: #ff8f96; }
.cm-banner-top { display: flex; gap: 11px; align-items: flex-start; }
.cm-banner-ico { font-size: 20px; line-height: 1.2; flex: none; }
.cm-banner-title {
  font-size: clamp(15px, 2.6vw, 18px); font-weight: 800; color: #ff8f96;
  line-height: 1.3; overflow-wrap: anywhere;
}
.cm-banner-lead {
  font-size: 12.5px; color: var(--dim); margin-top: 5px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.cm-banner-lead b { color: var(--text); }
.cm-banner-hard {
  margin-top: 11px; padding: 10px 11px; border-radius: var(--radius-sm);
  background: rgba(234, 57, 67, .14); border: 1px solid rgba(234, 57, 67, .34);
  color: #ffc4c8; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere;
}
.cm-banner-hard b { color: #fff; }
.cm-banner-foot { margin-top: 8px; font-size: 12px; color: var(--dim); }
.cm-banner-foot b { color: var(--amber); }

/* ---------- Trạng thái bật/tắt ---------- */
.cm-state {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: 14px;
}
.cm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cm-state.on  .cm-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(240, 185, 11, .16); }
.cm-state.off .cm-dot { background: var(--faint); }
.cm-state.on  b { color: var(--amber); }
.cm-state.off b { color: var(--dim); }
.cm-state-s { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }

/* ---------- Các dòng số ---------- */
.cm-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.cm-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border-soft);
}
.cm-row:first-child { border-top: 0; }
.cm-k { font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.cm-v { font-size: 15px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.cm-arrow { font-size: 11.5px; font-weight: 400; color: var(--faint); }
.cm-sub {
  font-size: 11.5px; color: var(--faint); line-height: 1.55;
  padding: 0 0 7px; overflow-wrap: anywhere;
}
.cm-sub b { color: var(--dim); }
.cm-sub code { color: var(--amber); font-size: 11px; }
.cm-reason {
  margin-top: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border-soft);
  font-size: 12px; color: var(--dim); line-height: 1.55; overflow-wrap: anywhere;
}
.cm-unknown {
  margin-top: 12px; padding: 10px 11px; border-radius: var(--radius-sm);
  background: rgba(240, 185, 11, .09); border: 1px solid rgba(240, 185, 11, .32);
  color: #f5cf5c; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere;
}
.cm-unknown code { color: var(--amber); }

/* ---------- Bảng điểm chiến lược (bộ não đang cầm lái vs mốc lịch sử) ---------- */
/* Phụ đề trong <h2>: nhãn vai trò `incumbent`/`challenger` mô tả LỊCH SỬ, không
   mô tả ai cầm lái hôm nay — xem đầu brainVerdict.js. Nói ra ngay trên tiêu đề
   để không ai phải đọc code mới hiểu. */
.bv-h2s { color: var(--faint); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.bv-verdict {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 12px; padding: 12px 13px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2);
}
.bv-verdict.ok   { border-color: rgba(22, 199, 132, .38); background: rgba(22, 199, 132, .05); }
.bv-verdict.bad  { border-color: rgba(234, 57, 67, .42);  background: rgba(234, 57, 67, .05); }
.bv-verdict.warn { border-color: rgba(240, 185, 11, .38); background: rgba(240, 185, 11, .04); }
.bv-ico { font-size: 19px; line-height: 1.2; flex: none; }
.bv-title {
  font-size: clamp(15px, 2.6vw, 18px); font-weight: 800; line-height: 1.3;
  overflow-wrap: anywhere;
}
.bv-verdict.ok   .bv-title { color: var(--long); }
.bv-verdict.bad  .bv-title { color: #ff8f96; }
.bv-verdict.warn .bv-title { color: #f5cf5c; }
.bv-verdict.dim  .bv-title { color: var(--dim); }
.bv-lead { font-size: 12.5px; color: var(--dim); margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }

.bv-sides {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-top: 11px;
}
.bv-side {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 11px; background: rgba(0, 0, 0, .18); min-width: 0;
}
.bv-side-k {
  font-size: 10.5px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .04em; overflow-wrap: anywhere;
}
.bv-side-v { font-size: 16px; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.bv-side-s { font-size: 11.5px; color: var(--dim); margin-top: 3px; overflow-wrap: anywhere; }

/* Khối "vì sao ở đây không có con số" — cố ý chiếm chỗ mà một con số đã chiếm. */
.bv-blocked {
  margin-top: 11px; padding: 12px 13px; border-radius: var(--radius-sm);
  border: 1px dashed rgba(234, 57, 67, .38); background: rgba(234, 57, 67, .05);
}
.bv-blocked-h { font-size: 13px; font-weight: 700; color: #ff8f96; overflow-wrap: anywhere; }
.bv-blocked p {
  font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-top: 7px;
  overflow-wrap: anywhere;
}
.bv-blocked p b { color: var(--text); }
.bv-blocked code { color: var(--amber); font-size: 11.5px; }
.bv-reason { font-style: italic; }
.bv-blocked-foot { color: var(--faint) !important; font-size: 11.5px !important; }

.bv-edge {
  margin-top: 11px; padding: 12px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: rgba(0, 0, 0, .18);
}
.bv-edge-k {
  font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em;
}
.bv-edge-v { font-size: 26px; font-weight: 800; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.bv-edge-s { font-size: 11.5px; color: var(--dim); margin-top: 3px; overflow-wrap: anywhere; }

.bv-note {
  margin-top: 11px; font-size: 12px; color: var(--dim); line-height: 1.6;
  font-style: italic; overflow-wrap: anywhere;
}
.bv-warn {
  margin-top: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(240, 185, 11, .09); border: 1px solid rgba(240, 185, 11, .3);
  color: #f5cf5c; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere;
}
.bv-warn b { color: var(--amber); }
.bv-gates { margin-top: 12px; }
.bv-gates-h { font-size: 12.5px; font-weight: 700; color: var(--dim); overflow-wrap: anywhere; }
.bv-gates ol { margin: 7px 0 0; padding-left: 20px; }
.bv-gates li {
  font-size: 11.5px; color: var(--faint); line-height: 1.6; margin-bottom: 5px;
  overflow-wrap: anywhere;
}
.bv-foot {
  margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--faint); line-height: 1.55; overflow-wrap: anywhere;
}
.bv-foot b { color: var(--dim); }

/* ---------- 375px ---------- */
@media (max-width: 560px) {
  .cm-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cm-v { text-align: left; font-size: 16px; }
  .bv-sides { grid-template-columns: minmax(0, 1fr); }
  .bv-edge-v { font-size: 22px; }
}