/* ============================================
   Gold Engine — Institutional Obsidian & Swiss Slate
   Premium Financial Intelligence Dashboard
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============ CSS Variables — Institutional Obsidian & Swiss Slate ============ */
:root {
  /* Colors — Deep Obsidian Slate Palette */
  --bg-primary: #0B0F19;
  --bg-secondary: #111827;
  --bg-card: #1A2035;
  --bg-card-hover: #212B45;
  --bg-glass: rgba(17, 24, 39, 0.82);
  
  --border-color: rgba(148, 163, 184, 0.10);
  --border-glow: rgba(148, 163, 184, 0.18);
  --border-subtle: rgba(148, 163, 184, 0.06);
  
  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  
  --gold: #E5C07B;
  --gold-dark: #C9A84C;
  --gold-glow: rgba(229, 192, 123, 0.12);
  
  --green: #10B981;
  --green-bg: rgba(16, 185, 129, 0.08);
  --green-glow: rgba(16, 185, 129, 0.20);
  
  --red: #F43F5E;
  --red-bg: rgba(244, 63, 94, 0.08);
  --red-glow: rgba(244, 63, 94, 0.20);
  
  --orange: #F59E0B;
  --orange-bg: rgba(245, 158, 11, 0.08);
  
  --blue: #3B82F6;
  --blue-bg: rgba(59, 130, 246, 0.08);
  
  --purple: #A78BFA;
  
  /* Layout */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 4px;
  --gap: 14px;
  
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ============ Reset & Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

/* Ultra-subtle ambient gradient */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(229, 192, 123, 0.015), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.3); }

/* ============ Layout ============ */
.app-container {
  position: relative;
  z-index: 1;
  max-width: 1640px;
  margin: 0 auto;
  padding: 16px 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  margin-bottom: 14px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #000;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}

.header-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.3px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-price {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
}

.header-change {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.header-change.positive {
  color: var(--green);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.header-change.negative {
  color: var(--red);
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.28);
}

.status-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}

.badge {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid;
}

.badge-regime {
  color: var(--orange);
  background: var(--orange-bg);
  border-color: rgba(245, 158, 11, 0.2);
}

.badge-session {
  color: var(--blue);
  background: var(--blue-bg);
  border-color: rgba(59, 130, 246, 0.2);
}

.badge-alert-normal { color: var(--green); background: var(--green-bg); border-color: rgba(16, 185, 129, 0.2); }
.badge-alert-elevated { color: var(--orange); background: var(--orange-bg); border-color: rgba(245, 158, 11, 0.2); }
.badge-alert-high { 
  color: var(--red); background: var(--red-bg); border-color: rgba(244, 63, 94, 0.3);
  animation: pulse-alert 2s ease-in-out infinite;
}

@keyframes pulse-alert {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 8px 1px rgba(244, 63, 94, 0.15); }
}

/* Refresh button */
.btn-refresh {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s;
  font-family: var(--font-sans);
}

.btn-refresh:hover {
  border-color: var(--border-glow);
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

.btn-refresh.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ============ Grid Layout ============ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  grid-template-rows: auto auto auto;
  gap: var(--gap);
}

/* ============ Card Base ============ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s;
}

.card:hover {
  border-color: var(--border-glow);
}

.card-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.card-body {
  padding: 16px 18px;
}

/* ============ Gauge (Column 1 Top) ============ */
.gauge-card {
  grid-column: 1;
  grid-row: 1;
}

.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 18px;
}

.gauge-svg {
  width: 280px;
  height: 160px;
}

.gauge-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

.gauge-score {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-top: 4px;
  line-height: 1;
}

.gauge-score.bullish { color: var(--green); }
.gauge-score.bearish { color: var(--red); }
.gauge-score.neutral { color: var(--orange); }

.gauge-direction {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* ============ Chart (Column 2, Row 1-2) ============ */
.chart-card {
  grid-column: 2;
  grid-row: 1 / 3;
}

#chart-container {
  width: 100%;
  height: 480px;
  position: relative;
}

.chart-controls {
  display: flex;
  gap: 6px;
  padding: 0 18px 12px;
}

.chart-tf-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  transition: all 0.2s;
}

.chart-tf-btn:hover, .chart-tf-btn.active {
  background: rgba(229, 192, 123, 0.08);
  color: var(--gold);
  border-color: rgba(229, 192, 123, 0.25);
}

/* ============ Cross-Asset Panel (Column 3 Top) ============ */
.crossasset-card {
  grid-column: 3;
  grid-row: 1;
}

.asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.asset-row:last-child { border-bottom: none; }

.asset-name {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.asset-data-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.asset-chg-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  letter-spacing: 0.2px;
  transition: all 0.25s ease;
}

.asset-chg-badge.up {
  color: #00e676;
  background: rgba(0, 230, 118, 0.14);
  border: 1px solid rgba(0, 230, 118, 0.28);
  box-shadow: 0 0 6px rgba(0, 230, 118, 0.12);
}

.asset-chg-badge.down {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.14);
  border: 1px solid rgba(255, 82, 82, 0.28);
  box-shadow: 0 0 6px rgba(255, 82, 82, 0.12);
}

.asset-chg-badge.neutral {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.divergence-alert {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255, 152, 0, 0.08);
  border: 1px solid rgba(255, 152, 0, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--orange);
  line-height: 1.5;
}

/* ============ Narrative Card (Column 1-2 Bottom) ============ */
.narrative-card {
  grid-column: 1 / 3;
  grid-row: 3;
}

.narrative-section {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.narrative-section:last-child { border-bottom: none; }

.narrative-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.narrative-text {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* ============ Event Matrix / HMI (Column 1) ============ */
.hmi-card {
  grid-column: 1;
  grid-row: 2;
}

.hmi-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.hmi-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.hmi-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease, background 0.3s;
}

.hmi-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 50px;
  text-align: right;
}

.event-list {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.event-list::-webkit-scrollbar {
  width: 4px;
}

.event-list::-webkit-scrollbar-track {
  background: transparent;
}

.event-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
}

.event-list::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

.event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  transition: background 0.15s ease;
  min-width: 0;
  cursor: default;
}

.event-item:last-child {
  border-bottom: none;
}

.event-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.event-dot.bullish {
  background: var(--green);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.85), 0 0 16px rgba(16, 185, 129, 0.45);
  animation: eventDotPulseGreen 1.8s infinite ease-in-out;
}

.event-dot.bearish {
  background: var(--red);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.85), 0 0 16px rgba(244, 63, 94, 0.45);
  animation: eventDotPulseRed 2.2s infinite ease-in-out;
}

.event-dot.neutral {
  background: var(--text-muted);
}

@keyframes eventDotPulseGreen {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.7), 0 0 12px rgba(16, 185, 129, 0.3);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    box-shadow: 0 0 12px rgba(16, 185, 129, 1), 0 0 22px rgba(16, 185, 129, 0.6);
    opacity: 0.85;
  }
}

@keyframes eventDotPulseRed {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.7), 0 0 12px rgba(244, 63, 94, 0.3);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(244, 63, 94, 1), 0 0 20px rgba(244, 63, 94, 0.6);
    opacity: 0.85;
  }
}

.event-name {
  flex: 1 1 auto;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.event-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  min-width: 46px;
  text-align: right;
  margin-left: auto;
}

/* ============ Calendar (Column 3 Row 2-3) ============ */
.calendar-card {
  grid-column: 3;
  grid-row: 2 / 4;
}

.cal-event {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cal-event:last-child { border-bottom: none; }

.cal-event-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.cal-impact {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.cal-impact.red { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.cal-impact.orange { background: var(--orange); }

.cal-event-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.cal-bias-row {
  display: none !important;
}

.cal-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cal-data-values {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cal-countdown-badge {
  font-size: 0.68rem;
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 600;
  margin-left: auto;
}

.cal-data-label {
  color: var(--text-muted);
}

.cal-data-value {
  font-weight: 600;
  color: var(--text-primary);
}

.cal-data-value.actual { color: var(--gold); }

/* ============ COT Summary ============ */
.cot-card {
  margin-top: var(--gap);
}

.cot-bar {
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
  background: var(--bg-secondary);
}

.cot-bar-long {
  background: linear-gradient(90deg, var(--green), rgba(0, 230, 118, 0.5));
  transition: width 0.6s ease;
}

.cot-bar-short {
  background: linear-gradient(90deg, rgba(255, 82, 82, 0.5), var(--red));
  transition: width 0.6s ease;
}

.cot-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cot-zscore {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 8px 0;
}

/* ============ Loading & Animation ============ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-card-hover) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Responsive ============ */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .chart-card { grid-column: 1 / 3; grid-row: auto; }
  .gauge-card { grid-column: 1; }
  .crossasset-card { grid-column: 2; }
  .hmi-card { grid-column: 1; }
  .calendar-card { grid-column: 2; }
  .narrative-card { grid-column: 1 / 3; }
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .header { flex-wrap: wrap; gap: 12px; }
  .header-right { width: 100%; justify-content: space-between; }
  #chart-container { height: 350px; }
  .app-container { padding: 12px; }
}

/* ============ Timestamp ============ */
.timestamp {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ============ Tooltips ============ */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  z-index: 1000;
  pointer-events: none;
}

/* ============ Navigation Tabs ============ */
.main-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  background: var(--bg-card);
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  width: fit-content;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.nav-tab.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 152, 0, 0.1));
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.1);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* ============ View Containers ============ */
.dashboard-view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.dashboard-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Coach Intelligence Room ============ */
.coach-room {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.coach-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, rgba(22, 24, 33, 0.9), rgba(26, 29, 40, 0.8));
  border: 1px solid var(--border-glow);
  padding: 16px 20px;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.coach-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.coach-avatar {
  font-size: 2rem;
  background: rgba(255, 215, 0, 0.1);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 15px var(--gold-glow);
}

.coach-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.coach-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-weight: 600;
}

.coach-subdesc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.coach-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-coach-subnav {
  padding: 7px 15px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-coach-subnav.active {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.btn-copy-brief {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.15), rgba(0, 200, 83, 0.1));
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: var(--green);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy-brief:hover {
  background: var(--green);
  color: #000;
  box-shadow: 0 0 12px var(--green-glow);
}

/* ============ Coach Hero Card ============ */
.coach-hero-card {
  background: radial-gradient(ellipse at top left, rgba(255, 215, 0, 0.08), transparent 70%), var(--bg-card);
  border: 1px solid var(--border-glow);
  padding: 22px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.coach-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold);
}

