.signal-tabs { display:flex; gap:.4rem; margin:1rem 0; border-bottom:1px solid var(--border); overflow-x:auto; }
.signal-tab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-muted); padding:.7rem .9rem; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.signal-tab[aria-selected="true"] { color:var(--primary); border-bottom-color:var(--primary); }
.signal-tab:focus-visible, .pattern-filter input:focus-visible, .pattern-filter select:focus-visible,
.pattern-reset:focus-visible, .pattern-sort:focus-visible, .pattern-row:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.signal-tab-panel[hidden] { display:none; }
.pattern-state { color:var(--text-muted); padding:.8rem 0; min-height:2.5rem; }
.pattern-state.is-warning { color:var(--warning); }
.pattern-summary { display:grid; grid-template-columns:repeat(6,minmax(100px,1fr)); gap:.6rem; margin:.7rem 0 1rem; }
.pattern-kpi { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-md); padding:.7rem .8rem; }
.pattern-kpi span { display:block; color:var(--text-muted); font-size:.72rem; }
.pattern-kpi strong { display:block; margin-top:.2rem; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.pattern-filters { display:grid; grid-template-columns:repeat(5,minmax(125px,1fr)); gap:.65rem; padding:.8rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.pattern-filter { display:flex; flex-direction:column; gap:.25rem; color:var(--text-muted); font-size:.72rem; }
.pattern-filter input, .pattern-filter select { width:100%; min-height:36px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text); padding:.35rem .5rem; }
.pattern-checks { display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; grid-column:1/-1; }
.pattern-checks label { display:flex; gap:.35rem; align-items:center; color:var(--text-muted); font-size:.78rem; }
.pattern-reset { min-height:36px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text); padding:.35rem .7rem; cursor:pointer; }
.pattern-table-wrap { overflow:auto; max-height:70vh; margin-top:.8rem; border:1px solid var(--border); border-radius:var(--radius-md); }
.pattern-table { width:100%; min-width:1450px; border-collapse:collapse; margin:0; }
.pattern-table th { position:sticky; top:0; z-index:1; background:var(--surface-2); }
.pattern-table th, .pattern-table td { border:0; border-bottom:1px solid var(--border); padding:.55rem .6rem; vertical-align:top; }
.pattern-sort { border:0; background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; }
.pattern-row { cursor:pointer; }
.pattern-row:hover { background:color-mix(in srgb,var(--primary) 8%,transparent); }
/* Phân cấp tên mẫu hình (Phase 4D) — tên Việt hoá là danh tính chính của hàng nên
   nổi bật hơn (~15-16px/~700), tên tiếng Anh chỉ là phụ nên nhỏ/gọn hơn hẳn. */
.pattern-name-vi { font-size:15.5px; font-weight:700; line-height:1.2; }
.pattern-name-en { font-size:11px; line-height:1.2; }
.pattern-direction { display:inline-flex; gap:.3rem; align-items:center; font-weight:700; }
.pattern-direction.bullish { color:var(--success); }
.pattern-direction.bearish { color:var(--danger); }
.pattern-direction.neutral { color:var(--text-muted); }
.pattern-status { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:.15rem .45rem; white-space:nowrap; }
.pattern-status.forming { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 50%,var(--border)); }
.pattern-status.completed { color:var(--primary); }
.pattern-stars { display:inline-flex; gap:1px; white-space:nowrap; }
.pattern-stars svg { width:13px; height:13px; }
.pattern-stars .empty-star { opacity:.3; }
.pattern-tags { display:flex; flex-wrap:wrap; gap:.25rem; max-width:260px; }
.pattern-tag { display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--border); border-radius:999px; padding:.1rem .35rem; color:var(--text-muted); font-size:.69rem; }
.pattern-tag.warning { color:var(--warning); }
.pattern-positive { color:var(--success); }
.pattern-negative { color:var(--danger); }
.pattern-muted { color:var(--text-muted); }
.pattern-mobile-key { display:none; }

/* ---------- Text chính là trigger tooltip, không icon "?" (Objective B, Phase 4C) ----------
   Áp dụng cho tên mẫu hình và nhãn SMC — cursor + gạch chấm mờ làm affordance, không thêm
   phần tử/icon mới. Vẫn dùng chung .vs-tooltip-bubble/initTooltips() với .vs-info-trigger. */
