/* PAYDAY — Strategist Minimal.
 *
 * ══ SÁU QUY TẮC BỐ CỤC, RÚT TỪ LẦN DỰNG HỎNG TRƯỚC ═══════════════════════
 * Lời chê nguyên văn: "bố cục như 1 trang Word bình thường".
 *
 *  1. không để MỘT cột chạy dọc suốt trang — mắt người quét NGANG
 *  2. mỗi trang đúng MỘT khu chiếm ưu thế thị giác
 *  3. tỉ lệ 2/3 + 1/3 lặp lại ở mọi trang → cảm giác một SẢN PHẨM
 *  4. trục dữ liệu chọn sao cho phần tử không che nhau
 *  5. góc nhìn mặc định phải kể được câu chuyện
 *  6. khoảng trống phải CÂN
 *
 * ══ VÀ MỘT LUẬT RIÊNG CỦA DỰ ÁN NÀY ══════════════════════════════════════
 * Trạng thái XẤU phải to hơn trạng thái tốt. Ở đây "không có gì xảy ra" nghĩa là
 * sắp trễ tiền nhà, nên nó không được trông như trạng thái nghỉ.
 */

:root {
  --bg:     #0b0a09;
  --pane:   #151311;
  --pane2:  #1d1a17;
  --ink:    #efeae3;
  --dim:    #9b9289;
  --faint:  #6a6158;
  --line:   #2c2723;
  --line2:  #201c19;

  --ok:     #4ad991;
  --warn:   #f0a63c;
  --bad:    #ff5f56;
  --lock:   #7c9fd6;   /* tiền đang khoá */
  --free:   #4ad991;   /* tiền tự do */

  --r: 6px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --t-micro: 9px;  --t-label: 10px; --t-body: 12px;
  --t-val:   14px; --t-num:   19px; --t-big: 34px; --t-hero: 68px;
}

[data-theme="light"] {
  --bg: #f5f3ef; --pane: #ffffff; --pane2: #f0ede8;
  --ink: #17150f; --dim: #5d564d; --faint: #8b8377;
  --line: #ddd8d0; --line2: #eae5dd;
  --ok: #16794a; --warn: #9a6410; --bad: #c0392b; --lock: #3c6bb0; --free: #16794a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: var(--t-body)/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 400; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }   /* CSS tác giả KHÔNG được đè thuộc tính này */

/* ── khung ───────────────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 64px; }

header.top {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.brand { font-family: var(--serif); font-size: 22px; letter-spacing: .01em; }
.brand em { font-style: normal; color: var(--dim); }
.spacer { flex: 1; }

nav.tabs { display: flex; gap: 2px; }
nav.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 6px 12px; cursor: pointer;
  font-size: var(--t-label); letter-spacing: .09em; text-transform: uppercase;
  transition: color .18s ease-out, border-color .18s ease-out;
}
nav.tabs button:hover { color: var(--ink); }
nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ok); }

.ghost {
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--dim); padding: 5px 11px; cursor: pointer; font-size: var(--t-label);
  transition: border-color .18s ease-out, color .18s ease-out;
}
.ghost:hover { border-color: var(--dim); color: var(--ink); }
.primary {
  background: var(--ink); color: var(--bg); border: 0; border-radius: var(--r);
  padding: 8px 16px; cursor: pointer; font-size: var(--t-body); font-weight: 600;
  transition: transform .16s ease-out, opacity .16s ease-out;
}
.primary:hover { transform: translateY(-1px); }
.primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ── DẢI MÔ PHỎNG: nguyên chiều ngang, không giấu ─────────────────────── */
.simband {
  background: var(--warn); color: #16120a;
  font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 7px; font-weight: 700;
}
/* Mất kết nối nặng hơn "số mô phỏng": số mô phỏng thì SAI NHƯNG BIẾT LÀ SAI,
   còn số cũ thì trông y hệt số đúng. Nên nó dùng màu cảnh báo mạnh hơn. */
.simband.bad { background: var(--bad); color: #fff; }

/* ── PHÁN QUYẾT — khu chiếm ưu thế thị giác của trang ─────────────────── */
.verdict {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--pane); padding: 30px 32px 26px;
  position: relative; overflow: hidden;
}
.verdict::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--dim);
}
.verdict[data-v="SPEND"]::before { background: var(--ok); }
.verdict[data-v="HOLD"]::before { background: var(--warn); }
.verdict[data-v="SHORTFALL"]::before { background: var(--bad); }
.verdict[data-v="BLOCKED"]::before { background: var(--dim); }

