/* ==========================================================================
   VOL SPIKE CANDIDATE — COMPONENTS & INTERACTIVE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter & Toolbar (Compact & Sleek)
   -------------------------------------------------------------------------- */
.filter-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 6px;
  height: 36px;
  min-height: 36px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  width: 260px;
  height: 28px;
  flex-shrink: 0;
  transition: width 0.2s ease, border-color 0.2s ease;
}
.search-box:focus-within {
  border-color: var(--accent-cyan);
}
.search-box input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font-size: 11.5px !important;
  outline: none !important;
  width: 100% !important;
  padding: 0 !important;
  font-family: var(--font-mono) !important;
}

.filter-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}
.filter-chips::-webkit-scrollbar {
  display: none;
}

.chip-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  height: 26px;
}
.chip-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.chip-btn.active {
  background: var(--accent-cyan-subtle);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.chip-btn.active.bull {
  background: var(--bull-green-subtle);
  border-color: var(--bull-green);
  color: var(--bull-green);
}
.chip-btn.active.bear {
  background: var(--bear-red-subtle);
  border-color: var(--bear-red);
  color: var(--bear-red);
}

.advanced-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  height: 26px;
}
.advanced-filter-toggle:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.hud-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-cyan);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  height: 26px;
}
.hud-toggle-btn:hover {
  background: rgba(0, 210, 196, 0.18);
  border-color: var(--accent-cyan);
}
.hud-toggle-btn.active {
  background: var(--accent-cyan);
  color: #07090E;
  font-weight: 800;
}

.advanced-filters-panel {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.advanced-filters-panel.open {
  display: grid;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-field label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.filter-field input,
.filter-field select,
.filter-field textarea {
  width: 100%;
  background: #0A0F18 !important;
  border: 1px solid #1E293B !important;
  color: #F1F5F9 !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
  outline: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-field input:focus,
.filter-field select:focus,
.filter-field textarea:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 210, 196, 0.15) !important;
}
.filter-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-range-inputs input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-mono);
  outline: none;
}
.filter-range-inputs input:focus {
  border-color: var(--accent-cyan);
}

/* --------------------------------------------------------------------------
   Market Scanner Table & Desktop Fit
   -------------------------------------------------------------------------- */
.table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  height: calc(100vh - 215px);
  max-height: calc(100vh - 215px);
  width: 100%;
  min-width: 100%;
}

.market-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  white-space: nowrap;
  table-layout: auto;
}

.market-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-header);
}

.market-table th {
  padding: 7px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.market-table th:hover {
  color: var(--accent-cyan);
}
.market-table th.sorted-asc::after {
  content: ' ▲';
  color: var(--accent-cyan);
  font-size: 8px;
}
.market-table th.sorted-desc::after {
  content: ' ▼';
  color: var(--accent-cyan);
  font-size: 8px;
}

.th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.col-filter-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  transition: all 0.15s ease;
  opacity: 0.5;
  line-height: 1;
}
.th-content:hover .col-filter-btn {
  opacity: 1;
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.col-filter-btn:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  background: rgba(0, 210, 196, 0.1) !important;
  opacity: 1 !important;
}
.col-filter-btn.has-filter {
  background: rgba(0, 210, 196, 0.15) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  opacity: 1 !important;
  font-weight: bold;
}

/* Active Column Filters Row */
.active-col-filters-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: #0A0F18;
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 11px;
  flex-wrap: wrap;
  animation: fadeIn 0.15s ease;
}
.active-filters-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}
.active-filters-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-rule-pill {
  background: #111827;
  border: 1px solid var(--accent-cyan);
  color: #F1F5F9;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-rule-pill .remove-rule-btn {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  border: none;
  background: transparent;
  line-height: 1;
}
.filter-rule-pill .remove-rule-btn:hover {
  color: var(--bear-red);
}
.clear-all-col-filters-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}
.clear-all-col-filters-btn:hover {
  border-color: var(--bear-red);
  color: var(--bear-red);
  background: rgba(255, 59, 48, 0.08);
}

/* Floating Column Filter Popover */
.column-filter-popover {
  position: fixed;
  z-index: 2000;
  width: 290px;
  background: #0A0F18;
  border: 1px solid #1E293B;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 210, 196, 0.2);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(12px);
  animation: fadeIn 0.12s ease;
}
.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}
.popover-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.popover-icon {
  color: var(--accent-cyan);
  font-size: 12px;
}
.popover-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.3px;
}
.popover-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.popover-close-btn:hover {
  color: var(--text-primary);
}
.popover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.popover-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.popover-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.popover-preset-chip {
  background: #111827;
  border: 1px solid #1E293B;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.popover-preset-chip:hover,
.popover-preset-chip.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.1);
}
.popover-op-row {
  width: 100%;
}
.popover-inputs-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.popover-input-wrap {
  display: flex;
  align-items: center;
  background: #06090E;
  border: 1px solid #1E293B;
  border-radius: 4px;
  padding: 0 6px;
  flex: 1;
}
.popover-input-wrap:focus-within {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(0, 210, 196, 0.15);
}
.popover-input-wrap input {
  background: transparent !important;
  border: none !important;
  padding: 6px 4px !important;
  color: #F1F5F9 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  width: 100%;
  outline: none !important;
}
.popover-input-prefix,
.popover-input-suffix {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.popover-between-sep {
  font-size: 10px;
  color: var(--text-muted);
}
.popover-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}
.popover-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}
.popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}

.market-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.12s ease;
  cursor: pointer;
  position: relative;
}
.market-table tbody tr:hover {
  background-color: rgba(0, 210, 196, 0.04);
}
.market-table tbody tr:hover td:nth-child(1) {
  box-shadow: inset 3px 0 0 var(--accent-cyan);
}
.market-table tbody tr.selected-token-row {
  background-color: rgba(0, 210, 196, 0.08) !important;
}
.market-table tbody tr.selected-token-row td:nth-child(1) {
  box-shadow: inset 3px 0 0 var(--accent-cyan);
}
.market-table tbody tr.selected-token-row td:nth-child(1),
.market-table tbody tr.selected-token-row td:nth-child(2) {
  background: #111B28 !important;
}

.market-table td {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}

/* Sticky Pinned Star & Token Columns on Horizontal Scroll */
.market-table th:nth-child(1),
.market-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--bg-card);
  width: 28px;
  min-width: 28px;
  text-align: center;
}
.market-table thead th:nth-child(1) {
  z-index: 15;
  background: var(--bg-header);
}

.market-table th:nth-child(2),
.market-table td:nth-child(2) {
  position: sticky;
  left: 28px;
  z-index: 5;
  background: var(--bg-card);
  box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.45);
}
.market-table thead th:nth-child(2) {
  z-index: 15;
  background: var(--bg-header);
}

.market-table tbody tr:hover td:nth-child(1),
.market-table tbody tr:hover td:nth-child(2) {
  background: #111824;
}

/* Specific Column Badges & Cells */
.symbol-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
}
.fav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.fav-btn.active {
  color: var(--accent-amber);
}

.whale-badge {
  font-size: 13px;
  line-height: 1;
}