.vs-text-trigger {
  cursor: help;
  border-radius: 3px;
  text-decoration: underline dotted;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 2px;
}
.vs-text-trigger:hover,
.vs-text-trigger:focus-visible,
.vs-text-trigger[aria-expanded="true"] { color: var(--text); text-decoration-color: var(--primary); }
.vs-text-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Nút mở tooltip giải thích (Objective C, Phase 4B) ---------- */
.vs-info-trigger {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:.3rem; flex:0 0 auto;
  border-radius:50%; border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-size:.62rem; font-weight:700; line-height:1;
  cursor:pointer; padding:0; vertical-align:middle;
}
.vs-info-trigger:hover,
.vs-info-trigger:focus-visible,
.vs-info-trigger[aria-expanded="true"] {
  color:var(--text); border-color:var(--primary); background:var(--primary-soft);
}
.vs-info-trigger:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Bubble DÙNG CHUNG cho mọi trigger trên trang — position:fixed nên không chiếm
   layout/không đổi bề rộng bảng/thẻ; toạ độ do JS tính lại theo trigger đang mở
   (positionTooltip trong candlestick-patterns.js), luôn kẹp trong viewport. */
.vs-tooltip-bubble {
  position:fixed; z-index:1000; max-width:280px;
  padding:.5rem .65rem; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:.74rem; line-height:1.45;
  font-weight:400; text-transform:none; letter-spacing:normal;
  box-shadow:0 8px 24px rgba(0,0,0,.45); pointer-events:none;
}
.vs-tooltip-bubble[hidden] { display:none; }
@media (max-width:1024px) {
  .pattern-summary { grid-template-columns:repeat(3,1fr); }
  .pattern-filters { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .pattern-filters { grid-template-columns:repeat(2,1fr); }
  .pattern-table { min-width:980px; }
  .pattern-table .optional-md { display:none; }
}
@media (max-width:480px) {
  .pattern-summary { grid-template-columns:repeat(2,1fr); }
  .pattern-filters { grid-template-columns:1fr; }
  .pattern-checks { grid-column:1; }
  .pattern-table { min-width:760px; }
  .pattern-table .optional-sm { display:none; }
}
@media (prefers-reduced-motion:reduce) { .pattern-row { scroll-behavior:auto; } }

/* ============================================================
 * Deterministic, canonical-key-based accent colors (Phase 4D) — a restrained,
 * fixed dark-theme palette (assets/js/candlestick-patterns.js
 * colorTokenForPattern()/colorTokenForSmc() only ever return one of these 10
 * token names, keyed off the canonical pattern_key/SMC key, never a per-row
 * random color and never the raw key itself). Placed last so these accents win
 * over the earlier .pattern-tag/.signal-chip-smc base colors at equal
 * specificity. Direction stays conveyed via visible Vietnamese text elsewhere
 * (.pattern-direction) — these are a secondary, non-exclusive cue, not a
 * replacement for it.
 * ============================================================ */
:root {
  --pat-emerald:#34d399; --pat-teal:#2dd4bf; --pat-cyan:#22d3ee;
  --pat-rose:#fb7185; --pat-red:#f87171; --pat-orange:#fb923c; --pat-magenta:#e879f9;
  --pat-amber:#fbbf24; --pat-violet:#a78bfa; --pat-slate:#94a3b8;
}
.pattern-color-emerald { color:var(--pat-emerald); }
.pattern-color-teal { color:var(--pat-teal); }
.pattern-color-cyan { color:var(--pat-cyan); }
.pattern-color-rose { color:var(--pat-rose); }
.pattern-color-red { color:var(--pat-red); }
.pattern-color-orange { color:var(--pat-orange); }
.pattern-color-magenta { color:var(--pat-magenta); }
.pattern-color-amber { color:var(--pat-amber); }
.pattern-color-violet { color:var(--pat-violet); }
.pattern-color-slate { color:var(--pat-slate); }

/* SMC name hierarchy (Phase 4D) — relative sizing so it stays legible inside the
   existing compact chip/tag contexts (Overview tab pill, confirmations column
   tag) instead of forcing the table row's absolute ~15-16px name scale into an
   11px badge. Vietnamese term stays the (slightly) bolder/larger part; the
   "(ABBR)" is the smaller secondary text, matching the candlestick name pattern. */
.smc-name-vi { font-weight:600; }
.smc-name-abbr { font-size:.85em; font-weight:400; color:var(--text-muted); margin-left:.2em; }