/* ============================================================
   SENTIO — Dashboard Page Styles (Tabbed Layout)
   ============================================================ */

/* ── REC BAR ── */
#rec-bar {
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding:       7px 20px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  font-family:   var(--font-mono);
  font-size:     11px;
  flex-wrap:     wrap;
}

#rec-bar {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

#rec-text {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     200px;
}

@media (max-width: 768px) {
  #rec-bar {
    flex-wrap: nowrap;
    font-size: 10px;
  }
  #rec-bar, #tab-bar {
    position: sticky;
    top: var(--topbar-height);
    z-index: 90;
  }
  .rec-label { display: none; }
  #rec-text  { max-width: 140px; }
  .rec-divider { display: none; }
}
@media (max-width: 768px) {
  .ov-brain-card > div {
    flex-direction: column;
    align-items:    center;
  }
  .brain-rows {
    width: 100%;
  }
}



.rec-label {
  color:          var(--text-dim);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space:    nowrap;
}

.rec-text      { color: var(--accent-amber); font-weight: 500; flex: 1; }
.rec-divider   { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

.rec-trap-level   { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.trap-level-badge {
  font-size:      9px;
  font-weight:    600;
  padding:        2px 8px;
  border-radius:  3px;
  letter-spacing: 1px;
  font-family:    var(--font-mono);
}

.trap-LOW      { background: var(--green-dim);  color: var(--accent-green); }
.trap-MODERATE { background: var(--amber-dim);  color: var(--accent-amber); }
.trap-ELEVATED { background: var(--amber-dim);  color: var(--accent-amber); }
.trap-HIGH     { background: var(--red-dim);    color: var(--accent-red);   }
.trap-EXTREME  { background: var(--red-dim);    color: var(--accent-red); animation: blink 0.8s step-end infinite; }

/* ── TOPBAR EXTRAS ── */
.topbar-center {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex:        1;
  justify-content: center;
}

.market-pill {
  display:      flex;
  align-items:  center;
  gap:          6px;
  padding:      4px 12px;
  border-radius:20px;
  font-family:  var(--font-mono);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:1px;
  border:       1px solid;
}

.market-pill.STRONGLY_BULLISH,
.market-pill.BULLISH          { background: var(--green-dim); border-color: var(--accent-green); color: var(--accent-green); }
.market-pill.NEUTRAL          { background: var(--blue-dim);  border-color: var(--accent-blue);  color: var(--accent-blue);  }
.market-pill.BEARISH,
.market-pill.STRONGLY_BEARISH { background: var(--red-dim);   border-color: var(--accent-red);   color: var(--accent-red);   }

.pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.5s ease-in-out infinite; }

.topbar-stat        { display: flex; flex-direction: column; align-items: center; }
.topbar-stat-label  { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-mono); }
.topbar-stat-value  { font-size: 13px; font-family: var(--font-mono); font-weight: 500; }

.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.last-update  { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.status-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); animation: pulse 2s ease-in-out infinite; }
.status-dot.error { background: var(--accent-red); animation: none; }

/* ── TAB BAR ── */
#tab-bar {
  display:       flex;
  align-items:   stretch;
  gap:           0;
  background:    var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding:       0 16px;
  overflow-x:    auto;
  scrollbar-width: none;
}

#tab-bar::-webkit-scrollbar { display: none; }

.dash-tab {
  display:        flex;
  align-items:    center;
  gap:            7px;
  padding:        10px 18px;
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--text-dim);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     all 0.15s;
  margin-bottom:  -1px;
}

.dash-tab:hover { color: var(--text-secondary); }

.dash-tab.active {
  color:        var(--accent-blue);
  border-color: var(--accent-blue);
}

.tab-icon { font-size: 13px; }

.tab-badge {
  font-size:      9px;
  padding:        1px 6px;
  border-radius:  3px;
  background:     var(--bg-card);
  color:          var(--text-dim);
  border:         1px solid var(--border);
  letter-spacing: 0;
}