.trend-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
}
.trend-badge.bull {
  background: var(--bull-green-subtle);
  color: var(--bull-green);
}
.trend-badge.bear {
  background: var(--bear-red-subtle);
  color: var(--bear-red);
}
.trend-badge.neutral {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

.spike-bar-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.spike-meter {
  width: 40px;
  height: 4px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.spike-meter-fill {
  height: 100%;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.signal-pill {
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-sans);
  letter-spacing: 0.3px;
}
.signal-pill.strong-long {
  background: var(--bull-green);
  color: #080B10;
}
.signal-pill.long {
  background: var(--bull-green-subtle);
  color: var(--bull-green);
  border: 1px solid var(--bull-green);
}
.signal-pill.strong-short {
  background: var(--bear-red);
  color: #FFFFFF;
}
.signal-pill.short {
  background: var(--bear-red-subtle);
  color: var(--bear-red);
  border: 1px solid var(--bear-red);
}
.signal-pill.watch {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.sparkline-canvas {
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Token Detail Slide-Over Panel
   -------------------------------------------------------------------------- */
.detail-panel {
  position: fixed;
  top: 0;
  right: -560px;
  width: 540px;
  max-width: 92vw;
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border-strong);
  box-shadow: -14px 0 45px rgba(0, 0, 0, 0.85);
  z-index: 1050;
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.detail-panel.open {
  right: 0;
}

.detail-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-header);
  position: sticky;
  top: 0;
  z-index: 10;
}
.detail-symbol-title {
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeframe-selector {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tf-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
}
.tf-btn.active {
  background: var(--accent-cyan);
  color: #080B10;
  border-color: var(--accent-cyan);
}

.canvas-chart {
  width: 100%;
  height: 240px;
  background: #06090E;
  border-radius: var(--radius-sm);
}

.metrics-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-metric-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
}
.detail-metric-row span:first-child {
  color: var(--text-muted);
}

/* SMC Overlays Toggle Button */
.smc-toggle-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.smc-toggle-btn.active {
  background: rgba(0, 210, 196, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* L2 Order Book Depth Chart & Imbalance Visualizer */
.depth-chart-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.depth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.depth-title {
  color: #F1F5F9;
  letter-spacing: 0.5px;
}
.depth-live-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  background: rgba(0, 230, 118, 0.15);
  color: var(--bull-green);
  border: 1px solid rgba(0, 230, 118, 0.3);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.depth-imbalance-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.depth-imbalance-bar {
  width: 110px;
  height: 6px;
  background: #111827;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.depth-bar-bid {
  background: var(--bull-green);
  height: 100%;
  transition: width 0.3s ease;
}
.depth-bar-ask {
  background: var(--bear-red);
  height: 100%;
  transition: width 0.3s ease;
}
.depth-canvas {
  width: 100%;
  height: 135px;
  background: #06090E;
  border-radius: var(--radius-sm);
  display: block;
}
.depth-footer {
  font-size: 10px;
}

/* 1-Click Institutional Trade Plan Card */
.trade-plan-card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trade-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plan-bias-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.plan-bias-badge.bull {
  background: var(--bull-green-subtle);
  color: var(--bull-green);
  border: 1px solid var(--bull-green);
}
.plan-bias-badge.bear {
  background: var(--bear-red-subtle);
  color: var(--bear-red);
  border: 1px solid var(--bear-red);
}
.trade-plan-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
}
.trade-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.plan-input-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.plan-input-group label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.plan-input {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
}
.plan-input:focus {
  border-color: var(--accent-cyan);
  outline: none;
}
.plan-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px;
  background: #080C14;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.plan-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-stat-lbl {
  font-size: 9px;
  color: var(--text-muted);
}
.plan-stat-val {
  font-size: 11px;
  font-family: var(--font-mono);
}
.trade-plan-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.plan-btn-binance {
  flex: 1 1 180px;
  background: var(--accent-cyan);
  color: #080B10;
  text-decoration: none;
  font-weight: 700;
  font-size: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s ease;
}
.plan-btn-binance:hover {
  opacity: 0.9;
}
.plan-btn-bybit {
  flex: 1 1 180px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #F59E0B;
  text-decoration: none;
  font-weight: 700;
  font-size: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.plan-btn-bybit:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #F59E0B;
  color: #FFAE19;
}
.plan-btn-copy {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.plan-btn-copy:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.plan-btn-dispatch {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.plan-btn-dispatch:hover {
  background: rgba(0, 210, 196, 0.15);
}
.plan-btn-okx {
  flex: 1 1 140px;
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid rgba(0, 102, 255, 0.4);
  color: #388BFD;
  text-decoration: none;
  font-weight: 700;
  font-size: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.plan-btn-okx:hover {
  background: rgba(0, 102, 255, 0.25);
  border-color: #388BFD;
  color: #58A6FF;
}
.plan-btn-tv {
  flex: 1 1 140px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: #00E676;
  text-decoration: none;
  font-weight: 700;
  font-size: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.plan-btn-tv:hover {
  background: rgba(0, 230, 118, 0.22);
  border-color: #00E676;
  color: #10B981;
}
.plan-btn-bot {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 210, 196, 0.35);
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.plan-btn-bot:hover {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
}


/* --------------------------------------------------------------------------
   Institutional Category Momentum Ticker Strip (CoinGecko Data)
   -------------------------------------------------------------------------- */
.category-ticker-strip {
  display: flex;
  align-items: center;
  background: #0B0F17;
  border-bottom: 1px solid var(--border-subtle);
  padding: 3px 12px;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: none;
}
.category-ticker-strip::-webkit-scrollbar {
  display: none;
}
.cat-ticker-pulse-wrap {
  display: flex;
  align-items: center;
  padding-right: 6px;
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.cat-live-pulse {
  width: 6px;
  height: 6px;
  background: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulse-cyan 1.5s infinite;
}
@keyframes pulse-cyan {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.cat-ticker-track {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cat-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.cat-ticker-item:hover {
  filter: brightness(1.3);
  transform: translateY(-1px);
}
.cat-sector-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.cat-ticker-name {
  font-weight: 800;
  letter-spacing: 0.02em;
}
.cat-ticker-chg {
  font-size: 9.5px;
}

/* --------------------------------------------------------------------------
   Heatmap View & Grouped Treemap System
   -------------------------------------------------------------------------- */
.heatmap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.heatmap-mode-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.heatmap-mode-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-right: 4px;
}
.heatmap-mode-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.heatmap-mode-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.heatmap-mode-btn.active {
  background: var(--accent-cyan-subtle);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 700;
}

.heatmap-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.heatmap-sector-group {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease;
}
.heatmap-sector-group:hover {
  border-color: rgba(0, 210, 196, 0.35);
}

.heatmap-sector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 8px;
}
.heatmap-sector-title {
  font-size: 13px;
  color: #F1F5F9;
  letter-spacing: 0.2px;
}
.heatmap-sector-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.filter-sector-link {
  background: transparent;
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-cyan);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-sector-link:hover {
  background: var(--accent-cyan);
  color: #080B10;
}

.heatmap-tiles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.heatmap-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.heatmap-tile:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.heatmap-symbol {
  font-weight: 800;
  font-size: 12px;
  color: #FFFFFF;
}
.heatmap-change {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #FFFFFF;
}
.heatmap-vol {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   AI Signals Grid
   -------------------------------------------------------------------------- */
.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.signal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s ease;
}
.signal-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}
.signal-card.highlight-long {
  border-left: 4px solid var(--bull-green);
}
.signal-card.highlight-short {
  border-left: 4px solid var(--bear-red);
}

.signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.score-badge {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.score-badge span {
  font-size: 10px;
  color: var(--text-muted);
}

.factor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.factor-tag {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Strategy Builder & Backtest
   -------------------------------------------------------------------------- */
.strategy-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.builder-box, .backtest-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rule-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-row select, .rule-row input {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
}
.rule-row select:focus, .rule-row input:focus {
  border-color: var(--accent-cyan);
}

.btn-primary {
  background: var(--accent-cyan);
  color: #080B10;
  border: none;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-outline:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.equity-curve-canvas {
  width: 100%;
  height: 200px;
  background: #06090E;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Risk Calculator & Journal
   -------------------------------------------------------------------------- */
.risk-calc-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
}

.calc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calc-card input,
.calc-card select {
  width: 100%;
  background: #0A0F18 !important;
  border: 1px solid #1E293B !important;
  color: #F1F5F9 !important;
  padding: 9px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-family: var(--font-mono) !important;
  outline: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.calc-card input:focus,
.calc-card select:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 210, 196, 0.15) !important;
}

.calc-result-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

.calc-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calc-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.calc-stat-val {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow-card);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInRight 0.2s ease;
  pointer-events: auto;
  max-width: 320px;
}
.toast.bull { border-left-color: var(--bull-green); }
.toast.bear { border-left-color: var(--bear-red); }
.toast.warning { border-left-color: var(--accent-amber); }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Multi-Chart Terminal Grid (2x2)
   -------------------------------------------------------------------------- */
.multichart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.multichart-cell {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.multichart-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.multichart-canvas {
  width: 100%;
  height: 220px;
  background: #06090E;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Whale Tape & CVD Progress Bar (Compact & Sleek)
   -------------------------------------------------------------------------- */
.tape-header-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  min-height: 40px;
}

.cvd-meter-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 260px;
}
.cvd-progress-track {
  width: 100%;
  height: 6px;
  background: var(--border-strong);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.cvd-progress-fill {
  height: 100%;
  background: var(--accent-cyan);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Sector Matrix Cards
   -------------------------------------------------------------------------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.sector-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sector-card:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.sector-card.active {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-subtle);
}

/* ==========================================================================
   VIEW PRESETS (Settings Drawer Table Density & Column Layouts)
   ========================================================================== */
/* Preset: Spike Hunter */
.market-table.preset-spike th:nth-child(6), .market-table.preset-spike td:nth-child(6),
.market-table.preset-spike th:nth-child(7), .market-table.preset-spike td:nth-child(7),
.market-table.preset-spike th:nth-child(9), .market-table.preset-spike td:nth-child(9),
.market-table.preset-spike th:nth-child(11), .market-table.preset-spike td:nth-child(11),
.market-table.preset-spike th:nth-child(14), .market-table.preset-spike td:nth-child(14),
.market-table.preset-spike th:nth-child(15), .market-table.preset-spike td:nth-child(15),
.market-table.preset-spike th:nth-child(16), .market-table.preset-spike td:nth-child(16),
.market-table.preset-spike th:nth-child(17), .market-table.preset-spike td:nth-child(17),
.market-table.preset-spike th:nth-child(18), .market-table.preset-spike td:nth-child(18),
.market-table.preset-spike th:nth-child(19), .market-table.preset-spike td:nth-child(19),
.market-table.preset-spike th:nth-child(20), .market-table.preset-spike td:nth-child(20) {
  display: none !important;
}

/* Preset: Scalper Technicals */
.market-table.preset-scalper th:nth-child(3), .market-table.preset-scalper td:nth-child(3),
.market-table.preset-scalper th:nth-child(6), .market-table.preset-scalper td:nth-child(6),
.market-table.preset-scalper th:nth-child(7), .market-table.preset-scalper td:nth-child(7),
.market-table.preset-scalper th:nth-child(8), .market-table.preset-scalper td:nth-child(8),
.market-table.preset-scalper th:nth-child(9), .market-table.preset-scalper td:nth-child(9),
.market-table.preset-scalper th:nth-child(10), .market-table.preset-scalper td:nth-child(10),
.market-table.preset-scalper th:nth-child(11), .market-table.preset-scalper td:nth-child(11),
.market-table.preset-scalper th:nth-child(12), .market-table.preset-scalper td:nth-child(12),
.market-table.preset-scalper th:nth-child(13), .market-table.preset-scalper td:nth-child(13),
.market-table.preset-scalper th:nth-child(20), .market-table.preset-scalper td:nth-child(20),
.market-table.preset-scalper th:nth-child(23), .market-table.preset-scalper td:nth-child(23) {
  display: none !important;
}

/* Preset: Whale & SMC */
.market-table.preset-smc th:nth-child(6), .market-table.preset-smc td:nth-child(6),
.market-table.preset-smc th:nth-child(7), .market-table.preset-smc td:nth-child(7),
.market-table.preset-smc th:nth-child(9), .market-table.preset-smc td:nth-child(9),
.market-table.preset-smc th:nth-child(14), .market-table.preset-smc td:nth-child(14),
.market-table.preset-smc th:nth-child(15), .market-table.preset-smc td:nth-child(15),
.market-table.preset-smc th:nth-child(16), .market-table.preset-smc td:nth-child(16),
.market-table.preset-smc th:nth-child(17), .market-table.preset-smc td:nth-child(17),
.market-table.preset-smc th:nth-child(18), .market-table.preset-smc td:nth-child(18),
.market-table.preset-smc th:nth-child(19), .market-table.preset-smc td:nth-child(19),
.market-table.preset-smc th:nth-child(23), .market-table.preset-smc td:nth-child(23) {
  display: none !important;
}

/* View Preset Radio Pills in Drawer */
.view-presets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.preset-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.preset-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
  background: var(--bg-card-hover);
}
.preset-btn.active {
  background: var(--accent-cyan-subtle);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 210, 196, 0.2);
}

/* ==========================================================================
   WHALE TAPE FLASH GLOW ANIMATION
   ========================================================================== */
@keyframes whaleFlashGold {
  0% {
    background-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5) inset;
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}
.whale-flash-gold {
  animation: whaleFlashGold 1.5s ease-out forwards;
}

/* ==========================================================================
   GLOBAL COMMAND PALETTE & SEARCH MODAL (/ or Ctrl+K)
   ========================================================================== */
.cmd-palette-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.cmd-palette-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cmd-palette-modal {
  width: 580px;
  max-width: 92vw;
  background: #0B111E;
  border: 1px solid rgba(0, 210, 196, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 210, 196, 0.15);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.15s ease;
}
.cmd-palette-backdrop.open .cmd-palette-modal {
  transform: translateY(0) scale(1);
}
.cmd-palette-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  gap: 10px;
}
.cmd-palette-header .cmd-search-icon {
  font-size: 16px;
  color: var(--accent-cyan);
}
.cmd-palette-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #F8FAFC !important;
  font-size: 15px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}
.cmd-kbd-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
}
.cmd-palette-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
  color: var(--text-primary);
}
.cmd-item:hover, .cmd-item.selected {
  background: rgba(0, 210, 196, 0.15);
  color: #FFF;
}
.cmd-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmd-item-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}
.cmd-item-title {
  font-size: 13px;
  font-weight: 600;
}
.cmd-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
}
.cmd-palette-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.cmd-footer-keys {
  display: flex;
  gap: 12px;
}

/* ==========================================================================
   KEYBOARD SHORTCUTS & GENERIC MODAL STYLES
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-card {
  width: 540px;
  max-width: 92vw;
  background: #0B111E;
  border: 1px solid rgba(0, 210, 196, 0.35);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 210, 196, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.modal-close-btn:hover {
  color: var(--bear-red);
}
.modal-body {
  padding: 16px 18px;
}
.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.shortcut-desc {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ==========================================================================
   INSTITUTIONAL QUANTITATIVE SUITE ENHANCEMENTS
   Strict Bloomberg Dark Terminal Theme — Zero Purple
   ========================================================================== */

/* Multi-Timeframe (MTF) 5-Horizon Micro Dots (5m, 15m, 1h, 4h, 1D) */
.mtf-confluence-dots {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
}
.mtf-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.2s ease;
}
.mtf-dot.bull {
  background: var(--bull-green);
  box-shadow: 0 0 5px rgba(0, 230, 118, 0.65);
}
.mtf-dot.bear {
  background: var(--bear-red);
  box-shadow: 0 0 5px rgba(255, 59, 105, 0.65);
}
.mtf-dot.neutral {
  background: #374151;
  opacity: 0.7;
}

