/* =============================================================================
 * style.css — §57 thẩm mỹ: navy đậm / đen / xám trung tính / chữ trắng
 *             accent cyan-lam · cam WARNING · đỏ CRITICAL · lục NOMINAL
 *             "không neon quá mức"
 *
 * LUẬT MÀU: màu KHÔNG BAO GIỜ là kênh thông tin duy nhất. Mọi trạng thái đều có
 * thêm ít nhất một trong: ký hiệu hình dạng (■ ◇ ▨ — △ ✕ ?), kiểu nét (liền/đứt/
 * chấm), trọng lượng chữ, hoặc nhãn văn bản. Tắt hết màu đi, màn hình vẫn đọc được.
 *
 * LUẬT CHỮ: KHÔNG `text-transform: uppercase` ở bất kỳ đâu — tiếng Việt viết hoa
 * toàn bộ bị phá dấu. Nhấn mạnh bằng letter-spacing và màu nhạt.
 * ========================================================================== */

:root {
  --bg:        #080b12;
  --bg-1:      #0d1220;
  --bg-2:      #131a2b;
  --bg-3:      #1b2438;
  --line:      #26314a;
  --line-2:    #38455f;
  --tx:        #e6ebf5;
  --tx-2:      #9aa7bd;
  --tx-3:      #6b7a93;

  --accent:    #4bb8d8;   /* cyan-lam — accent chính */
  --accent-d:  #1d566b;
  --ok:        #58b37a;   /* NOMINAL */
  --warn:      #d9902f;   /* WARNING */
  --crit:      #d8574f;   /* CRITICAL */
  --stale:     #b0803a;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

#app {
  max-width: 1480px;
  margin: 0 auto;
  padding: 12px 16px 64px;
}

.boot { color: var(--tx-3); padding: 40px; }
.fatal { border: 1px solid var(--crit); padding: 16px; border-radius: 3px; }
.fatal h1 { font-size: 16px; color: var(--crit); margin: 0 0 8px; }

.empty, .hint {
  color: var(--tx-3);
  font-size: 12px;
  margin: 4px 0;
}
.hint { max-width: 68ch; }

/* ===========================================================================
 * HEADER — hai đồng hồ + DATA AGE luôn có mặt, ở cả hai mật độ
 * ======================================================================== */