/* ── MAIN CONTAINER ── */
#main {
  min-height: calc(100vh - var(--topbar-height) - var(--bottomnav-height) - 36px - 41px);
  background: var(--bg-base);
}

/* ── TAB PANELS ── */
.tab-panel {
  display: none;
  padding: 16px;
  animation: fadeIn 0.18s ease;
}

.tab-panel.active { display: block; }

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

/* ── OVERVIEW GRID ── */
.overview-grid {
  display:               grid;
  grid-template-columns: 320px 1fr;
  gap:                   12px;
  align-items:           start;
}

/* ── TWO-COL GRID (sectors / alerts) ── */
.two-col-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  align-items:           start;
}

/* ── FULL PANEL (opportunities) ── */
.tab-full-panel {
  width: 100%;
  overflow-x: auto;
}

/* ── QUICK STATS ── */
.quickstats-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--border);
  border-bottom:         1px solid var(--border);
}

.qs-card {
  background: var(--bg-panel);
  padding:    16px;
}

.qs-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  color:          var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom:  6px;
}

.qs-value {
  font-family: var(--font-mono);
  font-size:   20px;
  font-weight: 600;
}

/* ── BRAIN PANEL ── */
.brain-score-ring {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        20px 16px 12px;
  gap:            8px;
}

.score-ring-wrap {
  position: relative;
  width:    140px;
  height:   140px;
}

.score-ring-value {
  position:  absolute;
  top: 50%;  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.score-ring-number {
  font-size:   42px;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 2px;
}

.score-ring-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  color:          var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top:     4px;
}

.brain-state {
  font-family:    var(--font-display);
  font-size:      16px;
  letter-spacing: 4px;
  font-weight:    600;
}

.brain-state.STRONGLY_BULLISH,
.brain-state.BULLISH  { color: var(--accent-green); }
.brain-state.NEUTRAL  { color: var(--accent-blue);  }
.brain-state.BEARISH,
.brain-state.STRONGLY_BEARISH { color: var(--accent-red); }

.brain-trust {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
}

.brain-plain {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-secondary);
  text-align:  center;
  padding:     0 12px;
}

.brain-stats {
  display:         flex;
  justify-content: space-around;
  padding:         12px 16px;
  border-top:      1px solid var(--border);
  border-bottom:   1px solid var(--border);
  width: 100%;
}

.brain-stat       { text-align: center; }
.brain-stat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.brain-stat-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-top: 2px; }

.brain-rows { width: 100%; }

.brain-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         7px 16px;
  border-bottom:   1px solid var(--border);
}

.brain-row-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
.brain-row-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); font-weight: 500; }

.brain-guidance {
  padding:    16px;
  text-align: center;
  background: var(--bg-card);
  width: 100%;
}

.brain-guidance-action {
  font-family:    var(--font-display);
  font-size:      13px;
  letter-spacing: 3px;
  color:          var(--accent-amber);
  margin-bottom:  6px;
}

.brain-guidance-msg {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-secondary);
  line-height: 1.5;
}

/* ── SECTOR HEATMAP ── */
.heatmap-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   4px;
  padding:               12px;
}

.heatmap-cell {
  padding:      10px 6px;
  border-radius:4px;
  text-align:   center;
  cursor:       pointer;
  transition:   opacity 0.15s;
}

.heatmap-cell:hover { opacity: 0.8; }