.mtf-cell-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.mtf-sub-score {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Cumulative Volume Delta (CVD) Absorption & Distribution Badges */
.cvd-badge {
  display: inline-block;
  padding: 1px 4.5px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}
.cvd-badge.absorption {
  background: rgba(0, 230, 118, 0.15);
  color: var(--bull-green);
  border: 1px solid rgba(0, 230, 118, 0.4);
  box-shadow: 0 0 6px rgba(0, 230, 118, 0.15);
}
.cvd-badge.distribution {
  background: rgba(255, 59, 105, 0.15);
  color: var(--bear-red);
  border: 1px solid rgba(255, 59, 105, 0.4);
  box-shadow: 0 0 6px rgba(255, 59, 105, 0.15);
}

/* Squeeze Risk Predictor Tags */
.squeeze-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 5.5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.squeeze-tag.extreme {
  background: rgba(255, 59, 105, 0.18);
  color: var(--bear-red);
  border: 1px solid rgba(255, 59, 105, 0.5);
}
.squeeze-tag.short-squeeze {
  background: rgba(0, 230, 118, 0.18);
  color: var(--bull-green);
  border: 1px solid rgba(0, 230, 118, 0.5);
}
.squeeze-tag.high {
  background: rgba(245, 158, 11, 0.16);
  color: var(--amber-warning);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.squeeze-tag.low {
  color: var(--text-muted);
  font-size: 9.5px;
}

/* Relative Strength vs BTC (Alpha Decoupling Leaderboard) */
.alpha-badge {
  display: inline-block;
  padding: 1px 4.5px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.alpha-badge.leader {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.4);
}
.alpha-badge.laggard {
  background: rgba(255, 59, 105, 0.12);
  color: var(--bear-red);
  border: 1px solid rgba(255, 59, 105, 0.3);
}

/* Annualized Funding Rate APR Sub-text */
.apr-sub {
  font-size: 9px;
  font-family: var(--font-mono);
  display: block;
  margin-top: 1px;
}
.apr-sub.short-squeeze {
  color: var(--bull-green);
  font-weight: 700;
}
.apr-sub.overheated {
  color: var(--bear-red);
  font-weight: 700;
}

/* Institutional Token Detail Quant Intelligence Banner */
.detail-quant-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.detail-quant-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-quant-lbl {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.detail-quant-val {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
}
.detail-quant-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .detail-quant-banner {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   INSTITUTIONAL SECTOR CORRELATION MATRIX & CAPITAL FLOW VIEW
   ========================================================================== */
.matrix-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.sector-rotation-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 210, 196, 0.04);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.rotation-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.12);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.rotation-signals-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Institutional Sectors & Blockchain Ecosystems Module
   -------------------------------------------------------------------------- */
.sector-subtabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.sector-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sector-subtab-btn:hover {
  background: rgba(0, 210, 196, 0.08);
  border-color: rgba(0, 210, 196, 0.3);
  color: var(--text-heading);
}

.sector-subtab-btn.active {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.sector-kpi-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.sector-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-height: 82px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sector-kpi-card.smart-money-card {
  gap: 3px;
}
.smart-retail-divergence-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sector-kpi-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.sector-kpi-value {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-heading);
}

.sector-kpi-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.ecosystem-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.ecosystem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.2);
}

.ecosystem-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ecosystem-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ecosystem-sym-badge {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.ecosystem-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-heading);
}

.ecosystem-status-pill {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ecosystem-status-pill.bull {
  background: rgba(0, 230, 118, 0.12);
  color: var(--accent-bull);
  border: 1px solid rgba(0, 230, 118, 0.3);
}
.ecosystem-status-pill.bear {
  background: rgba(255, 59, 105, 0.12);
  color: var(--accent-bear);
  border: 1px solid rgba(255, 59, 105, 0.3);
}

.ecosystem-breadth-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ecosystem-breadth-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.ecosystem-breadth-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 59, 105, 0.4);
  overflow: hidden;
  display: flex;
}

.ecosystem-breadth-fill {
  height: 100%;
  background: var(--accent-bull);
  border-radius: 2px 0 0 2px;
}

.ecosystem-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.ecosystem-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ecosystem-stat-label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.ecosystem-stat-val {
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-heading);
}

.ecosystem-trending-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ecosystem-trending-title {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
}

.ecosystem-tokens-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.token-chip-pill {
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.12s ease;
  cursor: pointer;
}

.token-chip-pill:hover {
  border-color: var(--accent-cyan);
  color: #fff;
  background: rgba(0, 210, 196, 0.1);
}

.ecosystem-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.ecosystem-filter-btn {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ecosystem-filter-btn:hover {
  background: var(--accent-cyan);
  color: #000;
}

.sector-matrix-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
  align-items: start;
}

.matrix-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  overflow: hidden;
}

.correlation-legend .legend-box {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
}

.correlation-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.correlation-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}

.correlation-table th.corr-th {
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

.correlation-table td.corr-row-header {
  background: var(--bg-card);
  color: var(--text-heading);
  font-size: 10px;
  font-weight: 600;
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  position: sticky;
  left: 0;
  z-index: 1;
}

.correlation-table td.corr-cell {
  padding: 7px 5px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.15s ease;
  cursor: pointer;
}

.correlation-table td.corr-cell:hover {
  outline: 1px solid var(--accent-cyan);
  filter: brightness(1.25);
  transform: scale(1.05);
  z-index: 2;
  position: relative;
}

/* Side Column */
.sector-side-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* DefiLlama TVL Grid */
.tvl-chains-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.tvl-chain-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  transition: all 0.12s ease;
}

.tvl-chain-item:hover {
  background: rgba(0, 210, 196, 0.05);
  border-color: rgba(0, 210, 196, 0.3);
}

.tvl-chain-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tvl-chain-name {
  font-weight: 600;
  color: var(--text-heading);
}

.tvl-chain-symbol {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: 2px;
}

.tvl-chain-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}

/* Sector Momentum Cards Grid */
.sector-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.sector-cards-grid .sector-card {
  padding: 8px 10px;
  font-size: 11px;
}

@media (max-width: 1024px) {
  .sector-matrix-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   GLOBAL 24-HOUR TRADING SESSIONS & GOLDEN ZONE TRACKER
   ========================================================================== */
.session-bar-wrap {
  margin-bottom: 5px;
}

.session-bar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 1-Line Compact Institutional Session Bar */
.session-bar-card.single-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
  height: 30px;
  min-height: 30px;
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.sess-left-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.session-bar-card.single-line .sess-track-bar {
  flex: 1 1 auto;
  position: relative;
  height: 18px;
  margin-top: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  min-width: 220px;
}

.session-bar-card.single-line .sess-track-block {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 3px;
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  transition: filter 0.15s ease;
  padding: 0 4px;
}

.session-bar-card.single-line .sess-track-block:hover {
  filter: brightness(1.25);
  z-index: 2;
}

.sess-block-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sess-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.session-bar-card.single-line .sess-status-pill {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  height: 24px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.session-bar-card.single-line .sess-countdown-text {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .session-bar-card.single-line .sess-countdown-text {
    display: none;
  }
}

@media (max-width: 768px) {
  .session-bar-card.single-line {
    height: auto;
    min-height: auto;
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 8px;
  }
  .session-bar-card.single-line .sess-track-bar {
    order: 3;
    width: 100%;
    min-width: 100%;
  }
}

.session-bar-card.collapsed .sess-collapsible-body {
  display: none;
}

.sess-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sess-clock-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sess-clock-icon {
  font-size: 13px;
}

.sess-clock {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  letter-spacing: 0.02em;
}

.sess-clock-sec {
  color: var(--text-muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}

.sess-tz-badge {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 3px;
  padding: 2px 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-mono);
}

.sess-tz-badge:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: var(--accent-amber);
  color: #fff;
}

.sess-status-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sess-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.sess-status-pill.peak-glow {
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.sess-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: relative;
  flex: none;
}

.sess-dot.peak-dot:before,
.sess-dot.peak-dot:after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent-amber);
  animation: sess-ripple 2.4s ease-out infinite;
}

.sess-dot.peak-dot:after {
  animation-delay: 1.2s;
}

@keyframes sess-ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}

.sess-confluence-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.3px;
}
.sess-confluence-badge.bull {
  background: rgba(0, 230, 118, 0.12);
  color: var(--accent-bull);
  border: 1px solid rgba(0, 230, 118, 0.3);
}
.sess-confluence-badge.cyan {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.3);
}
.sess-confluence-badge.bear {
  background: rgba(255, 59, 105, 0.12);
  color: var(--accent-bear);
  border: 1px solid rgba(255, 59, 105, 0.3);
}

.sess-collapse-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sess-collapse-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* 24-Hour Progress Track */
.sess-track-bar {
  position: relative;
  height: 25px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.sess-track-block {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  transition: filter 0.15s ease;
}

.sess-track-block:hover {
  filter: brightness(1.25);
  z-index: 2;
}

.sess-track-block .sess-block-short {
  display: none;
}

@media (max-width: 860px) {
  .sess-track-block .sess-block-full { display: none; }
  .sess-track-block .sess-block-short { display: inline; }
}

.sess-live-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 5px var(--accent-cyan);
  z-index: 5;
  pointer-events: none;
  transition: left 0.5s ease;
}

.sess-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  gap: 10px;
  flex-wrap: wrap;
}

.sess-legend-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

.sess-legend-fire {
  font-size: 12px;
}

.sess-legend-desc strong {
  color: var(--accent-amber);
  font-weight: 700;
}

/* ==========================================================================
   MEGA UPDATE: ALL-IN-ONE CRYPTO INFORMATION HUB
   1. News Wire & Sentiment Intelligence
   2. Perpetual Derivatives & REKT Liquidation Terminal
   3. Major Cliff Token Unlocks & Macroeconomic Hub
   4. DEX Trending & Memecoin Radar
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. News Wire & Sentiment Hub
   -------------------------------------------------------------------------- */
.view-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.view-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.view-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.terminal-action-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  color: var(--accent-cyan);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.terminal-action-btn:hover {
  background: rgba(0, 210, 196, 0.1);
  border-color: var(--accent-cyan);
}

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

.news-filter-pills-group,
.funding-filters-group,
.unlock-filter-pills-group,
.dex-chain-pills-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.news-filter-pill,
.funding-filter-pill,
.unlock-filter-pill,
.dex-chain-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.news-filter-pill:hover,
.funding-filter-pill:hover,
.unlock-filter-pill:hover,
.dex-chain-pill:hover {
  border-color: var(--accent-cyan);
  color: #ffffff;
}

.news-filter-pill.active,
.funding-filter-pill.active,
.unlock-filter-pill.active,
.dex-chain-pill.active {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.news-search-box {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  gap: 8px;
  min-width: 280px;
}

.news-search-box input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 11px;
  outline: none;
  width: 100%;
}

.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.news-wire-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.news-wire-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

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

.news-source-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.news-source-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
}

.news-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-sentiment-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.news-sentiment-badge.bull {
  background: rgba(0, 230, 118, 0.12);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.news-sentiment-badge.bear {
  background: rgba(255, 59, 105, 0.12);
  color: #FF3B69;
  border: 1px solid rgba(255, 59, 105, 0.3);
}

.news-sentiment-badge.neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #94A3B8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

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

.news-card-title-link {
  text-decoration: none;
}

.news-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  transition: color var(--transition-fast);
}

.news-card-title-link:hover .news-card-title {
  color: var(--accent-cyan);
}

.news-card-excerpt {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.news-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-medium);
}

.news-tickers-container {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.news-ticker-chip {
  font-size: 9px;
  font-weight: 700;
  background: var(--bg-tertiary);
  color: var(--accent-amber);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.news-read-btn {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-decoration: none;
}

.news-read-btn:hover {
  text-decoration: underline;
}

/* Detail Drawer News */
.detail-news-section {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 14px;
}

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

.symbol-news-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}

.symbol-news-count {
  font-size: 10px;
  color: var(--text-muted);
}

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

.symbol-news-item {
  display: block;
  text-decoration: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 8px;
  transition: all var(--transition-fast);
}

.symbol-news-item:hover {
  border-color: var(--accent-cyan);
}

.symbol-news-item-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.symbol-news-item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   2. Derivatives & REKT Liquidation Terminal
   -------------------------------------------------------------------------- */
.deriv-main-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .deriv-main-grid {
    grid-template-columns: 1fr;
  }
}

/* Institutional Component Data Tables (.data-table) */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  white-space: nowrap;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #0B0F17;
}

.data-table th {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-medium);
  background: #0B0F17;
  user-select: none;
}

.data-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.data-table tbody tr:hover {
  background-color: rgba(0, 210, 196, 0.04);
}

.data-table td {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-primary);
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.deriv-table-container {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #070A0F;
}

.deriv-col-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.deriv-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}