.stance-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.stance-pill {
  font-size: 1.05rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  letter-spacing: 0.5px;
}

.stance-pill.bullish {
  background: var(--green-bg);
  border-color: rgba(0, 230, 118, 0.4);
  color: var(--green);
}

.stance-pill.bearish {
  background: var(--red-bg);
  border-color: rgba(255, 82, 82, 0.4);
  color: var(--red);
}

.stance-pill.neutral {
  background: var(--orange-bg);
  border-color: rgba(255, 152, 0, 0.4);
  color: var(--orange);
}

.conviction-pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.coach-exec-summary {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

/* ============ 3 Macro Pillars Grid ============ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: all 0.2s ease;
}

.pillar-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
}

.pillar-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pillar-content {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ============ Tactical Game Plan Card ============ */
.tactical-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
}

.tactical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.tactical-item {
  background: var(--bg-secondary);
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.tactical-item-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tactical-item-val {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tactical-stance-box {
  background: rgba(255, 215, 0, 0.05);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  padding: 14px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ============ Traps & Psychology Grid ============ */
.traps-psychology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.traps-card {
  background: rgba(255, 82, 82, 0.04);
  border: 1px solid rgba(255, 82, 82, 0.2);
  border-radius: var(--radius);
  padding: 18px;
}

.traps-list {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trap-item {
  font-size: 0.84rem;
  color: #ff8a80;
  line-height: 1.5;
  display: flex;
  gap: 8px;
}

.trap-item::before {
  content: '⚠️';
  font-size: 0.8rem;
}

.psychology-card {
  background: radial-gradient(ellipse at bottom right, rgba(68, 138, 255, 0.08), transparent 70%), var(--bg-card);
  border: 1px solid rgba(68, 138, 255, 0.25);
  border-radius: var(--radius);
  padding: 18px;
}

.psychology-text {
  font-size: 0.9rem;
  color: #b3e5fc;
  line-height: 1.65;
  margin-top: 10px;
  font-style: italic;
}

/* ============ Weekly Table & Ranges ============ */
.battlefield-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.battlefield-table th {
  text-align: left;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}

.battlefield-table td {
  padding: 10px 12px;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.range-box-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--bg-secondary);
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-top: 12px;
  text-align: center;
}

.range-val {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 800;
}

/* ============ Toast Notification ============ */
.toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--gold);
  color: #000;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.toast-notice.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .traps-psychology-grid { grid-template-columns: 1fr; }
  .scenarios-container { grid-template-columns: 1fr; }
}

/* ============ Human-Grade Macro Sections ============ */
.fed-verdict-card {
  background: linear-gradient(135deg, rgba(22, 24, 33, 0.95), rgba(20, 35, 25, 0.6));
  border: 1px solid rgba(0, 230, 118, 0.3);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 230, 118, 0.08);
}

.fed-badge-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fed-basis-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--green);
  margin-bottom: 10px;
  line-height: 1.5;
}

.fed-rationale-text {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.65;
}

.historical-pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
}

.brutal-truth-alert {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 82, 82, 0.05));
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-left: 4px solid var(--orange);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
  font-size: 0.92rem;
  color: #ffe0b2;
  line-height: 1.65;
}

.upcoming-playbook-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 20px;
}

.scenarios-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

.scenario-col {
  padding: 16px;
  border-radius: var(--radius-sm);
  line-height: 1.6;
  font-size: 0.88rem;
}

.scenario-hot {
  background: rgba(255, 82, 82, 0.06);
  border: 1px solid rgba(255, 82, 82, 0.3);
  color: #ffcdd2;
}

.scenario-cool {
  background: rgba(0, 230, 118, 0.06);
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: #c8e6c9;
}

.knee-jerk-warning {
  background: rgba(255, 215, 0, 0.05);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-top: 14px;
  font-size: 0.84rem;
  color: #fff9c4;
  line-height: 1.55;
}

.verdict-hero-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(22, 24, 33, 0.95));
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.15);
}

.prob-meter-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.prob-bar-outer {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}

.prob-bar-fill-bull {
  background: var(--green);
  height: 100%;
  transition: width 0.5s ease;
}

.prob-bar-fill-bear {
  background: var(--red);
  height: 100%;
  transition: width 0.5s ease;
}

/* ============ Multi-TF Chart Controls ============ */
.chart-controls {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
}

.chart-tf-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.chart-tf-btn:hover {
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
  border-color: rgba(255, 215, 0, 0.3);
}

.chart-tf-btn.active {
  background: var(--gold);
  color: #0d0e15;
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* ============ Calendar Countdown Banner ============ */
.cal-warroom-btn {
  background: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.4);
  color: #ff5252;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-warroom-btn:hover {
  background: #ff5252;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.4);
}

.calendar-countdown-banner {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(22, 24, 33, 0.95));
  border: 1px solid rgba(255, 152, 0, 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 12px 6px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.cal-countdown-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.cal-countdown-label {
  color: var(--text-muted);
}

.cal-countdown-name {
  color: var(--orange);
  font-weight: 700;
}

.cal-countdown-clock {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  margin: 4px 0;
}

.cal-countdown-prob {
  font-size: 0.7rem;
  color: var(--green);
  font-weight: 600;
}

/* ============ Upcoming Event Playbook Enhancements ============ */
.upcoming-timer-badge {
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.4);
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.upcoming-prob-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 0;
}

.prob-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.prob-title-badge {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.25);
}

.prob-consensus {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.upcoming-prob-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.up-bar-cool {
  background: linear-gradient(90deg, #00b0ff, #00e676);
  color: #06150a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.6s ease;
}

.up-bar-hot {
  background: linear-gradient(90deg, #ff9100, #ff5252);
  color: #1a0303;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.6s ease;
}

.why-container {
  background: rgba(255, 215, 0, 0.04);
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 14px 0;
}

.why-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.why-item {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.55;
}

.target-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.target-card {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border: 1px solid;
}

.target-card.target-cool {
  background: rgba(0, 230, 118, 0.06);
  border-color: rgba(0, 230, 118, 0.3);
}

.target-card.target-hot {
  background: rgba(255, 82, 82, 0.06);
  border-color: rgba(255, 82, 82, 0.3);
}

.target-label {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.target-cool .target-label { color: var(--green); }
.target-hot .target-label { color: var(--red); }

.target-value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.target-cool .target-value { color: #b9f6ca; }
.target-hot .target-value { color: #ffcdd2; }

.target-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ============ VIEW 3: LIVE NEWS RELEASE WAR ROOM ============ */
.warroom-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.warroom-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid rgba(255, 59, 48, 0.25);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.warroom-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.warroom-beacon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 15px #ff3b30, 0 0 30px #ff3b30;
  animation: beaconGlow 1.2s infinite alternate;
}

@keyframes beaconGlow {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

.warroom-title {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
}

.warroom-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.warroom-price-badge {
  text-align: right;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
}

.warroom-price-label {
  display: block;
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 1px;
  font-weight: 700;
}

.warroom-price-val {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}

.warroom-hero-card {
  background: linear-gradient(135deg, rgba(26, 20, 30, 0.9), rgba(13, 14, 21, 0.98));
  border: 2px solid rgba(255, 59, 48, 0.35);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 6px 30px rgba(255, 59, 48, 0.1);
}

.warroom-event-meta {
  margin-bottom: 20px;
}

.warroom-event-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.warroom-event-tag.red {
  background: rgba(255, 59, 48, 0.2);
  color: #ff5252;
  border: 1px solid rgba(255, 59, 48, 0.4);
}

.warroom-event-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 4px 0;
}

.warroom-event-time {
  font-size: 0.88rem;
  color: var(--orange);
  font-family: var(--font-mono);
}

/* Giant Clock */
.warroom-clock-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px 0 18px 0;
}

.clock-unit {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 18px;
  border-radius: var(--radius);
  min-width: 90px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

.clock-digit {
  display: block;
  font-family: var(--font-mono);
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1;
}

.clock-digit.red {
  color: #ff5252;
  text-shadow: 0 0 15px rgba(255, 82, 82, 0.5);
}

.clock-colon {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-muted);
}

.clock-sub {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 1px;
}

.warroom-status-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.warroom-status-badge.waiting {
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.4);
  color: var(--orange);
}

.warroom-status-badge.released {
  background: rgba(0, 230, 118, 0.2);
  border: 1px solid rgba(0, 230, 118, 0.5);
  color: #69f0ae;
  animation: pulseGreen 1s infinite alternate;
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 10px rgba(0, 230, 118, 0.3); }
  100% { box-shadow: 0 0 25px rgba(0, 230, 118, 0.7); }
}

.warroom-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-wr-action {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.btn-wr-action.primary {
  background: linear-gradient(135deg, #00c853, #00e676);
  color: #06150a;
}
.btn-wr-action.primary:hover {
  box-shadow: 0 0 15px rgba(0, 230, 118, 0.5);
  transform: translateY(-1px);
}

.btn-wr-action.warning {
  background: linear-gradient(135deg, #d50000, #ff5252);
  color: #fff;
}
.btn-wr-action.warning:hover {
  box-shadow: 0 0 15px rgba(255, 82, 82, 0.5);
  transform: translateY(-1px);
}

.btn-wr-action.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}
.btn-wr-action.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Board Grid */
.warroom-board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
}

.board-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}

.board-card.actual {
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(22, 24, 33, 0.95));
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15);
}

.board-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.board-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  margin: 6px 0;
}

.board-value.orange { color: var(--orange); }
.board-value.pulse {
  color: var(--gold);
  font-size: 1.5rem;
}

.board-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Verdict Banner */
.warroom-verdict-card {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.12), rgba(22, 24, 33, 0.98));
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 30px rgba(0, 230, 118, 0.2);
}

.warroom-verdict-card.hot {
  background: linear-gradient(135deg, rgba(255, 82, 82, 0.12), rgba(22, 24, 33, 0.98));
  border-color: var(--red);
  box-shadow: 0 4px 30px rgba(255, 82, 82, 0.2);
}

.verdict-banner-header {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--green);
  margin-bottom: 8px;
}

.warroom-verdict-card.hot .verdict-banner-header {
  color: var(--red);
}

.verdict-gold-dir {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 8px 0;
}