.heatmap-name  { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.heatmap-score { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

.heatmap-rotation {
  padding:    8px 12px;
  border-top: 1px solid var(--border);
  font-family:var(--font-mono);
  font-size:  10px;
  display:    flex;
  gap:        8px;
  color:      var(--text-dim);
}

.rotation-label { color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; font-size: 9px; }

/* ── LIQUIDITY ── */
#liquidity-body { padding: 12px; }

.liq-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 12px;
  border-bottom:   1px solid var(--border);
}

.liq-symbol  { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.liq-value   { font-family: var(--font-mono); font-size: 11px; }
.liq-bar-wrap{ flex: 1; margin: 0 10px; height: 3px; background: var(--bg-card); border-radius: 2px; }
.liq-bar     { height: 100%; border-radius: 2px; background: var(--accent-purple); }

/* ── ALERTS ── */
#alerts-body { padding: 8px 0; overflow-y: auto; max-height: 600px; }

.alert-item {
  padding:       10px 16px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  cursor:        pointer;
  transition:    background 0.1s;
}

.alert-item:hover { background: var(--bg-hover); }

.alert-type-badge {
  font-family:    var(--font-mono);
  font-size:      8px;
  font-weight:    600;
  letter-spacing: 1.5px;
  padding:        2px 6px;
  border-radius:  3px;
  flex-shrink:    0;
  margin-top:     2px;
}

.alert-bull  { background: var(--green-dim); color: var(--accent-green); }
.alert-bear  { background: var(--red-dim);   color: var(--accent-red);   }
.alert-trap  { background: var(--amber-dim); color: var(--accent-amber); }

.alert-body  { flex: 1; min-width: 0; }
.alert-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.alert-desc  { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-time  { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); flex-shrink: 0; }

/* ── ANOMALY FEED ── */
.anomaly-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--border);
  min-height:            200px;
}

.anomaly-col { background: var(--bg-panel); padding: 12px; }

.anomaly-col-header {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  10px;
  padding-bottom: 8px;
  border-bottom:  1px solid var(--border);
}

.anomaly-item {
  padding:       6px 0;
  border-bottom: 1px solid var(--border);
  cursor:        pointer;
}

.anomaly-item:hover { background: var(--bg-hover); }
.anomaly-item:last-child { border-bottom: none; }

.anomaly-symbol { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-amber); }
.anomaly-detail { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* ── COMMON ── */
.empty-state {
  text-align:  center;
  padding:     24px;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
}

.text-green  { color: var(--accent-green);  }
.text-red    { color: var(--accent-red);    }
.text-amber  { color: var(--accent-amber);  }
.text-blue   { color: var(--accent-blue);   }
.text-teal   { color: var(--accent-teal);   }
.text-purple { color: var(--accent-purple); }

/* ── MOBILE ── */
/* ── MOBILE SIDEBAR NAV ── */
#mobile-nav-btn {
  display: none;
}
#mobile-sidebar-overlay {
  display: none;
  position: fixed;
  top: var(--topbar-height);
  left: 0; right: 0; bottom: var(--bottomnav-height);
  z-index: 98;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}
#mobile-sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: -280px;
  width: 260px;
  height: calc(100vh - var(--topbar-height) - var(--bottomnav-height));
  z-index: 99;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: left 0.25s ease;
  overflow-y: auto;
}
#mobile-sidebar.open { left: 0; }
#mobile-sidebar-overlay.open { display: block; }
.mobile-sidebar-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.2);
}
.mobile-sidebar-logo { display:flex;align-items:center;gap:10px; }
.mobile-sidebar-logo-text {
  font-family: 'Oswald','Bebas Neue',sans-serif;
  font-size: 22px; letter-spacing: 4px; color: var(--text-primary); line-height:1;
}
.mobile-sidebar-logo-sub {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 2px; color: var(--text-dim);
}
.mobile-sidebar-tab-featured {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent-green);
  background: rgba(29,158,117,0.06); transition: all 0.15s;
}
.mobile-sidebar-tab-featured:hover { background: rgba(29,158,117,0.1); }
.mobile-sidebar-tab-featured .stf-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; color: var(--accent-green); text-transform: uppercase;
}
.mobile-sidebar-tab-featured .stf-sub {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-dim); letter-spacing: 1px; margin-top: 2px;
}
.mobile-sidebar-tab-featured .tab-badge {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; padding: 3px 8px;
  border-radius: 4px; background: rgba(29,158,117,0.2);
  color: var(--accent-green); border: 1px solid rgba(29,158,117,0.3);
}
.mobile-sidebar-tab-featured.active { background: rgba(29,158,117,0.12); }
.mobile-sidebar-tab {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-dim);
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid transparent; transition: all 0.15s;
}
.mobile-sidebar-tab:hover { background: var(--bg-card); color: var(--text-secondary); border-left-color: rgba(255,255,255,0.1); }
.mobile-sidebar-tab.active { color: var(--accent-blue); background: rgba(59,130,246,0.06); border-left-color: var(--accent-blue); }
.mobile-sidebar-tab .tab-badge {
  margin-left: auto; font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(59,130,246,0.15); color: var(--accent-blue);
  border: 1px solid rgba(59,130,246,0.2);
}
.mobile-sidebar-footer {
  margin-top: auto; padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.5px; color: var(--text-dim);
}
  background: var(--bg-card);
  color: var(--accent-blue);
}