.deriv-col-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.deriv-col-title {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.deriv-col-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.deriv-pair-badge,
.liq-symbol-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deriv-token-sym,
.liq-sym-text {
  font-weight: 700;
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.deriv-perp-tag {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
}

.deriv-chg-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.deriv-chg-pill.up {
  color: #00E676;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.2);
}

.deriv-chg-pill.down {
  color: #FF3B69;
  background: rgba(255, 59, 105, 0.1);
  border: 1px solid rgba(255, 59, 105, 0.2);
}

.fr-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.fr-pill.fr-positive {
  background: rgba(0, 230, 118, 0.1);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.25);
}

.fr-pill.fr-negative {
  background: rgba(255, 59, 105, 0.15);
  color: #FF3B69;
  border: 1px solid rgba(255, 59, 105, 0.35);
  box-shadow: 0 0 8px rgba(255, 59, 105, 0.25);
}

.fr-cycle {
  font-size: 8px;
  opacity: 0.7;
}

.deriv-chart-btn {
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.25);
  color: var(--accent-cyan);
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deriv-chart-btn:hover {
  background: var(--accent-cyan);
  color: #070A0F;
  border-color: var(--accent-cyan);
  box-shadow: 0 2px 8px rgba(0, 210, 196, 0.35);
}

.live-pulse-badge {
  font-size: 9px;
  font-weight: 800;
  background: rgba(0, 230, 118, 0.12);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.liq-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}

.liq-badge.long {
  background: rgba(255, 59, 105, 0.14);
  color: #FF3B69;
  border: 1px solid rgba(255, 59, 105, 0.3);
}

.liq-badge.short {
  background: rgba(0, 230, 118, 0.14);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.liq-usd-val {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
}

.liq-usd-val.whale-liq {
  color: #F59E0B !important;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.deriv-liq-row {
  transition: background-color 0.3s ease;
}

.deriv-liq-row.liq-flash {
  background-color: rgba(255, 59, 105, 0.25) !important;
}

/* --------------------------------------------------------------------------
   3. Token Unlocks & Macro Hub
   -------------------------------------------------------------------------- */
.stables-summary-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

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

.stables-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-cyan);
}

.stables-subtitle {
  font-size: 10px;
  color: var(--text-muted);
}

.stables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.stable-item-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.stable-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.stable-sym {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.stable-name {
  font-size: 10px;
  color: var(--text-muted);
}

.stable-mcap {
  font-size: 16px;
  font-weight: 800;
  color: #00D2C4;
  margin-bottom: 6px;
}

.stable-flow-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.unlocks-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.unlocks-header-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.unlocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.unlock-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.unlock-card:hover {
  transform: translateY(-2px);
}

.unlock-card.risk-extreme {
  border-color: rgba(255, 59, 105, 0.4);
}

.unlock-card.risk-high {
  border-color: rgba(245, 158, 11, 0.4);
}

.unlock-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unlock-asset-box {
  display: flex;
  flex-direction: column;
}

.unlock-sym {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.unlock-name {
  font-size: 10px;
  color: var(--text-muted);
}

.unlock-days-countdown {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  text-align: center;
}

.countdown-num {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #00D2C4;
  font-family: var(--font-mono);
}

.countdown-unit {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.unlock-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.metric-val {
  font-size: 11px;
  font-weight: 700;
}

.unlock-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-medium);
}

.unlock-risk-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
}

.unlock-risk-tag.extreme {
  background: rgba(255, 59, 105, 0.15);
  color: #FF3B69;
  border: 1px solid rgba(255, 59, 105, 0.35);
}

.unlock-risk-tag.high {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.unlock-risk-tag.medium {
  background: rgba(0, 210, 196, 0.15);
  color: #00D2C4;
  border: 1px solid rgba(0, 210, 196, 0.35);
}

.unlock-filter-scanner-btn {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}

.unlock-filter-scanner-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.macro-calendar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  margin-top: 8px;
}

.macro-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 10px;
}

.macro-header-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.macro-calendar-title {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.macro-calendar-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.macro-table-container {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  background: #070A0F;
}

.macro-event-row td {
  padding: 10px 12px;
}

.macro-date-primary {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
}

.macro-date-time {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 1px;
}

.country-pill {
  font-size: 9px;
  font-weight: 800;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-medium);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  display: inline-block;
}

.country-pill.country-usa {
  background: rgba(0, 210, 196, 0.1);
  color: #00D2C4;
  border-color: rgba(0, 210, 196, 0.3);
}

.country-pill.country-eur {
  background: rgba(56, 189, 248, 0.1);
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.3);
}

.country-pill.country-jpn {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.3);
}

.macro-event-title {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.macro-event-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: normal;
  max-width: 460px;
}

.macro-impact-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.macro-impact-tag .impact-dot {
  font-size: 7px;
}

.macro-impact-tag.high {
  background: rgba(255, 59, 105, 0.14);
  color: #FF3B69;
  border: 1px solid rgba(255, 59, 105, 0.3);
}

.macro-impact-tag.med {
  background: rgba(245, 158, 11, 0.14);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.consensus-val {
  color: #00D2C4 !important;
  font-weight: 700;
  font-size: 12px;
}

.previous-val {
  color: var(--text-muted);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   4. DEX Trending Radar (DexScreener Style)
   -------------------------------------------------------------------------- */
.dex-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dex-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.live-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 6px #00E676;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.dex-pair-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.dex-pair-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan);
}

.dex-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dex-pair-info {
  display: flex;
  flex-direction: column;
}

.dex-token-sym {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.dex-token-name {
  font-size: 10px;
  color: var(--text-muted);
}

.chain-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.chain-badge.sol {
  background: rgba(0, 176, 255, 0.15);
  color: #00B0FF;
  border: 1px solid rgba(0, 176, 255, 0.35);
}

.chain-badge.base {
  background: rgba(0, 230, 118, 0.15);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.35);
}

.dex-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.dex-price-val {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.dex-change-val {
  font-size: 13px;
  font-weight: 800;
}

.dex-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.dex-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dex-stat-lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.dex-stat-val {
  font-size: 11px;
  font-weight: 700;
}

.dex-card-bottom {
  padding-top: 8px;
  border-top: 1px solid var(--border-medium);
}

.dex-view-pool-btn {
  display: block;
  text-align: center;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.25);
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.dex-view-pool-btn:hover {
  background: var(--accent-cyan);
  color: #0D1117;
}

/* ==========================================================================
   INSTITUTIONAL UPGRADE 1: STRATEGY SCREENER PRESETS TOOLBAR
   ========================================================================== */
.strategy-presets-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px 10px;
  margin-bottom: 5px;
  height: 32px;
  min-height: 32px;
  flex-wrap: nowrap;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.presets-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.preset-radar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
  display: inline-block;
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radar-ping {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px var(--accent-cyan); }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.preset-buttons-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}
.preset-buttons-group::-webkit-scrollbar {
  display: none;
}

.strategy-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  height: 24px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.strategy-preset-btn:hover {
  background: rgba(0, 210, 196, 0.08);
  border-color: rgba(0, 210, 196, 0.35);
  color: var(--text-heading);
}

.strategy-preset-btn.active {
  background: rgba(0, 210, 196, 0.16);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.25);
}

.strategy-preset-btn .preset-icon {
  font-size: 11px;
}

.strategy-preset-btn .preset-badge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.strategy-preset-btn.active .preset-badge {
  background: rgba(0, 210, 196, 0.25);
  color: var(--accent-cyan);
}

/* ==========================================================================
   INSTITUTIONAL UPGRADE 2: TRADINGVIEW PRO ADVANCED CHART CONTAINER
   ========================================================================== */
.chart-mode-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.chart-view-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chart-view-toggle-btn:hover {
  color: var(--text-heading);
}

.chart-view-toggle-btn.active {
  background: var(--accent-cyan);
  color: #0D1117;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.3);
}

.tradingview-chart-container {
  width: 100%;
  height: 380px;
  background: #090D15 !important;
  color-scheme: dark;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  position: relative;
  display: block;
}

.tradingview-chart-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* TV Dark Skeleton Loader State */
.tv-skeleton-loader {
  position: absolute;
  inset: 0;
  background: #090D15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1;
}

.tv-skeleton-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(0, 210, 196, 0.15);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: tvSpin 0.8s linear infinite;
}

@keyframes tvSpin {
  to { transform: rotate(360deg); }
}

.tv-skeleton-text {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.tv-skeleton-switch-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tv-skeleton-switch-btn:hover {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* ==========================================================================
   INSTITUTIONAL UPGRADE 3: WHALE WALL PROXIMITY & FRONT-RUNNING TARGETS
   ========================================================================== */
.whale-wall-proximity-container {
  margin: 10px 0;
}

.whale-wall-proximity-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.whale-wall-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.whale-wall-item.bid-wall {
  border-left: 3px solid var(--bull-green);
}

.whale-wall-item.ask-wall {
  border-left: 3px solid var(--bear-red);
}

.whale-wall-item .wall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.whale-wall-item .wall-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.3px;
}

.whale-wall-item .wall-badge.bull {
  background: rgba(0, 230, 118, 0.12);
  color: var(--bull-green);
}

.whale-wall-item .wall-badge.bear {
  background: rgba(255, 59, 105, 0.12);
  color: var(--bear-red);
}

.whale-wall-item .wall-distance {
  font-size: 10px;
  color: var(--text-muted);
}

.whale-wall-item .wall-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
}

.whale-wall-item .wall-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
}

.whale-wall-item .wall-vol {
  font-size: 11px;
  color: var(--accent-cyan);
  font-weight: 600;
}

.whale-wall-item .wall-action-btn {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.whale-wall-item .wall-action-btn:hover {
  background: var(--accent-cyan);
  color: #0D1117;
  border-color: var(--accent-cyan);
}

/* ==========================================================================
   INSTITUTIONAL UPGRADE 4: MARGIN, LEVERAGE & LIQUIDATION CALCULATOR
   ========================================================================== */
.plan-margin-leverage-wrap {
  margin: 10px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.plan-margin-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.plan-leverage-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-slider {
  width: 100%;
  accent-color: var(--accent-cyan);
  cursor: pointer;
  height: 4px;
}

.plan-ruin-alert {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(255, 59, 105, 0.12);
  border: 1px solid var(--bear-red);
  border-radius: var(--radius-sm);
  color: var(--bear-red);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.plan-pnl-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.plan-pnl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.plan-pnl-item .lbl {
  color: var(--text-muted);
}

/* ==========================================================================
   INSTITUTIONAL UPGRADE 5: AUDIO SQUAWK BUTTON IN NAV TABS
   ========================================================================== */
.tab-btn.squawk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn.squawk-btn:hover {
  background: rgba(0, 210, 196, 0.08);
  color: var(--text-heading);
}

.tab-btn.squawk-btn.active {
  background: rgba(0, 210, 196, 0.12);
  border-color: rgba(0, 210, 196, 0.4);
  color: var(--accent-cyan);
}

/* ==========================================================================
   INSTITUTIONAL WATCHLIST COCKPIT & EMPTY STATE
   ========================================================================== */
.watchlist-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.watchlist-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.watchlist-kpi-card:hover {
  border-color: rgba(0, 210, 196, 0.35);
  transform: translateY(-1px);
}

.watchlist-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
}

.watchlist-kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: -0.5px;
}

.watchlist-kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.watchlist-empty-state {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  max-width: 680px;
  margin: 32px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.wl-empty-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 210, 196, 0.15) 0%, rgba(0, 210, 196, 0.02) 70%);
  border: 1px solid rgba(0, 210, 196, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 24px rgba(0, 210, 196, 0.15);
}

.wl-empty-star {
  font-size: 32px;
  color: #F59E0B;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
}

.wl-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.wl-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.wl-empty-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  margin-bottom: 12px;
  text-align: left;
}

.wl-feat-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.wl-feat-icon {
  font-size: 14px;
}

.watchlist-table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header Alert Quick Popover & Controls
   -------------------------------------------------------------------------- */
.header-alert-wrapper {
  position: relative;
}

.header-alert-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1050;
  width: 280px;
  background: #0B0F17;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
  padding: 14px;
  backdrop-filter: blur(14px);
  animation: fadeInAlertPopover 0.15s ease-out;
}

@keyframes fadeInAlertPopover {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.popover-quick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}

.popover-quick-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.popover-quick-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.popover-quick-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.toggle-switch.mini {
  width: 32px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.toggle-switch.mini input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch.mini .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  transition: .2s;
  border-radius: 18px;
}