.hdr {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 8px 12px;
  margin-bottom: 10px;
}
.hdr-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hdr-top { justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.hdr-craft { font-size: 15px; letter-spacing: 0.06em; color: var(--tx); }
.hdr-sub { color: var(--tx-3); font-size: 12px; margin-left: 8px; }
.hdr-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.badge {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--tx-2);
  letter-spacing: 0.04em;
}
.badge-mode.mode-NOMINAL    { border-color: var(--accent-d); color: var(--accent); }
.badge-mode.mode-DIAGNOSTIC { border-color: var(--warn); color: var(--warn); background: #2a1e0d; }
.badge-link.link-OPEN   { border-color: #2c5c40; color: var(--ok); }
.badge-link.link-LOS    { border-color: var(--crit); color: var(--crit); }
.badge-link.link-CLOSED { border-color: var(--line-2); color: var(--tx-3); }
.badge-deferred { border-color: var(--warn); color: var(--warn); }

.hdr-clocks { gap: 22px; }
.clk { display: flex; flex-direction: column; gap: 1px; }
.clk-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; }
.clk-v { font-size: 17px; color: var(--tx); }
.clk-note { font-size: 10px; color: var(--tx-3); max-width: 30ch; }
.clk-age .clk-v { color: var(--accent); }
.clk-age.is-old .clk-v { color: var(--stale); }
.clk-age.is-old::before { content: "▨ "; color: var(--stale); }

.hdr-blind {
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px dashed var(--warn);
  color: var(--warn);
  font-family: var(--mono);
  font-size: 12px;
}

/* ===========================================================================
 * BANNERS
 * ======================================================================== */

.banners { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-left-width: 4px;
  border-radius: 2px;
  background: var(--bg-1);
  font-size: 13px;
}
.banner-glyph { font-size: 15px; }
.banner-sev { font-size: 11px; letter-spacing: 0.05em; }
.banner-sub, .banner-time { font-size: 11px; color: var(--tx-3); }
.banner-msg { flex: 1 1 320px; }
.banner-count { font-family: var(--mono); color: var(--warn); }
.banner.sev-INFO       { border-left-color: var(--line-2); }
.banner.sev-NOTICE     { border-left-color: var(--accent); }
.banner.sev-WARNING    { border-left-color: var(--warn); }
.banner.sev-CRITICAL   { border-left-color: var(--crit); }
.banner.sev-MISSION_LOSS { border-left-color: var(--crit); background: #1d0f0f; }
.banner-stop  { border-left-color: var(--accent); }
.banner-err   { border-left-color: var(--crit); color: var(--crit); }
.banner-loss  { border-left-color: var(--crit); background: #1d0f0f; }
.banner-auto  { border-left-color: var(--warn); color: var(--tx-2); }

/* ===========================================================================
 * NĂM CHỈ SỐ — T-D1: cùng grid, cùng bề rộng, cùng toạ độ X ở CẢ HAI mật độ.
 * DIAGNOSTIC mọc thêm ở DƯỚI, không sắp xếp lại ở trên.
 * ======================================================================== */

.strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.tile {
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-2);
  border-radius: 2px;
  background: var(--bg-1);
  padding: 8px 10px;
  min-height: 78px;
}
.tile-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.09em; margin-bottom: 3px; }
.tile-v { font-size: 18px; }
.tile-n { font-size: 11px; color: var(--tx-3); margin-top: 2px; }
#tilePower { border-top-color: var(--accent-d); }

/* Trong DIAGNOSTIC dải chỉ số nén lại theo CHIỀU CAO, không đổi chiều ngang. */
[data-density="DIAGNOSTIC"] .tile { min-height: 62px; padding: 6px 10px; }
[data-density="DIAGNOSTIC"] .tile-v { font-size: 15px; }

/* ===========================================================================
 * CÚ CHUYỂN MẬT ĐỘ — 220 ms ease-out, chỉ phần MỌC THÊM chuyển động
 * ======================================================================== */

[data-density="NOMINAL"]    .diag-only { display: none; }
[data-density="DIAGNOSTIC"] .nom-only  { display: none; }

@keyframes growIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.switching .diag-grid,
.switching .diag-exit { animation: growIn 220ms ease-out; }
.switching .tile { transition: min-height 220ms ease-out, padding 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .switching .diag-grid, .switching .diag-exit { animation: none; }
}

/* ===========================================================================
 * PHẦN DẪN · VIỆC TIẾP THEO · TRỢ GIÚP
 *
 * Đặt ngay cạnh khối [data-density] ở trên để người sửa sau thấy ngay: lớp dẫn
 * CỐ Ý không mang class nom-only/diag-only — nó phải sống qua cả hai mật độ.
 *
 * Không lớp phủ toàn màn hình, không làm mờ dashboard: che màn hình chính là thứ
 * đẩy người mới ra xa nó. Chỉ một thẻ ở góc và một vòng viền trên phần tử THẬT.
 * ======================================================================== */

/* Thẻ nổi ở góc dưới không được phép che dòng cuối của trang: nới chân #app ra
 * đúng bằng chiều cao tối đa của nó (ghi đè padding ở đầu file, cùng độ đặc hiệu). */
#app { padding-bottom: 220px; }

.onb {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  max-width: 380px;
  width: calc(100vw - 32px);
}

.onb-card {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  padding: 8px 10px 10px;
}

.onb-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  margin-bottom: 6px;
}
.onb-title {
  flex: 1 1 auto;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--accent);
}
.onb-ico { flex: 0 0 auto; }

.onb-text   { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--tx); }
.onb-text-2 { color: var(--tx-2); }
.onb-hint   { margin: 0 0 6px; font-size: 12px; color: var(--tx-3); }
.onb-acts   { display: flex; flex-wrap: wrap; gap: 6px; }

/* Làm nổi phần tử THẬT: outline không chiếm chỗ nên không có một pixel nào bị
 * xô lệch khi vòng viền xuất hiện — người chơi không phải tìm lại nút. */
.onb-spot {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
  animation: onbPulse 1.8s ease-in-out infinite;
}
@keyframes onbPulse {
  0%, 100% { outline-color: var(--accent); }
  50%      { outline-color: var(--accent-d); }
}

/* Bấm được vào một con số để hỏi "nó đến từ đâu" — nhãn nguồn gốc và ô DATA AGE
 * là affordance thật của mọi ca trực, không phải đạo cụ của phần dẫn. */