@media (max-width: 1024px) {
  #mobile-nav-btn { display: flex !important; align-items: center; gap: 6px; }
  #tab-bar { display: none !important; }
  .overview-grid  { grid-template-columns: 1fr; }
  .two-col-grid   { grid-template-columns: 1fr; }
  #panel-sector, #panel-liq { grid-column: 1 / -1; width: 100%; }
  #tab-sectors .two-col-grid { grid-template-columns: 1fr; width: 100%; }
  #tab-sectors #panel-sector { width: 100%; }
  .anomaly-grid   { grid-template-columns: 1fr; }
  .heatmap-grid   { grid-template-columns: repeat(3, 1fr) !important; gap: 5px; padding: 10px; }

  .dash-tab       { padding: 10px 12px; font-size: 10px; }
  .tab-icon       { display: none; }

  .score-ring-wrap  { width: 120px; height: 120px; }
  .score-ring-number{ font-size: 28px; }

  .topbar-center  { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  #tb-adv-dec     { display: none; }

  #opp-table-body th:nth-child(6),
  #opp-table-body td:nth-child(6),
  #opp-table-body th:nth-child(7),
  #opp-table-body td:nth-child(7) { display: none; }
}

/* ── BLINK ANIMATION ── */
@keyframes blink {
  50% { opacity: 0; }
}

/* ── SECTOR DRILL-DOWN DRAWER ── */
#sector-drill-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.80);
  z-index:         1100;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  animation:       fadeIn 0.2s ease;
}

#sector-drill-sheet {
  width:          100%;
  max-width:      900px;
  max-height:     75vh;
  background:     var(--bg-panel);
  border-top:     1px solid var(--border-bright);
  border-radius:  20px 20px 0 0;
  display:        flex;
  flex-direction: column;
  animation:      sectorSlideUp 0.25s cubic-bezier(0.34,1.05,0.64,1);
  overflow:       hidden;
}

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

#sector-drill-handle {
  width:         40px;
  height:        4px;
  background:    var(--border-bright);
  border-radius: 2px;
  margin:        12px auto 0;
  flex-shrink:   0;
}

#sector-drill-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 20px 12px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

#sector-drill-title {
  display:     flex;
  align-items: center;
  gap:         10px;
}

#sector-drill-name {
  font-family:    var(--font-display);
  font-size:      18px;
  letter-spacing: 3px;
  color:          var(--text-primary);
}

#sector-drill-close {
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--text-dim);
  width:         28px;
  height:        28px;
  border-radius: 50%;
  cursor:        pointer;
  font-size:     12px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all 0.15s;
}
#sector-drill-close:hover { border-color: var(--accent-red); color: var(--accent-red); }

#sector-drill-body {
  flex:       1;
  overflow-y: auto;
  padding:    8px 0;
}
/* ── TICKER TAPE ── */
.tv-ticker-wrap {
  width:         100%;
  background:    var(--bg-panel);
  border-bottom: 1px solid var(--border);
  height:        46px;
  overflow:      hidden;
  z-index:       100;
}

/* ── OVERVIEW REDESIGN ── */
.ov-cards-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         16px;
}

@media (max-width: 1024px) {
  .ov-cards-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ov-cards-row { grid-template-columns: 1fr; }
}