.toggle-switch.mini .toggle-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: .2s;
  border-radius: 50%;
}

.toggle-switch.mini input:checked + .toggle-slider {
  background-color: rgba(0, 210, 196, 0.25);
  border-color: var(--accent-cyan);
}

.toggle-switch.mini input:checked + .toggle-slider:before {
  transform: translateX(14px);
  background-color: var(--accent-cyan);
}

.popover-quick-footer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.popover-quick-footer button {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Header Market Regime Ticker Badge
   -------------------------------------------------------------------------- */
.header-ticker-item.regime-item {
  border-left: 1px solid var(--border-subtle);
  padding-left: 12px;
  margin-left: 4px;
}

.ticker-badge.regime {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.3);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Smart Money vs Retail Positioning Card
   -------------------------------------------------------------------------- */
.smart-money-card {
  border-left: 2px solid var(--accent-cyan);
  background: linear-gradient(135deg, rgba(0, 210, 196, 0.04) 0%, rgba(11, 15, 23, 0.7) 100%);
}

.smart-retail-divergence-bar {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ==========================================================================
   OPENTERMINAL INSTITUTIONAL UPGRADES SUITE
   ========================================================================== */

/* 1. Header Command Trigger & Briefing Buttons */
.header-cmd-btn, .header-briefing-btn, .header-routine-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-cyan);
  padding: 2px 7px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-cmd-btn:hover, .header-briefing-btn:hover, .header-routine-btn:hover {
  background: rgba(0, 210, 196, 0.18);
  border-color: var(--accent-cyan);
}
.cmd-kbd-badge {
  background: rgba(0, 210, 196, 0.2);
  border: 1px solid rgba(0, 210, 196, 0.4);
  color: #FFF;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 9px;
  font-family: var(--font-mono);
}

/* 2. Live Micro-Flash Tick Animations (GPU Accelerated) */
@keyframes flashUptick {
  0% { background-color: rgba(0, 230, 118, 0.45); color: #00E676; text-shadow: 0 0 8px rgba(0, 230, 118, 0.6); }
  100% { background-color: transparent; }
}
@keyframes flashDowntick {
  0% { background-color: rgba(255, 59, 105, 0.45); color: #FF3B69; text-shadow: 0 0 8px rgba(255, 59, 105, 0.6); }
  100% { background-color: transparent; }
}
@keyframes flashVolBurst {
  0% { background-color: rgba(0, 210, 196, 0.5); text-shadow: 0 0 8px rgba(0, 210, 196, 0.8); }
  100% { background-color: transparent; }
}
.flash-uptick {
  animation: flashUptick 0.7s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.flash-downtick {
  animation: flashDowntick 0.7s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.flash-vol-burst {
  animation: flashVolBurst 0.9s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* 3. Paper Trading Page & Position Ledger */
.portfolio-hero-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.portfolio-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portfolio-card .pf-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.portfolio-card .pf-val {
  font-size: 20px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #FFF;
}
.portfolio-card .pf-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.pf-pos-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.plan-btn-paper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 210, 196, 0.15);
  border: 1px solid rgba(0, 210, 196, 0.4);
  color: var(--accent-cyan);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.plan-btn-paper:hover {
  background: rgba(0, 210, 196, 0.25);
  border-color: var(--accent-cyan);
  color: #FFF;
}

/* 4. Daily Session Briefing & Market Recap Modal */
.market-recap-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.market-recap-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.market-recap-modal {
  width: 780px;
  max-width: 94vw;
  max-height: 88vh;
  background: #0B111E;
  border: 1px solid rgba(0, 210, 196, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.market-recap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}
.market-recap-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.recap-executive-summary {
  background: rgba(0, 210, 196, 0.06);
  border-left: 3px solid var(--accent-cyan);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #E2E8F0;
}
.recap-movers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.recap-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
}
.recap-box-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}

/* 5. TradFi Liquidity Panel (FRED / US Fed) */
.tradfi-liquidity-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}
.tradfi-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
}
.tradfi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.tradfi-val {
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
}
.tradfi-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

/* 6. Crypto Options Intelligence Ribbon (Deribit / Binance) */
.options-intel-panel {
  background: var(--bg-card);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.options-intel-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
}
.options-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.options-val {
  font-size: 18px;
}
.options-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

/* 7. Macro Calendar Impact Filters */
.macro-cal-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.macro-cal-filter-btn:hover {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.2);
}
.macro-cal-filter-btn.active {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ==========================================================================
   FINAL 4 INSTITUTIONAL FEATURES: TV STREAMER, AI DESK, HUD, SMART METER
   ========================================================================== */

/* 1. Header TV & AI Desk Action Buttons */
.header-tv-btn, .header-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.3);
  color: var(--accent-cyan);
  padding: 2px 7px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-tv-btn:hover, .header-ai-btn:hover {
  background: rgba(0, 210, 196, 0.2);
  border-color: var(--accent-cyan);
}

.ai-kbd-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border-radius: 3px;
  border: 1px solid rgba(0, 210, 196, 0.35);
  letter-spacing: 0.5px;
  line-height: 1;
}

/* 2. Floating TV Streamer Dock */
.floating-tv-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 420px;
  max-width: calc(100vw - 48px);
  background: #0B111E;
  border: 1px solid rgba(0, 210, 196, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  border-radius: 10px;
  overflow: hidden;
  z-index: 9990;
  display: none;
  flex-direction: column;
  transition: all 0.2s ease;
}
.floating-tv-dock.open {
  display: flex;
}
.floating-tv-dock.minimized {
  width: 260px;
  height: 44px;
  overflow: hidden;
}
.floating-tv-dock.minimized .tv-video-container,
.floating-tv-dock.minimized .tv-channels-bar {
  display: none;
}
.tv-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-subtle);
}
.tv-channels-bar {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.tv-channel-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.tv-channel-pill:hover {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.2);
}
.tv-channel-pill.active {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.tv-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.tv-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tv-error-msg {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  color: #F59E0B;
  font-size: 11px;
  padding: 12px;
  text-align: center;
}

/* 3. Interactive Quantitative AI Desk Copilot Modal */
.ai-copilot-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ai-copilot-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ai-copilot-modal {
  width: 740px;
  max-width: 95vw;
  height: 640px;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  border-radius: var(--radius-sm, 2px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ai-copilot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-header);
  gap: 8px;
}

/* AI Coin Selector & Model Badge */
.ai-coin-selector-container {
  position: relative;
}

.ai-coin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 2px);
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-terminal);
  font-size: 11px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ai-coin-btn:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
}

.ai-coin-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 290px;
  background: var(--bg-dropdown);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  z-index: 1000;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-coin-search-wrap input {
  width: 100%;
  padding: 5px 8px;
  font-size: 11px;
  border-radius: var(--radius-sm, 2px);
}

.ai-coin-quick-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.quick-tag-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-sm, 2px);
  padding: 2px 6px;
  font-size: 9.5px;
  font-family: var(--font-terminal);
  cursor: pointer;
}
.quick-tag-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.ai-coin-dropdown-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-coin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-terminal);
  color: var(--text-primary);
  transition: background 0.1s ease;
}
.ai-coin-item:hover {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
}

.ai-active-provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 2px);
  padding: 3px 8px;
  font-size: 10px;
  font-family: var(--font-terminal);
  color: var(--text-muted);
}
.ai-provider-config-link {
  color: var(--accent-cyan);
  text-decoration: none;
  font-size: 11px;
  cursor: pointer;
  margin-left: 2px;
}
.ai-provider-config-link:hover {
  transform: scale(1.15);
}
.ai-prompt-chips-row {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.ai-prompt-chip {
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.25);
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.ai-prompt-chip:hover {
  background: rgba(0, 210, 196, 0.2);
  border-color: var(--accent-cyan);
  color: #FFF;
}
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-chat-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 92%;
}
.ai-chat-msg.user {
  align-self: flex-end;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #F8FAFC;
}
.ai-chat-msg.assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: #E2E8F0;
}
.ai-chat-msg.typing {
  background: rgba(0, 210, 196, 0.05);
  border: 1px dashed rgba(0, 210, 196, 0.3);
}
.msg-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
}
.ai-copilot-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.3);
}
.ai-copilot-input-bar input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 12px;
  color: #FFF;
  font-size: 12px;
  outline: none;
}
.ai-copilot-input-bar input:focus {
  border-color: var(--accent-cyan);
}

/* 4. Multi-Indicator Live Crosshair Hover Legend HUD */
.chart-crosshair-hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 10px;
  background: rgba(6, 9, 14, 0.9);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.hud-item strong {
  color: #FFF;
  font-weight: 600;
}
.hud-item.hud-time {
  color: var(--accent-cyan);
  font-weight: 700;
}

/* 5. Smart Money vs Retail Positioning Panel */
.smart-retail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
}
.ratio-stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px;
}
.ratio-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.ratio-progress-bar.mini {
  height: 6px;
}
.ratio-fill-bull {
  background: #00E676;
  height: 100%;
  transition: width 0.3s ease;
}
.ratio-fill-bear {
  background: #FF3B69;
  height: 100%;
  transition: width 0.3s ease;
}
.taker-flow-wrap {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   INSTITUTIONAL EXPANSION SUITE: TRADFI, BOOKMAP LADDER & WEBHOOKS
   ========================================================================== */

/* 1. TradFi & Macro Hub */
.tradfi-macro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.tradfi-pill-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.1);
  border: 1px solid rgba(0, 210, 196, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.macro-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.macro-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.macro-stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.macro-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.macro-card-val {
  font-size: 22px;
  font-weight: 700;
}
.macro-card-sub {
  font-size: 11px;
  color: var(--text-secondary);
}
.border-bear {
  border-color: rgba(255, 59, 105, 0.4) !important;
}
.border-bull {
  border-color: rgba(0, 230, 118, 0.4) !important;
}

.tradfi-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 960px) {
  .tradfi-dual-grid {
    grid-template-columns: 1fr;
  }
}
.tradfi-panel-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.panel-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.finra-chips-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.finra-stock-chip {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.15s ease;
  min-width: 70px;
}
.finra-stock-chip:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.05);
}
.finra-stock-chip.active {
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
}
.finra-metric-showcase {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px;
}
.finra-progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
  margin: 8px 0;
}
.finra-progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.sec-filings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}
.sec-filing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 14px;
  transition: background 0.15s ease;
}
.sec-filing-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.sec-filing-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-form-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.sec-form-badge.insider {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.sec-form-badge.corp {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.3);
}

/* --- CME FedWatch, CME Basis & Cross-Market Correlation Matrix --- */
.rate-prob-container {
  display: flex;
  flex-direction: column;
}

.rate-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rate-bar-fill {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 4px;
}