#ageBox[role="button"], #tilePowerN[role="button"] { cursor: help; }
#ageBox[role="button"]:hover, #tilePowerN[role="button"]:hover { color: var(--accent); }

.onb :focus-visible,
#ageBox:focus-visible,
#tilePowerN:focus-visible,
.onb-help :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- bảng trợ giúp: lớp phủ cuộn được, đóng bằng Esc hoặc `?` ---------- */
.onb-help {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 6, 11, 0.78);
  overflow-y: auto;
  padding: 5vh 16px;
}
.onb-help-panel {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--bg-1);
  padding: 14px 18px 22px;
}
.onb-help-head {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
  position: sticky; top: 0;
  background: var(--bg-1);
}
.onb-help-title { flex: 1 1 auto; margin: 0; font-size: 15px; letter-spacing: 0.05em; color: var(--tx); }
.onb-help-sec { margin: 0 0 16px; }
.onb-help-h {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--accent);
}
.onb-help-l {
  margin: 0 0 5px;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tx-2);
}

@media (prefers-reduced-motion: reduce) {
  .onb-spot { animation: none; outline-width: 3px; }
}
@media (max-width: 720px) {
  .onb { left: 12px; right: 12px; bottom: 12px; max-width: none; width: auto; }
}

/* ===========================================================================
 * ĐIỀU KHIỂN THỜI GIAN — biến mất trong DIAGNOSTIC (khoá cứng 1×)
 * ======================================================================== */

.timebar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-1);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.warp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.warp-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; }
.warp-steps { display: flex; gap: 3px; }
.warp-cap { font-size: 11px; color: var(--tx-3); }

.skip-panel {
  flex: 1 1 100%;
  border: 1px dashed var(--warn);
  border-radius: 2px;
  padding: 8px 10px;
  background: #16110a;
}
.skip-title { color: var(--warn); letter-spacing: 0.06em; margin-bottom: 4px; }
.skip-warn { font-size: 13px; }
.skip-inflight { font-size: 12px; color: var(--warn); margin-top: 3px; }
.skip-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ===========================================================================
 * NÚT
 * ======================================================================== */

.btn {
  font-family: var(--sans);
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--bg-3);
  color: var(--tx);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-xs { font-size: 11px; padding: 3px 7px; }
.btn-primary { border-color: var(--accent-d); color: var(--accent); }
.btn-warn    { border-color: var(--warn); color: var(--warn); }
.btn-danger  { border-color: var(--crit); color: var(--crit); }
.btn-ghost   { background: transparent; color: var(--tx-2); }
.btn-skip    { border-color: var(--accent); color: var(--accent); font-size: 13px; padding: 6px 14px; }
.btn-diag    { margin-left: auto; }
.btn-warp    { font-size: 11px; padding: 3px 7px; min-width: 40px; }
.btn-warp.is-on  { border-color: var(--accent); color: var(--accent); background: #0f2733; }
.btn-warp.is-rec { border-style: dashed; }

.blink { animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; text-decoration: underline; } }

/* ===========================================================================
 * PANEL
 * ======================================================================== */

.panel {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-1);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.panel-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--tx-2);
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
.panel-sub { font-size: 11px; color: var(--tx-3); letter-spacing: 0.05em; margin-bottom: 4px; }

.diag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 1080px) { .diag-grid { grid-template-columns: 1fr; } }