.ov-card {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       14px;
  display:       flex;
  flex-direction:column;
  gap:           10px;
}

.ov-card-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 1.5px;
  color:          var(--text-dim);
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.ov-help {
  width:           14px;
  height:          14px;
  border-radius:   50%;
  background:      var(--bg-card);
  border:          1px solid var(--border);
  color:           var(--text-dim);
  font-size:       9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          help;
  flex-shrink:     0;
}

.ov-card-main {
  font-family:    var(--font-display);
  font-size:      22px;
  letter-spacing: 2px;
  color:          var(--text-primary);
}

.ov-card-sub {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-secondary);
}

.ov-card-learn {
  font-size:     10px;
  color:         var(--text-dim);
  line-height:   1.5;
  padding-top:   8px;
  border-top:    1px solid var(--border);
  margin-top:    auto;
}

/* ── PULSE GRID ── */
.ov-pulse-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.ov-pulse-item {
  background:    var(--bg-card);
  border-radius: 6px;
  padding:       8px;
}

.ov-pulse-label {
  font-family:  var(--font-mono);
  font-size:    9px;
  color:        var(--text-dim);
  margin-bottom:3px;
}

.ov-pulse-value {
  font-family: var(--font-mono);
  font-size:   14px;
  font-weight: 700;
  color:       var(--text-primary);
}


/* ── OPTIONS GRID ── */
.ov-options-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.ov-options-item {
  background:    var(--bg-card);
  border-radius: 6px;
  padding:       8px;
}

/* ── SIGNAL CARDS ── */
.ov-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
  flex-wrap:       wrap;
  gap:             8px;
}

.ov-section-title {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: 1.5px;
  color:          var(--text-dim);
}

.ov-disclaimer {
  font-family: var(--font-mono);
  font-size:   9px;
  color:       var(--accent-amber);
  opacity:     0.8;
}

.ov-signals-scroll {
  display:          flex;
  gap:              10px;
  overflow-x:       auto;
  padding-bottom:   8px;
  margin-bottom:    16px;
  scrollbar-width:  thin;
}

.ov-signals-scroll::-webkit-scrollbar { height: 3px; }
.ov-signals-scroll::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.ov-signal-card {
  flex-shrink:   0;
  width:         160px;
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       12px;
  cursor:        pointer;
  transition:    all 0.2s;
}

.ov-signal-card:hover {
  border-color: var(--border-bright);
  transform:    translateY(-2px);
}

.ov-signal-symbol {
  font-family:    var(--font-display);
  font-size:      16px;
  letter-spacing: 1px;
  color:          var(--text-primary);
  margin-bottom:  4px;
}

.ov-signal-sector {
  font-family:  var(--font-mono);
  font-size:    9px;
  color:        var(--text-dim);
  margin-bottom:8px;
}

.ov-signal-score-bar {
  height:        3px;
  background:    var(--bg-card);
  border-radius: 2px;
  overflow:      hidden;
  margin-bottom: 8px;
}

.ov-signal-score-fill {
  height:        100%;
  border-radius: 2px;
}

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

.ov-signal-loading {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
  padding:     12px 0;
}

/* ── BOTTOM GRID ── */
.ov-bottom-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

@media (max-width: 768px) {
  .ov-bottom-grid { grid-template-columns: 1fr; }
}

.ov-brain-card { grid-column: 1; }
.ov-insight-card { grid-column: 2; }

@media (max-width: 768px) {
  .ov-brain-card, .ov-insight-card { grid-column: 1; }
}

/* ── INSIGHT BOX ── */
.ov-insight-lesson {
  background:    var(--blue-dim);
  border:        1px solid rgba(59,130,246,0.2);
  border-radius: 8px;
  padding:       12px;
  margin-bottom: 12px;
}

.ov-disclaimer-box {
  font-family:  var(--font-mono);
  font-size:    9px;
  color:        var(--text-dim);
  line-height:  1.6;
  padding:      10px;
  background:   var(--bg-card);
  border-radius:6px;
  border-left:  3px solid var(--accent-amber);
  margin-top:   auto;
}
/* ── SECTORS TAB LAYOUT ── */
#tab-sectors > .two-col-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1024px) {
  #tab-sectors > .two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ALERTS TAB LAYOUT ── */