.vlabel {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 10px;
}
.vnum {
  font-size: var(--t-hero); line-height: 1; font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.vnum small { font-size: var(--t-big); color: var(--dim); font-weight: 400; margin-left: 8px; }
.vwhy { color: var(--dim); margin-top: 12px; font-size: var(--t-val); }

/* Trạng thái XẤU phải to hơn trạng thái tốt. */
.verdict[data-v="SHORTFALL"] { background: color-mix(in srgb, var(--bad) 10%, var(--pane)); border-color: var(--bad); }
.verdict[data-v="SHORTFALL"] .vnum { color: var(--bad); font-size: var(--t-big); }
.alarm {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--r);
  background: var(--bad); color: #fff;
}
.alarm b { display: block; font-size: var(--t-num); margin-bottom: 4px; }
.alarm span { opacity: .92; }

.missing { margin-top: 16px; display: grid; gap: 8px; }
.missing .row {
  display: flex; gap: 12px; align-items: baseline;
  border-left: 2px dashed var(--dim); padding-left: 12px;
}
.missing .row b { color: var(--ink); }
.missing .row span { color: var(--dim); font-size: var(--t-body); }

/* ── bốn ô số liệu — một HÀNG, mắt quét ngang ─────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.stat {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--pane); padding: 13px 15px;
}
.stat .k {
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.stat .v { font-size: var(--t-num); font-variant-numeric: tabular-nums; }
.stat .n { font-size: var(--t-micro); color: var(--faint); margin-top: 4px; }
.stat[data-known="no"] { border-style: dashed; }
.stat[data-known="no"] .v { color: var(--faint); }
/* Ô cảnh báo: viền và chữ đổi màu, KHÔNG chỉ dựa vào màu — có cả dấu ⚠ trong chữ,
   để người mù màu vẫn đọc ra. */
.stat[data-warn="yes"] { border-color: var(--bad); }
.stat[data-warn="yes"] .v { color: var(--bad); }
.stat[data-warn="yes"] .n { color: var(--bad); }

/* ── 2/3 + 1/3 — lặp lại ở mọi trang ──────────────────────────────────── */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 860px) { .split, .stats { grid-template-columns: 1fr; } }

.pane {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--pane); overflow: hidden;
}
.ph {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 15px; border-bottom: 1px solid var(--line2);
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
}
.ph b { font-weight: 600; }
.ph span { color: var(--faint); letter-spacing: 0; text-transform: none; }
.body { padding: 14px 15px; }

/* ── dòng thời gian tới kỳ lương ──────────────────────────────────────── */
.tl { display: grid; gap: 1px; background: var(--line2); }
.tl .item {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center;
  background: var(--pane); padding: 11px 15px;
  transition: background .16s ease-out;
}
.tl .item:hover { background: var(--pane2); }
.tl .d { font-size: var(--t-micro); color: var(--faint); letter-spacing: .04em; }
.tl .nm { display: flex; align-items: baseline; gap: 8px; }
.tl .nm b { font-weight: 500; }
.tl .amt { font-variant-numeric: tabular-nums; font-size: var(--t-val); }
.tl .item[data-basis="estimated"] .amt { color: var(--warn); }
.tl .item[data-basis="estimated"] .amt::before { content: "~"; opacity: .7; }

.tag {
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; color: var(--faint);
}
.tag[data-k="estimated"] { border-style: dashed; color: var(--warn); }
.tag[data-k="auto"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.tag[data-k="manual"] { color: var(--dim); }

/* ── thanh tiền: khoá vs tự do ────────────────────────────────────────── */
.bar { height: 26px; border-radius: 3px; overflow: hidden; display: flex; margin-bottom: 8px; }
.bar i { display: block; height: 100%; }
.bar .lock { background: var(--lock); }
.bar .res { background: color-mix(in srgb, var(--lock) 55%, var(--bg)); }
.bar .gas { background: var(--warn); }
.bar .free { background: var(--free); }
/* Khi thiếu: cả thanh biểu diễn thứ PHẢI TRẢ, và một vạch cho biết tiền tới đâu.
   Phần bên phải vạch là phần KHÔNG có tiền — nhuộm mờ đi để đọc ra ngay. */
.bar { position: relative; }
.bar[data-short="yes"] i { opacity: .42; }
.bar .mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--bad); opacity: 1 !important;
  box-shadow: 0 0 0 1px var(--bg);
}
.bar .mark::after {
  content: ""; position: absolute; left: 2px; top: 3px; bottom: 3px; width: 3px;
  background: linear-gradient(90deg, var(--bad), transparent);
}
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--t-micro); color: var(--dim); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

#prj { width: 100%; display: block; }