.diag-exit { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ===========================================================================
 * VALUE — bất biến I-6. Bốn kênh mã hoá, màu là kênh DƯ THỪA thứ tư.
 * ======================================================================== */

.val {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 0;
}
.val-glyph { font-size: 13px; width: 1em; text-align: center; }
.val-body { display: inline-flex; flex-direction: column; gap: 0; }
.val-label { font-size: 10px; color: var(--tx-3); letter-spacing: 0.07em; }
.val-num { font-family: var(--mono); font-size: 16px; }
.val-prov { font-size: 10px; color: var(--tx-3); font-family: var(--mono); }
.val-tvalid { font-size: 10px; color: var(--tx-3); font-family: var(--mono); }
.val-tvalid.is-expired { color: var(--stale); }
.val-compact .val-num { font-size: 12px; }
.val-compact .val-prov, .val-compact .val-tvalid { font-size: 9px; }

/* kênh 2 — trọng lượng chữ */
.weight-bold   { font-weight: 700; }
.weight-normal { font-weight: 400; }
.weight-italic { font-weight: 400; font-style: italic; }

/* kênh 4 — màu, luôn dư thừa với glyph + weight + provText */
.prov-CONFIRMED  .val-glyph, .prov-CONFIRMED  .val-num { color: var(--ok); }
.prov-PROPAGATED .val-glyph, .prov-PROPAGATED .val-num { color: var(--accent); }
.prov-STALE      .val-glyph, .prov-STALE      .val-num { color: var(--stale); }
.prov-NEVER      .val-glyph, .prov-NEVER      .val-num { color: var(--tx-3); }

/* ===========================================================================
 * LỆNH
 * ======================================================================== */

.cmd-line { display: flex; gap: 8px; }
.cmd-text {
  flex: 1;
  background: #05070d;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--tx);
  padding: 7px 9px;
  font-size: 13px;
}
.cmd-text:focus { outline: none; border-color: var(--accent); }
.cmd-text:disabled { opacity: 0.5; border-style: dashed; }
.cmd-status { font-size: 11px; margin-top: 4px; font-family: var(--mono); }
.cmd-status.is-ok  { color: var(--tx-3); }
.cmd-status.is-err { color: var(--crit); }
.cmd-eta { font-size: 12px; color: var(--tx-2); margin-top: 3px; }
.cmd-eta.is-locked { color: var(--warn); }

.cmd-builder {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 10px;
  background: var(--bg-2);
}
.bld-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.bld-block { border-top: 1px solid var(--line); padding-top: 7px; margin-bottom: 7px; }
.bld-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.07em; }
.bld-k-wide { display: block; margin-bottom: 3px; }
.bld-hint { font-size: 11px; color: var(--tx-3); margin: 2px 0 6px; max-width: 72ch; }
.bld-plabel { font-family: var(--mono); font-size: 11px; color: var(--tx-3); }
.bld-actions { display: flex; gap: 8px; margin-top: 6px; }

select, input[type="text"], input:not([type]) {
  background: #05070d;
  border: 1px solid var(--line-2);
  color: var(--tx);
  border-radius: 2px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--mono);
}
select:focus, input:focus { outline: 1px solid var(--accent); }