#tab-alerts > .two-col-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1024px) {
  #tab-alerts > .two-col-grid {
    grid-template-columns: 1fr;
  }
  #tab-alerts .anomaly-grid {
    grid-template-columns: 1fr;
  }
}
/* ── HEATMAP TILE IMPROVEMENTS ── */
.heatmap-cell {
  min-height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.heatmap-name { font-size: 10px !important; letter-spacing: 1.5px !important; margin-bottom: 2px !important; }
.heatmap-score { font-size: 24px !important; font-weight: 700 !important; line-height: 1 !important; }
@media (max-width: 1024px) {
  .heatmap-cell { min-height: 75px !important; }
  .heatmap-score { font-size: 20px !important; }
  .heatmap-name { font-size: 9px !important; }
}

/* ── OVERVIEW MOBILE REORDER & HIERARCHY ── */
@media (max-width: 768px) {
  #tab-overview.active {
    display: flex;
    flex-direction: column;
  }

  /* Dissolve cards row so cards become direct flex children */
  .ov-cards-row {
    display: contents;
  }

  /* Order */
  #ov-mood-card          { order: 1; }
  #ov-top-setups-section { order: 2; }
  #ov-insights-section   { order: 3; }
  #ov-pulse-card         { order: 4; }
  #ov-options-card       { order: 5; }
  .ov-bottom-grid        { order: 6; }

  /* Hero mood card */
  #ov-mood-card {
    border-left: 4px solid var(--accent-red);
    padding: 16px;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  #ov-mood-card .ov-card-label {
    display: none;
  }
  #rec-bar {
    position: sticky;
    top: var(--topbar-height);
    z-index: 90;
    background: var(--bg-card);
  }
  #ov-mood-card .ov-card-main {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 6px 0;
  }
  #ov-mood-card .ov-card-sub {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
  }

  /* Accordion toggle arrow */
  .ov-toggle-arrow {
    margin-left: auto;
    font-size: 14px;
    color: var(--text-dim);
    transition: transform 0.2s ease;
  }
  .ov-toggle-arrow.collapsed { transform: rotate(-90deg); }

  /* Collapsed accordion body */
  .ov-card-body-collapsed {
    display: none;
  }

  /* Right fade on top setups scroll */
  #ov-top-setups-section {
    position: relative;
  }
  #ov-top-setups-section::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-panel));
    pointer-events: none;
    z-index: 2;
  }
}

/* ── INSIGHTS SCROLL FADE (mobile) ── */
@media (max-width: 768px) {
  #ov-insights-section {
    position: relative;
  }
  #ov-insights-section::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-panel));
    pointer-events: none;
    z-index: 2;
  }
  #ov-top-scorers-body::-webkit-scrollbar { display: none; }
}

/* ── REC-BAR MOBILE LAYOUT ── */
@media (max-width: 768px) {
  .rec-desktop-only { display: none !important; }
  .rec-mobile-only {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    padding: 4px 0;
  }
  .rec-mob-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
  }
  .rec-mob-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .rec-mob-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
  }
  .rec-mob-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
  }
}
@media (min-width: 769px) {
  .rec-mobile-only { display: none !important; }
}

/* ── MOOD CARD PRESSURE BARS ── */
#ov-mood-card {
  position: relative;
  padding-right: 80px;
}
@media (max-width: 768px) {
  #ov-mood-card {
    padding-right: 80px;
  }
}

/* Watchlist mobile */
@media (max-width: 768px) {
  #wl-layout { flex-direction: column !important; height: auto !important; }
  #wl-left { width: 100% !important; min-width: unset !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07); }
  #wl-right { display: none !important; }
}