.verdict-macro-reason {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Guide Card */
.warroom-guide-card {
  padding: 20px;
}

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.guide-step {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px;
  border-radius: var(--radius-sm);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--gold);
}

.step-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .warroom-clock-wrapper {
    gap: 6px;
  }
  .clock-unit {
    min-width: 65px;
    padding: 10px 8px;
  }
  .clock-digit {
    font-size: 1.8rem;
  }
  .warroom-board-grid {
    grid-template-columns: 1fr;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .target-impact-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ VIEW 4: FULL-OPTION TRADINGVIEW PRO CHART ROOM ============ */
.chart-switch-view-btn {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 152, 0, 0.3));
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-switch-view-btn:hover {
  background: var(--gold);
  color: #06070a;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.fullchart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 120px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.fullchart-wrapper:fullscreen {
  border-radius: 0;
  padding: 12px;
  min-height: 100vh;
  background: #0d0e15;
}

/* Ticker Tape */
.fullchart-ticker-tape {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  scrollbar-width: thin;
}

.tape-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.8rem;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.tape-item:last-child {
  border-right: none;
}

.tape-item.live-pulse {
  position: relative;
}

.tape-sym {
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.tape-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
}

.tape-chg {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.tape-chg.up {
  background: rgba(0, 230, 118, 0.15);
  color: var(--green);
}

.tape-chg.down {
  background: rgba(255, 82, 82, 0.15);
  color: var(--red);
}

/* Toolbar */
.fullchart-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.toolbar-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-right: 2px;
}

.tb-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tb-btn:hover {
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
  border-color: rgba(255, 215, 0, 0.35);
}

.tb-btn.active {
  background: var(--gold);
  color: #06070a;
  border-color: var(--gold);
  font-weight: 800;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.tb-btn.highlight {
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.2), rgba(0, 176, 255, 0.2));
  border-color: rgba(0, 230, 118, 0.4);
  color: #b9f6ca;
}

.tb-btn.highlight:hover {
  background: var(--green);
  color: #06150a;
  box-shadow: 0 0 15px rgba(0, 230, 118, 0.4);
}

/* TradingView Container & Fullscreen Edge-to-Edge Styles */
body.fullchart-mode .app-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 4px 12px 10px 12px !important;
}

body.fullchart-mode .top-news-ticker-wrap {
  margin-bottom: 6px !important;
  padding: 4px 12px !important;
}

body.fullchart-mode .top-market-rates-bar {
  margin-bottom: 6px !important;
  padding: 3px 10px !important;
}

body.fullchart-mode .header {
  margin-bottom: 6px !important;
  padding: 6px 16px !important;
}

body.fullchart-mode .main-nav {
  margin-bottom: 8px !important;
}

.dashboard-view#view-fullchart {
  width: 100%;
}

.fullchart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: calc(100vh - 220px);
  max-height: calc(100vh - 220px);
  min-height: 400px;
  background: #0f1118;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  overflow: hidden;
}

body.fullchart-mode .fullchart-wrapper {
  height: calc(100vh - 220px) !important;
  max-height: calc(100vh - 220px) !important;
}

@media (max-height: 850px) {
  .fullchart-wrapper,
  body.fullchart-mode .fullchart-wrapper {
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
  }
}

.fullchart-wrapper:fullscreen {
  border-radius: 0;
  padding: 8px;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  background: #0d0e15;
}

.fullchart-lw-container {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0;
  min-height: 250px !important;
  background: #0f111a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.fullchart-wrapper:fullscreen .fullchart-lw-container {
  height: 100% !important;
  min-height: 350px !important;
}

body.zen-chart-mode .fullchart-wrapper {
  height: calc(100vh - 20px) !important;
  max-height: calc(100vh - 20px) !important;
}

body.zen-chart-mode .fullchart-lw-container {
  height: 100% !important;
  min-height: 350px !important;
}

/* Pro Tools Toolbar */
.pro-tools-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(18, 20, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  position: relative;
  z-index: 25;
}

/* AI Fibonacci Intelligent Swing Status Bar */
.fib-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 27, 75, 0.8));
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  margin-top: -4px;
  transition: all 0.3s ease;
}

.fib-status-bar.hidden {
  display: none !important;
}

.fib-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: #94a3b8;
}

.fib-status-pill .fib-status-icon {
  font-size: 0.85rem;
}

.fib-status-pill .fib-status-label {
  color: #cbd5e1;
  font-weight: 600;
}

.fib-status-pill .fib-status-points {
  color: #38bdf8;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.12);
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.fib-status-pill.ote .fib-status-target {
  color: #f59e0b;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.12);
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.fib-status-pill.sweet .fib-status-sweet {
  color: #22d3ee;
  font-weight: 800;
  background: rgba(34, 211, 238, 0.12);
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgba(34, 211, 238, 0.3);
}

.fib-status-pill.news {
  margin-left: auto;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 3px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
  max-width: 480px;
}

.fib-status-pill.news:hover {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(192, 132, 252, 0.6);
}

.fib-status-pill.news .fib-status-label {
  color: #d8b4fe;
  font-weight: 700;
}

.fib-status-pill.news .fib-status-news-text {
  color: #f1f5f9;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.pro-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pro-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.pro-tool-btn.active {
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.pro-tool-btn.fib.active {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.22), rgba(34, 211, 238, 0.22));
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.pro-tool-btn.trend.active {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(234, 88, 12, 0.28));
  color: #fb923c;
  border-color: #fb923c;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25);
}

.pro-tool-btn.sr.active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(16, 185, 129, 0.28));
  color: #4ade80;
  border-color: #4ade80;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.pro-tool-btn.fvg.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(16, 185, 129, 0.28));
  color: #2dd4bf;
  border-color: #2dd4bf;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.25);
}

.pro-tool-btn.news.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.28));
  color: #f87171;
  border-color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.pro-tool-btn.ob.active {
  background: linear-gradient(135deg, rgba(0, 176, 255, 0.22), rgba(124, 77, 255, 0.28));
  color: #00e5ff;
  border-color: #00e5ff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.fullchart-tf-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: all 0.2s ease;
}

.fullchart-tf-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.fullchart-tf-btn.active {
  background: var(--gold);
  color: #06070a;
  border-color: var(--gold);
  font-weight: 800;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* Zen Pro Mode (Hide headers for maximum 96vh chart real estate) */
body.zen-chart-mode .header,
body.zen-chart-mode .view-nav,
body.zen-chart-mode .fullchart-ticker-tape,
body.zen-chart-mode .fullchart-macro-hud {
  display: none !important;
}

body.zen-chart-mode .app-container {
  max-width: 100vw !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.zen-chart-mode .fullchart-wrapper {
  min-height: 100vh !important;
  height: 100vh !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 6px !important;
}

body.zen-chart-mode .tradingview-full-container {
  min-height: calc(100vh - 46px) !important;
  height: calc(100vh - 46px) !important;
}

/* Terminal Chart Feed Toggle & Embedded TV */
.chart-mode-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2px;
  gap: 3px;
}

.chart-mode-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.chart-mode-pill:hover {
  color: #fff;
}

.chart-mode-pill.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 179, 0, 0.35));
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

#tv-terminal-container {
  width: 100%;
  height: 480px;
  position: relative;
  background: #131722;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#tradingview_terminal_widget,
#tradingview_terminal_widget > div,
#tradingview_terminal_widget iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
  border: none !important;
  display: block !important;
}

/* Bottom HUD */
.fullchart-macro-hud {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.hud-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

.hud-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hud-val {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
}

.hud-val.green { color: var(--green); }
.hud-val.gold { color: var(--gold); }
.hud-val.orange { color: var(--orange); }

.hud-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
}

/* Terminal Chart Bar Countdown */
.terminal-bar-countdown {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  margin-right: 4px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* Full-Option Canvas Wrapper */
.fullchart-canvas-wrapper {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Future Event Milestone Vertical Beacon & Guide Line */
.future-event-beacon-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(168, 85, 247, 0.9),
    rgba(168, 85, 247, 0.9) 6px,
    transparent 6px,
    transparent 12px
  );
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.2s ease;
}

.future-event-beacon-badge {
  position: absolute;
  top: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.95), rgba(126, 34, 206, 0.9));
  border: 1px solid rgba(192, 132, 252, 0.6);
  box-shadow: 0 4px 18px rgba(147, 51, 234, 0.4), 0 0 12px rgba(168, 85, 247, 0.3);
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: auto;
  z-index: 16;
  backdrop-filter: blur(8px);
  user-select: none;
}

.future-event-beacon-badge .beacon-icon-pulse {
  display: inline-block;
  font-size: 0.85rem;
  animation: pulseBeacon 2s infinite ease-in-out;
}

@keyframes pulseBeacon {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #c084fc); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 10px #e9d5ff); }
}

.future-event-beacon-time-tag {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  color: #e9d5ff;
  white-space: nowrap;
  pointer-events: none;
  z-index: 16;
}

/* Top Toolbar Timezone Badge (Bangkok UTC+7) */
.chart-top-timezone-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.12);
}

/* Top Toolbar Market Status Badge (ข้างๆ Reset View) */
.chart-top-market-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.chart-top-market-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.chart-top-market-badge.closed {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.chart-top-market-badge.closed .status-dot {
  background: #ef4444;
}

.chart-top-market-badge.open {
  background: rgba(0, 230, 118, 0.12);
  border-color: rgba(0, 230, 118, 0.35);
  color: #86efac;
}

.chart-top-market-badge.open .status-dot {
  background: #00e676;
  box-shadow: 0 0 6px #00e676;
  animation: pulseDotGreen 1.5s infinite;
}

/* Real-Time Price Axis Countdown Tag (TradingView Style, seamless white strip pinned flush underneath running price) */
.chart-price-countdown-tag {
  position: absolute;
  right: 0;
  top: 0;
  transform: none !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px !important;
  padding: 0 1px;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 25;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
}

.chart-price-countdown-tag .countdown-price-val {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
}

.chart-price-countdown-tag.tick-up {
  background: #ffffff !important;
  border-color: #ffffff !important;
  border-top: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 230, 118, 0.5) !important;
}

.chart-price-countdown-tag.tick-down {
  background: #ffffff !important;
  border-color: #ffffff !important;
  border-top: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 82, 82, 0.5) !important;
}

/* News Badge within Status Bar */
.chart-future-news-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