.pred { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.pred-join { color: var(--warn); }
.bld-margin { margin-top: 6px; }
.margin-h { font-size: 10px; color: var(--tx-3); letter-spacing: 0.05em; }
.margin-i { font-size: 12px; color: var(--accent); font-family: var(--mono); }
.margin-warn { font-size: 12px; color: var(--warn); max-width: 74ch; }

.confirm {
  margin-top: 8px; padding: 7px 9px;
  border: 1px dashed var(--crit);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px;
}

/* hàng đợi */
.queue { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.q {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--bg-2);
}
.q-id { color: var(--tx-3); font-size: 11px; }
.q-text { flex: 1 1 240px; }
.q-status { font-size: 11px; letter-spacing: 0.04em; }
.q-hint, .q-cond, .q-sent, .q-eta, .q-note, .q-irrev, .q-hold { font-size: 11px; color: var(--tx-3); }
.q-cond { color: var(--accent); }
.q-irrev { border: 1px solid var(--line-2); padding: 0 5px; border-radius: 2px; }
.q-IN_FLIGHT { border-left-color: var(--accent); }
.q-UNKNOWN   { border-left-color: var(--warn); border-left-style: dashed; }
.q-UNKNOWN .q-status { color: var(--warn); }
.q-DONE      { border-left-color: var(--ok); }
.q-SKIPPED, .q-EXPIRED, .q-ABORTED, .q-REJECTED { border-left-color: var(--crit); }
.q-SKIPPED .q-status, .q-EXPIRED .q-status, .q-ABORTED .q-status { color: var(--crit); }
.q-HELD      { border-left-color: var(--warn); }

/* ===========================================================================
 * TELEMETRY
 * ======================================================================== */

.tel-compare { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
#tempChart { width: 100%; height: 120px; background: #05070d; border: 1px solid var(--line); }
.chart-l  { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.chart-l0 { stroke: var(--crit); }
.chart-l1 { stroke: var(--accent); }
.chart-l2 { stroke: var(--ok); }
.chart-empty { fill: var(--tx-3); font-size: 11px; font-family: var(--mono); }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 5px; }
.lg-i { display: inline-flex; align-items: center; gap: 5px; }
.lg-sw { width: 30px; height: 10px; }
.lg-t { font-size: 11px; color: var(--tx-3); }
.lg-spread { font-size: 11px; color: var(--warn); font-family: var(--mono); }

.tel-rows { display: flex; flex-direction: column; gap: 5px; }
.tel-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 6px;
  border-left: 2px solid transparent;
}
.tel-row.is-pinned { border-left-color: var(--accent-d); background: var(--bg-2); }
.tel-label { font-size: 11px; color: var(--tx-3); min-width: 110px; }
.tel-n { font-size: 10px; color: var(--tx-3); }
.tel-never { font-size: 11px; color: var(--stale); flex: 1 1 100%; }
.spark { width: 120px; height: 26px; background: #05070d; border: 1px solid var(--line); }
.spark-l { fill: none; stroke: var(--accent); stroke-width: 1.2; }

/* ===========================================================================
 * SỰ CỐ
 * ======================================================================== */

.anom {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 2px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
}
.anom.sev-WARNING     { border-left-color: var(--warn); }
.anom.sev-CRITICAL    { border-left-color: var(--crit); }
.anom.sev-NOTICE      { border-left-color: var(--accent); }
.anom.is-resolved     { border-left-color: var(--ok); opacity: 0.72; }
.anom-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.anom-glyph { font-size: 15px; }
.anom-title { flex: 1 1 240px; }
.anom-sub, .anom-time { font-size: 11px; color: var(--tx-3); }
.anom-gap { font-size: 11px; color: var(--warn); }
.anom-ok { font-size: 11px; color: var(--ok); }
.anom-brief { font-size: 13px; color: var(--tx-2); max-width: 78ch; }
.anom-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; margin: 9px 0 3px; }
.anom-sym, .anom-clues { margin: 0; padding-left: 18px; font-size: 12px; color: var(--tx-2); }
.anom-att { font-size: 11px; color: var(--warn); margin-top: 4px; }

.cause { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 12px; }
.cause-l { flex: 0 0 220px; }
.cause-bar { flex: 1 1 90px; height: 8px; background: var(--bg-3); border: 1px solid var(--line); }
.cause-fill { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--accent-d) 0 4px, transparent 4px 6px); }
.cause-p { width: 46px; text-align: right; color: var(--tx-2); }
.cause.is-out { opacity: 0.45; text-decoration: line-through; }
.cause-out { font-size: 10px; color: var(--tx-3); }

.act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.act-l { flex: 0 0 200px; }
.act-kind { font-size: 10px; color: var(--tx-3); border: 1px solid var(--line-2); padding: 0 5px; border-radius: 2px; }
.act-cost { font-size: 10px; color: var(--tx-3); }
.act.is-ran { opacity: 0.6; }
.act-ran { font-size: 10px; color: var(--ok); }

/* ===========================================================================
 * SƠ ĐỒ HỆ THỐNG
 * ======================================================================== */