.rate-bar-fill.fill-bull {
  background: linear-gradient(90deg, #00C853 0%, #00E676 100%);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.35);
}

.rate-bar-fill.fill-cyan {
  background: linear-gradient(90deg, #00A396 0%, #00D2C4 100%);
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.35);
}

.rate-bar-fill.fill-muted {
  background: rgba(148, 163, 184, 0.4);
}

.cme-basis-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cme-basis-card:hover {
  border-color: rgba(0, 210, 196, 0.3);
  background: rgba(0, 210, 196, 0.03);
}

.cot-breakdown-box {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
}

.corr-panel-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.corr-table-wrapper {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(11, 14, 20, 0.6);
  margin-top: 8px;
}

.corr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.corr-table th {
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.corr-table td {
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.corr-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.corr-cell-neutral {
  color: var(--text-secondary);
  background: transparent;
}

.corr-cell-strong-pos {
  color: #00E676;
  background: rgba(0, 230, 118, 0.14);
  font-weight: 700;
}

.corr-cell-mod-pos {
  color: #4ADE80;
  background: rgba(0, 230, 118, 0.06);
}

.corr-cell-strong-neg {
  color: #FF3B69;
  background: rgba(255, 59, 105, 0.14);
  font-weight: 700;
}

.corr-cell-mod-neg {
  color: #FB7185;
  background: rgba(255, 59, 105, 0.06);
}

.pulse-dot-cyan {
  width: 8px;
  height: 8px;
  background: var(--accent-cyan);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulseCyan 2s infinite ease-in-out;
}

@keyframes pulseCyan {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.pulse-dot-green {
  width: 8px;
  height: 8px;
  background: #00E676;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #00E676;
  animation: pulseGreen 2s infinite ease-in-out;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* 2. Visual Liquidity Depth Ladder (Bookmap Style) */
.depth-view-toggle {
  display: flex;
  gap: 4px;
}
.depth-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.depth-toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.depth-toggle-btn.active {
  background: rgba(0, 210, 196, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.liquidity-ladder-wrapper {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px;
  margin-top: 8px;
}
.ladder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ladder-imbalance-wrap {
  margin-bottom: 10px;
}
.ladder-imbalance-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
}
.ladder-imbalance-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.ladder-imbalance-fill-bid {
  background: var(--bull-green, #00E676);
  height: 100%;
  transition: width 0.3s ease;
}
.ladder-imbalance-fill-ask {
  background: var(--bear-red, #FF3B69);
  height: 100%;
  transition: width 0.3s ease;
}

.ladder-book-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ladder-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 70px 70px 1fr;
  align-items: center;
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 3px;
  overflow: hidden;
}
.ladder-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ladder-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 2px;
}
.ladder-bar-fill.ask-fill {
  background: rgba(255, 59, 105, 0.14);
}
.ladder-bar-fill.bid-fill {
  background: rgba(0, 230, 118, 0.14);
}
.ladder-cell {
  position: relative;
  z-index: 1;
}
.whale-wall-row {
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08) !important;
}
.whale-wall-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.4);
  display: inline-block;
}
.whale-wall-badge.bull {
  background: rgba(0, 230, 118, 0.18);
  color: #00E676;
  border-color: rgba(0, 230, 118, 0.4);
}
.ladder-mid-price-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin: 4px 0;
  background: rgba(0, 210, 196, 0.08);
  border-top: 1px dashed rgba(0, 210, 196, 0.3);
  border-bottom: 1px dashed rgba(0, 210, 196, 0.3);
  border-radius: 4px;
}

/* 3. Webhook History Container */
.webhook-history-container {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 12px;
}

/* 4. Yield Curve & Institutional Macro Dashboard */
.yield-curve-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
}
.yield-curve-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.yield-curve-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.yield-stat-chip {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.yield-chart-container {
  width: 100%;
  height: 180px;
  position: relative;
  margin: 10px 0 16px 0;
}
.yield-nodes-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.yield-tenor-card {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
  transition: transform 0.15s ease;
}
.yield-tenor-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}
.yield-tenor-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.yield-tenor-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0;
}
.yield-tenor-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* Macro Catalyst Countdown & Playbook */
.macro-catalyst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 960px) {
  .macro-catalyst-grid {
    grid-template-columns: 1fr;
  }
}
.catalyst-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.catalyst-timer-box {
  background: rgba(0, 210, 196, 0.05);
  border: 1px solid rgba(0, 210, 196, 0.2);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.catalyst-timer-val,
.catalyst-countdown-clock {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 1px;
}
.catalyst-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.catalyst-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 12px;
}
.playbook-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
}
.playbook-row:last-child {
  border-bottom: none;
}

/* Correlation Heatmap */
.corr-panel-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
}
.corr-table-wrapper {
  overflow-x: auto;
}
.corr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: center;
}
.corr-table th, .corr-table td {
  padding: 8px 6px;
  border: 1px solid var(--border-subtle);
}
.corr-table th {
  background: var(--bg-input);
  color: var(--text-muted);
  font-weight: 600;
}
.corr-cell-strong-pos {
  background: rgba(0, 230, 118, 0.25);
  color: #00E676;
  font-weight: 700;
}
.corr-cell-mod-pos {
  background: rgba(0, 210, 196, 0.15);
  color: #00D2C4;
}
.corr-cell-neutral {
  background: rgba(140, 155, 175, 0.08);
  color: var(--text-secondary);
}
.corr-cell-mod-neg {
  background: rgba(245, 158, 11, 0.18);
  color: #F59E0B;
}
.corr-cell-strong-neg {
  background: rgba(255, 59, 105, 0.25);
  color: #FF3B69;
  font-weight: 700;
}

/* ==========================================================================
   INSTITUTIONAL TRADER JOURNEY SUITE: ROUTINE, ANTI-TILT, GAS & PWA
   ========================================================================== */

/* 1. Daily Routine & Pre-Market Modal */
.routine-nav-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 12px;
  background: rgba(140, 155, 175, 0.2);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  margin-left: 4px;
}
.routine-nav-pill.in-progress {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border-color: rgba(0, 210, 196, 0.4);
}
.routine-nav-pill.ready {
  background: rgba(0, 230, 118, 0.2);
  color: #00E676;
  border-color: rgba(0, 230, 118, 0.5);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
}

.daily-routine-dialog {
  position: relative;
  width: 90%;
  max-width: 680px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  z-index: 10001;
}
.routine-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(11, 14, 20, 0.95);
}
.routine-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.routine-progress-card {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
}
.routine-progress-card.ready {
  border-color: rgba(0, 230, 118, 0.4);
}
.routine-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.routine-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), #00E676);
  transition: width 0.3s ease;
}
.routine-readiness-banner {
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--accent-amber);
}
.routine-readiness-banner.ready {
  background: rgba(0, 230, 118, 0.12);
  border-color: rgba(0, 230, 118, 0.3);
  color: #00E676;
}
.routine-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.routine-step-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.routine-step-row:hover {
  border-color: var(--border-strong);
}
.routine-step-row.completed {
  background: rgba(0, 230, 118, 0.04);
  border-color: rgba(0, 230, 118, 0.3);
}
.routine-step-row.completed .step-title {
  color: #00E676;
  text-decoration: line-through;
}
.routine-checkbox-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.routine-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #00E676;
  cursor: pointer;
}
.routine-step-main {
  flex: 1;
}
.routine-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

/* 2. Anti-Tilt Guard Banner */
.anti-tilt-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #1a080c, #2b0b12);
  border-bottom: 2px solid #FF3B69;
  padding: 10px 20px;
  display: none;
  box-shadow: 0 4px 20px rgba(255, 59, 105, 0.4);
}
.tilt-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.tilt-banner-icon {
  font-size: 18px;
}
.tilt-banner-msg {
  color: #FF3B69;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.tilt-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 3. Live Multi-Chain Gas & TPS Tracker - Compact & Non-Wrapping */
.gas-tracker-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  height: 26px;
  font-size: 10.5px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.gas-tracker-widget:hover {
  border-color: var(--accent-cyan);
}
.gas-strip-item {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gas-strip-divider {
  color: var(--border-subtle);
  font-size: 8px;
}
.gas-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
}
.gas-popover.active {
  display: block;
}

/* 4. Mobile Quick HUD Mode */
.hud-mode-toggle-btn.active {
  background: rgba(0, 210, 196, 0.2);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}
.hud-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.hud-token-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hud-token-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}
.hud-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hud-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 11px;
}

/* ==========================================================================
   1. NATURAL LANGUAGE AI PROMPT SEARCH & FILTER STYLING
   ========================================================================== */
.ai-prompt-search-box {
  position: relative;
  display: flex;
  align-items: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-prompt-search-box.ai-active {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 210, 196, 0.2) !important;
}

.ai-prompt-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.35);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}

.ai-prompt-toggle-btn:hover,
.ai-prompt-toggle-btn.active {
  background: var(--accent-cyan);
  color: #0B0E14;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.4);
}

.ai-prompt-suggestions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #101622;
  border: 1px solid #1E2738;
  border-radius: 6px;
  margin: 6px 0 12px 0;
  animation: fadeIn 0.2s ease;
}

.ai-suggestion-chip {
  background: #161E2C;
  border: 1px solid #243046;
  color: #94A3B8;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.ai-suggestion-chip:hover {
  background: rgba(0, 210, 196, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ==========================================================================
   2. SCALPER RAPID-ACTION HOTKEYS & ROW SELECTION
   ========================================================================== */
.active-hotkey-row {
  background: rgba(0, 210, 196, 0.14) !important;
  outline: 1px solid var(--accent-cyan);
  outline-offset: -1px;
}

.hotkeys-modal-card {
  background: #0D121C;
  border: 1px solid #232E42;
  border-radius: 10px;
  max-width: 580px;
  width: 92%;
  padding: 22px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.75);
}

.hotkeys-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #232E42;
}

.hotkeys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  padding: 16px 0;
}

.hotkey-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #121824;
  border: 1px solid #1B2436;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

.hotkey-keys {
  min-width: 64px;
}

.hotkey-desc {
  color: var(--text-secondary);
}

.hotkeys-modal-footer {
  border-top: 1px solid #232E42;
  padding-top: 12px;
  text-align: center;
}

/* ==========================================================================
   3. CASH & CARRY ARBITRAGE RADAR
   ========================================================================== */
#page-arbitrage.active {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arb-hero-banner {
  background: linear-gradient(135deg, rgba(0, 210, 196, 0.08) 0%, rgba(13, 18, 28, 0.9) 100%);
  border: 1px solid rgba(0, 210, 196, 0.25);
  border-radius: 8px;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.arb-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.arb-stat-card {
  background: #111723;
  border: 1px solid #1E2738;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arb-sim-panel {
  background: #111723;
  border: 1px solid #1E2738;
  border-radius: 8px;
  padding: 16px 20px;
}

.arb-sim-chips {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.arb-sim-chip {
  background: #17202E;
  border: 1px solid #243146;
  color: #94A3B8;
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.12s ease;
}

.arb-sim-chip.active {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 700;
}

.arb-table-container {
  background: #0E131E;
  border: 1px solid #1E2738;
  border-radius: 8px;
  overflow: auto;
}

.arb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.arb-table th {
  background: #141B28;
  color: #94A3B8;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #232E42;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.arb-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #17202D;
  font-family: var(--font-mono);
}

.arb-table tr:hover {
  background: rgba(0, 210, 196, 0.04);
}

.arb-apr-badge {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
}

.apr-high {
  background: rgba(0, 230, 118, 0.15);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.35);
}

.apr-med {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.35);
}

.apr-neg {
  background: rgba(255, 59, 105, 0.15);
  color: #FF3B69;
  border: 1px solid rgba(255, 59, 105, 0.35);
}

/* ==========================================================================
   4. SMART MONEY & WHALE RADAR UPGRADE
   ========================================================================== */
.smc-metrics-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.smc-metric-item {
  background: #111723;
  border: 1px solid #1E2738;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smc-metric-item.actions-cell {
  justify-content: center;
  align-items: center;
}

.smc-filter-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.smc-pill-btn {
  background: #141B27;
  border: 1px solid #232E42;
  color: #94A3B8;
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.smc-pill-btn.active {
  background: rgba(0, 210, 196, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.smc-main-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
}

@media (max-width: 1080px) {
  .smc-main-layout {
    grid-template-columns: 1fr;
  }
}

.smc-inflow-section {
  margin: 8px 0;
}

.smc-meter-track {
  height: 6px;
  background: #18202E;
  border-radius: 3px;
  overflow: hidden;
}

.smc-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.smc-meter-fill.fill-bull {
  background: #00E676;
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
}

.smc-meter-fill.fill-cyan {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.4);
}

.smc-meter-fill.fill-bear {
  background: #FF3B69;
  box-shadow: 0 0 8px rgba(255, 59, 105, 0.4);
}

.smc-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
  border-radius: 4px;
  margin: 8px 0;
}