/* Shaded Zone Boxes Overlay (SMC Order Blocks, S/R & FVGs - สีจางๆ ไร้ขอบ) */
.chart-boxes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.chart-zone-box {
  position: absolute;
  pointer-events: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 10px;
  transition: opacity 0.15s ease;
}

/* Smart S/R Resistance (แนวต้าน) - สีจางๆ ส้ม/แดง ไร้ขอบ */
.chart-zone-box.sr-res {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.13) 0%, rgba(249, 115, 22, 0.04) 100%);
}

/* Smart S/R Support (แนวรับ) - สีจางๆ เขียวมรกต ไร้ขอบ */
.chart-zone-box.sr-sup {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.13) 0%, rgba(34, 197, 94, 0.04) 100%);
}

/* SMC FVG Bullish (ช่องว่างราคาฝั่งขึ้น) - สีจางๆ เขียวสว่าง ไร้ขอบ */
.chart-zone-box.fvg-bull {
  background: linear-gradient(90deg, rgba(0, 230, 118, 0.14) 0%, rgba(0, 230, 118, 0.04) 100%);
}

/* SMC FVG Bearish (ช่องว่างราคาฝั่งลง) - สีจางๆ ชมพู/แดง ไร้ขอบ */
.chart-zone-box.fvg-bear {
  background: linear-gradient(90deg, rgba(255, 51, 102, 0.14) 0%, rgba(255, 51, 102, 0.04) 100%);
}

.chart-zone-box.used {
  opacity: 0.55;
}

.chart-zone-box-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.70;
  pointer-events: none;
  white-space: nowrap;
}

.chart-zone-box.sr-res .chart-zone-box-label {
  color: #fb923c;
}
.chart-zone-box.sr-sup .chart-zone-box-label {
  color: #4ade80;
}
.chart-zone-box.fvg-bull .chart-zone-box-label {
  color: #2dd4bf;
}
.chart-zone-box.fvg-bear .chart-zone-box-label {
  color: #f87171;
}

/* SMC Realtime OrderBlocks (Nephew_Sam_ SMC OB) */
.chart-zone-box.ob-bull {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.18) 0%, rgba(0, 229, 255, 0.05) 100%);
  border-left: 2px solid #00e5ff !important;
}

.chart-zone-box.ob-bear {
  background: linear-gradient(90deg, rgba(255, 23, 68, 0.18) 0%, rgba(255, 23, 68, 0.05) 100%);
  border-left: 2px solid #ff1744 !important;
}

.chart-zone-box.ob-bull .chart-zone-box-label {
  color: #00e5ff;
}

.chart-zone-box.ob-bear .chart-zone-box-label {
  color: #ff5252;
}

/* Left-Side Price Labels Overlay (โซนถูกใช้ไปแล้ว / เกรด A, B, C) */
.chart-left-labels-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  overflow: hidden;
}

.chart-left-tag {
  position: absolute;
  left: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 17, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.chart-left-tag.used {
  background: rgba(25, 20, 24, 0.92);
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.chart-left-tag.unmitigated {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.chart-left-tag.fib-0,
.chart-left-tag.fib-1 {
  background: rgba(20, 24, 33, 0.88);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.future-news-icon {
  font-size: 0.85rem;
}

.future-news-text {
  font-weight: 700;
  color: #f1f5f9;
}

/* Glassmorphic Right-Click Context Menu */
.chart-context-menu {
  position: fixed;
  z-index: 99999;
  display: none;
  background: rgba(15, 17, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.1);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-width: 220px;
  user-select: none;
  animation: fadeInMenu 0.15s ease-out;
}

@keyframes fadeInMenu {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.context-menu-header {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.76rem;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-menu-item:hover {
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
}

.context-menu-icon {
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
}

.context-menu-text {
  flex: 1;
}

.context-menu-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.context-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

/* ================================================================= */
/* TRADING COACH INTELLIGENCE — EXECUTIVE VISUAL HIERARCHY STYLES    */
/* ================================================================= */

.coach-room {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 1. Header Card */
.coach-header-card {
  background: linear-gradient(135deg, rgba(20, 24, 38, 0.85) 0%, rgba(15, 17, 26, 0.95) 100%);
  border: 1px solid rgba(255, 215, 0, 0.18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 215, 0, 0.04);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.coach-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent);
}

.coach-identity-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.coach-avatar-pulse {
  position: relative;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.coach-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid #0f111a;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
}

.coach-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.coach-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.coach-main-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0;
}

.coach-tag-badge {
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.coach-live-pill .pulse-ring {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.coach-subdesc {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.coach-actions-deck {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.coach-tab-switcher {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 4px;
}

.btn-coach-subnav {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 15px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-coach-subnav:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.btn-coach-subnav.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(245, 158, 11, 0.15));
  color: var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.btn-copy-brief {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-copy-brief:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--gold);
  transform: translateY(-1px);
}

/* Base Coach Section Card */
.coach-section-card {
  background: linear-gradient(135deg, rgba(18, 22, 33, 0.85) 0%, rgba(13, 15, 23, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  position: relative;
}

.section-micro-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 6px;
  opacity: 0.9;
}

/* 2. Verdict Hero Card */
.verdict-hero-card {
  border-color: rgba(255, 215, 0, 0.22);
  background: linear-gradient(135deg, rgba(22, 28, 42, 0.9) 0%, rgba(15, 17, 26, 0.95) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.15);
}

.verdict-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.coach-verdict-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.conviction-pill {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.25));
  border: 1px solid #10b981;
  color: #34d399;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.prob-meter-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.prob-meter-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.prob-tag-bull {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
  color: #34d399;
}

.prob-tag-bear {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
  color: #f87171;
}

.prob-center-vs {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-weight: 700;
}

.prob-bar-outer {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  width: 100%;
}

.prob-bar-fill-bull {
  background: linear-gradient(90deg, #059669, #10b981);
  height: 100%;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.prob-bar-fill-bear {
  background: linear-gradient(90deg, #f43f5e, #e11d48);
  height: 100%;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.5);
}

.verdict-truth-wrap {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(56, 189, 248, 0.7);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.verdict-truth-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: #38bdf8;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.verdict-truth-text {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.68;
}

.verdict-bottom-line {
  margin-top: 14px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-sm);
}

.bottom-line-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.bottom-line-body {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.6;
}

/* 3. Actionable Tactical Execution Deck */
.tactical-command-deck {
  border-color: rgba(56, 189, 248, 0.18);
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.section-title-text {
  font-size: 1.12rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.tactical-stance-pill {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.tactical-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1100px) {
  .tactical-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tactical-grid-v2 {
    grid-template-columns: 1fr;
  }
}

.tactical-node {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tactical-node:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.tactical-node.buy-node {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(13, 17, 24, 0.6) 100%);
}

.tactical-node.sell-node {
  border-left: 4px solid #f43f5e;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(13, 17, 24, 0.6) 100%);
}

.tactical-node.invalidation-node {
  border-left: 4px solid #f97316;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(13, 17, 24, 0.6) 100%);
}

.tactical-node.session-node {
  border-left: 4px solid #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(13, 17, 24, 0.6) 100%);
}

.node-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon {
  font-size: 1rem;
}

.node-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.node-value {
  font-size: 1.18rem;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.buy-node .node-value { color: #34d399; }
.sell-node .node-value { color: #f87171; }
.invalidation-node .node-value { color: #fb923c; }
.session-node .node-value { color: #38bdf8; font-size: 0.95rem; font-family: var(--font-base); }

.node-footer {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* 4. Macro Split Grid (Fed vs Pillars) */
.coach-macro-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .coach-macro-split-grid {
    grid-template-columns: 1fr;
  }
}

.fed-badge-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffedd5;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(194, 65, 12, 0.1));
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 10px 0 14px 0;
  line-height: 1.45;
}

.fed-data-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
}

.fed-subhead {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

.fed-basis-text, .fed-rationale-text {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.55;
}

.historical-truth-subcard {
  background: rgba(25, 18, 22, 0.6);
  border: 1px solid rgba(244, 63, 94, 0.2);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.truth-subcard-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
}

.past-recap-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}

.brutal-truth-alert {
  background: rgba(239, 68, 68, 0.12);
  border-left: 3px solid #ef4444;
  color: #fca5a5;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  line-height: 1.5;
}

.pillars-main-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffffff;
  margin: 4px 0 16px 0;
}

.pillars-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pillar-card-v2 {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.pillar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.pillar-icon {
  font-size: 1rem;
}

.pillar-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f1f5f9;
}

.pillar-content {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 5. Upcoming Event Playbook */
.upcoming-playbook-card {
  border-color: rgba(245, 158, 11, 0.25);
}

.playbook-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.playbook-main-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 4px 0 0 0;
}

.playbook-timer-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.event-info-pill {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fb923c;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
}

.upcoming-timer-badge {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
}

.btn-warroom-link {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.2));
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-warroom-link:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.radar-dot {
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse-red 1.8s infinite;
}

@keyframes pulse-red {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.upcoming-prob-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}

.prob-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.prob-title-badge {
  font-weight: 800;
  color: #34d399;
  font-size: 0.92rem;
}

.prob-consensus {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.upcoming-prob-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
}

.up-bar-cool {
  background: linear-gradient(90deg, #059669, #10b981);
  color: #ffffff;
  padding: 0 10px;
  transition: width 0.5s ease;
}

.up-bar-hot {
  background: linear-gradient(90deg, #f43f5e, #e11d48);
  color: #ffffff;
  padding: 0 10px;
  transition: width 0.5s ease;
}

.target-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .target-impact-grid {
    grid-template-columns: 1fr;
  }
}

.target-card {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.target-card.target-cool {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(13, 17, 24, 0.6) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.target-card.target-hot {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(13, 17, 24, 0.6) 100%);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.target-label {
  font-size: 0.82rem;
  font-weight: 800;
}

.target-cool .target-label { color: #34d399; }
.target-hot .target-label { color: #f87171; }

.target-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.target-cool .target-value { color: #ffffff; text-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
.target-hot .target-value { color: #ffffff; text-shadow: 0 0 12px rgba(244, 63, 94, 0.5); }

.target-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.why-container {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.why-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 12px;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.why-item {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.6;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-xs);
}

.scenarios-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .scenarios-container {
    grid-template-columns: 1fr;
  }
}

.scenario-col {
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.scenario-col.scenario-cool {
  border-color: rgba(16, 185, 129, 0.3);
}

.scenario-col.scenario-hot {
  border-color: rgba(244, 63, 94, 0.3);
}

.scenario-head {
  font-size: 0.92rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.scenario-head.green { color: #34d399; }
.scenario-head.red { color: #f87171; }

.scenario-body {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.knee-jerk-warning {
  padding: 12px 18px;
  background: rgba(245, 158, 11, 0.12);
  border-left: 3px solid var(--orange);
  color: #fde68a;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  line-height: 1.5;
}

/* 6. Traps & Psychology (2-Column Grid) */
.traps-psychology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 800px) {
  .traps-psychology-grid {
    grid-template-columns: 1fr;
  }
}

.card-title-text {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 14px 0;
}

.traps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trap-item {
  font-size: 0.88rem;
  color: #fecaca;
  line-height: 1.55;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-xs);
  border-left: 2px solid #ef4444;
}

.psychology-quote-box {
  position: relative;
  padding: 16px 20px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius-sm);
}

.quote-symbol {
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 2.8rem;
  color: rgba(56, 189, 248, 0.2);
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}

.psychology-text {
  font-size: 0.92rem;
  color: #e0f2fe;
  line-height: 1.65;
  font-style: italic;
  position: relative;
  z-index: 2;
}

/* 7. Weekly Subtab Styles */
.range-box-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 18px 24px;
}

.range-node {
  text-align: center;
}

.range-node-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.range-val {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
}

.range-arrow {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.2);
}

.cot-analysis-text-box {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  background: rgba(0, 0, 0, 0.3);
  padding: 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

.battlefield-table-wrapper {
  overflow-x: auto;
}

.battlefield-table {
  width: 100%;
  border-collapse: collapse;
}

.battlefield-table th {
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.battlefield-table td {
  padding: 12px 14px;
  font-size: 0.86rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.5;
}

.strategic-playbook-card {
  background: linear-gradient(135deg, rgba(22, 26, 38, 0.95), rgba(30, 20, 10, 0.4));
  border-color: rgba(255, 215, 0, 0.28);
}

.strategic-playbook-body {
  font-size: 0.96rem;
  color: var(--text-primary);
  line-height: 1.75;
}

/* =================================================================
   REAPERX BRANDING & DYNAMIC VISUAL ASSETS
   ================================================================= */
.reaperx-brand-logo-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.4), rgba(255, 215, 0, 0.6));
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5), 0 0 30px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.reaperx-brand-logo-wrap:hover {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.8), 0 0 35px rgba(255, 215, 0, 0.4);
}

.reaperx-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.reaperx-logo-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 60%);
  animation: logoGlowPulse 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes logoGlowPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 1; }
}

.reaperx-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #ffffff 20%, #fecaca 60%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reaperx-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  vertical-align: middle;
  -webkit-text-fill-color: #ffffff;
}

/* =================================================================
   ANIMATED HEADER & CARD ICONS SYSTEM
   ================================================================= */
.card-icon-anim, .nav-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-right: 5px;
}

/* 1. Chart Pulse Animation */
.anim-chart-pulse {
  animation: animChartPulse 2.8s ease-in-out infinite;
}
@keyframes animChartPulse {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0)); }
  50% { transform: scale(1.15) translateY(-2px); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.65)); }
}

/* 2. Trend Bounce Animation */
.anim-trend-bounce {
  animation: animTrendBounce 2.6s ease-in-out infinite;
}
@keyframes animTrendBounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  35% { transform: translateY(-3px) scale(1.12) rotate(4deg); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.65)); }
  70% { transform: translateY(1px) scale(0.97) rotate(-1deg); }
}

/* 3. Mic Live Audio Glow */
.anim-mic-glow {
  animation: animMicGlow 2.4s ease-in-out infinite;
}
@keyframes animMicGlow {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3)); }
  50% { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.85)); }
}

