/* ============ Mổ xẻ lệnh đã đóng (postmortem) ============
   Dùng token của app.css (--surface, --long, --short, --amber…).
   Có fallback trong var(...) để trang demo độc lập vẫn đúng màu nếu
   app.css chưa nạp — không bao giờ rơi về màu trắng mặc định trình duyệt.

   Quy ước màu ở đây là NGHĨA, không phải trang trí:
     xanh = lời · đỏ = lỗ · vàng = cảnh báo (phí lật ngược kết quả)
   Không dùng vàng cho bất cứ thứ gì chỉ để cho đẹp.
   ========================================================= */

.pm-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5, 7, 10, .78);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.pm-backdrop.open { display: flex; }

.pm-modal {
  width: 860px; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface, #12151b);
  border: 1px solid var(--border, #232936);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.pm-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft, #1c212b);
  background: var(--surface2, #181c24);
}
.pm-head-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint, #5c6675); font-weight: 700;
}
.pm-close {
  margin-left: auto;
  background: var(--surface, #12151b); color: var(--dim, #96a0b0);
  border: 1px solid var(--border, #232936); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.pm-close:hover { color: var(--text, #e8ecf3); border-color: var(--short, #ea3943); }
.pm-close:focus-visible { outline: 2px solid var(--blue, #4b8dfa); outline-offset: 2px; }

/* Chỉ vùng này cuộn -> trang nền đứng yên, không có 2 thanh cuộn chồng nhau. */
.pm-scroll {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}
.pm-foot {
  flex: 0 0 auto;
  padding: 9px 18px; font-size: 11.5px; color: var(--faint, #5c6675);
  border-top: 1px solid var(--border-soft, #1c212b); text-align: center;
}
.pm-foot kbd {
  font-family: ui-monospace, monospace; font-size: 11px;
  border: 1px solid var(--border, #232936); border-radius: 4px; padding: 1px 5px;
  background: var(--surface2, #181c24);
}

/* Chuỗi dài từ server (ghi chú, tin tức) không được đẩy rộng layout. */
.pm-body, .pm-body * { overflow-wrap: anywhere; word-break: break-word; }
.pm-body { display: grid; gap: 14px; }

/* ---------- Khối kết luận ---------- */
.pm-verdict {
  border-radius: var(--radius, 12px); padding: 18px 20px;
  border: 1px solid var(--border, #232936);
  background: var(--surface2, #181c24);
}
.pm-verdict.win  { border-color: rgba(22, 199, 132, .45); background: linear-gradient(180deg, rgba(22,199,132,.10), var(--surface2, #181c24)); }
.pm-verdict.loss { border-color: rgba(234, 57, 67, .45);  background: linear-gradient(180deg, rgba(234,57,67,.10), var(--surface2, #181c24)); }
.pm-verdict.flat { border-color: var(--border, #232936); }

.pm-verdict-top {
  font-size: 12px; letter-spacing: .05em; color: var(--dim, #96a0b0);
  text-transform: uppercase; font-weight: 600;
}
.pm-verdict-big {
  font-size: clamp(30px, 7vw, 46px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.12; margin: 4px 0 6px;
}
.pm-verdict.win  .pm-verdict-big { color: var(--long, #16c784); }
.pm-verdict.loss .pm-verdict-big { color: var(--short, #ea3943); }
.pm-verdict.flat .pm-verdict-big { color: var(--wait, #8b95a7); font-size: clamp(22px, 5vw, 30px); }
.pm-verdict-big .pm-unit { font-size: .42em; font-weight: 700; color: var(--dim, #96a0b0); letter-spacing: 0; }
.pm-verdict-sub { font-size: 14px; line-height: 1.6; color: var(--text, #e8ecf3); }
.pm-verdict-sub b { font-weight: 700; }
.pm-verdict-hint {
  margin-top: 8px; font-size: 12.5px; color: var(--dim, #96a0b0);
  border-left: 3px solid var(--border, #232936); padding-left: 10px;
}

/* ---------- Khung section ---------- */
.pm-sec {
  background: var(--surface2, #181c24);
  border: 1px solid var(--border-soft, #1c212b);
  border-radius: var(--radius, 12px); padding: 16px;
}
.pm-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint, #5c6675); font-weight: 700; margin: 0 0 12px;
}
.pm-sub-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint, #5c6675); font-weight: 600; margin: 14px 0 8px;
}
.pm-details > summary { cursor: pointer; list-style: none; }
.pm-details > summary::-webkit-details-marker { display: none; }
.pm-details > summary::before { content: "▸ "; }
.pm-details[open] > summary::before { content: "▾ "; }

.pm-empty {
  font-size: 13px; color: var(--dim, #96a0b0); line-height: 1.6;
  background: var(--surface, #12151b); border: 1px dashed var(--border, #232936);
  border-radius: var(--radius-sm, 8px); padding: 14px;
}
.pm-empty-big { text-align: center; padding: 40px 18px; }
.pm-empty-ico { font-size: 30px; margin-bottom: 8px; opacity: .8; }

/* ---------- PHÍ: gộp → phí → ròng ---------- */
.pm-frow {
  display: grid; grid-template-columns: 130px 1fr 110px;
  gap: 12px; align-items: center; margin-bottom: 9px;
}
.pm-flbl { font-size: 12.5px; color: var(--dim, #96a0b0); }
.pm-ftrack {
  height: 10px; background: var(--border-soft, #1c212b);
  border-radius: 5px; overflow: hidden; display: block;
}
.pm-ftrack i { display: block; height: 100%; border-radius: 5px; }
.pm-ftrack .bar-g { background: var(--long, #16c784); }
.pm-ftrack .bar-r { background: var(--short, #ea3943); }
.pm-ftrack .bar-f { background: var(--amber, #f0b90b); }
.pm-fval { text-align: right; font-size: 15px; font-weight: 700; }
.pm-frow-net { border-top: 1px solid var(--border, #232936); padding-top: 10px; margin-top: 4px; }
.pm-frow-net .pm-flbl { color: var(--text, #e8ecf3); font-weight: 600; }
.pm-frow-net .pm-fval { font-size: 19px; }

/* Cảnh báo VÀNG: lãi gộp nhưng lỗ ròng. Ca đau nhất, phải nổi hơn mọi thứ khác. */
.pm-flip {
  margin: 12px 0 4px;
  background: rgba(240, 185, 11, .10);
  border: 1px solid rgba(240, 185, 11, .5);
  border-left-width: 4px;
  border-radius: var(--radius-sm, 8px); padding: 12px 14px;
}
.pm-flip-h { color: var(--amber, #f0b90b); font-weight: 800; font-size: 14.5px; margin-bottom: 5px; }
.pm-flip-b { font-size: 13px; line-height: 1.65; color: var(--text, #e8ecf3); }

.pm-fnote {
  margin: 10px 0 2px; font-size: 12.5px; line-height: 1.6; color: var(--dim, #96a0b0);
  border-left: 3px solid var(--border, #232936); padding-left: 10px;
}
.pm-fmeta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 10px; font-size: 12px; color: var(--faint, #5c6675);
}
.pm-est { margin-top: 8px; font-size: 11.5px; color: var(--faint, #5c6675); font-style: italic; }

/* ---------- Bộ não đang cầm lái (audit/41) ----------
   Khối này đứng TRƯỚC mọi số liệu của bộ máy cũ, và có viền nhấn, vì nó là
   thứ đã thực sự ra quyết định. Trước đây màn hình mổ xẻ chỉ có `ensemble` —
   tức dạy người dùng bài học về một bộ máy không cầm lái. */
.pm-brain {
  border: 1px solid var(--border, #232936); border-left: 3px solid var(--blue, #4b8dfa);
  border-radius: var(--radius-sm, 8px); padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface, #12151b);
}
.pm-brain.none { border-left-color: var(--border, #232936); }
.pm-brain-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint, #5c6675); margin-bottom: 9px;
}
.pm-brain-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
/* §A6 — nhãn định tính, cố tình KHÔNG tô theo hướng: độ mạnh không phải hướng. */
.pm-brain-str {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--border, #232936); color: var(--faint, #5c6675);
}
.pm-brain-str.lvl-mid { color: var(--dim, #96a0b0); }
.pm-brain-str.lvl-strong { color: var(--text, #e8ecf3); background: var(--surface2, #171b23); }
.pm-brain-rg { font-size: 11.5px; color: var(--faint, #5c6675); }
.pm-brain-why { font-size: 13px; line-height: 1.55; color: var(--text, #e8ecf3); margin-top: 9px; }
.pm-brain-gates { font-size: 12px; color: var(--dim, #96a0b0); margin-top: 7px; line-height: 1.6; }
.pm-brain-gates b { color: var(--amber, #f0b90b); font-weight: 600; }
.pm-brain-a6, .pm-brain-none {
  font-size: 11.5px; color: var(--faint, #5c6675); line-height: 1.55;
  margin-top: 10px; border-top: 1px dashed var(--border, #232936); padding-top: 8px;
}
.pm-brain-none { margin-top: 0; border-top: none; padding-top: 0; }
.pm-brain-a6 b, .pm-brain-none b { color: var(--amber, #f0b90b); font-weight: 600; }

/* ---------- Bằng chứng lúc vào ---------- */
.pm-sigline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pm-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--wait, #8b95a7); background: var(--wait-bg, rgba(139,149,167,.08));
}
.pm-chip.long { color: var(--long, #16c784); background: var(--long-bg, rgba(22,199,132,.09)); }
.pm-chip.short { color: var(--short, #ea3943); background: var(--short-bg, rgba(234,57,67,.09)); }
.pm-sigreason { font-size: 13px; color: var(--text, #e8ecf3); flex: 1; min-width: 200px; }

.pm-oldbrain {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
  border-radius: var(--radius-sm, 8px); padding: 9px 12px; font-size: 12.5px;
  color: var(--dim, #96a0b0); margin-bottom: 12px;
}
.pm-oldbrain b { color: var(--text, #e8ecf3); }
.pm-oldbrain em { flex-basis: 100%; font-size: 11.5px; color: var(--faint, #5c6675); font-style: italic; }

.pm-reasons ul, .pm-fact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pm-reasons li {
  font-size: 13px; line-height: 1.55; color: var(--text, #e8ecf3);
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
  border-radius: var(--radius-sm, 8px); padding: 8px 11px;
}

.pm-news {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  margin-top: 10px; font-size: 12.5px; line-height: 1.55;
  border-radius: var(--radius-sm, 8px); padding: 9px 12px;
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
}
.pm-news-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--dim, #96a0b0); }
.pm-news.bullish { border-color: rgba(22, 199, 132, .35); }
.pm-news.bullish .pm-news-tag { color: var(--long, #16c784); }
.pm-news.bearish { border-color: rgba(234, 57, 67, .35); }
.pm-news.bearish .pm-news-tag { color: var(--short, #ea3943); }

.pm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.pm-fact {
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
  border-left-width: 3px; border-radius: var(--radius-sm, 8px); padding: 11px 12px;
}
.pm-fact.pro  { border-left-color: var(--long, #16c784); }
.pm-fact.con  { border-left-color: var(--short, #ea3943); }
.pm-fact.risk { border-left-color: var(--amber, #f0b90b); }
.pm-fact-h { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; color: var(--dim, #96a0b0); }
.pm-fact.pro  .pm-fact-h { color: var(--long, #16c784); }
.pm-fact.con  .pm-fact-h { color: var(--short, #ea3943); }
.pm-fact.risk .pm-fact-h { color: var(--amber, #f0b90b); }
.pm-fact-n {
  font-size: 10.5px; background: rgba(255, 255, 255, .07); color: var(--dim, #96a0b0);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.pm-fact li { font-size: 12.5px; line-height: 1.55; color: var(--text, #e8ecf3); }
.pm-fact li::before { content: "· "; color: var(--faint, #5c6675); }

.pm-lesson {
  margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--dim, #96a0b0);
  border-left: 3px solid var(--short, #ea3943); padding-left: 10px;
}

.pm-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; }
.pm-metric {
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px;
  flex-wrap: wrap; /* chật thì giá trị xuống dòng NGUYÊN CỤM */
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
  border-radius: var(--radius-sm, 8px); padding: 8px 11px;
}
.pm-mk { font-size: 11.5px; color: var(--faint, #5c6675); }
/* nowrap để "-6.2" và "%" không bị tách làm hai dòng — đọc thành số khác hẳn */
.pm-mv { font-size: 13px; font-weight: 600; text-align: right; margin-left: auto; white-space: nowrap; }

/* ---------- Kết cục ---------- */
.pm-arc {
  border-radius: var(--radius-sm, 8px); padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.65; border: 1px solid; border-left-width: 4px;
}
.pm-arc.warn { background: rgba(240, 185, 11, .09); border-color: rgba(240, 185, 11, .45); }
.pm-arc.warn b { color: var(--amber, #f0b90b); }
.pm-arc.bad  { background: rgba(234, 57, 67, .09);  border-color: rgba(234, 57, 67, .45); }
.pm-arc.bad b { color: var(--short, #ea3943); }
.pm-arc.ok   { background: var(--surface, #12151b); border-color: var(--border, #232936); }

.pm-outgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.pm-out {
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
  border-radius: var(--radius-sm, 8px); padding: 10px 12px;
}
.pm-out-k { font-size: 11px; color: var(--faint, #5c6675); text-transform: uppercase; letter-spacing: .05em; }
.pm-out-v { font-size: 16px; font-weight: 700; margin-top: 3px; }
.pm-out.good .pm-out-v { color: var(--long, #16c784); }
.pm-out.bad  .pm-out-v { color: var(--short, #ea3943); }
.pm-out.warn .pm-out-v { color: var(--amber, #f0b90b); }
.pm-out.neutral .pm-out-v { color: var(--text, #e8ecf3); }

.pm-rnote {
  margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--dim, #96a0b0);
  border-left: 3px solid var(--border, #232936); padding-left: 10px;
}

/* Thanh biên độ: lỗ sâu nhất ← 0 → lãi cao nhất, chốt thật đánh dấu bằng ghim */
.pm-exc { margin-top: 16px; }
.pm-exc-track {
  position: relative; height: 14px; border-radius: 7px;
  background: var(--border-soft, #1c212b); overflow: hidden;
}
.pm-exc-track i { position: absolute; top: 0; height: 100%; display: block; }
.pm-exc-track .mfe { background: rgba(22, 199, 132, .65); }
.pm-exc-track .mae { background: rgba(234, 57, 67, .65); }
.pm-exc-track .zero { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: var(--faint, #5c6675); }
/* Ghim nằm GỌN trong thanh (track có overflow:hidden) — thò ra là bị cắt cụt. */
.pm-exc-track .pin {
  position: absolute; top: 0; width: 3px; height: 100%; margin-left: -1.5px;
  background: var(--text, #e8ecf3); box-shadow: 0 0 7px rgba(255, 255, 255, .75);
}
.pm-exc-legend {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11.5px;
}
.pm-exc-final { margin-top: 5px; font-size: 12.5px; color: var(--dim, #96a0b0); }

/* Trục giá SL ─ vào ─ ra ─ TP */
/* Cao 62px vì có HAI hàng nhãn (SL/Vào/TP ở trên, "Ra" ở dưới) — thấp hơn là
   overflow:hidden bên dưới sẽ cắt cụt nhãn giá thoát. */
.pm-track { position: relative; height: 62px; margin-top: 22px; }
.pm-track .line {
  position: absolute; top: 10px; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--short, #ea3943) 0%, var(--surface2, #181c24) 50%, var(--long, #16c784) 100%);
  opacity: .85;
}
.pm-track .mark { position: absolute; top: 3px; width: 2px; height: 18px; background: var(--faint, #5c6675); }
.pm-track .mark.entry { background: var(--blue, #4b8dfa); }
.pm-track .dot {
  position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--text, #e8ecf3); border: 2.5px solid var(--bg, #0a0c10);
  box-shadow: 0 0 8px rgba(255, 255, 255, .55);
}
.pm-track .cap {
  position: absolute; top: 24px; font-size: 10.5px; color: var(--faint, #5c6675);
  transform: translateX(-50%); white-space: nowrap;
}
.pm-track .cap.left { transform: none; }
.pm-track .cap.right { transform: translateX(-100%); }
.pm-track .cap.out { top: 36px; color: var(--text, #e8ecf3); }
/* Chốt chặn cuối: nhãn lệch cỡ nào cũng không được đẻ ra thanh cuộn ngang. */
.pm-track { overflow: hidden; }

/* ---------- Thông số lệnh ---------- */
.pm-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; margin-top: 10px; }
.pm-fact-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-bottom: 1px solid var(--border-soft, #1c212b); font-size: 12.5px;
}
.pm-fk { color: var(--faint, #5c6675); }
.pm-fv { color: var(--text, #e8ecf3); text-align: right; }
.pm-note {
  margin-top: 10px; font-size: 12.5px; color: var(--dim, #96a0b0);
  background: var(--surface, #12151b); border: 1px solid var(--border-soft, #1c212b);
  border-radius: var(--radius-sm, 8px); padding: 9px 12px;
}

/* Màu dùng chung, khai báo lại để file này không phụ thuộc thứ tự nạp CSS */
.pm-body .green { color: var(--long, #16c784); }
.pm-body .red   { color: var(--short, #ea3943); }
.pm-body .amber { color: var(--amber, #f0b90b); }
.pm-body .dim   { color: var(--dim, #96a0b0); }
.pm-body .num   { font-variant-numeric: tabular-nums; }

/* Nút mở mổ xẻ — dùng cho history.js / positions.js khi nối dây */
.pm-open-btn {
  background: none; border: 1px solid var(--border, #232936); color: var(--dim, #96a0b0);
  border-radius: 999px; padding: 3px 11px; font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.pm-open-btn:hover { border-color: var(--blue, #4b8dfa); color: var(--text, #e8ecf3); }

/* ---------- Mobile: 375px phải dùng được thật ---------- */
@media (max-width: 720px) {
  .pm-backdrop { padding: 0; align-items: stretch; }
  .pm-modal { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .pm-scroll { padding: 13px; }
  .pm-head { padding: 11px 13px; position: sticky; top: 0; }
  .pm-verdict { padding: 15px 14px; }
  /* Nhãn 130px trên máy 375px sẽ bóp thanh bar còn vài pixel -> xuống dòng thay vì bóp */
  .pm-frow { grid-template-columns: 1fr auto; grid-template-areas: "lbl val" "trk trk"; gap: 5px 10px; margin-bottom: 12px; }
  .pm-flbl { grid-area: lbl; }
  .pm-fval { grid-area: val; }
  .pm-ftrack { grid-area: trk; }
  /* Câu chữ dài -> 1 cột. Số ngắn -> 2 cột cho đỡ phải cuộn dọc mãi. */
  .pm-facts, .pm-facts-grid { grid-template-columns: 1fr; }
  .pm-outgrid, .pm-metrics { grid-template-columns: 1fr 1fr; }
  .pm-out-v { font-size: 15px; }
  /* Cột hẹp: nhãn và số nằm cùng dòng sẽ đẩy đơn vị "%" rớt xuống dòng riêng.
     Xếp dọc như thẻ kết cục cho khỏi vỡ chữ. */
  .pm-metric { flex-direction: column; align-items: stretch; gap: 1px; }
  .pm-mv { text-align: left; }
  .pm-exc-legend { font-size: 11px; }
  .pm-exc-legend span { flex: 1 1 100%; }
  .pm-exc-legend span:nth-child(2) { text-align: center; }
  .pm-exc-legend span:nth-child(3) { text-align: right; }
  .pm-track .cap { font-size: 10px; }
}