.smc-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.smc-tag {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.smc-tag.ob {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.smc-tag.fvg {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.35);
}

.smc-feed-card {
  background: #0E131E;
  border: 1px solid #1E2738;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.smc-feed-header {
  padding: 12px 16px;
  border-bottom: 1px solid #1E2738;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.smc-feed-body {
  padding: 10px 12px;
  overflow-y: auto;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smc-live-tx-row {
  background: #121824;
  border: 1px solid #1B2436;
  border-radius: 6px;
  padding: 8px 10px;
  transition: all 0.2s ease;
}

.smc-live-tx-row.buy {
  border-left: 3px solid #00E676;
}

.smc-live-tx-row.sell {
  border-left: 3px solid #FF3B69;
}

.smc-action-pill {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.pill-bull {
  background: rgba(0, 230, 118, 0.15);
  color: #00E676;
}

.pill-bear {
  background: rgba(255, 59, 105, 0.15);
  color: #FF3B69;
}

/* ==========================================================================
   5. DUAL LONG/SHORT SENTIMENT MATRIX & LIQUIDATION DENSITY CLUSTERS
   ========================================================================== */
.deriv-sentiment-banner {
  background: linear-gradient(135deg, rgba(0, 210, 196, 0.05) 0%, rgba(14, 19, 29, 0.95) 100%);
  border: 1px solid rgba(0, 210, 196, 0.22);
  border-radius: 8px;
  padding: 14px 18px;
}

.deriv-sentiment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.deriv-sentiment-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease;
}

.deriv-sentiment-card:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.deriv-sentiment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 24px;
}

.deriv-sentiment-header .deriv-asset-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.deriv-sentiment-header .badge {
  font-size: 10px !important;
  padding: 1.5px 6px !important;
  white-space: nowrap;
}

.sentiment-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sentiment-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dual-sentiment-track {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: #1C2436;
  display: flex;
  flex: 1;
}

.dual-sentiment-track .track-long {
  background: #00E676;
  height: 100%;
  transition: width 0.3s ease;
}

.dual-sentiment-track .track-short {
  background: #FF3B69;
  height: 100%;
  transition: width 0.3s ease;
}

/* Liquidation Density Pools in Token Detail Drawer */
.liq-pools-panel {
  background: #0E1420;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
}

.liq-levels-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.liq-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 8px;
  border-radius: 4px;
}

.liq-tier-bar-wrap {
  flex: 1;
  height: 4px;
  background: #182130;
  border-radius: 2px;
  overflow: hidden;
}

.liq-tier-bar-fill.bear {
  height: 100%;
  background: #FF3B69;
  border-radius: 2px;
}

.liq-tier-bar-fill.bull {
  height: 100%;
  background: #00E676;
  border-radius: 2px;
}

.current-price-benchmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.current-price-benchmark-row .benchmark-line {
  flex: 1;
  height: 1px;
  background: #233044;
}

.current-price-benchmark-row .benchmark-tag {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid rgba(0, 210, 196, 0.4);
  border-radius: 4px;
  background: rgba(0, 210, 196, 0.08);
}

/* --- DefiLlama Real DeFi Yields Benchmark (Arbitrage Radar) --- */
.defi-yield-benchmark-ribbon {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.yield-bench-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 10px;
}

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

.yield-bench-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.15s ease;
}

.yield-bench-card:hover {
  border-color: rgba(0, 210, 196, 0.3);
}

.yield-bench-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* --- DefiLlama Cross-Chain TVL & Protocol Fees --- */
.chains-rotation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chain-tvl-row {
  display: flex;
  flex-direction: column;
}

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

.protocol-fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.protocol-fee-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.fee-rank-badge {
  width: 20px;
  height: 20px;
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* --- Alternative.me Sentiment Mini Bars --- */
.sentiment-mini-bars-track {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 65px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 8px;
}

.sentiment-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

.sentiment-bar-fill {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.sentiment-bar-col:hover .sentiment-bar-fill {
  opacity: 0.8;
  filter: brightness(1.2);
}

/* ==========================================================================
   SPOT PORTFOLIO & ASSET ALLOCATION SUITE
   ========================================================================== */
.portfolio-subtab-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #101622;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 4px;
}

.portfolio-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.portfolio-subtab-btn:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.03);
}

.portfolio-subtab-btn.active {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
  border-color: rgba(0, 210, 196, 0.35);
  box-shadow: 0 0 10px rgba(0, 210, 196, 0.15);
}

/* Allocation Bar Track */
.spot-alloc-bar-track {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: #0B0E14;
  border: 1px solid var(--border-subtle);
}

.spot-alloc-segment {
  height: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.spot-alloc-segment:hover {
  filter: brightness(1.25);
  cursor: pointer;
}

.spot-alloc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.spot-alloc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.spot-alloc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.spot-coin-badge {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.spot-table-mini-bar {
  width: 65px;
  height: 6px;
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.spot-table-mini-fill {
  height: 100%;
  border-radius: 3px;
}

.spot-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   ALTSEASON INDEX, DOMINANCE CYCLE & ON-CHAIN RADAR
   ========================================================================== */
.altseason-onchain-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1200px) {
  .altseason-onchain-grid {
    grid-template-columns: 1fr;
  }
}

.altseason-main-card,
.altseason-dominance-card,
.altseason-onchain-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

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

.altseason-regime-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.badge.text-\[10px\],
.badge-xs {
  font-size: 10px !important;
  padding: 1.5px 5px !important;
}

.badge-bull {
  background: rgba(0, 230, 118, 0.12);
  color: var(--accent-emerald);
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.badge-cyan {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 210, 196, 0.3);
}

.badge-amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-bear {
  background: rgba(255, 82, 82, 0.12);
  color: var(--bear-red);
  border: 1px solid rgba(255, 82, 82, 0.3);
}

.badge-primary,
.badge-neutral {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.altseason-hero-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.altseason-score-box {
  min-width: 110px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
}

.altseason-score-num {
  font-size: 38px;
  line-height: 1;
}

.altseason-mini-bar {
  width: 100%;
  height: 6px;
  background: #0B0E14;
  border-radius: 3px;
  overflow: hidden;
}

.altseason-mini-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.capital-cycle-stepper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cycle-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  opacity: 0.55;
  transition: all 0.15s ease;
}

.cycle-step.active {
  background: rgba(0, 210, 196, 0.08);
  opacity: 1;
  border: 1px solid rgba(0, 210, 196, 0.3);
}

.cycle-step.completed {
  opacity: 0.85;
}

.step-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1B2230;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.cycle-step.active .step-circle {
  background: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.5);
}

.cycle-step.completed .step-circle {
  background: rgba(0, 230, 118, 0.2);
  color: var(--accent-emerald);
}

.step-info {
  display: flex;
  flex-direction: column;
}

.step-title {
  font-size: 11px;
  font-weight: 600;
  color: #FFF;
}

.step-desc {
  font-size: 10px;
  color: var(--text-muted);
}

.alt-outperformers-ribbon {
  display: flex;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.alt-alpha-chip {
  padding: 2px 6px;
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 4px;
  font-size: 11px;
}

/* Dominance Stacked Bar & Grid */
.dom-stacked-track {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #0B0E14;
  border: 1px solid var(--border-subtle);
}

.dom-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.dom-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dom-metric-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px;
}

.dom-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dom-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.dom-val {
  font-size: 16px;
}

/* On-Chain Radar Rows */
.onchain-items-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onchain-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.onchain-label {
  font-size: 12px;
}

.onchain-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px;
}

.tag-cyan {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
}

.tag-bull {
  background: rgba(0, 230, 118, 0.15);
  color: var(--accent-emerald);
}

/* ==========================================================================
   MULTI-TIMEFRAME TECHNICAL INDICATOR MATRIX
   ========================================================================== */
.matrix-filter-pills {
  display: flex;
  gap: 4px;
}

.matrix-pill {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.matrix-pill:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.05);
}

.matrix-pill.active {
  color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.12);
  border-color: rgba(0, 210, 196, 0.4);
}

.matrix-rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.matrix-tf-cell {
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 80px;
  transition: all 0.15s ease;
}

.matrix-tf-cell:hover {
  filter: brightness(1.2);
}

.matrix-score-track {
  width: 70px;
  height: 5px;
  background: #0B0E14;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.matrix-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.matrix-posture-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.matrix-posture-badge.badge-bull,
.badge-bull {
  background: rgba(0, 230, 118, 0.16);
  color: #00E676;
  border: 1px solid rgba(0, 230, 118, 0.35);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.15);
}

.matrix-posture-badge.badge-cyan,
.badge-cyan {
  background: rgba(0, 210, 196, 0.14);
  color: #00D2C4;
  border: 1px solid rgba(0, 210, 196, 0.35);
}

.matrix-posture-badge.badge-bear,
.badge-bear {
  background: rgba(255, 82, 82, 0.16);
  color: #FF5252;
  border: 1px solid rgba(255, 82, 82, 0.35);
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.15);
}

.matrix-posture-badge.badge-amber,
.badge-amber {
  background: rgba(255, 179, 0, 0.14);
  color: #FFB300;
  border: 1px solid rgba(255, 179, 0, 0.35);
}

.matrix-posture-badge.badge-neutral,
.badge-neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #94A3B8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.matrix-row:hover {
  background: rgba(0, 210, 196, 0.03);
}

/* ==========================================================================
   DCA COMPOUND SIMULATOR & QUANT RISK SUITE
   ========================================================================== */
.risk-equity-chip,
.risk-pct-chip,
.dca-chip,
.dca-pchip,
.dca-achip {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: #0B0E14;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.risk-equity-chip:hover,
.risk-pct-chip:hover,
.dca-chip:hover,
.dca-pchip:hover,
.dca-achip:hover {
  color: #FFF;
  background: rgba(255, 255, 255, 0.05);
}

.risk-equity-chip.active,
.risk-pct-chip.active,
.dca-chip.active,
.dca-pchip.active,
.dca-achip.active {
  color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.12);
  border-color: rgba(0, 210, 196, 0.4);
}

.dca-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .dca-grid {
    grid-template-columns: 1fr;
  }
}

.dca-kpis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dca-kpi-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px;
}

.dca-chart-wrap {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px;
}

/* ==========================================================================
   DERIBIT INSTITUTIONAL OPTIONS CHAIN & STRIKE LADDER
   ========================================================================== */
.options-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

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

.options-kpi-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.options-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.options-kpi-val {
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
}

.options-kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.options-header-row th {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.options-th-calls {
  background: rgba(0, 230, 118, 0.12);
  color: #00E676;
  border-bottom: 2px solid #00E676 !important;
}

.options-th-puts {
  background: rgba(255, 59, 105, 0.12);
  color: #FF3B69;
  border-bottom: 2px solid #FF3B69 !important;
}

.options-th-strike {
  background: rgba(255, 255, 255, 0.06);
  color: #FFF;
  border-bottom: 2px solid var(--accent-cyan) !important;
  width: 140px;
}

.options-subhead-row th {
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--border-subtle);
}

.options-strike-cell {
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}

.opt-spot-row td {
  background: rgba(0, 210, 196, 0.06) !important;
}

.opt-itm-call {
  background: rgba(0, 230, 118, 0.05);
}

.opt-itm-put {
  background: rgba(255, 59, 105, 0.05);
}

.options-spot-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  background: rgba(0, 210, 196, 0.2);
  color: #00D2C4;
  margin-left: 4px;
}

.options-pain-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.2);
  color: #F59E0B;
  margin-left: 4px;
}

.opt-max-pain-badge {
  background: rgba(245, 158, 11, 0.08) !important;
}

/* ==========================================================================
   BLOOMBERG INSTITUTIONAL CLI TERMINAL DRAWER
   ========================================================================== */
.terminal-cli-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 380px;
  background: rgba(11, 14, 20, 0.97);
  backdrop-filter: blur(16px);
  border-top: 2px solid var(--accent-cyan);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.2s ease, visibility 0.28s ease;
}

.terminal-cli-drawer.open {
  transform: translateY(0);
  visibility: visible;
}

.terminal-cli-drawer.maximized {
  height: 85vh;
}

.terminal-cli-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.terminal-cli-title {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #FFF;
}

.terminal-cli-badge {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 210, 196, 0.15);
  color: #00D2C4;
  border: 1px solid rgba(0, 210, 196, 0.3);
}

.terminal-cli-hint {
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 800px) {
  .terminal-cli-hint, .terminal-chips-group {
    display: none;
  }
}