/* 4. Radar Ping (War Room) */
.anim-radar-ping {
  animation: animRadarPing 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes animRadarPing {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4)); }
  50% { transform: scale(1.25); filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9)); }
}

/* 5. Target / Gauge Pulse */
.anim-target-pulse {
  animation: animTargetPulse 2.5s ease-in-out infinite;
}
@keyframes animTargetPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.16) rotate(8deg); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7)); }
}

/* 6. Calendar Flip / Flutter */
.anim-calendar-flip {
  animation: animCalendarFlip 3.2s ease-in-out infinite;
}
@keyframes animCalendarFlip {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-8deg) translateY(-2px) scale(1.1); filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); }
  75% { transform: rotate(5deg) translateY(0) scale(1); }
}

/* 7. Orbital Slow Spin */
.anim-spin-slow {
  animation: animSpinSlow 14s linear infinite;
}
@keyframes animSpinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 8. Gentle Levitation Float */
.anim-float {
  animation: animFloatLevitate 3s ease-in-out infinite;
}
@keyframes animFloatLevitate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.3)); }
}

/* Interactive Card & Tab Hover Reactions */
.card-header:hover .card-icon-anim,
.nav-tab:hover .nav-tab-icon {
  transform: scale(1.35) rotate(6deg);
}

/* =================================================================
   3D WAVING FLAGS ENGINE (US, UK, JAPAN)
   ================================================================= */
.waving-flag-wrap {
  display: inline-flex;
  position: relative;
  width: 22px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55), inset 0 0 1px rgba(255, 255, 255, 0.2);
  vertical-align: middle;
  perspective: 120px;
  transform-style: preserve-3d;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.flag-cloth {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: left center;
  animation: flagFlutterCloth 2.2s infinite ease-in-out;
}

.flag-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.flag-ripple-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.45) 25%, 
    rgba(0, 0, 0, 0.35) 50%, 
    rgba(255, 255, 255, 0.5) 75%, 
    rgba(0, 0, 0, 0.4) 100%);
  animation: flagRippleMove 2.2s infinite linear;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes flagFlutterCloth {
  0% {
    transform: rotateY(0deg) skewY(0deg) scaleY(1);
  }
  25% {
    transform: rotateY(-18deg) skewY(3deg) scaleY(1.05);
  }
  50% {
    transform: rotateY(16deg) skewY(-3deg) scaleY(0.96);
  }
  75% {
    transform: rotateY(-10deg) skewY(2deg) scaleY(1.03);
  }
  100% {
    transform: rotateY(0deg) skewY(0deg) scaleY(1);
  }
}

@keyframes flagRippleMove {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(0%); }
}

/* Calendar Event Impact Box & Waving Flag Alignment */
.cal-impact-box-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

/* Session Badge with Animated Waving Flag */
.badge-session {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.18);
  color: #f1f5f9;
  padding: 3px 10px !important;
}

.badge-session-content {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.badge-session-content span {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* =================================================================
   TOP BREAKING NEWS TICKER (INSTITUTIONAL WIRE)
   ================================================================= */
.top-news-ticker-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.ticker-beacon-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: var(--red);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.ticker-beacon-tag:hover {
  background: rgba(244, 63, 94, 0.22);
  border-color: var(--red);
}

.ticker-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.8);
  animation: pulseAlertDot 1.6s infinite ease-in-out;
}

@keyframes pulseAlertDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.5; }
}

.ticker-track-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: tickerScroll 130s linear infinite;
  padding-left: 20px;
}

.ticker-track-container:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.2s;
}

.ticker-item:hover {
  color: var(--gold);
}

.ticker-source-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.ticker-source-tag.trump {
  color: var(--gold);
  border-color: rgba(229, 192, 123, 0.3);
  background: rgba(229, 192, 123, 0.08);
}

.ticker-source-tag.geopolitics {
  color: var(--red);
  border-color: rgba(244, 63, 94, 0.3);
  background: rgba(244, 63, 94, 0.08);
}

.ticker-source-tag.macro {
  color: var(--blue);
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.08);
}

.ticker-title-text {
  font-weight: 500;
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticker-impact-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}

.ticker-impact-pill.bullish {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ticker-impact-pill.bearish {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.ticker-impact-pill.neutral {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--border-color);
}

.btn-ticker-view-all {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  font-family: var(--font-sans);
}

.btn-ticker-view-all:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(229, 192, 123, 0.08);
}

/* ========== TOP MARKET RATES LIVE RIBBON ========== */
.top-market-rates-bar {
  display: flex;
  align-items: center;
  background: #0b0f19;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  padding: 0 16px;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  position: relative;
  z-index: 49;
  overflow: hidden;
}

.rates-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  margin-right: 14px;
  user-select: none;
}

.rates-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
  animation: pulseRatesDot 1.6s infinite ease-in-out;
}

@keyframes pulseRatesDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
}

.rates-track-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}

.rates-track {
  display: flex;
  width: max-content;
  user-select: none;
}

.rates-marquee-group {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
  padding-right: 32px; /* Exactly equals gap for 100% seamless transition */
  animation: ratesScrollMarquee 42s linear infinite;
  will-change: transform;
}

.rates-track-container:hover .rates-marquee-group {
  animation-play-state: paused;
}

@keyframes ratesScrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.rate-sym {
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
}

.rate-val {
  color: var(--text-primary);
  font-weight: 600;
  transition: color 0.3s ease;
}

.rate-val.tick-up {
  color: var(--green) !important;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.rate-val.tick-down {
  color: var(--red) !important;
  text-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
}

.rate-chg {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}

.rate-chg.up {
  color: var(--green);
  background: rgba(16, 185, 129, 0.1);
}

.rate-chg.down {
  color: var(--red);
  background: rgba(244, 63, 94, 0.1);
}

.rate-247-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 1px 5px;
  border-radius: 3px;
}

.crypto-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.9);
  animation: pulseGreenBeacon 1.2s infinite ease-in-out;
}

@keyframes pulseGreenBeacon {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.rates-loading-item {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: var(--font-sans);
}

/* =================================================================
   VIEW 5: GLOBAL BREAKING NEWS WIRE ROOM
   ================================================================= */
.newsroom-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.newsroom-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 22px;
}

.newsroom-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.newsroom-beacon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.8);
  animation: pulseAlertDot 1.4s infinite ease-in-out;
}

.newsroom-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.8px;
}

.newsroom-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.newsroom-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-news-refresh {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all 0.2s;
}

.btn-news-refresh:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(229, 192, 123, 0.08);
}

.news-last-sync {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Filters Bar */
.newsroom-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.news-filters-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.news-filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.news-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-glow);
  background: var(--bg-card-hover);
}