/* ── trạng thái rỗng phải DẠY được, không bao giờ để khung trống ──────── */
.empty { text-align: center; padding: 34px 20px; }
.empty .mark { font-size: 30px; color: var(--faint); margin-bottom: 10px; }
.empty h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 6px; }
.empty p { color: var(--dim); max-width: 380px; margin: 0 auto 16px; }
.empty .acts { display: flex; gap: 8px; justify-content: center; }

/* ── biểu mẫu ─────────────────────────────────────────────────────────── */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); padding: 9px 11px; transition: border-color .16s ease-out;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--dim); }
.field .hint { font-size: var(--t-micro); color: var(--faint); margin-top: 4px; }
.field .err { font-size: var(--t-micro); color: var(--bad); margin-top: 4px; }

/* ── ghi chú cố định dưới panel, KHÔNG phải tooltip ───────────────────── */
.pnote {
  border-top: 1px solid var(--line2); padding: 8px 15px; margin-top: auto;
  font-size: var(--t-micro); color: var(--dim); text-align: center;
}

/* ── bảng kiểm chín cổng ──────────────────────────────────────────────── */
.checks { display: grid; gap: 1px; background: var(--line2); }
.checks .c { display: grid; grid-template-columns: 18px 96px 1fr; gap: 10px; background: var(--pane); padding: 8px 15px; align-items: baseline; }
.checks .c .s { text-align: center; }
.checks .c[data-pass="true"] .s { color: var(--ok); }
.checks .c[data-pass="false"] .s { color: var(--bad); }
.checks .c .n { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.checks .c .d { color: var(--dim); }

/* ── phong bao ────────────────────────────────────────────────────────── */
.envcard {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--pane2);
  padding: 16px; display: grid; gap: 10px;
}
.envcard .amt { font-size: var(--t-big); font-variant-numeric: tabular-nums; }
.envlink {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px;
}
.envlink code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body); color: var(--dim); }
.qr { background: #fff; padding: 10px; border-radius: var(--r); width: max-content; }

.sub { color: var(--dim); }
.mut { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }

/* ══ ĐĂNG NHẬP ══════════════════════════════════════════════════════════
   Bản đầu là hai cái prompt() của trình duyệt. Nó "chạy được", nhưng nó lộ ra
   đúng MỘT lối trong ba lối backend đã có — Google và ví không bấm vào đâu được
   cả. Một sản phẩm giữ tiền mà cửa vào trông như hộp thoại báo lỗi thì phần còn
   lại có làm kỹ đến đâu cũng không cứu được ấn tượng đầu tiên. */

.dlg {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: var(--pane);
  color: var(--ink);
}
.dlg::backdrop { background: rgba(0, 0, 0, .58); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlgIn .18s cubic-bezier(.2, .8, .3, 1); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }

.dlg h2 {
  margin: 0 0 6px;
  font: 400 var(--t-big)/1.15 var(--serif);
  letter-spacing: -.01em;
}
.dlgLede { margin: 0 0 20px; color: var(--dim); font-size: var(--t-micro); line-height: 1.55; }
.dlgFoot { margin: 18px 0 0; color: var(--faint); font-size: var(--t-micro); line-height: 1.5; }

.dlgX { position: absolute; top: 14px; right: 14px; }
.dlgX button {
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--faint);
  cursor: pointer; font-size: 15px;
  transition: background .15s ease-out, color .15s ease-out;
}
.dlgX button:hover { background: var(--pane2); color: var(--ink); }

/* ── bốn lối ── */
.lanes { display: grid; gap: 8px; }
.lane {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--pane2); color: var(--ink);
  font: 500 var(--t-body)/1 var(--mono);
  text-align: left; cursor: pointer;
  transition: border-color .16s ease-out, transform .16s ease-out, background .16s ease-out;
}
.lane:hover:not(:disabled) { border-color: var(--dim); transform: translateY(-1px); }
.lane:disabled { opacity: .45; cursor: not-allowed; }
.lane .ic { flex: 0 0 20px; text-align: center; font-size: 15px; }
.lane .tx { flex: 1; }
/* Lối chưa bật KHÔNG bị giấu đi. Ẩn nút là bảo người dùng "không có tính năng
   này"; hiện kèm lý do là nói đúng thứ đang xảy ra — chưa cấu hình, không phải
   không tồn tại. */
.lane .why { color: var(--faint); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0; }