.terminal-chips-group {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  max-width: 65vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.terminal-chips-group::-webkit-scrollbar {
  display: none;
}

.terminal-chip-btn {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.terminal-chip-btn:hover {
  color: #00D2C4;
  border-color: #00D2C4;
  background: rgba(0, 210, 196, 0.1);
}

.terminal-win-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.terminal-win-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFF;
}

.terminal-cli-body {
  flex: 1;
  padding: 12px 18px;
  overflow-y: auto;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.5;
  color: #E2E8F0;
  display: flex;
  flex-direction: column;
}

.terminal-ascii-art {
  font-family: var(--font-mono, monospace);
  color: var(--accent-cyan, #00D2C4);
  font-size: 10px;
  line-height: 1.15;
  margin: 0 0 10px 0;
  overflow-x: auto;
  text-shadow: 0 0 8px rgba(0, 210, 196, 0.3);
}

.terminal-cmd-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}

.terminal-prompt-user {
  color: #00E676;
  font-weight: 700;
  font-size: 12px;
}

.terminal-result-block {
  margin-top: 4px;
  margin-bottom: 8px;
}

.terminal-output-pre {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: #CBD5E1;
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.45;
}

.terminal-cli-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.terminal-prompt-label {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: #00D2C4;
  white-space: nowrap;
}

.terminal-cli-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: #FFF;
}

.terminal-cli-send {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 4px;
  background: rgba(0, 210, 196, 0.15);
  border: 1px solid rgba(0, 210, 196, 0.4);
  color: #00D2C4;
  cursor: pointer;
  transition: all 0.15s ease;
}

.terminal-cli-send:hover {
  background: rgba(0, 210, 196, 0.25);
  color: #FFF;
}

.terminal-floating-trigger {
  position: fixed;
  bottom: 22px;
  right: 24px;
  z-index: 990;
  background: #0B0E14;
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 210, 196, 0.25);
  transition: all 0.2s ease;
}

.terminal-floating-trigger:hover {
  background: rgba(0, 210, 196, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 210, 196, 0.35);
}

/* ==========================================================================
   MULTI-CURRENCY SWITCHER & VALUATION ENGINE
   ========================================================================== */
.currency-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.currency-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s ease;
}

.currency-pill-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.currency-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-dropdown, #101826);
  border: 1px solid var(--border-strong, #233247);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  min-width: 140px;
  z-index: 1000;
  display: none;
  padding: 4px;
}

.currency-dropdown-menu.open {
  display: block;
}

.currency-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.1s ease;
}

.currency-menu-item:hover {
  background: rgba(0, 210, 196, 0.1);
  color: var(--accent-cyan);
}

.currency-menu-item.active {
  background: rgba(0, 210, 196, 0.15);
  color: var(--accent-cyan);
  font-weight: 700;
}

/* ==========================================================================
   CURATED DARK THEMES GRID (Strict Zero-Purple)
   ========================================================================== */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.theme-picker-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-picker-card:hover {
  border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.03);
}

.theme-picker-card.active {
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 196, 0.08);
}

.theme-color-preview {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.theme-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.theme-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-card-desc {
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   REDDIT SOCIAL SENTIMENT & DISCUSSION RADAR
   ========================================================================== */
.social-metrics-ribbon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 850px) {
  .social-metrics-ribbon {
    grid-template-columns: 1fr;
  }
}

.social-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.social-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.social-kpi-val {
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
}

.social-gauge-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.social-gauge-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.social-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.social-pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.social-pill.active {
  background: rgba(0, 210, 196, 0.12);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.social-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.social-post-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 90px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease;
}

.social-post-card:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.social-post-title {
  color: #E2E8F0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-post-title:hover {
  color: var(--accent-cyan);
}

.social-sub-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: #FF4500;
  font-weight: 700;
}

.social-tag-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.social-sentiment-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
}

.badge-bull {
  background: rgba(0, 230, 118, 0.15);
  color: #00E676;
}

.badge-bear {
  background: rgba(255, 59, 105, 0.15);
  color: #FF3B69;
}

.badge-neutral {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

/* ==========================================================================
   MODULAR INSTITUTIONAL TRADING DESK & TRADFI SUITE
   ========================================================================== */
.desk-toggle-pill {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid #1C2536;
  background: #07090E;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.desk-toggle-pill:hover {
  border-color: rgba(0, 210, 196, 0.4);
  color: #FFF;
}
.desk-toggle-pill.active {
  background: rgba(0, 210, 196, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 700;
}

.modular-desk-canvas {
  display: grid;
  gap: 16px;
}
.modular-desk-canvas.dual-col {
  grid-template-columns: repeat(2, 1fr);
}
.modular-desk-canvas.single-col {
  grid-template-columns: 1fr;
}
@media (max-width: 1024px) {
  .modular-desk-canvas.dual-col {
    grid-template-columns: 1fr;
  }
}

.desk-widget-card {
  background: #0B0E14;
  border: 1px solid #1C2536;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.desk-widget-card.col-span-full {
  grid-column: 1 / -1;
}
.desk-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(16, 23, 38, 0.6);
  border-bottom: 1px solid #1C2536;
}
.desk-widget-body {
  flex: 1;
  overflow: auto;
  max-height: 520px;
}

/* 52-Week Range Bar Component */
.range-bar-track {
  position: relative;
  width: 90px;
  height: 4px;
  background: #1C2536;
  border-radius: 2px;
}
.range-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #00D2C4, #00E676);
  border-radius: 2px;
}
.range-bar-pin {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 10px;
  background: #FFF;
  border-radius: 1px;
  transform: translateX(-50%);
}

/* Interactive Filter Chips */
.opt-sym-chip, .opt-exp-chip, .sec-type-chip, .earn-chip {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid #1C2536;
  background: #07090E;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.opt-sym-chip:hover, .opt-exp-chip:hover, .sec-type-chip:hover, .earn-chip:hover {
  border-color: rgba(0, 210, 196, 0.4);
  color: #FFF;
}
.opt-sym-chip.active, .opt-exp-chip.active, .sec-type-chip.active, .earn-chip.active {
  background: rgba(0, 210, 196, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 700;
}

/* ==========================================================================
   Universal Grid System & Utility Tokens (Responsive Bloomberg Standard)
   ========================================================================== */
.grid {
  display: grid;
}
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-full { grid-column: 1 / -1; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}


/* Options Chain Rows & ITM Highlights */
.options-subhead-row {
  background: rgba(16, 23, 38, 0.8);
  border-bottom: 1px solid #1C2536;
}
.options-row {
  border-bottom: 1px solid #141C2B;
  transition: background 0.15s ease;
}
.options-row:hover {
  background: rgba(16, 23, 38, 0.7);
}
.opt-itm-call {
  background: rgba(16, 185, 129, 0.08) !important;
}
.opt-itm-put {
  background: rgba(244, 63, 94, 0.08) !important;
}
.opt-spot-row {
  background: rgba(0, 210, 196, 0.08) !important;
  border-top: 1px dashed rgba(0, 210, 196, 0.4);
  border-bottom: 1px dashed rgba(0, 210, 196, 0.4);
}
.options-strike-cell {
  background: #080B10;
  border-left: 1px solid #1C2536;
  border-right: 1px solid #1C2536;
}
.options-spot-badge {
  display: inline-block;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: bold;
  background: rgba(0, 210, 196, 0.2);
  color: #00D2C4;
  border-radius: 3px;
  margin-left: 4px;
}
.options-pain-badge {
  display: inline-block;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: bold;
  background: rgba(245, 158, 11, 0.2);
  color: #F59E0B;
  border-radius: 3px;
  margin-left: 4px;
}

/* ==========================================================================
   TRADFI BAROMETER METRICS GRID & CARDS
   ========================================================================== */
.tradfi-barometer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 1200px) {
  .tradfi-barometer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .tradfi-barometer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tradfi-barometer-grid {
    grid-template-columns: 1fr;
  }
}

.tradfi-barometer-grid .metric-card {
  background: #0B0E14;
  border: 1px solid #1C2536;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tradfi-barometer-grid .metric-card:hover {
  border-color: #2D3B55;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tradfi-barometer-grid .metric-label {
  font-size: 11px;
  color: var(--text-muted, #78829D);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tradfi-barometer-grid .metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading, #F0F4FA);
  letter-spacing: -0.3px;
}

.tradfi-barometer-grid .metric-sub {
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   INSTITUTIONAL SYNC & MACRO MARKET IMPACT INTELLIGENCE SUITE
   ========================================================================== */

/* Sync Catalog Button in Header */
.btn-sync-catalog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--color-amber, #f59e0b);
  border-radius: var(--radius-sm, 2px);
  padding: 4px 10px;
  font-family: var(--font-terminal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-sync-catalog:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--color-amber, #f59e0b);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
  color: #fff;
}

.btn-sync-catalog.syncing {
  opacity: 0.8;
  cursor: wait;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-sync-catalog.syncing .sync-icon {
  display: inline-block;
  animation: spinSync 1s linear infinite;
}

@keyframes spinSync {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Macro Scenario Quick Reaction Chips */
.macro-scenario-quick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.macro-reaction-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-terminal);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm, 2px);
  white-space: nowrap;
}

.macro-reaction-chip.bull-chip {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--color-bull, #10b981);
}

.macro-reaction-chip.bear-chip {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-bear, #ef4444);
}

.macro-reaction-chip.neutral-chip {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-muted, #94a3b8);
}

/* Macro Playbook Trigger Buttons */
.macro-playbook-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 210, 196, 0.08);
  border: 1px solid rgba(0, 210, 196, 0.35);
  color: var(--accent-cyan, #06b6d4);
  border-radius: var(--radius-sm, 2px);
  padding: 4px 9px;
  font-family: var(--font-terminal);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.macro-playbook-trigger-btn:hover {
  background: rgba(0, 210, 196, 0.2);
  border-color: var(--accent-cyan, #06b6d4);
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 210, 196, 0.25);
}

.macro-playbook-trigger-btn.mini {
  padding: 2px 6px;
  font-size: 9px;
}

/* Macro Playbook Modal */
.macro-playbook-card {
  background: #090d16 !important;
  border: 1px solid #1c263c !important;
  border-radius: var(--radius-sm, 2px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.macro-impact-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 2px);
  font-family: var(--font-terminal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.macro-impact-badge.critical {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--color-bear, #ef4444);
  color: var(--color-bear, #ef4444);
}

.macro-impact-badge.high {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--color-amber, #f59e0b);
  color: var(--color-amber, #f59e0b);
}

.macro-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.kpi-mini-box {
  background: #0e1526;
  border: 1px solid #1c263c;
  border-radius: var(--radius-sm, 2px);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kpi-mini-box.highlight {
  border-color: rgba(0, 210, 196, 0.4);
  background: rgba(0, 210, 196, 0.04);
}

.scenario-tab-bar {
  display: flex;
  gap: 6px;
  background: #060910;
  padding: 4px;
  border: 1px solid #1c263c;
  border-radius: var(--radius-sm, 2px);
}

.scenario-tab-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-terminal);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: center;
}

.scenario-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.scenario-tab-btn.active {
  background: #0e1526;
  border-color: #273754;
  color: #fff;
}

.scenario-headline-box {
  background: #0e1526;
  border: 1px solid #1c263c;
  border-radius: var(--radius-sm, 2px);
  padding: 12px 16px;
}

.scenario-headline-box.cool {
  border-left: 3px solid var(--color-bull, #10b981);
}

.scenario-headline-box.hot {
  border-left: 3px solid var(--color-bear, #ef4444);
}

.scenario-headline-box.inline {
  border-left: 3px solid var(--color-amber, #f59e0b);
}

.scenario-badge {
  font-family: var(--font-terminal);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 2px);
}

.scenario-badge.cool {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-bull, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.scenario-badge.hot {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-bear, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.scenario-badge.inline {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-amber, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.macro-correlation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.corr-box {
  background: #0b101c;
  border: 1px solid #1c263c;
  border-radius: var(--radius-sm, 2px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.corr-title {
  font-size: 10px;
  font-family: var(--font-terminal);
  font-weight: 700;
  color: var(--text-muted);
}

.corr-val {
  font-family: var(--font-terminal);
  font-size: 12px;
}

.macro-risk-guidance {
  background: rgba(245, 158, 11, 0.05);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm, 2px);
}