/* ============================================================================
   MARKET REPLAY  —  §C6
   Dùng token của app.css (:root). Không định nghĩa màu mới ngoài vài biến cục bộ.
   Mobile-first: mọi lưới sập về 1 cột ở 720px, không chỗ nào cuộn ngang ở 375px.
   ========================================================================== */

/* Mọi chuỗi trên màn hình này đến từ server: symbol, source_id, tên gate, nhãn
   stage, lý do analyzer. Không có gì bảo đảm chúng có dấu cách để xuống dòng.
   `overflow-wrap: anywhere` (khác `break-word`: nó ĐỔI cả min-content width) là
   thứ giữ cho một `source_id` dài 300 ký tự không đẩy cả khung ra ngoài màn hình
   375px. Đã kiểm bằng fixture độc trong replay.demo.html — không có dòng này thì
   khung 375px tràn 681px. */
.rp { overflow-wrap: anywhere; }

/* ---------- Đầu trang ---------- */
.rp-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
}
.rp-back {
  background: var(--surface2); border: 1px solid var(--border); color: var(--dim);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
}
.rp-back:hover { color: var(--text); border-color: #333b4d; }
.rp-head-main { flex: 1 1 auto; min-width: 0; }
.rp-head-sym { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.rp-head-when { font-size: 12.5px; color: var(--faint); }
.rp-head-act {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 14px; border-radius: 999px; border: 1px solid; 
}
.rp-head-act.long  { color: var(--long); border-color: rgba(22,199,132,.4); background: var(--long-bg); }
.rp-head-act.short { color: var(--short); border-color: rgba(234,57,67,.4); background: var(--short-bg); }
.rp-head-act.flat  { color: var(--wait); border-color: var(--border); background: var(--wait-bg); }

/* ---------- Dải lần ngược ---------- */
.rp-trace {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.rp-trace-h { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 9px; }
.rp-trace-l { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.rp-trace-l > li { display: flex; align-items: center; gap: 6px; }
.rp-trace-l > li::after { content: "←"; color: var(--faint); font-size: 12px; }
.rp-trace-l > li:last-child::after { content: ""; }
.rp-tstep {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: var(--surface2); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: var(--radius-sm); padding: 6px 11px; cursor: pointer; font: inherit;
}
.rp-tstep:hover { border-color: var(--blue); }
.rp-tstep .k { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.rp-tstep .v { font-size: 12.5px; font-weight: 600; }
.rp-tstep.c-bad .v   { color: var(--short); }
.rp-tstep.c-ok .v    { color: var(--long); }
.rp-tstep.c-warn .v  { color: var(--amber); }
.rp-tstep.c-long .v  { color: var(--long); }
.rp-tstep.c-short .v { color: var(--short); }
.rp-tstep.c-flat .v  { color: var(--wait); }

/* ---------- Khung một tầng ---------- */
.rp-flow { display: flex; flex-direction: column; gap: 10px; }
.rp-layer {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  border-left: 3px solid var(--border);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rp-layer.t-warn { border-left-color: var(--amber); }
.rp-layer.t-bad  { border-left-color: var(--short); }
.rp-layer.t-ok   { border-left-color: var(--long); }
.rp-layer.rp-flash { box-shadow: 0 0 0 2px rgba(75,141,250,.45); }

.rp-layer > details > summary {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  cursor: pointer; list-style: none; user-select: none;
}
.rp-layer > details > summary::-webkit-details-marker { display: none; }
.rp-layer > details > summary:hover { background: rgba(255,255,255,.015); }
.rp-l-n {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--dim);
}
.rp-l-h { flex: 1 1 auto; min-width: 0; }
.rp-l-t { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.rp-l-lead { display: block; font-size: 12.5px; color: var(--dim); margin-top: 1px; }
.rp-l-badge {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--dim); background: var(--surface2);
  white-space: nowrap;
}
.rp-l-badge.b-bad  { color: var(--short); border-color: rgba(234,57,67,.35); background: var(--short-bg); }
.rp-l-badge.b-warn { color: var(--amber); border-color: rgba(240,185,11,.35); background: rgba(240,185,11,.08); }
.rp-l-badge.b-ok   { color: var(--long); border-color: rgba(22,199,132,.35); background: var(--long-bg); }
.rp-l-caret { flex: 0 0 auto; color: var(--faint); font-size: 11px; transition: transform .15s; }
.rp-layer > details[open] > summary .rp-l-caret { transform: rotate(180deg); }
.rp-l-body { padding: 4px 15px 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }

.rp-h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 16px 0 9px; }
.rp-h4:first-child { margin-top: 0; }
.rp-h4-bad { color: var(--short); }
.rp-note { font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-bottom: 12px; }
.rp-note:last-child { margin-bottom: 0; }
.rp-code {
  font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--faint);
  background: var(--surface2); border: 1px solid var(--border-soft);
  padding: 1px 5px; border-radius: 4px; word-break: break-all;
}
.c-bad { color: var(--short); } .c-ok { color: var(--long); }
.c-warn { color: var(--amber); } .c-long { color: var(--long); }
.c-short { color: var(--short); } .c-flat { color: var(--wait); }

/* ---------- Cảnh báo / hộp trạng thái ---------- */
.rp-alert {
  font-size: 12.5px; line-height: 1.6; padding: 11px 13px; border-radius: var(--radius-sm);
  background: rgba(240,185,11,.07); border: 1px solid rgba(240,185,11,.28);
  color: var(--text); margin-bottom: 13px;
}
.rp-alert-bad { background: var(--short-bg); border-color: rgba(234,57,67,.3); }
.rp-alert-a6 { background: rgba(75,141,250,.06); border-color: rgba(75,141,250,.28); }
.rp-alert code { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--dim); }
.rp-ok-box {
  font-size: 12.5px; color: var(--dim); padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--long-bg); border: 1px solid rgba(22,199,132,.22);
}
.rp-missing {
  padding: 12px 13px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px dashed var(--border);
}
.rp-missing-t { font-size: 13px; font-weight: 600; color: var(--dim); }
.rp-missing-t code { font-size: 11.5px; }
.rp-missing-s { font-size: 12px; color: var(--faint); line-height: 1.55; margin-top: 4px; }
.rp-warn-in { color: var(--amber); font-size: 11.5px; }

/* ---------- Ô số liệu ---------- */
.rp-facts, .rp-fus-sum, .rp-after-grid {
  display: grid; gap: 9px; margin-bottom: 13px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rp-fact {
  background: var(--surface2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0;
}
.rp-fact .k { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; }
.rp-fact .v { font-size: 17px; font-weight: 700; margin: 3px 0 1px; word-break: break-word; }
.rp-fact .s { font-size: 11.5px; color: var(--dim); line-height: 1.4; }

/* ---------- Tầng 1: nguồn dữ liệu ---------- */
.rp-src-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rp-src {
  background: var(--surface2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0;
}
.rp-src-h { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.rp-src-h b { min-width: 0; overflow-wrap: anywhere; }
.rp-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); }
.rp-src.ok   .rp-dot { background: var(--long); }
.rp-src.warn .rp-dot { background: var(--amber); }
.rp-src.bad  .rp-dot { background: var(--short); }
.rp-src-st { margin-left: auto; font-size: 11px; color: var(--dim); }
.rp-src.ok   .rp-src-st { color: var(--long); }
.rp-src.warn .rp-src-st { color: var(--amber); }
.rp-src.bad  .rp-src-st { color: var(--short); }
.rp-src-m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--faint); margin-top: 6px; }

/* ---------- Tầng 2: feature ---------- */
.rp-featgrp { margin-bottom: 13px; }
.rp-featgrp-h { font-size: 12px; color: var(--dim); margin-bottom: 7px; }
.rp-feat-tbl { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.rp-feat {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  background: var(--surface2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 6px 10px; min-width: 0;
}
.rp-feat-id { font: 11.5px/1.4 ui-monospace, Menlo, monospace; color: var(--dim); overflow-wrap: anywhere; }
.rp-feat-v { font-size: 13px; font-weight: 650; text-align: right; white-space: nowrap; }
.rp-feat-m { grid-column: 1 / -1; font-size: 10.5px; color: var(--faint); }

/* ---------- Tầng 3: bằng chứng ---------- */
.rp-ev-cols { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .rp-ev-cols { grid-template-columns: 1.35fr 1fr; } }
.rp-ev-col { min-width: 0; }

.rp-ev {
  background: var(--surface2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 9px;
}
.rp-ev.long  { border-left-color: var(--long); }
.rp-ev.short { border-left-color: var(--short); }
.rp-ev.flat  { border-left-color: var(--wait); }
.rp-ev-h { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.rp-ev-name { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.rp-ev-name b { font-size: 13.5px; }
.rp-ev-dir { margin-left: auto; font-size: 12px; font-weight: 650; white-space: nowrap; }
.rp-ev-dir.long { color: var(--long); } .rp-ev-dir.short { color: var(--short); } .rp-ev-dir.flat { color: var(--wait); }
.rp-ev-meta { display: flex; flex-wrap: wrap; gap: 3px 13px; font-size: 11.5px; color: var(--faint); margin: 7px 0 8px; }
.rp-ev-meta b { color: var(--dim); font-weight: 600; }
.rp-ev-why { font-size: 12.5px; line-height: 1.6; color: var(--text); }
.rp-ev-foot { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 10.5px; color: var(--faint); margin-top: 9px; }

.rp-fals { margin-top: 9px; padding: 9px 11px; background: rgba(75,141,250,.05); border: 1px solid rgba(75,141,250,.18); border-radius: 6px; }
.rp-fals-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); margin-bottom: 5px; }
.rp-fals ul { margin: 0; padding-left: 16px; }
.rp-fals li { font-size: 12px; line-height: 1.55; color: var(--dim); margin-bottom: 3px; }
.rp-fals-d { color: var(--text); }
.rp-fals-none { background: var(--short-bg); border-color: rgba(234,57,67,.25); font-size: 12px; color: var(--dim); line-height: 1.55; }

.rp-rej {
  background: var(--short-bg); border: 1px solid rgba(234,57,67,.28);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px;
}
.rp-rej-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-rej-x { color: var(--short); font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.rp-rej-why { font-size: 12.5px; line-height: 1.55; color: var(--dim); margin-top: 6px; }
.rp-stage {
  margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid; 
}
.rp-stage.st-stale    { color: var(--amber); border-color: rgba(240,185,11,.4); background: rgba(240,185,11,.08); }
.rp-stage.st-manifest { color: var(--blue); border-color: rgba(75,141,250,.4); background: rgba(75,141,250,.08); }
.rp-stage.st-schema,
.rp-stage.st-error    { color: var(--short); border-color: rgba(234,57,67,.4); background: var(--short-bg); }
.rp-stage.st-disabled { color: var(--dim); border-color: var(--border); background: var(--surface2); }

/* ---------- Tầng 4: chế độ ---------- */
.rp-regime { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
/* `flex: 0 0 auto` từng ở đây và nó KHÔNG CO LẠI: nhãn regime đến từ server, và
   một nhãn dài (hoặc dữ liệu hỏng) đẩy khối này rộng 1102px trong khung 375px.
   Không thấy thanh cuộn vì .rp-layer có overflow:hidden — chữ bị CẮT MẤT, còn
   tệ hơn cuộn ngang. `min-width: 0` là thứ cho phép overflow-wrap thật sự chạy. */
.rp-regime-l { flex: 1 1 auto; min-width: 0; }
.rp-regime-lbl { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.rp-regime-sure { font-size: 11.5px; color: var(--faint); }
.rp-regime-why { flex: 1 1 260px; font-size: 12.5px; line-height: 1.6; color: var(--dim); min-width: 0; }
.rp-inline-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--faint); margin-top: 10px; }
.rp-inline-meta code { font-size: 10.5px; }

/* ---------- Tầng 5: fusion ---------- */
.rp-corr { background: var(--surface2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 13px; }
.rp-corr-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 6px; }
.rp-corr ul { margin: 0; padding-left: 17px; }
.rp-corr li { font-size: 12.5px; line-height: 1.6; color: var(--dim); margin-bottom: 4px; }

.rp-contrib { background: var(--surface2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 7px; }
.rp-contrib-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.rp-contrib-g { font-size: 11px; color: var(--faint); }
.rp-contrib-d { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rp-contrib-d.long { color: var(--long); } .rp-contrib-d.short { color: var(--short); } .rp-contrib-d.flat { color: var(--wait); }
.rp-contrib-m { font-size: 11.5px; color: var(--faint); margin-top: 5px; }
.rp-contrib-m b { color: var(--dim); }
.rp-bar { height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; margin-top: 6px; }
.rp-bar > i { display: block; height: 100%; background: var(--wait); }
.rp-bar > i.long { background: var(--long); } .rp-bar > i.short { background: var(--short); }

/* ---------- Tầng 6: danh mục ---------- */
.rp-pos-list { display: grid; gap: 6px; }
.rp-pos {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  background: var(--surface2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border); border-radius: 6px; padding: 8px 11px;
}
.rp-pos.long  { border-left-color: var(--long); }
.rp-pos.short { border-left-color: var(--short); }
.rp-pos-side { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
.rp-pos.long  .rp-pos-side { color: var(--long); }
.rp-pos.short .rp-pos-side { color: var(--short); }
.rp-pos-sym { font-size: 13px; }
.rp-pos-n { margin-left: auto; font-size: 13px; font-weight: 650; }
.rp-pos-m { flex: 1 0 100%; font-size: 11px; color: var(--faint); }

/* ---------- Tầng 7: cổng ---------- */
.rp-blocked-sum { background: var(--short-bg); border: 1px solid rgba(234,57,67,.28); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 13px; }
.rp-blocked-h { font-size: 12.5px; font-weight: 650; color: var(--short); margin-bottom: 7px; }
.rp-blocked-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-bchip {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid rgba(234,57,67,.3); color: var(--text); font-family: inherit;
  text-align: left;
}
.rp-bchip:hover { border-color: var(--short); }
.rp-blocked-n { font-size: 11.5px; color: var(--dim); line-height: 1.55; margin-top: 8px; }

.rp-gates { display: grid; gap: 6px; }
.rp-gate { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface2); }
.rp-gate.block { border-color: rgba(234,57,67,.3); background: var(--short-bg); }
.rp-gate.rp-flash { box-shadow: 0 0 0 2px rgba(75,141,250,.5); }
.rp-gate > details > summary {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  cursor: pointer; list-style: none;
}
.rp-gate > details > summary::-webkit-details-marker { display: none; }
.rp-gate-i { flex: 0 0 auto; font-weight: 700; font-size: 13px; color: var(--long); }
.rp-gate.block .rp-gate-i { color: var(--short); }
.rp-gate-n { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rp-gate-n b { font-size: 13px; font-weight: 600; }
.rp-gate-v { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--faint); }
.rp-gate.block .rp-gate-v { color: var(--short); }
.rp-gate-b { padding: 0 12px 11px; }
.rp-gate-why { font-size: 12.5px; line-height: 1.6; color: var(--text); margin-bottom: 9px; }

.rp-kv { display: grid; gap: 4px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.rp-kv-r { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 5px; padding: 4px 9px; min-width: 0; }
.rp-kv dt { font: 10.5px/1.45 ui-monospace, Menlo, monospace; color: var(--faint); overflow-wrap: anywhere; min-width: 0; }
.rp-kv dd { margin: 0; font-size: 12px; color: var(--dim); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.rp-kv-hid { grid-column: 1 / -1; border-color: rgba(75,141,250,.25); background: rgba(75,141,250,.05); }
.rp-kv-hid dd { color: var(--blue); text-align: left; font-size: 11.5px; }

/* ---------- Tầng 8 + kết cục ---------- */
.rp-final { border-left-color: var(--blue); }
.rp-final .rp-l-body { border-top: none; padding-top: 15px; }
.rp-fin-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; margin-bottom: 11px; }
.rp-fin { border-radius: var(--radius-sm); padding: 14px 16px; border: 1px solid; }
.rp-fin.long  { background: var(--long-bg); border-color: rgba(22,199,132,.3); }
.rp-fin.short { background: var(--short-bg); border-color: rgba(234,57,67,.3); }
.rp-fin.flat  { background: var(--wait-bg); border-color: var(--border); }
.rp-fin-act { font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.rp-fin.long .rp-fin-act { color: var(--long); }
.rp-fin.short .rp-fin-act { color: var(--short); }
.rp-fin.flat .rp-fin-act { color: var(--wait); }
.rp-fin-dir { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.rp-fin-why { font-size: 12.5px; color: var(--dim); margin-top: 6px; }

.rp-after {
  margin-top: 14px; background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 14px 15px;
}
.rp-after-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; font-weight: 650; margin-bottom: 11px; }
.rp-after-tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  color: var(--amber); border: 1px solid rgba(240,185,11,.35); background: rgba(240,185,11,.07);
}

/* ---------- Bản rút gọn ---------- */
.rp-partial { border-color: rgba(240,185,11,.35) !important; background: rgba(240,185,11,.05); }
.rp-partial-h { font-size: 13.5px; font-weight: 700; color: var(--amber); margin-bottom: 8px; }
.rp-partial p { font-size: 12.5px; line-height: 1.65; color: var(--dim); margin-bottom: 7px; }
.rp-partial code { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--text); background: var(--surface2); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.rp-partial-r { font-size: 12.5px; line-height: 1.6; color: var(--text); padding: 9px 11px; background: var(--surface2); border-radius: 6px; margin: 9px 0; }
.rp-partial-c { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--faint); }
.rp-partial-c b { color: var(--dim); }

/* ---------- Màn hình chọn ---------- */
.rp-intro-p { font-size: 13px; line-height: 1.65; color: var(--dim); }
.rp-intro-stats { display: flex; flex-wrap: wrap; gap: 5px 18px; font-size: 12.5px; color: var(--dim); margin-top: 10px; }
.rp-filters { display: flex; flex-direction: column; gap: 7px; margin-bottom: 13px; }
.rp-fgroup { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-picks { display: grid; gap: 5px; }
.rp-pick {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 4px 10px; align-items: center;
  background: var(--surface2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer; text-align: left; font: inherit; color: var(--text); width: 100%;
}
.rp-pick:hover { border-color: var(--blue); }
.rp-pick[disabled] { opacity: .45; cursor: not-allowed; }
.rp-pick-when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.rp-pick-sym { font-size: 13px; font-weight: 600;  }
.rp-pick-act { font-size: 11px; font-weight: 700; letter-spacing: .04em;  }
.rp-pick-act.long { color: var(--long); } .rp-pick-act.short { color: var(--short); } .rp-pick-act.flat { color: var(--wait); }
.rp-pick-tags { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; }
/* Đặt TƯỜNG MINH vào hàng 1 cột 4. Để tự động xếp thì .rp-pick-tags chiếm trọn
   hàng 2 và mũi tên bị đẩy xuống hàng 3, nằm chơ vơ bên trái. */
.rp-pick-go { grid-column: 4; grid-row: 1; color: var(--faint); font-size: 13px; }
.rp-tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--faint);
}
.rp-tag.bad { color: var(--short); border-color: rgba(234,57,67,.3); background: var(--short-bg); }
.rp-tag.warn { color: var(--amber); border-color: rgba(240,185,11,.3); background: rgba(240,185,11,.07); }

/* ---------- Developer Mode ---------- */
.rp-raw {
  font: 10.5px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: var(--blue); background: rgba(75,141,250,.08);
  border: 1px solid rgba(75,141,250,.2); border-radius: 4px;
  padding: 1px 5px; white-space: nowrap;
}
/* Số hỏng trong snapshot (NaN / Infinity). Đỏ, không phải xanh — nó là dữ liệu
   sai chứ không phải một con số dev muốn đọc. */
.rp-raw-bad { color: var(--short); background: var(--short-bg); border-color: rgba(234,57,67,.3); }
.rp-raw-block {
  font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--dim);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin-top: 8px; overflow-x: auto; overscroll-behavior-x: contain; word-break: break-all;
}
.rp-raw-json { max-height: 460px; overflow: auto; }
.rp-raw-json pre { margin: 0; white-space: pre; }
.rp-devtag {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  color: var(--blue); border: 1px solid rgba(75,141,250,.3); background: rgba(75,141,250,.07);
  text-transform: none; letter-spacing: 0;
}

/* ============================================================================
   MOBILE — 375px không được cuộn ngang.
   ========================================================================== */
@media (max-width: 720px) {
  .rp-head { padding: 12px 13px; gap: 9px; }
  .rp-head-act { font-size: 11.5px; padding: 5px 11px; }
  .rp-head-sym { font-size: 15.5px; }
  .rp-back { order: -1; }

  .rp-trace-l { flex-direction: column; align-items: stretch; gap: 3px; }
  .rp-trace-l > li { flex-direction: column; align-items: stretch; gap: 3px; }
  /* Mũi tên quay xuống khi dải xếp dọc — "←" nằm ngang giữa hai hàng vô nghĩa. */
  .rp-trace-l > li::after { content: "↑"; text-align: center; font-size: 10px; }
  .rp-tstep { flex-direction: row; align-items: baseline; gap: 7px; }
  .rp-tstep .k { flex: 0 0 auto; }

  .rp-layer > details > summary { padding: 11px 12px; gap: 9px; }
  .rp-l-t { font-size: 13px; }
  .rp-l-lead { font-size: 12px; }
  .rp-l-badge { font-size: 10px; padding: 2px 7px; }
  .rp-l-body { padding: 12px 12px 14px; }

  .rp-facts, .rp-fus-sum, .rp-after-grid, .rp-src-list, .rp-feat-tbl, .rp-kv {
    grid-template-columns: 1fr;
  }
  .rp-fact .v { font-size: 15.5px; }

  .rp-ev-dir, .rp-contrib-d, .rp-stage { margin-left: 0; }
  .rp-ev-h, .rp-contrib-h, .rp-rej-h { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rp-pos-n { margin-left: 0; }

  .rp-pick { grid-template-columns: 1fr auto; gap: 3px 8px; }
  .rp-pick-when { grid-column: 1; }
  .rp-pick-act { grid-column: 2; grid-row: 1; text-align: right; }
  .rp-pick-sym { grid-column: 1; grid-row: 2; }
  .rp-pick-go { display: none; }

  .rp-fin-act { font-size: 19px; }
  .rp-gate > details > summary { padding: 9px 10px; }
  .rp-gate-n { flex-direction: column; gap: 2px; }
  .rp-gate-v { margin-left: auto; }
  .rp-kv-r { flex-direction: column; align-items: flex-start; gap: 1px; }
  .rp-kv dd { text-align: left; }
}