#sysSvg { width: 100%; height: 270px; background: #05070d; border: 1px solid var(--line); }
.sys-edge { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.sys-edge-l { fill: var(--tx-3); font-size: 8px; font-family: var(--mono); }
.arw { fill: var(--line-2); }
.sys-box { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1.2; }
.sys-label { fill: var(--tx); font-size: 11px; font-family: var(--mono); text-anchor: middle; }
.sys-badge { fill: var(--tx-3); font-size: 11px; text-anchor: middle; }
.sys-node { cursor: pointer; }
.sys-node:hover .sys-box { stroke: var(--accent); }
.sys-node.is-sel .sys-box { stroke: var(--accent); stroke-width: 2; }
.sys-node.st-OK        .sys-box { stroke: #2c5c40; }
.sys-node.st-DEGRADED  .sys-box { stroke: var(--warn); stroke-dasharray: 5 3; }
.sys-node.st-DEGRADED  .sys-badge { fill: var(--warn); }
.sys-node.st-FAILED    .sys-box { stroke: var(--crit); stroke-width: 2.4; }
.sys-node.st-FAILED    .sys-badge { fill: var(--crit); }
.sys-node.st-UNKNOWN   .sys-box { stroke: var(--tx-3); stroke-dasharray: 1 3; }

.sys-detail { margin-top: 8px; font-size: 12px; }
.sd-h { color: var(--accent); }
.sd-r { color: var(--tx-2); }
.sd-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; margin: 6px 0 2px; }
.sd-e { font-size: 11px; color: var(--tx-2); }

/* ===========================================================================
 * BẢN ĐỒ
 * ======================================================================== */

#mapSvg { width: 100%; max-width: 420px; aspect-ratio: 1; background: #05070d; border: 1px solid var(--line); cursor: crosshair; }
.cell { stroke: #05070d; stroke-width: 0.3; }
.cell.is-fog      { fill: var(--bg-2); }
.cell.is-revealed { fill: var(--bg-3); }
.cell.is-revealed.sl-1 { fill: #17324a; }
.cell.is-revealed.sl-2 { fill: #1d4b5c; }
.cell.is-revealed.sl-3 { fill: #5c451d; }
.cell.is-revealed.sl-4 { fill: #5c211d; }
.fog-l { stroke: var(--line); stroke-width: 0.6; }
.map-path { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.map-sigma { fill: rgba(75, 184, 216, 0.14); stroke: var(--accent); stroke-width: 0.6; stroke-dasharray: 2 2; }
.rover-dot { fill: var(--tx); }
.rover-tick { fill: var(--accent); }
.tgt-cross { stroke: var(--warn); stroke-width: 1.2; }
.tgt-ring  { fill: none; stroke: var(--warn); stroke-width: 0.8; stroke-dasharray: 2 2; }
.map-legend { display: flex; gap: 14px; margin-top: 6px; }
.map-legend .lg-sw { width: 12px; height: 12px; }
.map-plan { margin-top: 8px; font-size: 12px; }
.plan { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.plan-k { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; }
.plan-r { color: var(--tx-2); }
.plan-hint { color: var(--tx-3); font-size: 12px; }
.plan-risk.r-lo { color: var(--ok); }
.plan-risk.r-md { color: var(--warn); }
.plan-risk.r-hi { color: var(--crit); }

/* ===========================================================================
 * TRUYỀN DẪN
 * ======================================================================== */

.tx-sub { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; margin: 9px 0 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.tx { margin-bottom: 8px; }
.tx-id { font-size: 11px; color: var(--tx-2); }
.tx-bar { position: relative; height: 10px; background: var(--bg-3); border: 1px solid var(--line); margin: 3px 0; }
.tx-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--accent-d) 0 6px, #0f2733 6px 10px); }
.tx-mark { position: absolute; top: -3px; width: 1px; height: 16px; background: var(--warn); }
.tx-mark::after { content: "▾"; position: absolute; top: -11px; left: -4px; color: var(--warn); font-size: 9px; }
.tx-legend { font-size: 11px; color: var(--tx-3); }
.hang { font-size: 12px; color: var(--warn); border-left: 2px solid var(--warn); padding-left: 7px; margin-bottom: 3px; }
.los-h { font-size: 11px; color: var(--crit); margin-top: 6px; }
.los-list { margin: 2px 0; padding-left: 18px; font-size: 12px; color: var(--tx-2); }

/* ===========================================================================
 * NHẬT KÝ
 * ======================================================================== */

.log-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.log-rows { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.lg { display: flex; gap: 10px; align-items: baseline; font-size: 12px; padding: 2px 5px; border-left: 2px solid transparent; }
.lg:nth-child(odd) { background: var(--bg-2); }
.lg-sct { color: var(--tx); font-size: 11px; }
.lg-mct { color: var(--tx-3); font-size: 11px; }
.lg-g   { width: 1em; }
.lg-sub { color: var(--tx-3); font-size: 11px; width: 76px; }
.lg-msg { flex: 1; color: var(--tx-2); }
.lg.sev-NOTICE   { border-left-color: var(--accent); }
.lg.sev-WARNING  { border-left-color: var(--warn); }
.lg.sev-CRITICAL, .lg.sev-MISSION_LOSS { border-left-color: var(--crit); }

/* ===========================================================================
 * CÔNG CỤ + CHÚ GIẢI
 * ======================================================================== */

.tools-row { display: flex; gap: 8px; margin-bottom: 8px; }
.legend { border-top: 1px solid var(--line); padding-top: 7px; }
.legend-h { font-size: 10px; color: var(--tx-3); letter-spacing: 0.08em; margin-bottom: 4px; }
.legend-i { font-size: 12px; color: var(--tx-2); font-family: var(--mono); }