.news-filter-btn.active {
  color: var(--gold);
  border-color: rgba(229, 192, 123, 0.35);
  background: rgba(229, 192, 123, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.feed-dot {
  font-size: 0.65rem;
}
.feed-dot.gold { color: var(--gold); }
.feed-dot.red { color: var(--red); }
.feed-dot.blue { color: var(--blue); }

.news-stats-pill {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-card);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

/* Hero Flash Card */
.news-hero-card {
  background: linear-gradient(135deg, rgba(26, 32, 53, 0.95), rgba(17, 24, 39, 0.98));
  border: 1px solid rgba(229, 192, 123, 0.25);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.news-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold);
}

.hero-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-source-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-source-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(229, 192, 123, 0.12);
  color: var(--gold);
  border: 1px solid rgba(229, 192, 123, 0.3);
  text-transform: uppercase;
}

.hero-time-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.hero-impact-pill {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 5px;
  letter-spacing: 0.4px;
}

.hero-impact-pill.bullish {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.hero-impact-pill.bearish {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(244, 63, 94, 0.35);
}

.hero-impact-pill.neutral {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--border-color);
}

.hero-news-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 16px;
}

.hero-gold-impact-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 14px;
}

.impact-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.impact-box-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.impact-box-reason {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.impact-box-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.impact-meta-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.impact-meta-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hero-footer-link {
  display: flex;
  justify-content: flex-end;
}

.hero-ext-link {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-ext-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* News Stream Grid */
.news-stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s;
}

.news-card:hover {
  border-color: var(--border-glow);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.news-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.news-source-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.news-source-tag.trump {
  color: var(--gold);
  background: rgba(229, 192, 123, 0.08);
  border: 1px solid rgba(229, 192, 123, 0.25);
}

.news-source-tag.geopolitics {
  color: var(--red);
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.news-source-tag.macro {
  color: var(--blue);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.news-card-time {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.news-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.news-impact-strip {
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  margin-bottom: 12px;
}

.news-impact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.news-impact-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.news-impact-badge.bullish {
  color: var(--green);
  background: var(--green-bg);
}

.news-impact-badge.bearish {
  color: var(--red);
  background: var(--red-bg);
}

.news-impact-badge.neutral {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.1);
}

.news-impact-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.news-impact-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.news-ext-link {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.news-card:hover .news-ext-link {
  color: var(--gold);
}

/* Skeleton Loading Card */
.news-skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 18px;
}

@media (max-width: 768px) {
  .news-stream-grid {
    grid-template-columns: 1fr;
  }
  .newsroom-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .news-filters-group {
    width: 100%;
  }
  .news-filter-btn {
    flex: 1;
    justify-content: center;
    font-size: 0.7rem;
    padding: 6px 8px;
  }
}

/* ==========================================================================
   TRADINGVIEW BAR REPLAY SYSTEM (ระบบจำลองย้อนเวลากราฟ)
   ========================================================================== */

/* 1. Pro Tools Bar Replay Button */
.pro-tool-btn.replay {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.pro-tool-btn.replay:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fef08a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.pro-tool-btn.replay.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.32), rgba(217, 119, 6, 0.38)) !important;
  color: #fef08a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
  animation: pulseReplayBtn 2s infinite ease-in-out;
}

@keyframes pulseReplayBtn {
  0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.65); }
}

/* 2. Replay Pick Banner (Top instruction banner when picking a cut candle) */
.replay-pick-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(245, 158, 11, 0.25);
  padding: 6px 16px;
  border-radius: 20px;
  z-index: 40;
  backdrop-filter: blur(10px);
  color: #fef08a;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  animation: bannerSlideDown 0.25s ease;
  user-select: none;
}

@keyframes bannerSlideDown {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.replay-pick-icon {
  font-size: 1rem;
}

.replay-pick-cancel {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.replay-pick-cancel:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
}

/* 3. Floating TradingView-Style Bar Replay Control Bar */
.chart-replay-bar {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 22, 34, 0.94);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(56, 189, 248, 0.15);
  padding: 5px 10px;
  border-radius: 8px;
  z-index: 35;
  backdrop-filter: blur(14px);
  user-select: none;
  transition: box-shadow 0.2s ease;
}

.chart-replay-bar:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(56, 189, 248, 0.25);
}

.replay-drag-handle {
  cursor: grab;
  color: #64748b;
  font-size: 0.9rem;
  padding: 0 4px;
  user-select: none;
}

.replay-drag-handle:active {
  cursor: grabbing;
}

.replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-family: var(--font-sans);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  height: 28px;
}

.replay-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.replay-btn.jump {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.replay-btn.jump:hover {
  background: rgba(245, 158, 11, 0.22);
  color: #fef08a;
  border-color: #f59e0b;
}

.replay-btn.play {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
  border-color: rgba(16, 185, 129, 0.5);
  color: #4ade80;
  min-width: 32px;
}

.replay-btn.play:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.45));
  color: #86efac;
  border-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.replay-btn.play.is-playing {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border-color: rgba(245, 158, 11, 0.6);
  color: #fbbf24;
}

.replay-btn.close {
  color: #94a3b8;
  padding: 5px 8px;
}

.replay-btn.close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.replay-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 2px;
}

.replay-speed-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.replay-speed-select {
  background: #0f1118;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #38bdf8;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

.replay-speed-select:focus {
  border-color: #38bdf8;
}

.replay-status-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 4px;
  min-width: 110px;
}

.replay-bar-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #38bdf8;
}

.replay-bar-time {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: #94a3b8;
}

/* 4. Chart Canvas cursor when picking cut candle */
.fullchart-canvas-wrapper.replay-picking-mode,
.fullchart-canvas-wrapper.replay-picking-mode * {
  cursor: crosshair !important;
}

/* 5. Additional Floating Replay Bar Buttons (Date, Bar, Random) */
.replay-btn.date {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}
.replay-btn.date:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border-color: #38bdf8;
}

.replay-btn.barnum {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.35);
  background: rgba(192, 132, 252, 0.08);
}
.replay-btn.barnum:hover {
  background: rgba(192, 132, 252, 0.2);
  color: #e9d5ff;
  border-color: #c084fc;
}

.replay-btn.random {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}
.replay-btn.random:hover {
  background: rgba(251, 191, 36, 0.2);
  color: #fef08a;
  border-color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* 6. TradingView-Style "Select date" & Replay Jump Modal */
.replay-jump-modal {
  width: 360px !important;
  max-width: 95vw !important;
  background: #1e222d !important;
  border: 1px solid #2a2e39 !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  animation: tvModalFadeIn 0.18s ease-out;
}

@keyframes tvModalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.replay-jump-modal .dsm-header {
  padding: 12px 18px 10px;
  border-bottom: 1px solid #2a2e39;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.replay-jump-modal .dsm-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0f3fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
}

.replay-jump-modal .dsm-tabs {
  display: flex;
  background: #131722;
  border-bottom: 1px solid #2a2e39;
  padding: 2px 8px 0;
  gap: 4px;
}

.replay-jump-modal .dsm-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #787b86;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.replay-jump-modal .dsm-tab:hover {
  color: #d1d4dc;
}

.replay-jump-modal .dsm-tab.active {
  color: #2962ff;
  border-bottom-color: #2962ff;
}

/* TV Inputs Row (Date + Time) */
.tv-date-inputs-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.tv-input-field-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #131722;
  border: 1px solid #363a45;
  border-radius: 6px;
  padding: 0 10px;
  height: 38px;
  transition: border-color 0.15s ease;
}

.tv-input-field-wrap:focus-within {
  border-color: #2962ff;
  box-shadow: 0 0 0 1px #2962ff;
}

.tv-date-input,
.tv-time-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #d1d4dc;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  font-weight: 600;
  outline: none;
}

.tv-date-input::-webkit-calendar-picker-indicator,
.tv-time-input::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
  filter: invert(1);
}

.tv-input-icon {
  font-size: 0.85rem;
  color: #787b86;
  margin-left: 4px;
  pointer-events: none;
}

/* TV Interactive Calendar Container */
.tv-calendar-container {
  background: #181b25;
  border: 1px solid #2a2e39;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  user-select: none;
}

.tv-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.tv-cal-month-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #d1d4dc;
  font-family: var(--font-sans);
}

.tv-cal-nav-btn {
  background: transparent;
  border: none;
  color: #787b86;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.15s ease;
}

.tv-cal-nav-btn:hover {
  background: #2a2e39;
  color: #ffffff;
}

.tv-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: #787b86;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.tv-cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.tv-cal-day {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #d1d4dc;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.tv-cal-day:hover:not(.disabled):not(.empty) {
  background: #2a2e39;
  color: #ffffff;
}

/* White square selection box (Matching image!) */
.tv-cal-day.selected {
  background: #ffffff !important;
  color: #131722 !important;
  font-weight: 800 !important;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.tv-cal-day.today {
  border: 1px solid rgba(255, 215, 0, 0.6);
}

.tv-cal-day.disabled {
  color: #434651 !important;
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: none;
}

.tv-cal-day.empty {
  pointer-events: none;
}

/* Action: Select the first available day */
.tv-first-day-btn {
  width: 100%;
  background: #2a2e39;
  color: #d1d4dc;
  border: 1px solid #363a45;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.tv-first-day-btn:hover {
  background: #363a45;
  color: #ffffff;
  border-color: #4a4f5c;
}

/* Modal Footer Buttons */
.tv-btn-cancel {
  background: transparent;
  border: 1px solid #363a45;
  color: #d1d4dc;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tv-btn-cancel:hover {
  background: #2a2e39;
  color: #ffffff;
}

.tv-btn-select {
  background: #ffffff;
  border: none;
  color: #131722;
  border-radius: 6px;
  padding: 7px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tv-btn-select:hover {
  background: #f0f3fa;
  transform: translateY(-1px);
}

/* Bar Selection Tab */
.replay-bar-select-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.replay-field-label {
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 600;
}

.replay-bar-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.replay-slider {
  flex: 1;
  accent-color: var(--gold);
  cursor: pointer;
}

.replay-bar-num-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #131722;
  border: 1px solid #363a45;
  padding: 2px 8px;
  border-radius: 6px;
}

.badge-prefix {
  font-size: 0.7rem;
  color: #787b86;
}

.tv-bar-num-input {
  width: 50px;
  background: transparent;
  border: none;
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.badge-total {
  font-size: 0.7rem;
  color: #787b86;
  font-family: var(--font-mono);
}

.replay-selected-bar-info {
  background: #181b25;
  border: 1px solid #2a2e39;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.replay-selected-bar-info .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}

.replay-selected-bar-info .info-label {
  color: #94a3b8;
}

.replay-selected-bar-info .info-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #e2e8f0;
}

.replay-selected-bar-info .info-val.gold {
  color: #fbbf24;
}

.replay-quick-presets-label {
  font-size: 0.72rem;
  color: #787b86;
  font-weight: 600;
  margin-top: 4px;
}

.replay-quick-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preset-pill {
  background: #1e222d;
  border: 1px solid #363a45;
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-pill:hover {
  background: #2a2e39;
  border-color: #fbbf24;
  color: #fef08a;
}

/* Random Bar Tab */
.replay-random-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 0;
}

.random-hero-icon {
  font-size: 2.5rem;
  animation: diceRotate 3s infinite ease-in-out;
}

@keyframes diceRotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(15deg) scale(1.1); }
}

