/* =====================================================================
   Tier 3 INNER — Playbook + Liquidity Heatmap styles (chuẩn VIP)
   Loaded via dashboard.html <link rel="stylesheet" href="css/tier3-inner.css">
===================================================================== */

/* ============ Common ============ */
.t3-eyebrow {
  font-size: 0.72rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #d4af37);
  margin: 14px 0 10px;
}
.t3-faint { color: var(--text-mute, #8fa1bd); font-weight: normal; font-size: 0.85em; }
.t3-num { font-family: var(--font-mono, "JetBrains Mono", monospace); text-align: right; }
.t3-asof {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.08));
  font-size: 0.78rem; color: var(--text-mute, #8fa1bd); font-family: var(--font-mono, monospace);
}
.t3-loading, .t3-empty, .t3-error {
  padding: 28px 20px; text-align: center;
  color: var(--text-mute, #8fa1bd); font-size: 0.92rem;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
}
.t3-empty b { color: var(--text, #e6edf3); display: block; margin-bottom: 6px; }
.t3-error { color: #ff8899; border-color: rgba(255,136,153,0.25); }

.t3-block {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.t3-block:last-of-type { border-bottom: none; }

/* ============ Layer 1: Regime ============ */
.t3-regime-head {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 20px; border: 1px solid; border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
  margin-bottom: 14px;
}
.t3-regime-main { display: flex; align-items: center; gap: 14px; }
.t3-regime-icon { font-size: 2rem; line-height: 1; }
.t3-regime-name { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; }
.t3-regime-rec { color: var(--text-dim, #c0cad8); font-size: 0.88rem; margin-top: 4px; max-width: 420px; }
.t3-regime-score { text-align: right; }
.t3-big { font-size: 2.1rem; font-weight: 800; font-family: var(--font-mono, monospace); line-height: 1; }
.t3-big span { font-size: 0.85rem; color: var(--text-mute); margin-left: 2px; }
.t3-small { color: var(--text-mute); font-size: 0.82rem; margin-top: 6px; }

.t3-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.t3-mini {
  padding: 11px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 8px;
}
.t3-mini-label { font-size: 0.72rem; color: var(--text-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; font-family: var(--font-mono, monospace); }
.t3-mini-val { font-size: 1.1rem; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--text, #e6edf3); }
.t3-mini-val small { font-size: 0.7rem; color: var(--text-mute); font-weight: normal; }
.t3-mini-sub { font-size: 0.76rem; color: var(--text-dim); margin-top: 3px; }
.t3-mini-sub b { color: var(--text, #e6edf3); font-weight: 600; }

@media (max-width: 900px) { .t3-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ============ Playbook (common) ============ */
.t3-playbook {
  margin-top: 14px; padding: 14px 16px;
  border-left: 3px solid; border-radius: 8px;
  background: rgba(255,255,255,0.025);
}
.t3-playbook--go     { border-color: #00ff9f; background: rgba(0, 255, 159, 0.04); }
.t3-playbook--caution { border-color: #d4af37; background: rgba(212, 175, 55, 0.04); }
.t3-playbook--defend { border-color: #ff5577; background: rgba(255, 85, 119, 0.04); }
.t3-playbook--info   { border-color: #6ed2ea; background: rgba(110, 210, 234, 0.04); }
.t3-playbook--exec   { border-color: #d4af37; background: rgba(212, 175, 55, 0.06); }
.t3-playbook-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  color: var(--text, #e6edf3); font-size: 0.94rem;
}
.t3-playbook-icon { font-size: 1.05rem; }
.t3-playbook-steps { margin: 4px 0 0 22px; padding: 0; color: var(--text-dim, #c0cad8); font-size: 0.88rem; line-height: 1.55; }
.t3-playbook-steps li { margin-bottom: 5px; }
.t3-playbook-steps li b { color: var(--text, #e6edf3); }

/* ============ Layer 2: Sectors ============ */
.t3-sec-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px; gap: 16px; flex-wrap: wrap;
}
.t3-sec-leadership-block { display: flex; flex-direction: column; gap: 2px; }
.t3-sec-leadership-label { font-size: 0.74rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono, monospace); }
.t3-sec-leadership { font-size: 1rem; font-weight: 600; color: var(--text, #e6edf3); }
.t3-quad-legend { display: flex; gap: 6px; flex-wrap: wrap; }

.t3-pill {
  display: inline-block; padding: 3px 10px; border-radius: 14px;
  font-size: 0.76rem; font-weight: 600;
  border: 1px solid;
}
.t3-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 600;
  background: rgba(212, 175, 55, 0.15); color: var(--gold, #d4af37);
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.t3-tag-seasonal { background: rgba(212, 175, 55, 0.15); color: #e2bf52; border-color: rgba(212, 175, 55, 0.35); }

/* ============ Table ============ */
.t3-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.08)); }
.t3-table {
  width: 100%; border-collapse: collapse; font-size: 0.84rem;
  background: rgba(255,255,255,0.015);
  table-layout: fixed;
}
.t3-table thead {
  background: rgba(212, 175, 55, 0.05); border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}
.t3-table th {
  padding: 10px 12px; font-weight: 600; font-size: 0.78rem;
  color: var(--gold, #d4af37); letter-spacing: 0.03em;
  text-transform: uppercase; font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
/* Explicit alignment classes — header & cell phải match 100% */
.t3-th-left,  .t3-td-left  { text-align: left; }
.t3-th-center             { text-align: center; }
.t3-table th.t3-num,
.t3-table td.t3-num {
  text-align: right;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-variant-numeric: tabular-nums;
}
.t3-table td {
  padding: 10px 12px; color: var(--text, #e6edf3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t3-table tr:last-child td { border-bottom: none; }
.t3-table tr:hover td { background: rgba(212, 175, 55, 0.03); }
.t3-rank {
  font-family: var(--font-mono, monospace); font-size: 0.86rem;
  color: var(--gold, #d4af37); font-weight: 700; text-align: center;
}
.t3-symbol {
  font-size: 1.0rem; color: var(--neon, #00ff9f);
  font-family: var(--font-mono, monospace);
  display: inline-block; margin-right: 6px;
}
.t3-sym-sector {
  font-size: 0.76rem;
  display: inline-block;
}
.t3-stop { color: #ff8899; }
.t3-target { color: #5fe0b4; }
.t3-table--picks th, .t3-table--picks td { font-size: 0.82rem; }
.t3-table--sectors th, .t3-table--sectors td { font-size: 0.84rem; }

/* ============ Picks head ============ */
.t3-pick-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.t3-pick-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--text-dim); }
.t3-pick-meta span { display: inline-block; }
.t3-pick-meta b { color: var(--text, #e6edf3); font-family: var(--font-mono, monospace); }

.t3-verified {
  padding: 10px 14px; background: rgba(0, 255, 159, 0.04);
  border: 1px solid rgba(0, 255, 159, 0.18); border-radius: 8px;
  min-width: 300px;
}
.t3-verified-title { font-size: 0.72rem; color: var(--neon, #00ff9f); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; font-family: var(--font-mono, monospace); }
.t3-verified-row { font-size: 0.8rem; color: var(--text-dim); line-height: 1.55; }
.t3-verified-row b { color: var(--text, #e6edf3); font-family: var(--font-mono, monospace); }

/* ============ Guide block ============ */
.t3-guide {
  margin-top: 18px; padding: 16px 18px;
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 10px;
}
.t3-guide-head { display: flex; align-items: center; gap: 8px; color: var(--gold, #d4af37); font-size: 0.95rem; margin-bottom: 10px; }
.t3-guide-icon { font-size: 1.1rem; }
.t3-guide-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px;
}
.t3-guide-card {
  padding: 10px 12px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 8px;
}
.t3-guide-card b { font-size: 0.86rem; color: var(--text, #e6edf3); display: block; margin-bottom: 6px; }
.t3-guide-card p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin: 0; }
.t3-guide-note {
  padding: 8px 12px; background: rgba(255, 85, 119, 0.05);
  border-left: 3px solid #ff5577; border-radius: 4px;
  font-size: 0.84rem; color: var(--text-dim); line-height: 1.55;
}
@media (max-width: 900px) { .t3-guide-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Liquidity Heatmap (canvas + side + pools + guide)
===================================================================== */
#liqHeatmapPanel { color: var(--text, #e6edf3); }

.liq-loading, .liq-empty {
  padding: 32px 20px; text-align: center;
  color: var(--text-mute); font-size: 0.92rem;
  background: rgba(255,255,255,0.02); border-radius: 10px;
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
}

.liq-summary {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.liq-chip {
  padding: 4px 12px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 14px;
  font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-mono, monospace);
}
.liq-chip b { color: var(--text, #e6edf3); }

/* Symbol selector */
.liq-sym-selector { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.liq-sym-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.liq-sym-label {
  font-size: 0.74rem; color: var(--text-mute); text-transform: uppercase;
  letter-spacing: 0.1em; font-family: var(--font-mono, monospace); margin-right: 4px;
}
.liq-sym-btn {
  padding: 4px 10px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 6px;
  color: var(--text-dim); font-size: 0.82rem; cursor: pointer;
  font-family: var(--font-mono, monospace);
  transition: all 120ms;
}
.liq-sym-btn:hover { background: rgba(212, 175, 55, 0.1); color: var(--gold, #d4af37); border-color: rgba(212, 175, 55, 0.3); }
.liq-sym-btn.is-active {
  background: rgba(212, 175, 55, 0.15); color: var(--gold, #d4af37);
  border-color: var(--gold, #d4af37); font-weight: 700;
}
.liq-sym-btn.is-index { background: rgba(110, 210, 234, 0.08); color: #6ed2ea; border-color: rgba(110, 210, 234, 0.2); }
.liq-sym-btn.is-index.is-active { background: rgba(110, 210, 234, 0.2); border-color: #6ed2ea; }

/* Main canvas + side panel layout */
.liq-main {
  display: grid; grid-template-columns: 1fr 280px; gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .liq-main { grid-template-columns: 1fr; } }

.liq-canvas-wrap {
  background: #0a0f18; border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px; padding: 10px; overflow: hidden;
}
#liqHeatmapCanvas {
  width: 100%; height: 360px; display: block;
  border-radius: 6px;
}
.liq-legend {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.08));
  font-size: 0.76rem; color: var(--text-mute); flex-wrap: wrap;
}
.liq-leg-label { font-family: var(--font-mono, monospace); letter-spacing: 0.05em; }
.liq-leg-gradient {
  display: inline-block; width: 100px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #081c3c 0%, #205f91 25%, #3bb273 55%, #debd2c 75%, #ff3c3c 100%);
}
.liq-leg-ends { display: inline-flex; gap: 8px; font-size: 0.72rem; }
.liq-leg-mark { font-family: var(--font-mono, monospace); letter-spacing: 0.02em; }
.liq-leg-mark--poc { color: #ffd54a; }
.liq-leg-mark--va { color: #ffffff88; }
.liq-leg-mark--current { color: #5fe0b4; }

/* Side panel */
.liq-side {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px; padding: 14px; font-size: 0.86rem;
}
.liq-side-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.liq-side-sym { font-size: 1.15rem; color: var(--neon, #00ff9f); font-family: var(--font-mono, monospace); }
.liq-side-sector { font-size: 0.76rem; color: var(--text-mute); }

.liq-side-levels { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.liq-lvl {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.02); border-left: 3px solid;
}
.liq-lvl-label { grid-column: 1; font-size: 0.76rem; color: var(--text-mute); }
.liq-lvl-val { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-mono, monospace); font-size: 0.95rem; color: var(--text, #e6edf3); text-align: right; }
.liq-lvl-dist { grid-column: 1; font-size: 0.72rem; color: var(--text-dim); font-family: var(--font-mono, monospace); }
.liq-lvl--poc { border-color: #ffd54a; }
.liq-lvl--current { border-color: #5fe0b4; }
.liq-lvl--support { border-color: #5fe0b4aa; }
.liq-lvl--resistance { border-color: #ff8899aa; }
.liq-lvl--va { border-color: #ffffff33; }

.liq-action { padding: 10px 12px; border-radius: 8px; border-left: 4px solid; font-size: 0.86rem; line-height: 1.55; }
.liq-action-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-family: var(--font-mono, monospace); }
.liq-action-body b { color: var(--text, #e6edf3); }
.liq-action--buy { background: rgba(0, 255, 159, 0.06); border-color: #00ff9f; }
.liq-action--buy .liq-action-head { color: #00ff9f; }
.liq-action--sell { background: rgba(255, 85, 119, 0.06); border-color: #ff5577; }
.liq-action--sell .liq-action-head { color: #ff5577; }
.liq-action--wait { background: rgba(226, 191, 82, 0.06); border-color: #e2bf52; }
.liq-action--wait .liq-action-head { color: #e2bf52; }
.liq-action--caution { background: rgba(226, 191, 82, 0.06); border-color: #e2bf52; }
.liq-action--caution .liq-action-head { color: #e2bf52; }
.liq-action--opportunity { background: rgba(110, 210, 234, 0.06); border-color: #6ed2ea; }
.liq-action--opportunity .liq-action-head { color: #6ed2ea; }
.liq-action--neutral { background: rgba(255,255,255,0.03); border-color: #8fa1bd; }
.liq-action--neutral .liq-action-head { color: #8fa1bd; }

/* Market pools */
.liq-pools {
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 10px;
  padding: 14px; margin-bottom: 14px;
}
.liq-pools-head { margin-bottom: 10px; }
.liq-pools-head b { color: var(--gold, #d4af37); font-size: 0.95rem; }
.liq-pools-sub { display: block; color: var(--text-dim); font-size: 0.78rem; margin-top: 4px; line-height: 1.5; }

.liq-pools-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.liq-pool {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  column-gap: 8px; row-gap: 2px; align-items: baseline;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  transition: all 120ms;
}
.liq-pool:hover { background: rgba(212, 175, 55, 0.08); border-color: rgba(212, 175, 55, 0.3); transform: translateY(-1px); }
.liq-pool b {
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--font-mono, monospace); font-size: 0.95rem;
  color: var(--neon, #00ff9f);
}
.liq-pool--strong b { color: #d4af37; }
.liq-pool-price { grid-column: 2; grid-row: 1; font-family: var(--font-mono, monospace); font-size: 0.88rem; color: var(--text, #e6edf3); text-align: right; }
.liq-pool-vol { grid-column: 2; grid-row: 2; font-size: 0.72rem; color: var(--text-mute); text-align: right; }
.liq-pool-adv { grid-column: 2; grid-row: 3; font-size: 0.72rem; color: var(--text-mute); text-align: right; font-family: var(--font-mono, monospace); }

/* Guide at bottom */
.liq-guide {
  padding: 14px 16px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border, rgba(255,255,255,0.1));
  font-size: 0.84rem; color: var(--text-dim); line-height: 1.6;
}
.liq-guide b { color: var(--gold, #d4af37); }
.liq-guide ul { margin: 8px 0 0 20px; padding: 0; }
.liq-guide li { margin-bottom: 4px; }
.liq-guide li b { color: var(--text, #e6edf3); }

/* =====================================================================
   Inner Circle · Fundamental Overlay (Layer 4 · Tier 3 độc quyền)
===================================================================== */
#innerCirclePanel { color: var(--text, #e6edf3); }
.ic-loading, .ic-empty {
  padding: 32px 20px; text-align: center;
  color: var(--text-mute); font-size: 0.92rem;
  background: rgba(255,255,255,0.02); border-radius: 10px;
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
}
.ic-empty b { color: var(--text); display: block; margin-bottom: 6px; }
.ic-empty-sm {
  padding: 12px; font-size: 0.82rem; color: var(--text-mute);
  background: rgba(255,255,255,0.02); border-radius: 6px; text-align: center;
  border: 1px dashed rgba(255,255,255,0.08);
}

.ic-summary {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.ic-chip {
  padding: 4px 12px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 14px;
  font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-mono, monospace);
}
.ic-chip b { color: var(--text, #e6edf3); }
.ic-chip-alert { background: rgba(212, 175, 55, 0.08); border-color: rgba(212, 175, 55, 0.22); color: #e2bf52; }
.ic-chip-alert b { color: #ffd54a; }

.ic-block {
  margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ic-block:last-of-type { border-bottom: none; }
.ic-block-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 12px; gap: 16px; flex-wrap: wrap;
}
.ic-eyebrow {
  font-size: 0.72rem; font-family: var(--font-mono, monospace);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold, #d4af37); margin-bottom: 4px;
}
.ic-title { font-size: 0.98rem; color: var(--text, #e6edf3); font-weight: 600; }
.ic-head-legend { display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-mute); flex-wrap: wrap; }
.ic-leg-item b { font-family: var(--font-mono, monospace); margin-right: 3px; }
.ic-faint { color: var(--text-mute, #8fa1bd); font-size: 0.82rem; }

/* Inner Circle Table */
.ic-table-wrap {
  overflow-x: auto; border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ic-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
  background: rgba(255,255,255,0.015); table-layout: fixed;
}
.ic-table thead {
  background: rgba(212, 175, 55, 0.06);
  border-bottom: 2px solid rgba(212, 175, 55, 0.25);
}
.ic-table th {
  padding: 9px 10px; font-weight: 600; font-size: 0.72rem;
  color: var(--gold, #d4af37); letter-spacing: 0.05em;
  text-transform: uppercase; font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
.ic-th-left, .ic-td-left { text-align: left; }
.ic-table th.ic-num, .ic-table td.ic-num {
  text-align: right;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-variant-numeric: tabular-nums;
}
.ic-table td {
  padding: 9px 10px; color: var(--text, #e6edf3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-table tr:last-child td { border-bottom: none; }
.ic-table tr:hover td { background: rgba(212, 175, 55, 0.035); }

/* Compact variant for flow tables */
.ic-table--compact { font-size: 0.78rem; }
.ic-table--compact th { padding: 7px 9px; font-size: 0.68rem; }
.ic-table--compact td { padding: 7px 9px; }

.ic-sym {
  color: var(--neon, #00ff9f);
  font-family: var(--font-mono, monospace);
  font-size: 0.92rem; display: inline-block; margin-right: 6px;
}
.ic-sector {
  display: inline-block; font-size: 0.74rem; color: var(--text-mute);
}
.ic-bucket {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 0.72rem; font-weight: 600; border: 1px solid;
}

/* Color signals */
.ic-num.up { color: #5fe0b4; }
.ic-num.down { color: #ff8899; }
.z-cheap { color: #00ff9f; font-weight: 700; }
.z-expensive { color: #ff5577; font-weight: 700; }
.roe-high { color: #5fe0b4; font-weight: 700; }
.roe-mid { color: #e2bf52; }
.roe-low { color: #ff8899; }

/* Block 2 — sector table top 3 badges */
.ic-sec-top {
  display: inline-block; padding: 1px 8px; margin: 0 3px 2px 0;
  border-radius: 4px;
  background: rgba(0, 255, 159, 0.08); color: #5fe0b4;
  font-family: var(--font-mono, monospace); font-size: 0.72rem;
  border: 1px solid rgba(0, 255, 159, 0.2);
}

/* Block 3 — Flow + alerts 2-column grid */
.ic-flow-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 1000px) { .ic-flow-grid { grid-template-columns: 1fr; } }

.ic-flow-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px; padding: 12px;
  border-left-width: 3px;
}
.ic-flow-card--buy { border-left-color: #5fe0b4; }
.ic-flow-card--sell { border-left-color: #ff8899; }
.ic-flow-card--cheap { border-left-color: #00ff9f; background: rgba(0, 255, 159, 0.03); }
.ic-flow-card--expensive { border-left-color: #ff5577; background: rgba(255, 85, 119, 0.03); }

.ic-flow-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ic-flow-icon { font-size: 1.05rem; }
.ic-flow-head b { color: var(--text, #e6edf3); font-size: 0.92rem; }
.ic-flow-sub { font-size: 0.72rem; color: var(--text-mute); }

/* Playbook specific to Inner Circle */
.ic-playbook {
  margin-top: 14px; padding: 14px 16px;
  border-left: 3px solid var(--gold, #d4af37);
  background: rgba(212, 175, 55, 0.04);
  border-radius: 8px;
}
.ic-playbook-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  color: var(--gold, #d4af37); font-size: 0.94rem;
}
.ic-playbook-icon { font-size: 1.05rem; }
.ic-playbook-steps {
  margin: 4px 0 0 22px; padding: 0;
  color: var(--text-dim, #c0cad8); font-size: 0.86rem; line-height: 1.6;
}
.ic-playbook-steps li { margin-bottom: 5px; }
.ic-playbook-steps li b { color: var(--text, #e6edf3); }

.ic-methodology {
  margin-top: 14px; padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.55;
}
.ic-methodology b { color: var(--gold, #d4af37); }
.ic-methodology ul { margin: 8px 0 0 20px; padding: 0; }
.ic-methodology li { margin-bottom: 3px; }
.ic-methodology li b { color: var(--text, #e6edf3); }