/* ── email hai bước ── */
.mailStep { display: grid; gap: 7px; margin-top: 14px; }
.mailStep label {
  color: var(--faint); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .07em;
}
.mailStep input {
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1 var(--mono);
  transition: border-color .16s ease-out;
}
.mailStep input:focus { outline: 0; border-color: var(--dim); }
.dlgRow { display: flex; gap: 8px; margin-top: 5px; }
.dlgRow button { flex: 1; }
.dlgNote { margin: 4px 0 0; min-height: 1.2em; font-size: var(--t-micro); line-height: 1.45; }
.dlgNote.bad { color: var(--bad); }
.dlgNote.ok { color: var(--ok); }

/* ── ĐỊA CHỈ NHẬN LƯƠNG ────────────────────────────────────────────────────
   Hiện ĐỦ 42 ký tự, không rút gọn. Rút gọn dạy người dùng đối chiếu bốn ký tự
   đầu-cuối, mà đó đúng là phần kẻ tấn công dò ra được để làm địa chỉ nhìn giống
   hệt. Trên màn hình hẹp thì cho cuộn ngang, không cắt bớt. */
.addrBar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--pane2);
}
.addrBar .k {
  color: var(--faint); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.addrBar code {
  flex: 1; min-width: 0; overflow-x: auto;
  font: 500 var(--t-body)/1.3 var(--mono); color: var(--ink);
  white-space: nowrap; scrollbar-width: thin;
}
.addrBar .ghost { white-space: nowrap; text-decoration: none; }

/* ── KỲ LƯƠNG ĐẦU TIÊN ────────────────────────────────────────────────────── */
.dlgWide { width: min(560px, calc(100vw - 32px)); }
.setupGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; align-items: end; }
.setupGrid label, .setupH {
  color: var(--faint); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .07em;
}
.setupH { margin: 20px 0 8px; }
.setupGrid input, .obRow input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1 var(--mono); min-width: 0;
  transition: border-color .16s ease-out;
}
.setupGrid input:focus, .obRow input:focus { outline: 0; border-color: var(--dim); }

.obRows { display: grid; gap: 7px; margin-bottom: 8px; }
.obRow { display: grid; grid-template-columns: 1fr 92px 74px 30px; gap: 7px; }
.obRow button {
  border: 0; background: none; color: var(--faint); cursor: pointer;
  border-radius: 6px; transition: color .15s ease-out, background .15s ease-out;
}
.obRow button:hover { color: var(--bad); background: var(--pane2); }

.setupSum {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--pane2); border: 1px solid var(--line);
  font-size: var(--t-body); line-height: 1.7;
}
.setupSum .r { display: flex; justify-content: space-between; gap: 12px; }
.setupSum .r b { font-variant-numeric: tabular-nums; }
.setupSum .bad { color: var(--bad); }
.setupSum .free { color: var(--free); }
.setupSum .lock { color: var(--lock); }

/* ── các bước giao dịch ───────────────────────────────────────────────────
   Review nói đúng: không được nhảy thẳng từ form sang một con số. Mỗi bước phải
   nhìn thấy được, vì lúc hỏng người dùng cần biết hỏng Ở ĐÂU. */
.txSteps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.txSteps li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-body); color: var(--faint);
}
.txSteps li::before {
  content: "○"; width: 14px; text-align: center; flex: 0 0 14px;
}
.txSteps li[data-s="run"] { color: var(--ink); }
.txSteps li[data-s="run"]::before { content: "◐"; color: var(--warn); }
.txSteps li[data-s="ok"] { color: var(--dim); }
.txSteps li[data-s="ok"]::before { content: "●"; color: var(--ok); }
.txSteps li[data-s="err"] { color: var(--bad); }
.txSteps li[data-s="err"]::before { content: "✕"; color: var(--bad); }

@media (max-width: 520px) {
  .setupGrid { grid-template-columns: 1fr; }
  .obRow { grid-template-columns: 1fr 1fr; }
}

/* ── HỘP THOẠI PHẢI CUỘN ĐƯỢC ─────────────────────────────────────────────
   Bấm "+ Thêm khoản" mà tưởng nút hỏng: dòng ĐƯỢC thêm thật, nhưng hộp thoại đã
   cao bằng màn hình nên dòng mới rơi ra ngoài vùng nhìn, và nút bấm bị đẩy khuất.
   Không có lỗi nào, không có gì nhấp nháy — chỉ là màn hình im lặng.

   Hai lớp phòng: hộp thoại tự cuộn, VÀ danh sách khoản có trần riêng để hàng nút
   ở dưới không bao giờ bị đẩy đi. Lớp thứ hai quan trọng hơn — người dùng phải
   luôn nhìn thấy nút để bấm, kể cả khi khai hai chục khoản. */
.dlg { max-height: calc(100vh - 32px); overflow-y: auto; }
.obRows { max-height: 34vh; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }

/* Dấu tiếng Việt là ký tự CHỒNG LÊN, nên letter-spacing dương kéo chúng lệch khỏi
   nguyên âm. Serif ở heading không giãn chữ. */
.dlg h2, .brand, .vnum { letter-spacing: -.01em; }

/* Nút Sửa/Xoá trên mỗi dòng khoản — nhỏ, không tranh chỗ với con số. */
.rowActs { display: flex; gap: 5px; }
.rowActs .ghost { padding: 3px 8px; font-size: var(--t-micro); }

/* Nút ở nhóm phụ vẫn phải sáng khi đang mở — nó là tab, chỉ không đứng ở thanh chính. */
.top > .ghost[aria-selected="true"] { border-color: var(--ok); color: var(--ink); }

/* Dải "số liệu mẫu": phải thấy được nhưng KHÔNG doạ như dải mất kết nối —
   ở đây không có gì hỏng, chỉ là chưa phải tiền của người đang xem. */
.simband.demo {
  background: var(--lock); color: #0b1220;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.simband.demo button {
  background: #0b1220; color: #fff; border: 0; border-radius: 5px;
  padding: 3px 12px; cursor: pointer; font: 700 var(--t-label) var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ── HỘP THOẠI THÔNG TIN / XÁC NHẬN ───────────────────────────────────────
   Bảng nhãn–giá trị. Cột nhãn hẹp và mờ, cột giá trị rộng và rõ — mắt quét dọc
   cột trái tìm mục cần, rồi mới đọc ngang. Nhồi hết vào một chuỗi alert() thì
   mọi thứ cùng một cỡ và cái quan trọng nhất chìm nghỉm. */
.infoRows { display: grid; gap: 9px; margin: 4px 0 6px; }
.infoRows .r { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; }
.infoRows .k {
  color: var(--faint); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .07em;
}
.infoRows .v { font-size: var(--t-body); word-break: break-all; }
.infoRows .v a { color: var(--lock); }
.infoRows .v code { font-size: var(--t-micro); }
.infoRows .canh {
  grid-column: 1 / -1; padding: 11px 13px; border-radius: 8px;
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  border: 1px solid var(--bad); color: var(--ink);
  font-size: var(--t-micro); line-height: 1.6;
}
.infoRows .canh b { display: block; margin-bottom: 3px; color: var(--bad); }
.infoRows .ok {
  grid-column: 1 / -1; padding: 9px 13px; border-radius: 8px;
  background: color-mix(in srgb, var(--free) 12%, transparent);
  border: 1px solid var(--free); font-size: var(--t-micro);
}

/* ── PHÉP TRỪ HIỆN RA, KHÔNG BẮT NGƯỜI ĐỌC TỰ CỘNG ────────────────────────
   Bản đánh giá bắt đúng: 12 + 3,98 = 15,98, còn 0,02 không giải thích ở đâu.
   Một con số đúng mà người đọc không dựng lại được thì họ phải TIN — và sản
   phẩm này tồn tại để người ta không phải tin. */
.breakdown {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2);
  display: grid; gap: 5px; max-width: 460px;
}
.breakdown .r { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: baseline; }
.breakdown .dau { color: var(--faint); text-align: center; }
.breakdown .k { color: var(--dim); font-size: var(--t-body); }
.breakdown b { font-variant-numeric: tabular-nums; font-size: var(--t-body); }
.breakdown .tong { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line2); }
.breakdown .tong .k, .breakdown .tong b { color: var(--free); }
/* Dòng phụ: chia nhỏ con số "đã khoá" ở trên thành phần SẼ ĐI RA và phần CÒN
   LÀ TÀI SẢN. Thụt vào và mờ hơn để mắt đọc ra đây là bóc tách một dòng đã có,
   không phải một khoản trừ thứ ba. */
.breakdown .phu { margin-left: 22px; font-size: var(--t-micro); }
.breakdown .phu .k, .breakdown .phu b { color: var(--faint); }
/* Tiền vẫn của mình thì không mang màu của tiền mất đi. */
.breakdown .phu b.keep { color: var(--dim); }
/* Kế hoạch chờ áp dụng. Cùng loại thông tin với dải "số liệu mẫu": màn hình
   này KHÔNG nói hết những gì đang có hiệu lực — nên cũng chiếm nguyên chiều
   ngang, và cũng không giấu được. Màu hổ phách theo quy ước của dự án: số/luật
   do hệ thống tự giữ, chưa phải thứ người dùng đang nhìn thấy tác dụng. */
.simband.cho { background: #3a2c08; color: #f0c674; border-bottom: 1px solid #5a4410; }
.simband.cho button { border-color: #7a5e18; color: #f0c674; }