.random-hero-title {
  font-size: 1rem;
  font-weight: 800;
  color: #f0f3fa;
}

.random-hero-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

.random-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: #181b25;
  border: 1px solid #2a2e39;
  border-radius: 6px;
  padding: 10px 12px;
}

.random-radio-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: #cbd5e1;
  cursor: pointer;
}

.random-radio-opt input {
  accent-color: #fbbf24;
  cursor: pointer;
}

.tv-random-trigger-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.85), rgba(217, 119, 6, 0.9));
  border: 1px solid #f59e0b;
  color: #0f172a;
  border-radius: 6px;
  padding: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}

.tv-random-trigger-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

/* Modal Backdrops Universal Show / Open Support */
.drawing-settings-modal-backdrop.show,
.drawing-settings-modal-backdrop.open {
  display: flex !important;
}

/* =================================================================
   REAPERX AI CHIEF ECONOMIST & GOLD STRATEGIST CHAT ROOM
   ================================================================= */
.pro-tool-btn.aichat {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 95, 70, 0.28)) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.22);
}
.pro-tool-btn.aichat:hover,
.pro-tool-btn.aichat.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.45)) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}

/* Dedicated Tab: View Container */
#view-aichat {
  display: none;
  width: 100%;
}
#view-aichat.active {
  display: flex;
  flex-direction: column;
}

.aichat-room-container {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 165px);
  min-height: 600px;
}

/* Header Card */
.aichat-header-card {
  background: linear-gradient(135deg, #111827 0%, #172033 100%);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.aichat-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.aichat-avatar-pulse {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(229, 192, 123, 0.25);
  flex-shrink: 0;
}
.aichat-avatar-text {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
}
.aichat-status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #0f172a;
  box-shadow: 0 0 8px #10b981;
}

.aichat-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.aichat-doctor-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}
.aichat-role-badge {
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.aichat-firm-badge {
  font-size: 0.7rem;
  background: rgba(229, 192, 123, 0.12);
  color: var(--gold);
  border: 1px solid rgba(229, 192, 123, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.aichat-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.aichat-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.aichat-grounding-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #34d399;
}
.btn-clear-chat {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-clear-chat:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
}

/* Chat Feed Window */
.aichat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0d121f;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
  position: relative;
}
.aichat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
}

/* Message Rows */
.aichat-msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}
.aichat-msg-row.user-row {
  justify-content: flex-end;
}
.aichat-msg-row.assistant-row {
  justify-content: flex-start;
}

.aichat-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(229, 192, 123, 0.2);
}
.aichat-msg-avatar.user-avatar {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #bfdbfe;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
}

.aichat-bubble {
  padding: 16px 20px;
  border-radius: 12px;
  position: relative;
  max-width: 82%;
  line-height: 1.6;
}
.user-bubble {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.4), rgba(29, 78, 216, 0.35));
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-top-right-radius: 2px;
  color: #f1f5f9;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.assistant-bubble {
  background: #151d30;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-left: 3px solid var(--gold);
  border-top-left-radius: 2px;
  color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.aichat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.72rem;
}
.aichat-author-name {
  font-weight: 700;
  color: var(--gold);
}
.user-bubble .aichat-author-name {
  color: #93c5fd;
}
.aichat-msg-time {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Markdown Typography Inside Bubble */
.markdown-body .aichat-h3 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--gold);
  margin: 10px 0 6px 0;
  border-bottom: 1px solid rgba(229, 192, 123, 0.2);
  padding-bottom: 4px;
}
.markdown-body .aichat-h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #67e8f9;
  margin: 10px 0 4px 0;
}
.markdown-body .aichat-h5 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #a78bfa;
  margin: 8px 0 4px 0;
}
.markdown-body .aichat-p {
  font-size: 0.88rem;
  margin: 6px 0;
  color: #e2e8f0;
}
.price-highlight-pill {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold);
  background: rgba(229, 192, 123, 0.14);
  border: 1px solid rgba(229, 192, 123, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
}
.aichat-bullet-list {
  margin: 6px 0 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aichat-list-item {
  font-size: 0.86rem;
  color: #cbd5e1;
}
.aichat-num-item {
  font-size: 0.86rem;
  color: #cbd5e1;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
}
.num-badge {
  background: rgba(229, 192, 123, 0.2);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Typing Indicator */
.aichat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(15, 23, 42, 0.8);
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.1); opacity: 1; }
}
.typing-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Quick Prompt Chips */
.aichat-chips-container {
  padding: 10px 18px;
  background: rgba(17, 24, 39, 0.75);
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.chips-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.aichat-quick-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 23, 42, 0.6);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.aichat-quick-chips::-webkit-scrollbar,
.drawer-chips::-webkit-scrollbar {
  height: 6px;
}
.aichat-quick-chips::-webkit-scrollbar-track,
.drawer-chips::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}
.aichat-quick-chips::-webkit-scrollbar-thumb,
.drawer-chips::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 4px;
}
.aichat-quick-chips::-webkit-scrollbar-thumb:hover,
.drawer-chips::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}
.aichat-chip-btn {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
  user-select: none;
}
.aichat-chip-btn:hover {
  background: rgba(229, 192, 123, 0.15);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

/* Input Bar */
.aichat-input-bar {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  background: #111827;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  align-items: flex-end;
}
.aichat-input-bar textarea {
  flex: 1;
  background: #0b0f19;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 10px 14px;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  outline: none;
  transition: border-color 0.2s;
}
.aichat-input-bar textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(229, 192, 123, 0.2);
}
.aichat-send-btn {
  background: linear-gradient(135deg, #d97706, #b45309);
  border: 1px solid var(--gold);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.3);
}
.aichat-send-btn:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
}
.aichat-disclaimer {
  padding: 6px 18px 8px;
  font-size: 0.68rem;
  color: var(--text-muted);
  background: #111827;
  text-align: center;
}

/* =================================================================
   IN-CHART SLIDE-OVER DRAWER (FULL-OPTION CO-PILOT)
   ================================================================= */
.chart-aichat-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  min-width: 330px;
  max-width: calc(100vw - 40px);
  background: rgba(13, 18, 31, 0.97);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: -10px 0 35px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.chart-aichat-drawer.resizing {
  transition: none !important;
  user-select: none;
}
.chart-aichat-drawer.open {
  transform: translateX(0);
}

/* Resizer Drag Handle on Left Edge */
.aichat-drawer-resizer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.aichat-drawer-resizer:hover .resizer-handle-line,
.chart-aichat-drawer.resizing .resizer-handle-line {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(229, 192, 123, 0.85);
  width: 4px;
}
.resizer-handle-line {
  width: 3px;
  height: 52px;
  background: rgba(148, 163, 184, 0.35);
  border-radius: 3px;
  transition: all 0.2s ease;
}

.aichat-drawer-header {
  padding: 14px 16px;
  background: #111827;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.aichat-drawer-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aichat-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aichat-profile-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f8fafc;
}
.aichat-profile-title {
  font-size: 0.7rem;
  color: #34d399;
  font-weight: 600;
}
.aichat-drawer-actions {
  display: flex;
  gap: 6px;
}
.aichat-btn-action {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.aichat-btn-action:hover {
  background: #334155;
  color: #ffffff;
}
.aichat-btn-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171;
}

.aichat-drawer-grounding-pill {
  padding: 6px 14px;
  background: rgba(16, 185, 129, 0.08);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #34d399;
  font-weight: 600;
}

/* Feed & Message Bubbles Inside Drawer (Fix Overflow) */
.drawer-feed {
  padding: 14px;
  gap: 14px;
  overflow-x: hidden;
  box-sizing: border-box;
}
.drawer-feed .aichat-msg-row {
  max-width: 100%;
  box-sizing: border-box;
}
.drawer-feed .aichat-bubble {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 48px);
  padding: 12px 14px;
  font-size: 0.84rem;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  line-break: anywhere;
}
.drawer-feed .aichat-bubble * {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

.drawer-chips {
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 23, 42, 0.6);
  -webkit-overflow-scrolling: touch;
}
.drawer-chips .aichat-chip-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.drawer-bar {
  padding: 10px 14px;
}
.drawer-bar textarea {
  font-size: 0.82rem;
  padding: 8px 10px;
  min-height: 38px;
}
.drawer-bar .aichat-send-btn {
  padding: 8px 14px;
  height: 38px;
}

/* Floating AI Co-Pilot Button on Chart Canvas */
.chart-floating-copilot-btn {
  position: absolute;
  top: 12px;
  right: 68px; /* Safe distance from price scale */
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(16, 185, 129, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.chart-floating-copilot-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(6, 78, 59, 0.95));
  border-color: #10b981;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 18px rgba(16, 185, 129, 0.5);
}
.copilot-beacon-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseBeacon 1.8s infinite;
}
@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #10b981; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Toolbar button highlight for AI Co-Pilot */
.pro-tool-btn.aichat.highlight-copilot {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(30, 41, 59, 0.8)) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pro-tool-btn.aichat.highlight-copilot:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(6, 78, 59, 0.9)) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}
.pro-tool-btn.aichat.highlight-copilot.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(5, 150, 105, 0.6)) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
}
.copilot-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

@media (max-width: 768px) {
  .aichat-room-container {
    height: calc(100vh - 120px);
  }
  .aichat-header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .aichat-header-right {
    width: 100%;
    justify-content: space-between;
  }
  .chart-aichat-drawer {
    width: 100%;
    max-width: 100vw;
  }
}