/* ── LIGHT THEME COMPONENT OVERRIDES ── */
[data-theme="light"] #ticker-tape {
  background: rgba(29,158,117,0.06);
  border-bottom: 1px solid rgba(29,158,117,0.15);
}
[data-theme="light"] .ticker-text {
  color: rgba(14,80,55,0.7);
}
[data-theme="light"] #rec-bar {
  background: #edf7f3;
  border-bottom: 1px solid rgba(29,158,117,0.15);
}
[data-theme="light"] .rec-label { color: var(--text-dim); }
[data-theme="light"] .rec-text  { color: var(--text-primary); }
[data-theme="light"] #bottom-nav {
  background: #ffffff;
  border-top: 1px solid rgba(29,158,117,0.12);
}
[data-theme="light"] .bottom-nav-item { color: #6b8c7d; }
[data-theme="light"] .panel {
  background: var(--bg-panel);
  border-color: var(--border);
}
[data-theme="light"] .ov-card {
  background: var(--bg-panel);
  border-color: var(--border);
}
[data-theme="light"] .sentio-table th {
  background: #edf7f3;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .sentio-table td {
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .sentio-table tr:hover td {
  background: #edf7f3;
}
[data-theme="light"] .heatmap-cell {
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .liq-bar-wrap {
  background: rgba(29,158,117,0.1);
}
[data-theme="light"] .alert-item {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .anomaly-item {
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .anomaly-col {
  background: var(--bg-panel);
}
[data-theme="light"] .tab-panel {
  background: var(--bg-base);
}
[data-theme="light"] #tab-bar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .dash-tab {
  color: var(--text-dim);
}
[data-theme="light"] .dash-tab.active {
  color: var(--text-primary);
  border-bottom: 2px solid var(--accent-green);
}
[data-theme="light"] .mobile-sidebar-header {
  background: #edf7f3;
}
[data-theme="light"] #mobile-sidebar,
[data-theme="light"] #virtual-sidebar,
[data-theme="light"] #learn-mob-sidebar {
  background: #ffffff;
}
[data-theme="light"] .mobile-sidebar-tab,
[data-theme="light"] .vsb-tab {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .mobile-sidebar-tab.active,
[data-theme="light"] .vsb-tab.active {
  background: #edf7f3;
  color: var(--accent-green);
  border-left-color: var(--accent-green);
}
[data-theme="light"] .empty-state {
  color: var(--text-dim);
}
[data-theme="light"] .brain-row {
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .brain-rows {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 8px;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .panel-header {
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .ov-card-learn {
  border-top: 1px solid var(--border);
  color: var(--text-dim);
}
[data-theme="light"] .section-card,
[data-theme="light"] .learn-card {
  background: var(--bg-panel);
  border-color: var(--border);
}
[data-theme="light"] #fb-btn {
  box-shadow: 0 2px 12px rgba(29,158,117,0.25);
}

/* ── LIGHT THEME WATCHLIST & STOCK PANEL ── */
[data-theme="light"] #wl-layout {
  background: var(--bg-base);
}
[data-theme="light"] #wl-left {
  background: var(--bg-panel);
  border-right: 1px solid var(--border) !important;
}
[data-theme="light"] #wl-search {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] #wl-right {
  background: var(--bg-base);
}
[data-theme="light"] #stock-panel {
  background: var(--bg-panel);
  border-top-color: var(--border);
}
[data-theme="light"] #stock-panel-backdrop {
  background: rgba(0,0,0,0.4);
}
[data-theme="light"] #sp-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .sp-section {
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .sp-tab-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .sp-tab {
  color: var(--text-dim);
}
[data-theme="light"] .sp-tab.active {
  color: var(--accent-green);
  border-bottom: 2px solid var(--accent-green);
}
[data-theme="light"] .sp-level {
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .sp-right-panel {
  background: var(--bg-card);
  border-left: 1px solid var(--border);
}
[data-theme="light"] .sp-vp-box {
  border: 1px solid var(--border);
}
[data-theme="light"] #wl-body tr:hover td {
  background: var(--bg-hover);
}
[data-theme="light"] #wl-body tr {
  border-bottom: 1px solid var(--border);
}