/* ======================================================== */
/* Cross-Asset Real-Time Gold Bias Summary                  */
/* ======================================================== */
.cross-asset-macro-summary {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s ease;
}

.cross-asset-macro-summary.bullish {
  background: linear-gradient(145deg, rgba(0, 230, 118, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-color: rgba(0, 230, 118, 0.3);
  box-shadow: 0 4px 16px rgba(0, 230, 118, 0.06);
}

.cross-asset-macro-summary.bearish {
  background: linear-gradient(145deg, rgba(255, 82, 82, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-color: rgba(255, 82, 82, 0.3);
  box-shadow: 0 4px 16px rgba(255, 82, 82, 0.06);
}

.cross-asset-macro-summary.neutral {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}

.ca-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ca-summary-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.ca-bias-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ca-bias-badge.bullish {
  background: rgba(0, 230, 118, 0.16);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.35);
}

.ca-bias-badge.bearish {
  background: rgba(255, 82, 82, 0.16);
  color: #ff5252;
  border: 1px solid rgba(255, 82, 82, 0.35);
}

.ca-bias-badge.neutral {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.ca-summary-headline {
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}

.ca-summary-details {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ca-detail-point {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ca-detail-bullet {
  color: var(--gold);
  font-size: 0.65rem;
  margin-top: 2px;
}

/* ======================================================== */
/* Live War Room: Latest Released News Card                 */
/* ======================================================== */
.warroom-latest-released-card {
  margin-top: 20px;
  background: linear-gradient(145deg, rgba(16, 24, 40, 0.85) 0%, rgba(10, 15, 29, 0.95) 100%);
  border: 1px solid rgba(0, 230, 118, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 230, 118, 0.05);
}

.wr-released-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wr-released-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wr-released-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #00e676;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.wr-released-event-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.3px;
}

.wr-released-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.wr-released-reaction-pill {
  font-size: 0.86rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: #00e676;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.15);
}

.wr-released-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .wr-released-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wr-rel-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wr-rel-stat.highlight {
  background: rgba(0, 230, 118, 0.06);
  border-color: rgba(0, 230, 118, 0.25);
}

.wr-rel-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.wr-rel-stat-val {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
}

.wr-rel-stat-val.green {
  color: #00e676;
}

.wr-rel-stat-val.orange {
  color: #f59e0b;
}

.wr-rel-stat-val.red {
  color: #ff5252;
}

.wr-rel-stat-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.wr-released-summary-box {
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid #00e676;
  padding: 12px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.wr-rel-summary-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}

.wr-rel-summary-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ======================================================== */
/* Coach Intelligence: Hourly Sync & Pulse Card            */
/* ======================================================== */
.coach-hourly-sync-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-top: 14px;
}

.hourly-sync-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hourly-pulse-icon {
  font-size: 1.1rem;
}

.hourly-sync-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
}

.hourly-sync-time {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.btn-coach-hourly-refresh {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-coach-hourly-refresh:hover {
  background: rgba(245, 158, 11, 0.28);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.coach-hourly-pulse-card {
  border-color: rgba(245, 158, 11, 0.25) !important;
  background: linear-gradient(145deg, rgba(24, 20, 10, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
}

.hourly-pulse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .hourly-pulse-grid {
    grid-template-columns: 1fr;
  }
}

.hourly-pulse-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.hourly-item-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hourly-item-body {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.cal-released-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #00e676;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
}

.cal-data-value.actual-pending {
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* ======================================================== */
/* Calendar Filter Tabs                                     */
/* ======================================================== */
.cal-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cal-tab-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-tab-btn:hover {
  color: #fff;
  border-color: rgba(229, 192, 123, 0.3);
}

.cal-tab-btn.active {
  background: rgba(229, 192, 123, 0.15);
  color: var(--gold);
  border-color: rgba(229, 192, 123, 0.5);
  font-weight: 600;
}

/* ======================================================== */
/* AI Voice Audio Briefing Player Widget                    */
/* ======================================================== */
.coach-audio-player-card {
  background: linear-gradient(135deg, rgba(20, 26, 46, 0.95) 0%, rgba(13, 17, 30, 0.98) 100%);
  border: 1px solid rgba(229, 192, 123, 0.3);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(229, 192, 123, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.audio-player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.audio-speaker-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(229, 192, 123, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(229, 192, 123, 0.25);
  display: inline-block;
  margin-bottom: 4px;
}

.audio-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 2px 0;
}

.audio-subtext {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.audio-wave-anim {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  padding: 0 8px;
}

.audio-wave-anim .bar {
  width: 3px;
  background: var(--gold);
  border-radius: 2px;
  height: 6px;
  transition: height 0.2s ease;
}

.audio-wave-anim.playing .bar {
  animation: audioWave 1.2s infinite ease-in-out alternate;
}

.audio-wave-anim.playing .bar-1 { animation-delay: 0.1s; height: 16px; }
.audio-wave-anim.playing .bar-2 { animation-delay: 0.3s; height: 24px; }
.audio-wave-anim.playing .bar-3 { animation-delay: 0.2s; height: 12px; }
.audio-wave-anim.playing .bar-4 { animation-delay: 0.4s; height: 20px; }
.audio-wave-anim.playing .bar-5 { animation-delay: 0.15s; height: 10px; }

@keyframes audioWave {
  0% { height: 4px; }
  50% { height: 22px; }
  100% { height: 8px; }
}

.audio-controls-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-audio-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0b0f19;
  border: none;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}

.btn-audio-play:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

.audio-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.audio-progress-slider {
  flex: 1;
  accent-color: var(--gold);
  height: 4px;
  cursor: pointer;
}

.audio-time {
  font-size: 0.74rem;
  font-family: monospace;
  color: var(--text-muted);
}

.audio-speed-group {
  display: flex;
  gap: 4px;
}

.btn-speed {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-speed.active {
  background: rgba(229, 192, 123, 0.2);
  color: var(--gold);
  border-color: rgba(229, 192, 123, 0.5);
  font-weight: 700;
}

.audio-transcript-toggle {
  font-size: 0.76rem;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.audio-transcript-toggle:hover {
  color: var(--gold);
}

.audio-transcript-body {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.8;
  max-height: 200px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Transcript sentence highlighting during playback */
.transcript-active-sentence {
  color: var(--gold);
  background: rgba(245, 158, 11, 0.12);
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(245, 158, 11, 0.4);
}

.transcript-spoken-sentence {
  color: var(--text-muted);
  opacity: 0.55;
  transition: all 0.3s ease;
}

.transcript-pending-sentence {
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

/* ======================================================== */
/* Live War Room: Daily Multi-News Clash & USD Synthesis    */
/* ======================================================== */
.warroom-daily-synthesis-card {
  margin-top: 20px;
  background: linear-gradient(145deg, rgba(16, 24, 40, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.08);
}

.wr-synth-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 14px;
}

.wr-synth-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 6px;
}

.wr-synth-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 2px 0 4px 0;
  line-height: 1.35;
}

.wr-synth-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.wr-synth-pills-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.synth-pill {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.synth-pill.usd-rebound {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.synth-pill.gold-spike {
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.35);
}

.wr-multi-news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 992px) {
  .wr-multi-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .wr-multi-news-grid {
    grid-template-columns: 1fr;
  }
}

.wr-news-col {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wr-news-col.highlight-bull {
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.04);
}

.wr-news-col.highlight-bear {
  border-color: rgba(255, 82, 82, 0.35);
  background: rgba(255, 82, 82, 0.04);
}

.news-col-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-tier-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.news-tier-badge.red {
  background: rgba(255, 82, 82, 0.2);
  color: #ff5252;
  border: 1px solid rgba(255, 82, 82, 0.4);
}

.news-tier-badge.orange {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.news-time-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.news-col-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  min-height: 38px;
}

.news-col-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: 4px;
}

.news-col-values .num {
  font-weight: 700;
}

.news-col-values .num.green { color: #00e676; }
.news-col-values .num.orange { color: #f59e0b; }
.news-col-values .num.red { color: #ff5252; }

.news-impact-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
}

.news-impact-tag.cool {
  background: rgba(0, 230, 118, 0.1);
  color: #00e676;
}

.news-impact-tag.hot {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.wr-seq-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}

.wr-seq-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 10px;
}

.wr-seq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .wr-seq-steps {
    grid-template-columns: 1fr;
  }
}

.wr-seq-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px;
}

.wr-seq-step.highlight-step {
  border-color: rgba(0, 230, 118, 0.3);
  background: rgba(0, 230, 118, 0.03);
}

.wr-seq-step.highlight-revert {
  border-color: rgba(255, 82, 82, 0.3);
  background: rgba(255, 82, 82, 0.03);
}

.seq-step-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.seq-step-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
}

.seq-step-badge.green { background: rgba(0, 230, 118, 0.2); color: #00e676; }
.seq-step-badge.red { background: rgba(255, 82, 82, 0.2); color: #ff5252; }

.seq-step-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
}

.seq-step-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.wr-synth-footer {
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.5;
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
  padding: 8px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ======================================================== */
/* Pre-Release Probability & Sequence Matrix Card           */
/* ======================================================== */
.warroom-scenario-matrix-card {
  margin-top: 16px;
  background: linear-gradient(145deg, rgba(14, 20, 36, 0.95) 0%, rgba(9, 13, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 20px;
}

.scenario-matrix-header {
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.matrix-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(229, 192, 123, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(229, 192, 123, 0.25);
  display: inline-block;
  margin-bottom: 6px;
}

.matrix-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 2px 0 4px 0;
}

.matrix-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.scenario-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .scenario-matrix-grid {
    grid-template-columns: 1fr;
  }
}

.scenario-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scenario-card.active-scenario {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.05);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

.sc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.sc-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
}

.sc-badge.best-prob {
  color: #f59e0b;
}

.sc-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.sc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.76rem;
}

.sc-row {
  display: flex;
  gap: 6px;
}

.sc-row .lbl {
  color: var(--text-muted);
  min-width: 85px;
}

.sc-row .val {
  color: var(--text-primary);
  font-weight: 500;
}

.sc-row .val.green { color: #00e676; }
.sc-row .val.orange { color: #f59e0b; }
.sc-row .val.red { color: #ff5252; }

.sc-action {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.4;
}