/* ============================================================
   Market Insight V2 — Dashboard Styles (B2 Structured Panels)
   Flat warm charcoal, Inter/JetBrains Mono, no glassmorphism
   ============================================================ */

/* ─── Custom Properties ─── */
:root {
  --bg:           #131316;
  --surface:      #1c1c20;
  --surface-hover:#222226;
  --border:       #2a2a30;
  --border2:      rgba(42,42,48,0.3);
  --accent:       #4F98A3;
  --accent-bg:    rgba(79,152,163,0.1);
  --secondary:    #BB653B;
  --up:           #0EB35B;
  --up-bg:        rgba(14,179,91,0.12);
  --down:         #C24A4A;
  --down-bg:      rgba(194,74,74,0.12);
  --text:         #e0e0e0;
  /* Iter 9i — --text-muted moved from #b0bec5 to #ffffff80 (50% white).
     Trial value to test if a softer muted grey reads better for inactive
     watchlist tab names + secondary labels app-wide. Revert hex if needed. */
  --text-muted:   #ffffff80;
  --text-faint:   #5A5957;
  --radius:       8px;
  --radius-sm:    6px;
}

/* ─── Animations ─── */
@keyframes b2-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes b2-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page Base ─── */
/* Prevent browser from propagating body overflow to viewport.
   Without this, changing body overflow dynamically (scroll-enabled) has no effect
   because the initial overflow:hidden was already transferred to the viewport. */
html { overflow: auto; }

.db-page {
  min-height: 100dvh;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
}

/* ─── Background Layers ─── */
/* B2: flat background, no gradients, no noise */
.bg-layer {
  display: none;
}

.bg-noise {
  display: none;
}

/* Remove old orb/grid classes */
.bg-orb, .bg-grid { display: none; }

/* ─── Header ─── */
.db-header-bg {
  background: #1d1d22;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  animation: b2-slideDown 0.4s ease both;
}

.db-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 60px;
  margin: 0 auto;
  max-width: 1440px;
  background: transparent;
  border: none;
  border-radius: 0;
}

.db-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.db-logo {
  flex-shrink: 0;
}

.db-logo-title {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.db-logo-title h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.db-logo-title h1 .logo-highlight {
  color: var(--accent);
  font-weight: 400;
}

.db-logo-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 1px;
}

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

.db-user-email {
  display: none;
}

.db-sub-header {
  max-width: 1440px;
  margin: 0 auto;
  padding: 4px 24px 0;
  display: flex;
  justify-content: flex-end;
}
.db-datetime-sub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Dashboard Search Box */
.db-search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.db-search-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
}
.db-search-input::placeholder {
  text-transform: none;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
}
.db-search-input:focus {
  border-color: var(--accent);
}
.db-search-clear {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  z-index: 1;
}
.db-search-clear:hover {
  color: var(--text);
}
.db-search-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  height: 33px;
  transition: background 0.2s;
}
.db-search-btn:hover {
  background: #5eb0bc;
}

/* Dashboard Search Suggestions */
.db-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.db-search-suggestions:empty { display: none; }
.db-search-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border2);
  transition: background 0.15s;
}
.db-search-suggestion:last-child { border-bottom: none; }
.db-search-suggestion:hover, .db-search-suggestion.active {
  background: rgba(79,152,163,0.06);
}
.db-search-suggestion-sym {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-width: 55px;
}
.db-search-suggestion-name {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.db-search-suggestion-exchange {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.db-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.db-header-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Avatar button */
.db-avatar-wrap {
  position: relative;
}

.db-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4F98A3;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: box-shadow 0.2s, transform 0.15s;
}

.db-avatar-btn:hover {
  box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.3);
  transform: scale(1.05);
}

.db-avatar-btn #dbAvatarInitial {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

/* Avatar dropdown panel */
.db-avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface, #1c1c20);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 1000;
}

.db-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text, #e0e0e0);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.db-avatar-dropdown-item:hover {
  background: rgba(79, 152, 163, 0.12);
}

.db-avatar-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.db-avatar-dropdown-item.db-avatar-dropdown-donate {
  color: #60a5fa;
}

.db-avatar-dropdown-item.db-avatar-dropdown-donate svg {
  stroke: #60a5fa;
  opacity: 1;
}

.db-avatar-dropdown-item.db-avatar-dropdown-donate:hover {
  background: rgba(96, 165, 250, 0.12);
}

.db-avatar-dropdown-item.db-avatar-dropdown-danger {
  color: var(--down, #e55);
}

.db-avatar-dropdown-item.db-avatar-dropdown-danger:hover {
  background: rgba(238, 85, 85, 0.1);
}

.db-header-btn.db-refresh-btn {
  border-color: var(--accent);
  color: var(--accent);
}

.db-header-btn.db-refresh-btn:hover {
  background: var(--accent-bg);
}

.db-header-btn svg {
  flex-shrink: 0;
}

/* Refresh animation */
.db-refresh-spin {
  animation: db-spin 0.8s linear infinite;
}

@keyframes db-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Back link */
.db-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.db-back-link:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

/* ─── Main Content ─── */
.db-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 24px 0;
  position: relative;
  z-index: 1;
  animation: b2-fadeIn 0.5s 0.1s ease both;
}

/* ─── Dashboard Tabs (top-level nav) ─── */
.db-tabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  margin-left: 0;
}

.db-tab-btn {
  padding: 7px 18px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 0.2s;
  border-radius: 20px;
}

.db-tab-btn:hover:not(.active) {
  color: var(--text);
  background: var(--surface-hover);
}

.db-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.db-tab-panel {
  display: none;
}

.db-tab-panel.active {
  display: block;
  animation: b2-fadeIn 0.35s ease both;
}

/* Allow scrolling for content-heavy tabs (Stock Analysis, MI Rank, AlphaDCF) */
.db-page.scroll-enabled {
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
}

/* ─── Watchlists Container ─── */
.wl-container {
  max-width: 100%;
  margin: 0 auto;
}

.wl-split-layout {
  --wl-grid-h: calc(100dvh - 290px);
  display: grid;
  grid-template-columns: minmax(380px, 30%) 1fr 42px;
  grid-template-rows: var(--wl-grid-h);
  gap: 12px;
  align-items: stretch;
  transition: grid-template-columns 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.wl-split-layout.insight-open {
  grid-template-columns: minmax(380px, 30%) 1fr 320px;
}

.wl-list-panel { min-width: 0; height: var(--wl-grid-h); max-height: var(--wl-grid-h); overflow: hidden; }
.wl-chart-panel { min-width: 0; height: var(--wl-grid-h); max-height: var(--wl-grid-h); display: flex; flex-direction: column; overflow: hidden; }

/* -- Insight column (3rd grid column) -- */
.wl-insight-col {
  min-width: 0;
  height: var(--wl-grid-h);
  max-height: var(--wl-grid-h);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wl-insight-tab {
  width: 42px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wl-insight-tab:hover {
  background: var(--surface-hover);
  color: var(--accent);
  border-color: var(--accent);
}
/* Hide the tab when panel is open */
.wl-insight-col.open .wl-insight-tab {
  display: none;
}

@media (max-width: 900px) {
  /* Enable vertical scrolling on mobile — layout stacks so content exceeds viewport */
  .db-page {
    overflow-y: auto;
    height: auto;
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }
  .wl-split-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wl-list-panel { height: auto; max-height: none; overflow: visible; }
  .wl-chart-panel { height: auto; max-height: none; overflow: visible; }
  .wl-insight-col { display: none; }
  .db-header { flex-wrap: wrap; }
  .db-search-wrap {
    display: flex;
    width: 100%;
    order: 10;
  }
  .db-search-input {
    flex: 1;
    width: auto;
  }
}

/* ─── Watchlist Tabs Row ─── */
.wl-tabs-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 14px;
  flex-wrap: nowrap;
  /* Bottom hairline runs full-width across tabs + create button */
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.wl-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* No longer flex: 1 — we want create-btn to sit immediately after the last tab */
  flex: 0 0 auto;
  align-items: stretch;
  min-width: 0;
}

.wl-tabs::-webkit-scrollbar { display: none; }

/* Tab — plain text with an active underline (no pill background) */
.wl-tab {
  padding: 8px 6px 10px;
  margin-bottom: -1px; /* overlap parent border so the active underline sits exactly on it */
  background: none;
  /* Iter 9i — moved from --text-faint to --text-muted so the inactive watchlist
     names pick up the new #ffffff80 muted grey for an A/B read. */
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, font-weight 0.15s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  /* Eliminate Safari's 300ms tap-delay and disable double-tap-to-zoom so
     the tab activates on the first tap. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Hover-state styling only applies on devices with a real hover capability.
   On touch devices (iPad/Safari), :hover rules cause the first tap to be
   consumed as a hover-reveal and the tab requires a second tap to actually
   switch — the hover: hover guard prevents that. */
@media (hover: hover) {
  .wl-tab:hover:not(.active) { color: var(--text); }
  .wl-tab:hover .wl-tab-edit-icon { opacity: 0.7; }
  .wl-tab.active .wl-tab-edit-icon:hover { opacity: 1; }
}

.wl-tab.active {
  background: none;
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.wl-tab + .wl-tab { border-left: none; }

.wl-tab-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  /* Show the pencil on the active tab only — on touch devices where
     :hover is unreliable, inactive tabs keep the icon hidden so the user
     can tap the tab label directly without fighting a hover-reveal. */
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.wl-tab.active .wl-tab-edit-icon { opacity: 0.6; }

/* ---- Drag-and-drop reorder affordances ----
   The default list (idx 0) is pinned and not draggable; everything else
   shows a grab cursor on hover and a left-edge drop indicator while a
   drag is in progress. */
@media (hover: hover) {
  .wl-tab[draggable="true"] { cursor: grab; }
  .wl-tab[draggable="true"]:active { cursor: grabbing; }
}

.wl-tab.wl-tab-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

/* Drop indicator — a thin accent bar on the left/right edge of the
   tab the cursor is currently over. Uses ::before/::after so the
   tab's bottom underline (active state) is unaffected. */
.wl-tab.wl-tab-drop-before::before,
.wl-tab.wl-tab-drop-after::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
}
.wl-tab.wl-tab-drop-before::before { left: -1px; }
.wl-tab.wl-tab-drop-after::after  { right: -1px; }

/* Default list visual cue — keep it visually identical but make sure
   it never picks up grab cursor styling. */
.wl-tab.wl-tab-default { cursor: pointer; }

/* Create-list — compact icon button immediately after the last tab,
   matching the tab padding rhythm (no extra gap) */
.wl-create-btn {
  margin: 0;
  margin-bottom: -1px;
  padding: 8px 6px 10px;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
  font-size: 0; /* hide any leftover text content */
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.wl-create-btn::before {
  /* Document-with-plus icon (matches reference image style) */
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><polyline points='14 3 14 9 20 9'/><line x1='12' y1='13' x2='12' y2='19'/><line x1='9' y1='16' x2='15' y2='16'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><polyline points='14 3 14 9 20 9'/><line x1='12' y1='13' x2='12' y2='19'/><line x1='9' y1='16' x2='15' y2='16'/></svg>") center / contain no-repeat;
}
.wl-create-btn:hover {
  color: var(--text);
  background: transparent;
}

/* ─── Index Ticker Bar ─── */
.idx-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}

.idx-item {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 0;
  transition: background 0.2s;
}

.idx-item:hover {
  background: var(--surface-hover);
}

.idx-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.idx-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  display: block;
}

.idx-change {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: 2px;
  display: block;
}

.idx-change.up {
  color: var(--up);
}

.idx-change.down {
  color: var(--down);
}

/* After-hours % in index bar */
.idx-ah {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: 1px;
  opacity: 0.85;
}

.idx-ah:empty { display: none; }

.idx-ah.up { color: var(--up); }
.idx-ah.down { color: var(--down); }

.idx-ah svg { flex-shrink: 0; opacity: 0.7; }

/* Flash animation on price update */
@keyframes idx-flash-green {
  0% { background: rgba(14,179,91,0.15); }
  100% { background: var(--surface); }
}

@keyframes idx-flash-red {
  0% { background: rgba(194,74,74,0.15); }
  100% { background: var(--surface); }
}

.idx-item.flash-up {
  animation: idx-flash-green 0.6s ease;
}

.idx-item.flash-down {
  animation: idx-flash-red 0.6s ease;
}

/* Active/selected index card */
.idx-item.idx-active {
  border-color: #3fb9a8;
  background: rgba(63, 185, 168, 0.08);
}

/* Crypto items in index bar — desktop only */
.idx-crypto .idx-label {
  color: #f7931a; /* BTC orange accent for crypto label */
}
.idx-item[data-idx="CRYPTO:ETHUSD"] .idx-label {
  color: #627eea; /* ETH blue accent */
}

@media (max-width: 900px) {
  .idx-bar { flex-wrap: wrap; }
  .idx-item { flex: 1 1 calc(33.33% - 6px); min-width: 0; }
  .idx-crypto { display: none; }
}

@media (max-width: 480px) {
  .idx-bar { gap: 6px; }
  .idx-item { flex: 1 1 calc(33.33% - 4px); padding: 8px 10px; }
  .idx-label { font-size: 9px; }
  .idx-price { font-size: 14px; }
  .idx-change { font-size: 11px; }
  .idx-ah { font-size: 8px; }
  .idx-crypto { display: none; }
}

/* ─── Watchlist Table ─── */
.wl-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Scrollable ticker area inside table wrap */
.wl-table-wrap .wl-table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}

.wl-table-wrap .wl-table-scroll::-webkit-scrollbar { width: 2px; }
.wl-table-wrap .wl-table-scroll::-webkit-scrollbar-track { background: transparent; }
.wl-table-wrap .wl-table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

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

.wl-table thead {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.wl-table th {
  /* Match the watchlist tab heading style (Inter, 13px, no uppercase / letter-spacing). */
  padding: 8px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: normal;
  text-align: left;
  border-bottom: 1px solid var(--border);
  text-transform: none;
  white-space: nowrap;
}

/* Align headers over their data: Last=right, Day%=right, actions=right */
.wl-table th:nth-child(2) { text-align: right; }
.wl-table th:nth-child(3) { text-align: right; }
.wl-table th:last-child { text-align: right; }

/* Ticker column: offset the header so "Ticker" sits centrally over the
   ticker symbol (e.g. AAPL) rather than over the drag-handle/logo prefix. */
.wl-table th:first-child {
  padding-left: 50px;
}

.wl-table td {
  padding: 12px 8px;
  border-top: 1px solid var(--border2);
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
}

.wl-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.wl-table tbody tr:hover {
  background: var(--surface-hover);
}

.wl-table tbody tr.selected {
  background: var(--surface-hover);
}

.wl-table tbody tr:last-child td {
  border-bottom: none;
}

/* Ticker cell */
.wl-ticker-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wl-ticker-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.wl-ticker-text {
  min-width: 0;
}
.wl-ticker-cell .ticker-sym {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: block;
  line-height: 1.2;
}
.wl-ticker-cell .ticker-name {
  font-size: 10.5px;
  /* Iter 9i — was hard-coded #8a8d92, now uses the design token. */
  color: var(--text-muted);
  display: block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 1px;
}

/* Price + change */
.wl-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

.wl-price-main {
  display: block;
  font-size: 14px;
}

.wl-price-ext {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}

.wl-change-cell {
  text-align: right;
  white-space: nowrap;
}

.wl-change-badge {
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  border-radius: 0;
  line-height: 1.3;
  background: transparent;
  font-variant-numeric: tabular-nums lining-nums;
}

.wl-change-badge.up {
  color: var(--up);
  background: transparent;
}

.wl-change-badge.down {
  color: var(--down);
  background: transparent;
}

/* Extended hours */
.wl-ext-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: 1px;
  opacity: 0.85;
}

.wl-ext-line.up { color: var(--up); }
.wl-ext-line.down { color: var(--down); }

.wl-ext-icon { flex-shrink: 0; opacity: 0.7; }

/* Legacy compat */
.wl-change { font-weight: 600; font-size: 13px; white-space: nowrap; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums lining-nums; }
.wl-change.up { color: var(--up); }
.wl-change.down { color: var(--down); }

/* Chart placeholder */
.wl-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 445px;
  color: var(--text-faint);
  font-size: 15px;
}

.wl-chart-placeholder.hidden { display: none; }

/* Actions column */
.wl-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.wl-action-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wl-action-btn:hover {
  color: var(--down);
  background: var(--down-bg);
}

.wl-action-dots { display: none; }
.wl-action-remove { display: inline-flex; }

/* Context menu */
.wl-ctx-menu {
  background: rgba(19,19,22,0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 1100;
  overflow: hidden;
  min-width: 180px;
  animation: wl-ctx-in 0.12s ease;
}

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

.wl-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.wl-ctx-item:hover { background: var(--accent-bg); }
.wl-ctx-item + .wl-ctx-item { border-top: 1px solid var(--border2); }
.wl-ctx-item[disabled] {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.wl-ctx-danger { color: var(--down); }
.wl-ctx-danger:hover { background: var(--down-bg); }

/* Empty state */
.wl-empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.wl-empty-state p { margin-bottom: 6px; }

.wl-empty-state strong {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Loading */
.wl-loading-row td {
  padding: 32px 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

.wl-loading-dots {
  display: inline-flex;
  gap: 4px;
}

.wl-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: wl-dot-pulse 1.2s ease-in-out infinite;
}

.wl-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.wl-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wl-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Add ticker row — fixed at bottom of panel */
.wl-add-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.wl-add-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wl-add-input::placeholder { color: var(--text-faint); }

.wl-add-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,152,163,0.12);
}

.wl-add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.wl-add-btn:hover { opacity: 0.88; }
.wl-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Add ticker autocomplete (ticker + company-name search, mirrors header) */
.wl-add-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
/* Drop-UP: the add row sits at the bottom of a tall list panel, so anchor
   the suggestions above the input rather than below where they'd be clipped. */
.wl-add-suggestions {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.wl-add-suggestions:empty { display: none; }
.wl-add-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border2);
  transition: background 0.15s;
}
.wl-add-suggestion:last-child { border-bottom: none; }
.wl-add-suggestion:hover,
.wl-add-suggestion.active {
  background: rgba(79,152,163,0.06);
}
.wl-add-suggestion-sym {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 50px;
  flex-shrink: 0;
}
.wl-add-suggestion-name {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.wl-add-suggestion-exchange {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.wl-add-suggestion-empty {
  padding: 10px;
  color: var(--text-faint);
  font-size: 12px;
}

/* ─── Chart Section ─── */
.wl-chart-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow: hidden;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 0;
}
.wl-chart-section #chartContainer {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Establish positioning context so the SLP overlay canvas (absolute,
     inset: 0) sits inside the chart bounds rather than the document. */
  position: relative;
}

/* RSI sub-chart pane (shown below main chart when RSI indicator toggled on) */
.wl-rsi-container {
  width: 100%;
  height: 28%;
  /* Iter 7q: lowered floor from 110px to 60px to accept user-dragged shrink. */
  min-height: 60px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.wl-chart-section.has-rsi #chartContainer {
  flex: 0 0 72%;
}

/* Iter 7q — draggable divider above #rsiContainer. Mirrors .ailab-chart-resizer. */
.wl-chart-resizer {
  flex: 0 0 4px;
  height: 4px;
  width: 100%;
  cursor: row-resize;
  background: transparent;
  position: relative;
  z-index: 4;
  touch-action: none;
  user-select: none;
  outline: none;
}
.wl-chart-resizer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--border, rgba(255,255,255,0.10));
  transition: background 0.15s ease, height 0.15s ease;
}
.wl-chart-resizer:hover::before,
.wl-chart-resizer.is-dragging::before,
.wl-chart-resizer:focus-visible::before {
  background: var(--accent, #b8e066);
  height: 3px;
}
.wl-chart-resizer:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent, #b8e066);
}

/* ============================================================
   Expand-to-modal chart (icon top-right of chart header)
   Toggled by .wl-chart-panel.wl-chart-expanded. Auto-applied when
   RSI indicator is on.
   ============================================================ */
.wl-chart-expand-btn {
  margin-left: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Iter 9i — was var(--muted, #8a8a88) but --muted is undefined; routed onto
     the design token. Same applies to the :hover --fg / --fg-muted fallbacks. */
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  align-self: flex-start;
}
.wl-chart-expand-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border);
}
.wl-chart-expand-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wl-chart-expand-btn .wl-collapse-icon { display: none; }
.wl-chart-panel.wl-chart-expanded .wl-chart-expand-btn .wl-expand-icon { display: none; }
.wl-chart-panel.wl-chart-expanded .wl-chart-expand-btn .wl-collapse-icon { display: inline-block; }

/* Backdrop */
.wl-chart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 950;
  opacity: 0;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.wl-chart-backdrop.wl-visible { opacity: 1; }

/* Expanded panel — centered modal 80vw × 80vh.
   Position/size animated via JS (FLIP technique): panel starts at its
   origin rect (inline styles), then these rules take over as the target.
   !important needed to override the inline top/left/width/height applied
   as the starting frame. */
.wl-chart-panel.wl-chart-expanded {
  position: fixed;
  /* Keep the modal clear of the sticky site nav (~150px tall on tablets).
     Using max() ensures at least 160px top offset even on short viewports. */
  top: max(15vh, 160px);
  left: 10vw;
  width: 80vw;
  height: min(75vh, calc(100vh - 180px));
  max-height: min(75vh, calc(100vh - 180px));
  min-height: 0;
  margin: 0;
  z-index: 960;
  background: var(--bg, #131316);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  padding: 16px;
  overflow: hidden;
  opacity: 1;
  transition:
    top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s ease,
    border-radius 0.7s ease;
}

/* When expanded, let the chart section fill the modal and respect RSI split */
.wl-chart-panel.wl-chart-expanded .wl-chart-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wl-chart-panel.wl-chart-expanded #chartContainer {
  flex: 1 1 auto;
  min-height: 0;
}
.wl-chart-panel.wl-chart-expanded.has-rsi #chartContainer {
  flex: 1 1 70%;
  min-height: 0;
}
.wl-chart-panel.wl-chart-expanded .wl-rsi-container {
  flex: 0 0 28%;
  height: auto;
  min-height: 0;
}

/* Prevent body scroll while expanded */
body.wl-chart-modal-open {
  overflow: hidden;
}

.wl-chart-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.wl-chart-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 42px;
}

/* Left: logo + ticker + company name */
.wl-chart-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wl-chart-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--surface2, var(--bg));
  flex-shrink: 0;
}

.wl-chart-logo[src=""],
.wl-chart-logo.wl-logo-hidden {
  display: none;
}

.wl-chart-id-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.wl-chart-ticker {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.wl-chart-name {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Right: prices */
.wl-chart-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wl-chart-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.wl-chart-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  border-radius: 0;
  background: transparent;
  width: fit-content;
  font-variant-numeric: tabular-nums lining-nums;
}

.wl-chart-change.up {
  background: transparent;
  color: var(--up);
}

.wl-chart-change.down {
  background: transparent;
  color: var(--down);
}

/* Price row */
.wl-chart-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Extended hours row — aligned under price + change */
.wl-chart-ext-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wl-chart-ext-price {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.wl-chart-ext-change {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-variant-numeric: tabular-nums lining-nums;
  width: fit-content;
}

.wl-chart-ext-change.up {
  background: transparent;
  color: var(--up);
}

.wl-chart-ext-change.down {
  background: transparent;
  color: var(--down);
}

.wl-chart-ext-label {
  display: none; /* label no longer needed with aligned layout */
}

.wl-chart-controls {
  display: flex;
  gap: 6px;
  row-gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  /* Constrain width so the flex break forces 2 rows instead of stretching */
  max-width: 460px;
}

/* Forced row break: 100% width zero-height element that pushes following
   flex items onto a new row regardless of available width. */
.wl-controls-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

/* Timeframe dropdown */
.wl-timeframe-select {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  transition: all 0.2s;
}
.wl-timeframe-select:hover {
  border-color: var(--text-muted);
}
.wl-timeframe-select:focus {
  border-color: var(--accent);
}
.wl-timeframe-select option {
  background: var(--surface);
  color: var(--text);
}

/* Divider between timeframe and indicators */
.wl-controls-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}

.wl-sma-toggle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0;
}

.wl-sma-toggle:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.wl-sma-toggle:has(input:checked) {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.wl-sma-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ============================================================
   Indicators dropdown (replaces inline SMA/BB/VWAP/Earnings toggles)
   ============================================================ */
.wl-indicators-dd {
  position: relative;
  display: inline-block;
}
.wl-indicators-trigger {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px 5px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.wl-indicators-trigger:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.wl-indicators-trigger[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--surface2, rgba(255,255,255,0.04));
}
.wl-indicators-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.wl-indicators-trigger[aria-expanded="true"] .wl-indicators-chevron {
  transform: rotate(180deg);
}
.wl-indicators-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg, #131316);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wl-indicators-panel[hidden] { display: none; }
.wl-indicators-item {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background 0.15s ease, color 0.15s ease;
}
.wl-indicators-item:hover {
  background: var(--surface2, rgba(255,255,255,0.05));
  color: var(--text);
}
.wl-indicators-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent, #4aa3ff);
  cursor: pointer;
  flex-shrink: 0;
}
.wl-indicators-item:has(input:checked) {
  color: var(--text);
}
.wl-indicators-sep {
  height: 1px;
  background: var(--border, #2a2a30);
  margin: 4px 6px;
}

/* Structural Leg Profiler settings sub-row inside the indicators panel.
   Indents under the SLP toggle and stacks the four fields vertically so
   the panel doesn't grow too wide. Uses a slightly recessed background
   so it visually groups the related settings. */
.wl-indicators-slp-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px 8px 30px;
  margin: 0 0 4px 0;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 6px;
}
.wl-indicators-slp-settings[hidden] { display: none; }
.wl-slp-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}
.wl-slp-field span { white-space: nowrap; }
.wl-slp-field select {
  background: var(--surface2, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, #2a2a30);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  min-width: 80px;
  font-family: 'Inter', sans-serif;
}
.wl-slp-field-check {
  cursor: pointer;
  user-select: none;
  justify-content: flex-start;
}
.wl-slp-field-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent, #4aa3ff);
}

/* SLP overlay canvas: positioned absolutely over the chart container.
   Inline styles in lib/structural-leg-renderer.js take precedence; this
   keeps a sane fallback if the JS file is delayed. */
.mi-slp-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

#chartContainer {
  width: 100%;
  height: 445px;
  position: relative; /* see SLP overlay note in .wl-chart-section #chartContainer */
}

.wl-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 360px;
  color: var(--text-faint);
  font-size: 12px;
  gap: 10px;
}

/* ─── Modals ─── */
.wl-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: wl-overlay-in 0.15s ease;
}

@keyframes wl-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wl-modal {
  background: rgba(28,28,32,0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: wl-modal-in 0.2s cubic-bezier(0.16,1,0.3,1);
}

@keyframes wl-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wl-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.wl-modal-header h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
}

.wl-modal-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.wl-modal-close:hover {
  color: var(--text);
  background: var(--surface);
}

.wl-modal-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wl-modal-input::placeholder { color: var(--text-faint); }

.wl-modal-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,152,163,0.15);
}

.wl-modal-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.2s;
  letter-spacing: 0.02em;
}

.wl-modal-submit:hover { opacity: 0.88; }
.wl-modal-submit:disabled { opacity: 0.35; cursor: not-allowed; }

.wl-modal-delete {
  width: 100%;
  background: transparent;
  color: var(--down);
  border: 1px solid rgba(194,74,74,0.3);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}

.wl-modal-delete:hover { background: var(--down-bg); }

/* ─── No-lists state ─── */
.wl-no-lists {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 12px;
}

.wl-no-lists-icon {
  font-size: 36px;
  opacity: 0.4;
  color: var(--accent);
}

.wl-no-lists h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wl-no-lists p {
  font-size: 13px;
  color: var(--text-faint);
  max-width: 300px;
}

.wl-no-lists-create-btn {
  margin-top: 8px;
  padding: 10px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.wl-no-lists-create-btn:hover { opacity: 0.88; }

/* ─── Price flash ─── */
@keyframes wl-price-flash {
  0% { background: rgba(79,152,163,0.2); }
  100% { background: transparent; }
}

.wl-price-flash {
  animation: wl-price-flash 0.8s ease;
}

/* ─── Toast ─── */
.wl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(19,19,22,0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text);
  z-index: 2000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: wl-toast-in 0.2s cubic-bezier(0.16,1,0.3,1);
  max-width: 320px;
}

.wl-toast.success {
  border-color: rgba(14,179,91,0.3);
  color: var(--up);
}

.wl-toast.error {
  border-color: rgba(194,74,74,0.3);
  color: var(--down);
}

@keyframes wl-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Auth gate (redesigned) ─── */
.db-auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
  padding: 48px 20px;
}

.db-auth-card {
  background: var(--surface, #1c1c20);
  border: 1px solid var(--border, #2a2a30);
  border-radius: var(--radius-md, 10px);
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px rgba(0,0,0,0.25);
}

.db-auth-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(79,152,163,0.10);
  border: 1px solid rgba(79,152,163,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.db-auth-gate-icon {
  width: 28px;
  height: 28px;
  color: var(--accent, #4F98A3);
  opacity: 1;
}

.db-auth-card h2 {
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text, #e0e0e0);
  margin: 0 0 8px;
  line-height: 1.15;
}

.db-auth-card > p {
  font-size: 14px;
  color: var(--text-muted, #b0bec5);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.db-auth-features {
  list-style: none;
  padding: 20px 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--border, #2a2a30);
  border-bottom: 1px solid var(--border, #2a2a30);
  text-align: left;
  display: grid;
  gap: 10px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.db-auth-features li {
  font-size: 13px;
  color: var(--text, #e0e0e0);
  display: flex;
  align-items: center;
  gap: 10px;
}
.db-auth-bullet {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent, #4F98A3);
  flex-shrink: 0;
}

.db-auth-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.db-auth-primary {
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent, #4F98A3);
  padding: 11px 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: filter 160ms ease, transform 160ms ease;
  display: inline-flex;
  align-items: center;
}
.db-auth-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.db-auth-secondary {
  color: var(--text-muted, #b0bec5);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  border-radius: 8px;
  transition: color 160ms ease;
}
.db-auth-secondary:hover { color: var(--text, #e0e0e0); }

/* ─── Scrollbar ─── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   Bulletin Tab — AI Market News Summary
   ============================================================ */
.db-bulletin-container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 16px 0;
}

.db-bulletin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.db-bulletin-titlewrap { display: flex; flex-direction: column; gap: 2px; }

.db-bulletin-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0;
}

.db-bulletin-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  margin: 0;
  opacity: 0.85;
}

.db-bulletin-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.db-bulletin-date {
  font-size: 11px;
  color: var(--text-faint);
}
.bl-timestamp {
  color: var(--text-faint);
  opacity: 0.7;
}

.db-bulletin-refresh {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-faint);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.db-bulletin-refresh:hover {
  color: var(--accent);
  border-color: rgba(79,152,163,0.3);
  background: var(--accent-bg);
}

.db-bulletin-refresh.spinning svg {
  animation: db-spin 0.8s linear infinite;
}

@keyframes db-refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.db-bulletin-split {
  display: flex;
  gap: 16px;
  align-items: stretch;
  max-height: calc(100vh - 200px);
}

.db-bulletin-content {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px 28px;
  line-height: 1.7;
  overflow-y: auto;
}

.db-bulletin-news-panel {
  width: 34%;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.db-bulletin-news-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border2);
  position: sticky;
  top: 0;
  background: rgba(19,19,22,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}

.db-bulletin-news-list {
  padding: 4px 0;
  flex: 1;
  overflow-y: auto;
}

.db-hl-card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.db-hl-card:last-child { border-bottom: none; }
.db-hl-card:hover { background: rgba(79,152,163,0.04); }

.db-hl-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}

.db-hl-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-hl-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #e0dfdd;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.db-hl-card:hover .db-hl-title { color: #4F98A3; }

.db-hl-meta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  color: #5A5957;
}

.db-bulletin-news-list::-webkit-scrollbar { width: 2px; }
.db-bulletin-news-list::-webkit-scrollbar-track { background: transparent; }
.db-bulletin-news-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

@media (max-width: 900px) {
  .db-bulletin-split { flex-direction: column; max-height: none; }
  .db-bulletin-news-panel { width: 100%; max-height: 400px; }
}

/* --- AI Summary Content Styles (fallback for non-card rendering) --- */
.db-bulletin-content h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 28px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border2);
}

.db-bulletin-content h3:first-child { margin-top: 0; }

.db-bulletin-content p {
  color: rgba(220,219,217,0.85);
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.75;
}

.db-bulletin-content ul {
  margin: 10px 0;
  padding-left: 18px;
  list-style-type: none;
}

.db-bulletin-content li {
  color: rgba(220,219,217,0.85);
  margin: 8px 0;
  font-size: 13.5px;
  line-height: 1.7;
  position: relative;
  padding-left: 14px;
}

.db-bulletin-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

.db-bulletin-content strong {
  color: var(--text);
  font-weight: 600;
}

.db-bulletin-content em {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Date strip lifted from content body --- */
.bl-date-strip-wrap {
  margin: -4px 0 18px 0;
}
.bl-date-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #d6e3e7;
  background: linear-gradient(90deg, rgba(79,152,163,0.16), rgba(79,152,163,0.04) 80%);
  border: 1px solid rgba(79,152,163,0.22);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.bl-date-strip::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,152,163,0.18);
}

/* --- Section Cards (enhanced by inline script) --- */
.bl-section-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}

.bl-section-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0.7;
}

.bl-section-card:last-child { margin-bottom: 0; }

.bl-section-card:hover {
  border-color: rgba(79,152,163,0.3);
}

.bl-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 11px 22px;
  border-bottom: 1px solid var(--border2);
  background: rgba(79,152,163,0.04);
}

.bl-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(79,152,163,0.1);
  color: var(--accent);
  flex-shrink: 0;
}

.bl-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.bl-section-body {
  padding: 14px 22px 16px 22px;
}

.bl-section-body ul { margin: 0; padding-left: 18px; list-style: none; }
.bl-section-body li {
  position: relative;
  margin: 8px 0;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(220,219,217,0.86);
}
.bl-section-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}
.bl-section-body p { margin: 4px 0; font-size: 13px; line-height: 1.65; }
.bl-section-body strong { color: var(--text); font-weight: 600; }

/* Lede bullet — the first item of each section gets brighter weight so the
   eye lands on the headline of each section first. */
.bl-section-body li.bl-lede {
  font-weight: 500;
  color: rgba(232,231,228,0.96);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border2);
}
.bl-section-body li.bl-lede::before { opacity: 0.95; transform: scale(1.15); }

/* Section-specific accent colours — left rail, header, icon, bullets */
.bl-section-market-snapshot::before { background: var(--up); }
.bl-section-market-snapshot .bl-section-icon { background: rgba(14,179,91,0.12); color: var(--up); }
.bl-section-market-snapshot .bl-section-header { background: rgba(14,179,91,0.03); }
.bl-section-market-snapshot .bl-section-title { color: var(--up); }
.bl-section-market-snapshot li::before { background: var(--up); }

.bl-section-geopolitical-impact::before,
.bl-section-geopolitical-macro-drivers::before { background: var(--down); }
.bl-section-geopolitical-impact .bl-section-icon,
.bl-section-geopolitical-macro-drivers .bl-section-icon { background: rgba(194,74,74,0.12); color: var(--down); }
.bl-section-geopolitical-impact .bl-section-header,
.bl-section-geopolitical-macro-drivers .bl-section-header { background: rgba(194,74,74,0.03); }
.bl-section-geopolitical-impact .bl-section-title,
.bl-section-geopolitical-macro-drivers .bl-section-title { color: var(--down); }
.bl-section-geopolitical-impact li::before,
.bl-section-geopolitical-macro-drivers li::before { background: var(--down); }

.bl-section-current-sentiment::before,
.bl-section-sentiment-positioning::before { background: #d29922; }
.bl-section-current-sentiment .bl-section-icon,
.bl-section-sentiment-positioning .bl-section-icon { background: rgba(210,153,34,0.12); color: #d29922; }
.bl-section-current-sentiment .bl-section-header,
.bl-section-sentiment-positioning .bl-section-header { background: rgba(210,153,34,0.03); }
.bl-section-current-sentiment .bl-section-title,
.bl-section-sentiment-positioning .bl-section-title { color: #d29922; }
.bl-section-current-sentiment li::before,
.bl-section-sentiment-positioning li::before { background: #d29922; }

.bl-section-economic-calendar::before,
.bl-section-economic-calendar-week-ahead::before { background: #8a7ddc; }
.bl-section-economic-calendar .bl-section-icon,
.bl-section-economic-calendar-week-ahead .bl-section-icon { background: rgba(138,125,220,0.14); color: #a99aff; }
.bl-section-economic-calendar .bl-section-header,
.bl-section-economic-calendar-week-ahead .bl-section-header { background: rgba(138,125,220,0.04); }
.bl-section-economic-calendar .bl-section-title,
.bl-section-economic-calendar-week-ahead .bl-section-title { color: #a99aff; }
.bl-section-economic-calendar li::before,
.bl-section-economic-calendar-week-ahead li::before { background: #a99aff; }

.bl-section-key-outlook::before { background: var(--accent); }
.bl-section-key-outlook .bl-section-icon { background: rgba(79,152,163,0.12); color: var(--accent); }
.bl-section-key-outlook .bl-section-header { background: rgba(79,152,163,0.04); }
.bl-section-key-outlook .bl-section-title { color: var(--accent); }
.bl-section-key-outlook li::before { background: var(--accent); }

.db-bulletin-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-faint);
}

.db-bulletin-loading p {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-faint);
}

.db-bulletin-stale {
  background: rgba(210,153,34,0.08);
  border: 1px solid rgba(210,153,34,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #d29922;
}

.db-bulletin-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-faint);
}

.db-bulletin-error p { font-size: 13px; }

/* ============================================================
   Trending Tab
   ============================================================ */
.db-trending-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4px;
}

.db-trending-section { margin-bottom: 32px; }

.db-trending-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.db-trending-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0;
}

.db-trending-refresh {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-faint);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.db-trending-refresh:hover {
  color: var(--accent);
  border-color: rgba(79,152,163,0.3);
  background: var(--accent-bg);
}

.db-trending-refresh.spinning svg {
  animation: db-spin 0.8s linear infinite;
}

/* Refresh button colour matches active source during spin */
.db-trending-refresh.spinning {
  border-color: rgba(249,115,22,0.4);
  color: #f97316;
}
.db-trending-refresh.spinning.src-reddit {
  border-color: rgba(255,69,0,0.4);
  color: #ff4500;
}
.db-trending-refresh.spinning.src-stocktwits {
  border-color: rgba(29,161,242,0.4);
  color: #1da1f2;
}

.db-trending-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Admin-only controls — hidden by default; shown when checkAdmin()
   marks the body as admin. Used for the AI Feed refresh icon so only
   admin users can force a re-fetch of the WSB daily scan. */
.db-admin-only { display: none !important; }
body[data-admin="1"] .db-admin-only { display: inline-flex !important; }
/* Iter 9o: when the Trending→AI Social feature flag is on, non-admins ALSO
   see the AI Social sub-tab button. Scoped tightly to the aisocial button
   only — db-admin-only is reused for other admin-only controls (e.g. AI Feed
   refresh, opinion refresh) which must stay hidden for non-admins. */
body[data-trending-ai-social="1"] .db-subtab-btn.db-admin-only[data-subtab="aisocial"] { display: inline-flex !important; }

.db-trending-source-toggle {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.db-toggle-option {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 9px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.db-toggle-option:hover {
  color: var(--text-muted);
}

.db-toggle-option.active {
  color: #fff;
}

/* Distinct colour per data source */
.db-toggle-option.active[data-source="apewisdom"] {
  background: #f97316; /* orange — ApeWisdom */
}
.db-toggle-option.active[data-source="reddit"] {
  background: #ff4500; /* Reddit orange-red */
}
.db-toggle-option.active[data-source="fallback"] {
  background: #1da1f2; /* StockTwits blue */
}

.db-trending-subtitle {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0 0 14px 0;
}

.db-trending-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.db-trending-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.db-trending-table colgroup .col-ticker { width: 14%; }
.db-trending-table colgroup .col-price  { width: 10%; }
.db-trending-table colgroup .col-cap    { width: 10%; }
.db-trending-table colgroup .col-day    { width: 9%; }
.db-trending-table colgroup .col-vol    { width: 13%; }
.db-trending-table colgroup .col-comm   { width: 44%; }

.db-trending-table thead th {
  background: rgba(0,0,0,0.2);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.db-trending-table tbody tr {
  border-bottom: 1px solid var(--border2);
  transition: background 0.15s;
}

.db-trending-table tbody tr:last-child { border-bottom: none; }
.db-trending-table tbody tr:hover { background: var(--surface-hover); }

.db-trending-table tbody td {
  padding: 10px 14px;
  vertical-align: top;
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-trending-table tbody td:first-child {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Commentary cell — default: show full text on desktop */
.db-trending-table tbody td:nth-child(6) {
  max-width: 320px;
}

/* Commentary modal overlay */
.trending-comm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: wl-overlay-in 0.15s ease;
}

.trending-comm-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 480px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: wl-modal-in 0.2s cubic-bezier(0.16,1,0.3,1);
}

.trending-comm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.trending-comm-modal-header h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.03em;
  margin: 0;
}

.trending-comm-modal-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.trending-comm-modal-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.trending-comm-modal-body {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.85;
}

.db-trending-disclaimer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */
@media (max-width: 767px) {
  .db-header {
    height: auto;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .db-main {
    padding: 12px 10px 40px;
  }

  /* Tab bar: horizontal scroll on mobile */
  .db-tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    margin-bottom: 12px;
  }
  .db-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .db-tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .db-header-right {
    flex-wrap: wrap;
    gap: 6px;
  }

  .db-user-email { display: none; }
  .db-datetime { display: none; }
  .db-sub-header { display: none; }

  .wl-chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #chartContainer { height: 300px !important; }
  .wl-chart-section #chartContainer { height: 300px !important; }

  .wl-tabs-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .wl-create-btn { margin-left: 0; }

  .wl-table thead { display: none; }

  .wl-table-wrap {
    border: none;
    background: transparent;
    max-height: none;
    overflow-y: visible;
  }

  .wl-table { display: block; }

  .wl-table tbody {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .wl-table tbody tr {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 10px;
    border: 1px solid var(--border2);
    gap: 10px;
    transition: background 0.15s;
  }

  .wl-table tbody tr.selected {
    background: var(--surface-hover);
  }

  .wl-table tbody tr:last-child td { border-bottom: none; }

  .wl-table td {
    display: block;
    padding: 0;
    border-bottom: none;
    border-top: none;
  }

  .wl-table td:nth-child(1) { flex: 1; min-width: 0; }

  .wl-ticker-cell .ticker-name { max-width: 160px; }

  .wl-table td:nth-child(2) { text-align: right; }
  .wl-price { font-size: 13px; }

  .wl-table td:nth-child(3) { text-align: right; min-width: 70px; }

  .wl-action-remove { display: none !important; }
  .wl-action-dots { display: inline-flex !important; }
  .wl-action-dots:hover { color: var(--text); background: var(--surface); }

  .wl-add-row {
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid var(--border2);
    background: var(--surface);
  }

  .wl-chart-ticker { font-size: 14px; }
  .wl-chart-price { font-size: 14px; }
  .wl-chart-logo { width: 22px; height: 22px; }
  .wl-chart-ext-price,
  .wl-chart-ext-change { display: none; } /* hide ext on very small screens */

  .wl-modal { padding: 20px; }

  .wl-toast { bottom: 16px; right: 16px; left: 16px; }

  .wl-chart-controls { gap: 4px; row-gap: 4px; max-width: 100%; flex-wrap: wrap; }
  .wl-sma-toggle { font-size: 9px; padding: 4px 8px; }

  /* Trending table — mobile */
  /* Hide volume (5th) and commentary (6th) headers */
  .db-trending-table thead th:nth-child(5),
  .db-trending-table thead th:nth-child(6) {
    display: none;
  }

  /* Hide volume data cells */
  .db-trending-table tbody td:nth-child(5) {
    display: none;
  }

  /* Table uses single CSS grid so ALL rows share the same column tracks */
  .db-trending-table {
    display: grid;
    grid-template-columns: 1fr minmax(60px, auto) minmax(55px, auto) minmax(58px, auto);
  }

  .db-trending-table thead,
  .db-trending-table tbody,
  .db-trending-table thead tr,
  .db-trending-table tbody tr { display: contents; }

  .db-trending-table thead th,
  .db-trending-table tbody td {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Header bottom border spans full row */
  .db-trending-table thead th:first-child {
    border-bottom: 1px solid var(--border);
  }
  .db-trending-table thead th:nth-child(2),
  .db-trending-table thead th:nth-child(3),
  .db-trending-table thead th:nth-child(4) {
    text-align: right;
    border-bottom: 1px solid var(--border);
  }

  /* Data cells: right-align numeric columns */
  .db-trending-table tbody td:nth-child(2),
  .db-trending-table tbody td:nth-child(3),
  .db-trending-table tbody td:nth-child(4) {
    text-align: right;
    white-space: nowrap;
  }

  /* Row separator: apply bottom border to last visible data cell in each row */
  .db-trending-table tbody td:nth-child(6) + td,
  .db-trending-table tbody td:nth-child(4) {
    /* border handled by commentary cell spanning full width */
  }

  /* Commentary spans full width below the data row — truncated on mobile only */
  .db-trending-table tbody td:nth-child(6) {
    grid-column: 1 / -1;
    padding: 0 10px 10px;
    font-size: 11px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    max-width: 100%;
    transition: color 0.15s;
    border-bottom: 1px solid var(--border2);
  }

  .db-trending-table tbody td:nth-child(6):hover {
    color: var(--accent);
  }
}

@media (max-width: 480px) {
  .db-logo-subtitle { display: none; }
  .wl-ticker-cell .ticker-name { max-width: 120px; }
}

@media (max-width: 375px) {
  .idx-item { flex: 1 1 calc(50% - 4px); }
}

/* ============================================================
   Donate Modal
   ============================================================ */

/* Admin Button (admin only) */
.db-admin-btn {
  background: #4F98A3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
  text-decoration: none;
  position: relative;
}
.db-admin-btn:hover { background: #3d7a83; }
.db-admin-btn svg { stroke: #fff; }

/* Red pulsing dot on admin button when feeds have errors */
.admin-error-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: #C24A4A;
  border-radius: 50%;
  border: 1.5px solid #131316;
  animation: adminDotPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes adminDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Overlay */
.donate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.donate-modal {
  background: #1c1c20;
  border: 1px solid #2a2a30;
  border-radius: 12px;
  width: 420px;
  max-width: 92vw;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.donate-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #2a2a30;
}
.donate-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #e0e0e0;
}
.donate-modal-close {
  background: none;
  border: none;
  color: #6b6b70;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.donate-modal-close:hover { color: #e0e0e0; }
.donate-modal-body {
  padding: 22px;
}
.donate-desc {
  color: #8e8e93;
  font-size: 13px;
  margin: 0 0 18px 0;
  line-height: 1.5;
}

/* Amount selection */
.donate-amount-row {
  margin-bottom: 20px;
}
.donate-amount-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8e8e93;
  margin-bottom: 8px;
}
.donate-amount-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.donate-amt-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid #2a2a30;
  background: #131316;
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.donate-amt-btn:hover {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.08);
}
.donate-amt-btn.active {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
}
.donate-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.donate-currency {
  color: #6b6b70;
  font-size: 15px;
  font-weight: 600;
}
.donate-custom-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2a2a30;
  background: #131316;
  color: #e0e0e0;
  font-size: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  outline: none;
}
.donate-custom-input:focus {
  border-color: #2563EB;
}
.donate-custom-input::placeholder { color: #6b6b70; }

/* Apple/Google Pay */
#donatePaymentRequestBtn {
  margin-bottom: 12px;
  min-height: 44px;
}

/* Divider */
.donate-or {
  text-align: center;
  margin-bottom: 14px;
  position: relative;
}
.donate-or::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #2a2a30;
}
.donate-or span {
  position: relative;
  background: #1c1c20;
  padding: 0 12px;
  font-size: 11px;
  color: #6b6b70;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card element */
.donate-card-section {
  margin-bottom: 14px;
}
#donateCardElement {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #2a2a30;
  background: #131316;
  margin-bottom: 12px;
}
#donateCardElement.StripeElement--focus {
  border-color: #2563EB;
}
.donate-pay-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: #2563EB;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.donate-pay-btn:hover { background: #1d4ed8; }
.donate-pay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Status */
.donate-status {
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
  min-height: 18px;
}
.donate-success { color: #0EB35B; }
.donate-error { color: #C24A4A; }

/* ============================================================
   Watchlist News Ticker — desktop only
   ============================================================ */
.wl-news-ticker {
  display: none;
  align-items: center;
  height: 34px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Hide entirely on mobile */
@media (max-width: 768px) {
  .wl-news-ticker { display: none !important; }
}

.wl-news-ticker-label {
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  border-right: 1px solid var(--border);
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(79,152,163,0.07);
  white-space: nowrap;
}

.wl-news-ticker-mask {
  flex: 1;
  overflow: hidden;
  height: 100%;
  position: relative;
}

/* Fade edges */
.wl-news-ticker-mask::before,
.wl-news-ticker-mask::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}
.wl-news-ticker-mask::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.wl-news-ticker-mask::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.wl-news-ticker-track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  animation: wlTickerScroll 35.72s linear infinite;
  gap: 0;
  width: max-content;
}

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

@keyframes wlTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Track is doubled for seamless loop */
}

.wl-news-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
  flex-shrink: 0;
}

.wl-news-item:hover {
  color: #ffffff;
}

.wl-news-item-ticker {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-bg);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.wl-news-item-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.wl-news-item-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
  display: block;
}

.wl-news-item-title {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-news-item-pub {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.wl-news-item-sep {
  color: var(--border);
  font-size: 14px;
  flex-shrink: 0;
  user-select: none;
}

/* Loading state */
.wl-news-ticker-track.loading {
  animation: none;
  justify-content: center;
  width: 100%;
  color: var(--text-faint);
  font-size: 11px;
}

/* ============================================================
   Feedback / Issue Report Modal
   ============================================================ */
.fb-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  z-index: 9999;
  animation: fb-overlay-in 0.15s;
}
@keyframes fb-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fb-modal {
  background: rgba(28,28,32,0.97);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 520px;
  max-width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: fb-modal-in 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes fb-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.fb-modal-header h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.fb-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.fb-modal-close:hover { color: var(--text); }
.fb-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fb-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fb-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fb-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.fb-readonly {
  font-size: 13px;
  color: var(--text);
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: all;
}
.fb-select,
.fb-input,
.fb-textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fb-select:focus,
.fb-input:focus,
.fb-textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,152,163,0.15);
}
.fb-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23797876' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.fb-select option {
  background: #1c1c20;
  color: var(--text);
}
.fb-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.fb-word-count {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.fb-word-count.warning { color: #F59E0B; }
.fb-word-count.limit   { color: var(--down); }
.fb-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
}
.fb-btn-cancel {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fb-btn-cancel:hover { background: var(--surface-hover); color: var(--text); }
.fb-btn-submit {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 24px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
  letter-spacing: 0.02em;
}
.fb-btn-submit:hover { opacity: 0.88; }
.fb-btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.fb-success-msg {
  text-align: center;
  padding: 40px 24px;
  color: var(--up);
  font-weight: 600;
  font-size: 15px;
}
@media (max-width: 600px) {
  .fb-field-row { grid-template-columns: 1fr; }
  .fb-modal { width: 100%; max-width: 100vw; border-radius: 0; max-height: 100vh; }
}

/* ============================================================
   Stock News Sidebar — inline within insight column
   ============================================================ */
.wl-news-sidebar {
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
}
.wl-insight-col.open .wl-news-sidebar {
  display: flex;
}

.wl-news-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.wl-news-sidebar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl-news-sidebar-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--bg);
}
.wl-news-sidebar-logo.hidden { display: none; }

.wl-news-sidebar-ticker {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.03em;
}

.wl-news-sidebar-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 2px;
}

.wl-news-sidebar-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.wl-news-sidebar-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.wl-news-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.wl-news-sidebar-body::-webkit-scrollbar { width: 3px; }
.wl-news-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.wl-news-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.wl-news-sidebar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.wl-news-sidebar-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-faint);
  font-size: 13px;
}

.wl-ns-article {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--border2);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.wl-ns-article:last-child {
  border-bottom: none;
}
.wl-ns-article:hover {
  color: #fff;
}
.wl-ns-article:hover .wl-ns-title {
  color: #fff;
}

.wl-ns-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.wl-ns-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
}

.wl-ns-publisher {
  font-weight: 500;
  color: var(--text-muted);
}

.wl-ns-time {
  color: var(--text-faint);
}

/* Section label */
.wl-ns-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 0 8px;
  border-top: 1px solid var(--border2);
  margin-top: 4px;
}
.wl-ns-analyst .wl-ns-section-label {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Analyst snapshot */
.wl-ns-analyst {
  padding-bottom: 8px;
}

.wl-ns-analyst-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.wl-ns-rec-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.wl-ns-rec-badge.bullish  { background: var(--up-bg); color: var(--up); }
.wl-ns-rec-badge.bearish  { background: var(--down-bg); color: var(--down); }
.wl-ns-rec-badge.neutral  { background: rgba(255,193,7,0.12); color: #FFC107; }

.wl-ns-analyst-count {
  font-size: 11px;
  color: var(--text-faint);
}

/* Rating bar */
.wl-ns-rating-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 8px;
}
.wl-ns-bar-seg {
  border-radius: 2px;
  min-width: 4px;
}
.wl-ns-bar-seg.strong-buy { background: #0EB35B; }
.wl-ns-bar-seg.buy        { background: #4CAF50; }
.wl-ns-bar-seg.hold        { background: #FFC107; }
.wl-ns-bar-seg.sell        { background: #FF7043; }
.wl-ns-bar-seg.strong-sell { background: #C24A4A; }

/* Rating legend */
.wl-ns-rating-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.wl-ns-rating-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.wl-ns-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.wl-ns-dot.strong-buy { background: #0EB35B; }
.wl-ns-dot.buy        { background: #4CAF50; }
.wl-ns-dot.hold        { background: #FFC107; }
.wl-ns-dot.sell        { background: #FF7043; }
.wl-ns-dot.strong-sell { background: #C24A4A; }

/* Price targets */
.wl-ns-targets {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.wl-ns-target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.wl-ns-target-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wl-ns-target-upside {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.wl-ns-target-upside.up   { color: var(--up); }
.wl-ns-target-upside.down { color: var(--down); }

.wl-ns-target-range {
  display: flex;
  justify-content: space-between;
}
.wl-ns-target-val {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
}
.wl-ns-target-val.mean {
  color: var(--accent);
  font-size: 14px;
}
.wl-ns-target-key {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
}

/* Upgrades/Downgrades */
.wl-ns-upgrades {
  margin-bottom: 8px;
}
.wl-ns-upgrade-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.wl-ns-upgrade-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border2);
  font-size: 11px;
}
.wl-ns-upgrade-row:last-child { border-bottom: none; }
.wl-ns-upgrade-firm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
}
.wl-ns-upgrade-action {
  font-weight: 600;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.wl-ns-upgrade-action.action-up   { color: var(--up); background: var(--up-bg); }
.wl-ns-upgrade-action.action-down { color: var(--down); background: var(--down-bg); }
.wl-ns-upgrade-grade {
  color: var(--text-muted);
  flex-shrink: 0;
}
.wl-ns-upgrade-date {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* Drag handle for watchlist reorder */
.wl-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-faint);
  padding: 0;
  flex-shrink: 0;
  touch-action: none;
  transition: color 0.15s;
  opacity: 0.5;
}
.wl-drag-handle:hover {
  color: var(--text-muted);
  opacity: 1;
}
.wl-drag-handle:active {
  cursor: grabbing;
}

/* Drag states on rows */
.wl-table tbody tr.wl-dragging {
  opacity: 0.4;
  background: var(--surface-hover);
}
.wl-table tbody tr.wl-drag-over {
  box-shadow: 0 -2px 0 0 var(--accent) inset;
}

@media (max-width: 768px) {
  .wl-drag-handle {
    padding: 8px 8px 8px 0;
    min-width: 28px;
    min-height: 28px;
    opacity: 0.7;
  }
}

/* iPad / tablet touch targets */
@media (pointer: coarse) {
  .wl-drag-handle {
    padding: 8px 10px 8px 2px;
    min-width: 32px;
    min-height: 32px;
    opacity: 0.7;
  }
  .wl-drag-handle svg {
    width: 16px;
    height: 16px;
  }
  /* Show dots menu on touch devices (iPad) for move up/down access */
  .wl-action-dots { display: inline-flex !important; }
  .wl-action-remove { display: none !important; }
}

/* ============================================================
   MI Rank Tab
   ============================================================ */
.mir-container {
  padding: 16px 0;
}

/* Summary distribution bar */
.mir-summary-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mir-summary-box {
  flex: 1;
  min-width: 100px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.mir-summary-box:hover {
  transform: scale(1.03);
}

.mir-summary-box.mir-summary-active {
  box-shadow: 0 0 12px rgba(79,152,163,0.3);
  transform: scale(1.04);
  border-width: 2px;
}

.mir-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.mir-summary-count {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.mir-rank-1 { border-color: #22c55e40; }
.mir-rank-1 .mir-summary-label { color: #22c55e; }
.mir-rank-1 .mir-summary-count { color: #22c55e; }

.mir-rank-2 { border-color: #86efac40; }
.mir-rank-2 .mir-summary-label { color: #86efac; }
.mir-rank-2 .mir-summary-count { color: #86efac; }

.mir-rank-3 { border-color: #9ca3af40; }
.mir-rank-3 .mir-summary-label { color: #9ca3af; }
.mir-rank-3 .mir-summary-count { color: #9ca3af; }

.mir-rank-4 { border-color: #f9731640; }
.mir-rank-4 .mir-summary-label { color: #f97316; }
.mir-rank-4 .mir-summary-count { color: #f97316; }

.mir-rank-5 { border-color: #C24A4A40; }
.mir-rank-5 .mir-summary-label { color: #C24A4A; }
.mir-rank-5 .mir-summary-count { color: #C24A4A; }

/* Filter controls */
.mir-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mir-filter-select {
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  min-width: 140px;
}

.mir-filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.mir-search {
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  flex: 1;
  min-width: 160px;
}

.mir-search:focus {
  outline: none;
  border-color: var(--accent);
}

.mir-search::placeholder {
  color: var(--text-faint);
}

.mir-clear-summary-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: rgba(194,74,74,0.15);
  border: 1px solid rgba(194,74,74,0.3);
  border-radius: var(--radius-sm);
  color: #C24A4A;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.mir-clear-summary-filter:hover {
  background: rgba(194,74,74,0.25);
}

.mir-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: rgba(79,152,163,0.1);
  border: 1px solid rgba(79,152,163,0.3);
  border-radius: var(--radius-sm);
  color: #4F98A3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.mir-info-btn:hover {
  background: rgba(79,152,163,0.2);
}

/* Loading state */
.mir-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.mir-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mir-spin 0.7s linear infinite;
}

@keyframes mir-spin {
  to { transform: rotate(360deg); }
}

/* Table */
.mir-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  max-height: 70vh;
  overflow-y: auto;
}

.mir-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.mir-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.mir-table thead th {
  background: #18181c;
  box-shadow: 0 1px 0 var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 10px;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  border-bottom: 1px solid var(--border);
}

.mir-th-num  { width: 36px; text-align: center !important; }
.mir-th-sym  { width: 80px; }
.mir-th-rank { width: 90px; }
.mir-th-change { width: 62px; text-align: center !important; }
.mir-th-comp { width: 78px; text-align: right !important; }
.mir-th-pct  { width: 52px; text-align: right !important; }
.mir-th-factor { width: 90px; }
.mir-th-sector { width: 110px; }

.mir-sortable {
  cursor: pointer;
  position: relative;
}

.mir-sortable:hover {
  color: var(--text);
}

.mir-sortable::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--text-faint);
  opacity: 0.3;
}

.mir-sort-active::after {
  opacity: 1;
  border-top-color: var(--accent);
}

.mir-sort-active.mir-sort-asc::after {
  border-top: none;
  border-bottom: 4px solid var(--accent);
}

.mir-table tbody tr {
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: background 0.15s;
}

.mir-table tbody tr:hover {
  background: var(--surface-hover);
}

.mir-table tbody td {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
}

.mir-table tbody td:first-child {
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Symbol cell */
.mir-sym-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mir-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mir-sym {
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--accent);
}

/* Rank change cell */
.mir-change {
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.mir-change-up   { color: #22c55e; font-weight: 700; font-size: 15px; }
.mir-change-down { color: #C24A4A; font-weight: 700; font-size: 15px; }
.mir-change-flat { color: #9ca3af; font-size: 14px; }
.mir-change-new  { }

.mir-new-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9ca3af;
  background: rgba(156,163,175,0.15);
  border: 1px solid rgba(156,163,175,0.3);
}

/* Composite and percentile */
.mir-comp {
  text-align: right;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.mir-pctl {
  text-align: right;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
}

/* Factor score bar */
.mir-factor-cell {
  position: relative;
  min-width: 80px;
}

.mir-factor-bar-wrap {
  position: relative;
  height: 20px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}

.mir-factor-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.3s ease;
}

.mir-factor-bar.bar-positive {
  background: rgba(14,179,91,0.35);
}

.mir-factor-bar.bar-negative {
  background: rgba(194,74,74,0.35);
}

.mir-factor-bar.bar-neutral {
  background: rgba(156,163,175,0.2);
}

.mir-factor-val {
  position: absolute;
  top: 0;
  left: 6px;
  height: 20px;
  line-height: 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Sector cell */
.mir-sector {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

/* MI Rank Documentation Modal */
.mir-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mir-modal-overlay.mir-modal-open {
  display: flex;
  opacity: 1;
  animation: mirModalFadeIn 0.25s ease forwards;
}

@keyframes mirModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mir-modal {
  position: relative;
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 680px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.mir-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.15s;
}

.mir-modal-close:hover {
  color: var(--text);
}

.mir-modal-body h2 {
  color: #4F98A3;
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.mir-modal-body h2:first-child {
  margin-top: 0;
}

.mir-modal-body h3 {
  color: #5bb8c4;
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 6px 0;
}

.mir-modal-body p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px 0;
}

.mir-modal-body ul,
.mir-modal-body ol {
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.mir-modal-body li {
  margin-bottom: 4px;
}

.mir-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12px;
}

.mir-doc-table th {
  text-align: left;
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  color: #4F98A3;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.mir-doc-table td {
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border2);
}

/* Responsive */
@media (max-width: 768px) {
  .mir-summary-bar {
    gap: 6px;
  }
  .mir-summary-box {
    min-width: 60px;
    padding: 10px 8px;
  }
  .mir-summary-count {
    font-size: 18px;
  }
  .mir-filters {
    flex-direction: column;
  }
  .mir-filter-select,
  .mir-search {
    min-width: 100%;
  }
  .mir-modal {
    padding: 20px 16px;
    width: 96%;
  }
}

/* MI Rank badge in watchlist */
.wl-mi-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: default;
  vertical-align: middle;
  margin-left: 4px;
}

/* ============================================================
   Earnings Hub — Full Week Column View
   ============================================================ */
.earn-hub {
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}

/* Top bar: left = arrows + title, right = dropdown filter */
.earn-hub-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.earn-hub-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.earn-hub-topbar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.earn-hub-arrow {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #ccc;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.earn-hub-arrow:hover {
  background: rgba(63,185,168,0.15);
  color: #3fb9a8;
}
.earn-hub-title {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #eee;
  text-transform: uppercase;
  white-space: nowrap;
}
.earn-hub-title .earn-hub-dates {
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #999;
  margin-left: 6px;
}

/* Dropdown filter */
.earn-filter-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #ccc;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 28px 7px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.earn-filter-select:hover,
.earn-filter-select:focus {
  border-color: rgba(63,185,168,0.5);
  background-color: rgba(255,255,255,0.08);
  outline: none;
}
.earn-filter-select option {
  background: #1a1a2e;
  color: #ddd;
}

/* View toggle buttons */
.earn-view-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.08);
}
.earn-view-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #777;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.earn-view-btn:hover {
  color: #bbb;
  background: rgba(255,255,255,0.06);
}
.earn-view-btn.active {
  background: rgba(63,185,168,0.18);
  border-color: rgba(63,185,168,0.4);
  color: #3fb9a8;
}

/* Ticker search box */
.earn-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 180px;
}
.earn-search-icon {
  position: absolute;
  left: 9px;
  color: #888;
  pointer-events: none;
  flex-shrink: 0;
}
.earn-search-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #ccc;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 28px 7px 28px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.earn-search-input::placeholder {
  color: #666;
  font-weight: 400;
}
.earn-search-input:hover,
.earn-search-input:focus {
  border-color: rgba(63,185,168,0.5);
  background: rgba(255,255,255,0.08);
}
.earn-search-clear {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: #888;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.earn-search-clear:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Earnings search toast notification */
.earn-search-toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,55,0.95);
  border: 1px solid rgba(248,113,113,0.4);
  color: #D87878;
  padding: 10px 36px 10px 16px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: earnToastIn 0.25s ease-out;
  white-space: nowrap;
}
.earn-search-toast.success {
  border-color: rgba(63,185,168,0.4);
  color: #3fb9a8;
}
.earn-search-toast .earn-toast-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
  padding: 2px 4px;
}
.earn-search-toast .earn-toast-close:hover {
  opacity: 1;
}
@keyframes earnToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Body: week columns + permanent detail panel side by side */
.earn-hub-body {
  display: flex;
  gap: 16px;
  position: relative;
  min-height: 500px;
}

/* Left section: topbar + week grid */
.earn-hub-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 5-column week grid — ~65% when panel visible */
.earn-hub-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* Loading state */
.earn-hub-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  opacity: 0.6;
}
.earn-hub-loading p {
  margin-top: 12px;
  font-size: 0.85rem;
}
.earn-hub-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  opacity: 0.5;
  font-size: 0.9rem;
}

/* Day column */
.earn-day-col {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.earn-day-col-header {
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.earn-day-col-header .earn-col-day {
  font-weight: 700;
  font-size: 0.82rem;
  color: #eee;
}
.earn-day-col-header .earn-col-date {
  font-size: 0.68rem;
  color: #888;
  margin-top: 1px;
}
.earn-day-col-body {
  padding: 8px 6px;
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* ── Today highlight (grid + list) ── */
.earn-day-col.earn-today {
  border-color: rgba(79,152,163,0.45);
  background: rgba(79,152,163,0.07);
  box-shadow: 0 0 18px rgba(79,152,163,0.10);
}
.earn-day-col.earn-today .earn-day-col-header {
  border-bottom-color: rgba(79,152,163,0.25);
}
.earn-list-day.earn-today .earn-list-panel {
  border: 1px solid rgba(79,152,163,0.40);
  background: rgba(79,152,163,0.06);
  box-shadow: 0 0 14px rgba(79,152,163,0.08);
}
.earn-list-day.earn-today .earn-list-date-label-num {
  color: #4F98A3;
}
.earn-today-badge {
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #111;
  background: #4F98A3;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1.5;
}
/* list view today badge (stacked under day abbr) */
.earn-list-date-label .earn-today-badge {
  margin-left: 0;
  margin-top: 3px;
  font-size: 0.46rem;
  padding: 1px 4px;
}

/* Section headers (Before Open / After Close) */
.earn-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  padding: 8px 4px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.earn-section-label .earn-section-icon {
  font-size: 0.72rem;
}

/* Company tile grid inside each section */
.earn-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding-bottom: 4px;
}

/* Individual company tile */
.earn-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.earn-tile:hover {
  background: rgba(63,185,168,0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.earn-tile.active {
  background: rgba(63,185,168,0.18);
  box-shadow: 0 0 0 1px #3fb9a8;
}
.earn-tile-logo {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.08);
}
.earn-tile-fallback {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(63,185,168,0.12);
  color: #3fb9a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.65rem;
  border: 1px solid rgba(63,185,168,0.2);
}
.earn-tile-ticker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 72px;
}
.earn-tile-ticker {
  font-size: 0.6rem;
  font-weight: 700;
  color: #ccc;
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Beat / miss / pending dot next to the ticker on each earnings tile */
.earn-tile-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
}
.earn-tile-dot-beat    { background: #22c55e; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset, 0 0 6px rgba(34,197,94,0.55); }
.earn-tile-dot-miss    { background: #C24A4A; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset, 0 0 6px rgba(194,74,74,0.55); }
.earn-tile-dot-inline  { background: #f59e0b; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset; }
.earn-tile-dot-pending { background: rgba(255,255,255,0.22); box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset; }

/* ---- Redesigned List View (reference-matching layout) ---- */
.earn-list-wrap {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.earn-list-day {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  align-items: flex-start;
}
.earn-list-date-label {
  width: 40px;
  min-width: 40px;
  text-align: center;
  padding-top: 14px;
  flex-shrink: 0;
}
.earn-list-date-label-day {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  line-height: 1.3;
}
.earn-list-date-label-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ccc;
  line-height: 1.3;
}
.earn-list-panel {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 6px 0;
  min-width: 0;
}
.earn-list-section {
  padding: 0 12px;
}
.earn-list-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  padding: 8px 4px 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.earn-list-section-icon {
  font-size: 0.75rem;
}
.earn-list-row {
  display: grid;
  grid-template-columns: 40px 120px 140px 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
}
.earn-list-row:hover {
  background: rgba(63,185,168,0.08);
}
.earn-list-row.active {
  background: rgba(63,185,168,0.15);
  box-shadow: inset 0 0 0 1px rgba(63,185,168,0.3);
}
.earn-list-logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.08);
}
.earn-list-logo-fb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(63,185,168,0.12);
  color: #3fb9a8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.6rem;
  border: 1px solid rgba(63,185,168,0.2);
}
.earn-list-ticker-col {
  min-width: 0;
}
.earn-list-ticker {
  font-weight: 700;
  color: #eee;
  font-size: 0.85rem;
  line-height: 1.3;
}
.earn-list-time {
  color: #666;
  font-size: 0.68rem;
  line-height: 1.3;
}
.earn-list-price-col {
  text-align: right;
  min-width: 0;
}
.earn-list-price {
  font-weight: 700;
  color: #eee;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.earn-list-change {
  font-weight: 600;
  font-size: 0.68rem;
}
.earn-list-change.up { color: #4ade80; }
.earn-list-change.down { color: #D87878; }
.earn-list-pill {
  display: inline-block;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.68rem;
  color: #bbb;
  white-space: nowrap;
}
.earn-list-pill-label {
  color: #777;
  font-weight: 600;
}
.earn-list-empty-day {
  text-align: center;
  padding: 16px;
  opacity: 0.35;
  font-size: 0.75rem;
}

/* ---- Detail Panel (permanently visible) ---- */
.earn-hub-detail {
  width: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  opacity: 0;
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.earn-hub-body.detail-open .earn-hub-detail {
  width: 35%;
  min-width: 320px;
  max-width: 420px;
  padding: 0;
  opacity: 1;
}

/* Detail panel tabs */
.earn-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 16px;
  flex-shrink: 0;
}
.earn-detail-tab {
  padding: 12px 14px 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #888;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.earn-detail-tab:hover {
  color: #ccc;
}
.earn-detail-tab.active {
  color: #3fb9a8;
  border-bottom-color: #3fb9a8;
}

/* Detail body — scrollable content area */
.earn-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Placeholder state */
.earn-detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 0.82rem;
}

/* Detail panel header */
.earn-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.earn-detail-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.1);
}
.earn-detail-logo-fb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(63,185,168,0.15);
  color: #3fb9a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.earn-detail-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.earn-detail-info .earn-detail-name {
  font-size: 0.72rem;
  color: #999;
  margin-top: 2px;
}
.earn-detail-info .earn-detail-price {
  font-size: 0.88rem;
  font-weight: 600;
  color: #eee;
  margin-top: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.earn-detail-change {
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 6px;
}
.earn-detail-change.up { color: #4ade80; }
.earn-detail-change.down { color: #D87878; }
.earn-detail-ext {
  font-size: 0.75rem;
  color: #bbb;
  margin-top: 2px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.earn-detail-ext-label {
  color: #888;
  font-size: 0.68rem;
}

/* Stats info icon row */
.earn-stats-info-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 4px;
  padding: 0 2px;
}
.earn-stats-info-icon {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.earn-stats-info-icon:hover {
  opacity: 1;
}
.earn-stats-info-tooltip {
  display: none;
  position: absolute;
  top: 22px;
  left: -4px;
  width: 280px;
  background: #1e2127;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 16px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.earn-stats-info-icon:hover .earn-stats-info-tooltip {
  display: block;
}
.earn-stats-info-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.earn-stats-info-dl {
  margin: 0;
  padding: 0;
}
.earn-stats-info-dl dt {
  font-size: 0.72rem;
  font-weight: 600;
  color: #3fb9a8;
  margin: 0 0 2px 0;
}
.earn-stats-info-dl dd {
  font-size: 0.66rem;
  color: #999;
  margin: 0 0 8px 0;
  line-height: 1.5;
}
.earn-stats-info-dl dd:last-child {
  margin-bottom: 0;
}

/* Key stats row */
.earn-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 20px;
}
.earn-detail-stat {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 5px 6px;
  min-width: 0; /* allow children to shrink/ellipsize inside grid cell */
}
.earn-detail-stat-label {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #888;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.earn-detail-stat-val {
  font-size: 0.7rem;
  font-weight: 400; /* not bold — easier to read on small tiles */
  color: var(--text-primary, #e0e0e0); /* match main body text color everywhere */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Row 3 KPI color variants — green for positive/improving, red for negative/declining */
.earn-detail-stat-val.earn-kpi-pos { color: #22c55e; }
.earn-detail-stat-val.earn-kpi-neg { color: #C24A4A; }
.earn-detail-stat-val.earn-kpi-warn { color: #f59e0b; }

/* EPS GAAP info icon + tooltip */
.eps-gaap-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  outline: none;
}
.eps-gaap-tooltip {
  display: none;
  position: fixed;
  background: #1a1a1f;
  color: #e0e0e0;
  border: 1px solid #4F98A3;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 260px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
  z-index: 9999;
  pointer-events: none;
}
/* Floating tooltip is now appended to document.body and positioned via JS */

/* FY / Quarterly stats toggle */
.earn-stats-toggle {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.08);
  width: fit-content;
  margin-left: auto;
}
.earn-stats-toggle-btn {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #777;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.earn-stats-toggle-btn:hover {
  color: #bbb;
  background: rgba(255,255,255,0.06);
}
.earn-stats-toggle-btn.active {
  background: rgba(63,185,168,0.18);
  border-color: rgba(63,185,168,0.4);
  color: #3fb9a8;
}

/* EPS Chart (canvas) */
.earn-detail-chart-wrap {
  margin-bottom: 16px;
  padding: 14px 16px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.earn-detail-chart-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3fb9a8;
  margin: 0 -16px 10px;
  padding: 0 16px 8px;
  border-bottom: 1px solid rgba(63, 185, 168, 0.22);
}
.earn-detail-canvas {
  width: 100%;
  height: 240px;
  display: block;
}

/* Per-quarter info line shown above the chart (e.g. "Q4 FY25  ○ Estimate -0.16  ● Actual -0.27") */
.earn-detail-chart-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 10px;
  font-size: 0.78rem;
  color: #cbd5e1;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 500;
}
.earn-detail-chart-info .ed-info-q {
  font-weight: 700;
  color: #e6edf6;
}
.earn-detail-chart-info .ed-info-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #aab3c0;
}
.earn-detail-chart-info .ed-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.earn-detail-chart-info .ed-dot.ed-dot-estimate {
  background: transparent;
  border: 1.5px solid rgba(203, 213, 225, 0.7);
}
.earn-detail-chart-info .ed-dot.ed-dot-actual-beat { background: #22c55e; }
.earn-detail-chart-info .ed-dot.ed-dot-actual-miss { background: #C24A4A; }
.earn-detail-chart-info .ed-dot.ed-dot-revenue { background: #3b82f6; }
.earn-detail-chart-info .ed-dot.ed-dot-earnings { background: #f59e0b; }
.earn-detail-chart-info .ed-info-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e6edf6;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.earn-detail-chart-info .ed-info-val.neg { color: #C24A4A; }
.earn-detail-chart-info .ed-info-val.pos { color: #22c55e; }
.earn-detail-chart-info .ed-info-val.muted { color: #aab3c0; font-weight: 500; }

/* Empty EPS chart message */
.earn-detail-empty-chart {
  text-align: center;
  padding: 30px 16px;
  font-size: 0.78rem;
  color: #888;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Revenue/EPS toggle pills */
.earn-rev-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  justify-content: center;
}
.earn-rev-pill {
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #888;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.earn-rev-pill:hover {
  border-color: rgba(255,255,255,0.25);
  color: #bbb;
}
.earn-rev-pill.active {
  background: rgba(63,185,168,0.15);
  border-color: #3fb9a8;
  color: #3fb9a8;
}

/* Beat summary */
.earn-detail-beat-summary {
  font-size: 0.78rem;
  color: #aaa;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.earn-detail-beat-summary strong {
  color: #4ade80;
}

/* Latest-quarter beat/miss banner — sits above the EPS chart on report day */
.earn-beat-banner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.earn-beat-banner.beat {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18) inset;
}
.earn-beat-banner.miss {
  background: linear-gradient(135deg, rgba(194,74,74, 0.12), rgba(194,74,74, 0.04));
  border-color: rgba(194,74,74, 0.45);
  box-shadow: 0 0 0 1px rgba(194,74,74, 0.18) inset;
}
.earn-beat-banner.inline {
  background: rgba(180, 180, 180, 0.06);
  border-color: rgba(180, 180, 180, 0.28);
}
.earn-beat-banner-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.earn-beat-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  flex-shrink: 0;
}
.earn-beat-banner-verdict {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9c4d1;
  margin-bottom: 4px;
}
.earn-beat-banner.beat  .earn-beat-banner-verdict { color: #4ade80; }
.earn-beat-banner.miss  .earn-beat-banner-verdict { color: #D87878; }
.earn-beat-banner-eps {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  color: #f5f7fa;
  letter-spacing: -0.01em;
}
.earn-beat-banner.beat .earn-beat-banner-eps { color: #4ade80; }
.earn-beat-banner.miss .earn-beat-banner-eps { color: #D87878; }
.earn-beat-banner-sub {
  font-size: 0.72rem;
  color: #8b95a3;
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.earn-beat-banner-surprise {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.05;
  color: #f5f7fa;
  letter-spacing: -0.01em;
}
.earn-beat-banner.beat .earn-beat-banner-surprise { color: #4ade80; }
.earn-beat-banner.miss .earn-beat-banner-surprise { color: #D87878; }
@media (max-width: 480px) {
  .earn-beat-banner { padding: 12px 14px; gap: 10px; }
  .earn-beat-banner-eps { font-size: 1.7rem; }
  .earn-beat-banner-surprise { font-size: 1.25rem; }
}

/* Earnings release CTA — link to the wire press release on report day */
.earn-release-cta {
  text-align: center;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(63, 185, 168, 0.06);
  border: 1px solid rgba(63, 185, 168, 0.22);
  border-radius: 8px;
}
.earn-release-cta .earn-release-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3fb9a8;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.earn-release-cta .earn-release-link:hover {
  color: #5fd4c4;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.earn-release-cta .earn-release-link svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.earn-release-cta .earn-release-meta {
  font-size: 0.7rem;
  opacity: 0.55;
  margin-top: 3px;
  color: #b9c4d1;
}

/* Detail loading */
.earn-detail-loading {
  text-align: center;
  padding: 40px 0;
  opacity: 0.5;
}

/* ---- Info Tab ---- */
.earn-info-summary {
  font-size: 0.78rem;
  color: #bbb;
  line-height: 1.55;
  margin-bottom: 16px;
}
.earn-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.earn-info-item {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 10px 12px;
}
.earn-info-item-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 3px;
}
.earn-info-item-val {
  font-size: 0.78rem;
  font-weight: 600;
  color: #ddd;
}
.earn-info-item-val a {
  color: #3fb9a8;
  text-decoration: none;
}
.earn-info-item-val a:hover {
  text-decoration: underline;
}

/* ---- Analysts Tab (Earnings Hub style) ---- */
.earn-analyst-section {
  margin-bottom: 20px;
}
.earn-analyst-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ccc;
  margin-bottom: 14px;
}

/* Consensus target circle indicator */
.earn-consensus-circle {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 3px solid #00c853;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 12px auto 8px;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
}
.earn-consensus-circle.downside {
  border-color: #ff1744;
}

/* Hub-style layout: big circle + bars side by side */
.earn-analyst-hub-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.earn-analyst-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.earn-analyst-circle span {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
}
.earn-analyst-circle.buy { background: rgba(34,197,94,0.18); color: #22c55e; border: 2px solid rgba(34,197,94,0.35); }
.earn-analyst-circle.strong-buy { background: rgba(34,197,94,0.25); color: #22c55e; border: 2px solid rgba(34,197,94,0.45); }
.earn-analyst-circle.hold { background: rgba(107,114,128,0.2); color: #9ca3af; border: 2px solid rgba(107,114,128,0.35); }
.earn-analyst-circle.sell { background: rgba(194,74,74,0.18); color: #C24A4A; border: 2px solid rgba(194,74,74,0.35); }
.earn-analyst-circle.strong-sell { background: rgba(194,74,74,0.25); color: #C24A4A; border: 2px solid rgba(194,74,74,0.45); }
.earn-analyst-bars {
  flex: 1;
  min-width: 0;
}

/* Rating bars */
.earn-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.earn-rating-label {
  width: 34px;
  font-size: 0.7rem;
  color: #999;
  text-align: right;
  flex-shrink: 0;
}
.earn-rating-bar-bg {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.earn-rating-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.earn-rating-bar.bar-buy { background: #22c55e; }
.earn-rating-bar.bar-hold { background: #6b7280; }
.earn-rating-bar.bar-sell { background: #C24A4A; }
.earn-rating-pct {
  width: 36px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #aaa;
  text-align: right;
  flex-shrink: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Price Target Range (Track Style – Earnings Hub) ---- */
.earn-target-range {
  position: relative;
  margin: 12px 16px 8px;
}

/* Track line – thick */
.earn-target-track {
  position: relative;
  height: 6px;
  background: #4a5568;
  border-radius: 3px;
  margin: 0 6px;
}

/* Dot markers on track */
.earn-target-point {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.earn-target-point-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
}
.earn-target-point-dot.low-dot { background: #9ca3af; }
.earn-target-point-dot.current-dot { background: transparent; border: 2px solid #fff; }
.earn-target-point-dot.avg-dot { background: transparent; border: 2px solid #fff; }
.earn-target-point-dot.high-dot { background: #9ca3af; }

/* Bordered bubble boxes */
.earn-target-bubble {
  position: absolute;
  left: 0; right: 0;
}
.earn-target-bubble-box {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 6px 16px;
}
/* Vertical connector line from box to track */
.earn-target-connector {
  position: absolute;
  width: 1px;
  background: rgba(255,255,255,0.25);
  z-index: 1;
}

/* Current box – sits ABOVE the track */
.earn-target-bubble.above {
  position: relative;
  height: 44px;
  margin-bottom: 8px;
}
.earn-target-bubble.above .earn-target-bubble-box {
  bottom: 0;
}
.earn-target-bubble.above .earn-target-connector {
  top: 100%;
  height: 14px;
}

/* Average box – sits BELOW */
.earn-target-bubble.below {
  position: relative;
  margin-top: 8px;
  height: 48px;
}
.earn-target-bubble.below .earn-target-bubble-box {
  top: 0;
  border-color: rgba(255,255,255,0.2);
}
.earn-target-bubble.below .earn-target-connector {
  bottom: 100%;
  height: 52px;
}

.earn-target-bubble-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #eee;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.earn-target-bubble-label {
  font-size: 0.65rem;
  color: #aaa;
  margin-top: 2px;
}
.earn-target-bubble-label .tgt-up { color: #22c55e; font-weight: 600; }
.earn-target-bubble-label .tgt-down { color: #C24A4A; font-weight: 600; }

/* Low / High extremes below track */
.earn-target-extremes {
  display: flex;
  justify-content: space-between;
  margin: 10px 6px 0;
}
.earn-target-extreme-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ddd;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.earn-target-extreme-change {
  font-size: 0.65rem;
  font-weight: 600;
  margin-top: 2px;
}
.earn-target-extreme-change.tgt-up { color: #22c55e; }
.earn-target-extreme-change.tgt-down { color: #C24A4A; }

/* ---- Skeleton for day columns ---- */
.earn-skel-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
}
.earn-skel-sq {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: earn-shimmer 1.5s infinite;
}
.earn-skel-txt {
  width: 32px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: earn-shimmer 1.5s infinite;
}
@keyframes earn-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .earn-hub-body.detail-open .earn-hub-detail {
    min-width: 280px;
    max-width: 340px;
  }
}

/* ≤ 900px: single-column layout — calendar stacks above detail panel */
@media (max-width: 900px) {
  .earn-hub-body {
    flex-direction: column;
    min-height: auto;
  }
  .earn-hub-left {
    width: 100%;
  }
  /* Calendar: horizontal scroll for 5 day columns */
  .earn-hub-week {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    padding-bottom: 6px;
  }
  .earn-day-col {
    min-width: 130px;
    flex-shrink: 0;
  }
  .earn-day-col-body {
    max-height: 280px;
  }
  .earn-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 4px;
  }
  .earn-tile-logo, .earn-tile-fallback { width: 38px; height: 38px; }
  .earn-tile-ticker { font-size: 0.55rem; }

  /* Detail panel: full-width below calendar, in normal flow */
  .earn-hub-detail {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    border-radius: 12px;
    border-left: none;
  }
  .earn-hub-body.detail-open .earn-hub-detail {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
  /* Detail tabs: scrollable row */
  .earn-detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .earn-detail-tabs::-webkit-scrollbar { display: none; }
  .earn-detail-tab { white-space: nowrap; flex-shrink: 0; }
  /* Charts / images contained */
  .earn-detail-chart-wrap,
  .earn-detail-canvas,
  .earn-detail-body img,
  .earn-detail-body canvas {
    max-width: 100%;
  }
  .earn-detail-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .earn-hub { padding: 12px 8px 32px; }
  .earn-hub-title { font-size: 0.78rem; }
  .earn-hub-title .earn-hub-dates { font-size: 0.7rem; }
  .earn-hub-arrow { width: 30px; height: 30px; }
  .earn-filter-select { font-size: 0.72rem; padding: 6px 24px 6px 10px; }
  .earn-day-col { min-width: 120px; }
  .earn-day-col-header { padding: 8px 6px 6px; }
  .earn-day-col-header .earn-col-day { font-size: 0.75rem; }
  .earn-day-col-header .earn-col-date { font-size: 0.62rem; }
  .earn-section-label { font-size: 0.58rem; }
  .earn-detail-body { padding: 12px 12px 16px; }
  .earn-detail-tab { padding: 10px 10px 8px; font-size: 0.72rem; }
  .earn-detail-info h3 { font-size: 0.95rem; }
  .earn-detail-canvas { height: 200px; }
  .earn-consensus-circle { width: 170px; height: 170px; }
  .earn-list-row { grid-template-columns: 36px 100px 120px 1fr 1fr; gap: 6px; padding: 6px; }
  .earn-list-ticker { font-size: 0.78rem; }
  .earn-list-price { font-size: 0.75rem; }
  .earn-info-grid { gap: 8px; }
}

@media (max-width: 640px) {
  .earn-hub { padding: 10px 6px 32px; }
  .earn-hub-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .earn-hub-topbar-right { width: 100%; }
  .earn-search-wrap { flex: 1; width: auto; }
  /* Single-column stacked days on narrow phones */
  .earn-hub-week {
    flex-direction: column;
    overflow-x: visible;
    gap: 10px;
  }
  .earn-day-col {
    min-width: unset;
    border-radius: 10px;
  }
  .earn-day-col-body {
    max-height: none;
  }
  .earn-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  }
  .earn-list-row {
    grid-template-columns: 32px 1fr 1fr;
    gap: 6px;
    padding: 6px;
  }
  .earn-list-ticker-col { display: none; }
  .earn-list-pill { font-size: 0.62rem; padding: 3px 8px; }
  .earn-rev-pill { padding: 4px 12px; font-size: 0.7rem; }
  .earn-analyst-hub-row { flex-direction: column; gap: 12px; }
  .earn-target-range { margin: 10px 8px 6px; }
}

@media (max-width: 480px) {
  .earn-hub { padding: 6px 4px 24px; }
  .earn-hub-topbar { gap: 6px; }
  .earn-hub-topbar-left { gap: 6px; }
  .earn-hub-topbar-right { gap: 6px; flex-wrap: wrap; }
  .earn-hub-title { font-size: 0.7rem; letter-spacing: 0.05em; }
  .earn-hub-title .earn-hub-dates { display: none; }
  .earn-hub-arrow { width: 28px; height: 28px; border-radius: 6px; }
  .earn-filter-select { font-size: 0.68rem; padding: 5px 22px 5px 8px; border-radius: 6px; }
  .earn-view-toggle { display: none; }
  .earn-search-wrap { width: 100%; }
  .earn-hub-week { gap: 8px; }
  .earn-day-col { border-radius: 8px; }
  .earn-day-col-header { padding: 6px 4px 4px; }
  .earn-day-col-header .earn-col-day { font-size: 0.7rem; }
  .earn-day-col-header .earn-col-date { font-size: 0.58rem; }
  .earn-tile { padding: 4px 2px; }
  .earn-tile-logo, .earn-tile-fallback { width: 36px; height: 36px; border-radius: 5px; }
  .earn-tile-ticker { font-size: 0.52rem; max-width: 48px; }
  .earn-section-label { font-size: 0.55rem; padding: 6px 2px 3px; }
  .earn-tile-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
  .earn-detail-tabs { padding: 0 8px; }
  .earn-detail-tab { padding: 8px 8px 6px; font-size: 0.68rem; }
  .earn-detail-body { padding: 10px 10px 14px; }
  .earn-detail-header { gap: 8px; margin-bottom: 12px; }
  .earn-detail-logo, .earn-detail-logo-fb { width: 40px; height: 40px; border-radius: 8px; }
  .earn-detail-info h3 { font-size: 0.9rem; }
  .earn-detail-info .earn-detail-name { font-size: 0.65rem; }
  .earn-detail-info .earn-detail-price { font-size: 0.8rem; }
  .earn-detail-stats { grid-template-columns: 1fr 1fr; gap: 4px; }
  .earn-detail-stat { padding: 5px 6px; border-radius: 6px; }
  .earn-detail-stat-label { font-size: 0.5rem; }
  .earn-detail-stat-val { font-size: 0.7rem; }
  .earn-detail-canvas { height: 180px; }
  .earn-detail-chart-title { font-size: 0.65rem; }
  .earn-rev-pill { padding: 4px 10px; font-size: 0.65rem; }
  .earn-consensus-circle { width: 140px; height: 140px; padding: 8px; }
  .earn-analyst-circle { width: 60px; height: 60px; }
  .earn-analyst-circle span { font-size: 0.55rem; }
  .earn-rating-label { font-size: 0.62rem; width: 28px; }
  .earn-rating-bar-bg { height: 12px; }
  .earn-rating-pct { font-size: 0.6rem; width: 30px; }
  .earn-target-range { margin: 8px 4px 4px; }
  .earn-target-bubble-text { font-size: 0.7rem; }
  .earn-target-bubble-label { font-size: 0.58rem; }
  .earn-info-grid { grid-template-columns: 1fr; gap: 6px; }
  .earn-info-item { padding: 8px 10px; }
  .earn-info-summary { font-size: 0.72rem; }
  .earn-news-thumb, .earn-news-thumb-fb, .earn-news-thumb-skel { width: 60px; height: 45px; }
  .earn-news-headline { font-size: 0.72rem; }
  .earn-news-snippet { font-size: 0.62rem; }
  .earn-list-day { gap: 8px; margin-bottom: 12px; }
  .earn-list-date-label { width: 32px; min-width: 32px; }
  .earn-list-date-label-num { font-size: 0.9rem; }
  .earn-list-row { grid-template-columns: 28px 1fr 1fr; gap: 4px; padding: 5px 4px; }
  .earn-list-logo, .earn-list-logo-fb { width: 28px; height: 28px; border-radius: 5px; }
  .earn-list-ticker { font-size: 0.72rem; }
  .earn-list-price { font-size: 0.7rem; }
  .earn-list-pill { font-size: 0.58rem; padding: 2px 6px; }
}

/* ---- News Tab ---- */
.earn-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.earn-news-card {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  transition: background 0.15s;
}
.earn-news-card:hover {
  background: rgba(255,255,255,0.06);
}
.earn-news-thumb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.earn-news-thumb-fb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  background: rgba(63,185,168,0.1);
  color: #3fb9a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
  border: 1px solid rgba(63,185,168,0.15);
}
.earn-news-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.earn-news-headline {
  font-size: 0.78rem;
  font-weight: 600;
  color: #eee;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.earn-news-headline:hover {
  color: #3fb9a8;
}
.earn-news-snippet {
  font-size: 0.68rem;
  color: #888;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.earn-news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: #666;
  margin-top: auto;
}
.earn-news-publisher {
  color: #777;
}
.earn-news-time {
  color: #888;
  font-weight: 600;
}

/* Skeleton loading for news */
.earn-news-skel {
  pointer-events: none;
}
.earn-news-thumb-skel {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: earn-shimmer 1.5s infinite;
}
.earn-news-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.earn-news-skel-line {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: earn-shimmer 1.5s infinite;
}
.earn-news-skel-line.short {
  height: 8px;
}

/* ============================================================
   Stock Ideas Tab — Insider Buys, Congress Trades, Smart Money
   ============================================================ */
.si-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px 0;
}

.si-card {
  background: var(--card-bg, #1a1a1e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}

.si-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.si-card-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: #e0e0e0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.si-subtitle {
  font-size: 11px;
  color: #797876;
}

.si-criteria {
  font-size: 11px;
  font-weight: 400;
  color: #8a8a88;
  margin-left: 8px;
  letter-spacing: 0.01em;
}

.si-card-body {
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.si-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.si-table th {
  position: sticky;
  top: 0;
  background: #1e1e23;
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  color: #797876;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 1;
}
.si-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #c8c8c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-table tr:hover {
  background: rgba(79,152,163,0.06);
}

.si-badge-new {
  display: inline-block;
  background: #4F98A3;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: middle;
}

.si-party-r { color: #C24A4A; font-weight: 600; }
.si-party-d { color: #4488cc; font-weight: 600; }

.si-lag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.si-lag-fast { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
.si-lag-med  { background: rgba(241, 196, 15, 0.18); color: #f1c40f; }
.si-lag-slow { background: rgba(231, 76, 60, 0.18); color: #e74c3c; }

.si-fund-header {
  padding: 10px 14px;
  background: rgba(79,152,163,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.si-fund-name {
  font-weight: 600;
  font-size: 13px;
  color: #e0e0e0;
}
.si-fund-date {
  font-size: 11px;
  color: #797876;
}
.si-fund-holdings {
  display: none;
}
.si-fund-holdings.open {
  display: block;
}
.si-fund-chevron {
  font-size: 10px;
  color: #797876;
  transition: transform 0.2s;
  margin-left: 8px;
}
.si-fund-header.open .si-fund-chevron {
  transform: rotate(180deg);
}

.si-empty {
  padding: 24px 16px;
  text-align: center;
  color: #797876;
  font-size: 12px;
}

.si-ticker-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted rgba(79, 152, 163, 0.4);
  transition: color 0.15s, border-color 0.15s;
}
.si-ticker-link:hover {
  color: #4F98A3;
  border-bottom-color: #4F98A3;
}

/* Stock Ideas: always single-column stacked layout */

/* ============================================================
   Account modal — 90% overlay of the page with opaque backdrop
   Opened from avatar dropdown via #dbAccountBtn.
   ============================================================ */
.acct-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  opacity: 0;
  transition: opacity 220ms ease;
}
.acct-overlay.acct-visible {
  opacity: 1;
}
body.acct-modal-open {
  overflow: hidden;
}

.acct-modal {
  width: 90vw;
  height: 90vh;
  max-width: 1200px;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
.acct-overlay.acct-visible .acct-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.acct-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border, #30363d);
  flex-shrink: 0;
}
.acct-modal-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--text, #e6edf3);
  letter-spacing: 0.2px;
}
.acct-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim, #8b949e);
  font-size: 28px;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.acct-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e6edf3);
}

.acct-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.acct-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  padding: 18px 20px;
}
.acct-section-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim, #8b949e);
  margin: 0 0 14px 0;
}

/* Profile overview card */
.acct-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}
.acct-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F98A3, #3a7a84);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}
.acct-profile-meta { min-width: 0; }
.acct-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #e6edf3);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-profile-email {
  font-size: 13px;
  color: var(--text-dim, #8b949e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fields grid */
.acct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
@media (max-width: 720px) {
  .acct-grid { grid-template-columns: 1fr; }
}
.acct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.acct-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #8b949e);
}
.acct-field-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.acct-field-row > .acct-input,
.acct-field-row > .acct-readonly {
  flex: 1 1 auto;
  min-width: 0;
}
.acct-input {
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  color: var(--text, #e6edf3);
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.acct-input:focus {
  border-color: #4F98A3;
  box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.2);
}
.acct-readonly {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  color: var(--text, #e6edf3);
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-readonly-mono {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
}
.acct-field-hint {
  font-size: 11px;
  color: var(--text-dim, #8b949e);
  line-height: 1.4;
}

/* Rows (security / preferences / danger) */
.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.acct-row + .acct-row {
  border-top: 1px solid var(--border, #30363d);
}
.acct-row-text {
  min-width: 0;
  flex: 1 1 auto;
}
.acct-row-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e6edf3);
  margin-bottom: 2px;
}
.acct-row-desc {
  font-size: 12px;
  color: var(--text-dim, #8b949e);
  line-height: 1.4;
}

/* Buttons */
.acct-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.acct-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.acct-btn-primary {
  background: #4F98A3;
  color: #fff;
  border-color: #4F98A3;
}
.acct-btn-primary:hover:not(:disabled) {
  background: #3d8591;
  border-color: #3d8591;
}
.acct-btn-secondary {
  background: rgba(79, 152, 163, 0.12);
  color: #7fc2cd;
  border-color: rgba(79, 152, 163, 0.4);
}
.acct-btn-secondary:hover:not(:disabled) {
  background: rgba(79, 152, 163, 0.22);
  border-color: #4F98A3;
}
.acct-btn-ghost {
  background: transparent;
  color: var(--text, #e6edf3);
  border-color: var(--border, #30363d);
}
.acct-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: #4F98A3;
}
.acct-btn-danger {
  background: rgba(238, 85, 85, 0.1);
  color: #ff6b6b;
  border-color: rgba(238, 85, 85, 0.45);
}
.acct-btn-danger:hover:not(:disabled) {
  background: rgba(238, 85, 85, 0.2);
  border-color: #ff6b6b;
}

/* Danger section accent */
.acct-section.acct-danger {
  border-color: rgba(238, 85, 85, 0.35);
  background: rgba(238, 85, 85, 0.04);
}
.acct-danger-title {
  color: #ff8787 !important;
}

/* ═══════════════════════════════════════════════════════════
   Trending tab: AI Feed / Social Feed sub-tabs + WSB AI cards
   ═══════════════════════════════════════════════════════════ */

.db-subtabs-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  padding: 0 4px;
}

/* Row that puts subtabs on the left and an optional control (e.g. US/UK switch) on the right */
.db-subtabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  padding: 0 4px 0 4px;
}
.db-subtabs-row .db-subtabs-nav {
  border-bottom: 0;
  margin-bottom: 0;
  padding: 0;
}
.db-subtabs-row .mkt-switch {
  margin-bottom: 0;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .db-subtabs-row { flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
  .db-subtabs-row .mkt-switch { margin-left: auto; }
}

.db-subtab-btn {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.db-subtab-btn:hover:not(.active) {
  color: var(--text);
}

.db-subtab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.db-aifeed-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin-right: 6px;
}

.db-aifeed-body {
  margin-top: 14px;
}

.db-aifeed-loading {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.db-aifeed-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-faint);
}

.db-aifeed-exec {
  background: linear-gradient(135deg, rgba(79,152,163,0.07) 0%, rgba(79,152,163,0.02) 100%);
  border: 1px solid rgba(79,152,163,0.22);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.db-aifeed-exec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.db-aifeed-exec-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
}

.db-aifeed-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.db-aifeed-chip-risk-on { color: var(--up); border-color: rgba(14,179,91,0.35); background: rgba(14,179,91,0.08); }
.db-aifeed-chip-risk-off { color: var(--down, #e94963); border-color: rgba(233,73,99,0.35); background: rgba(233,73,99,0.08); }
.db-aifeed-chip-mixed { color: #e0a54b; border-color: rgba(224,165,75,0.35); background: rgba(224,165,75,0.08); }

.db-aifeed-exec p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 10px 0;
}
.db-aifeed-exec p:last-child { margin-bottom: 0; }

.db-aifeed-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: uppercase;
  margin: 22px 0 12px 0;
  padding-left: 4px;
}

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

.db-aifeed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-aifeed-card:hover {
  border-color: rgba(79,152,163,0.35);
}

.db-aifeed-card.early-stage {
  border-color: rgba(224,165,75,0.3);
  background: linear-gradient(180deg, rgba(224,165,75,0.04) 0%, var(--surface) 100%);
}

.db-aifeed-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.db-aifeed-ticker {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.02em;
}
/* When rendered as a link (clickable → watchlist chart) keep the bold look,
   surface affordance via hover color + underline */
a.db-aifeed-ticker {
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: color 0.12s, text-decoration-color 0.12s;
}
a.db-aifeed-ticker:hover,
a.db-aifeed-ticker:focus {
  color: var(--accent, #4F98A3);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  outline: none;
}

.db-aifeed-ticker-meta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 2px;
  display: block;
}

.db-aifeed-bias {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-transform: uppercase;
  white-space: nowrap;
}

.db-aifeed-bias-Long { color: var(--up); border-color: rgba(14,179,91,0.4); }
.db-aifeed-bias-Short { color: var(--down, #e94963); border-color: rgba(233,73,99,0.4); }
.db-aifeed-bias-Avoid { color: var(--text-faint); }
.db-aifeed-bias-Sell-premium { color: #e0a54b; border-color: rgba(224,165,75,0.4); }

.db-aifeed-narrative {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

.db-aifeed-theme {
  font-size: 11px;
  font-style: italic;
  color: #e0a54b;
  padding: 6px 10px;
  background: rgba(224,165,75,0.08);
  border-radius: 6px;
  margin: 0;
}

.db-aifeed-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.db-aifeed-facet {
  font-size: 11px;
  line-height: 1.45;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.01em;
}

.db-aifeed-facet strong {
  color: var(--text);
  font-weight: 500;
  margin-left: 5px;
  letter-spacing: 0;
}

.db-aifeed-trigger {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.db-aifeed-trigger strong { color: var(--text); font-weight: 600; }
.db-aifeed-trigger-entry { color: var(--up); }
.db-aifeed-trigger-inval { color: var(--down, #e94963); }

.db-aifeed-spec-flag {
  display: inline-block;
  font-size: 9.5px;
  padding: 2px 6px;
  background: rgba(233,73,99,0.1);
  color: var(--down, #e94963);
  border-radius: 3px;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.db-aifeed-chips-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.db-aifeed-conviction {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.db-aifeed-conviction-high {
  background: rgba(47, 163, 92, 0.16);
  color: var(--up, #2fa35c);
  border: 1px solid rgba(47, 163, 92, 0.3);
}
.db-aifeed-conviction-medium {
  background: rgba(212, 160, 66, 0.16);
  color: #d4a042;
  border: 1px solid rgba(212, 160, 66, 0.3);
}
.db-aifeed-conviction-speculative {
  background: rgba(158, 158, 158, 0.14);
  color: #8b8b8b;
  border: 1px solid rgba(158, 158, 158, 0.28);
}

@media (max-width: 600px) {
  .db-aifeed-grid { grid-template-columns: 1fr; }
  .db-subtab-btn { padding: 9px 14px; font-size: 12px; }
}

/* ===========================================================================
   MI Opinion Tab — Master Brief styles
   =========================================================================== */
.mi-opinion-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 18px 60px;
  color: #cdd6e3;
}
.mi-disclaimer {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-left: 3px solid #60a5fa;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #b8c5d4;
  margin-bottom: 14px;
}
.mi-disclaimer strong { color: #e8eef7; font-weight: 600; }
.mi-disclaimer-meta { display: block; margin-top: 4px; font-size: 0.72rem; color: #8a9bae; }
.mi-disclaimer-meta em { color: #f59e0b; font-style: normal; }

.mi-opinion-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 12px;
}
.mi-opinion-title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.12em;
  color: #e8eef7; margin: 0;
}
.mi-opinion-refresh {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 6px 8px; cursor: pointer; color: #8a9bae;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1; transition: all 0.15s;
}
.mi-opinion-refresh:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #e8eef7; }
.mi-opinion-refresh:disabled { opacity: 0.55; cursor: not-allowed; }
.mi-opinion-refresh.spinning svg { animation: mi-spin 0.8s linear infinite; }
.mi-opinion-refresh .mi-refresh-label { font-weight: 500; letter-spacing: 0.02em; }
@keyframes mi-spin { to { transform: rotate(360deg); } }

.mi-opinion-loading, .mi-opinion-empty, .mi-opinion-error {
  text-align: center; padding: 50px 20px; color: #8a9bae;
}
.mi-opinion-error { color: #D87878; }

.mi-staleness-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  color: #fde68a;
  font-size: 0.85rem;
  line-height: 1.45;
}
.mi-stale-icon { color: #fbbf24; font-size: 1.05rem; line-height: 1.2; flex-shrink: 0; }
.mi-stale-body strong { color: #fde68a; display: block; margin-bottom: 4px; font-size: 0.82rem; letter-spacing: 0.02em; }
.mi-stale-list { margin: 4px 0 0 0; padding-left: 18px; color: #fcd34d; }
.mi-stale-list li { margin: 2px 0; }

.mi-headline {
  background: linear-gradient(135deg, rgba(96,165,250,0.06), rgba(167,139,250,0.04));
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #e8eef7;
  font-weight: 500;
  margin-bottom: 16px;
}
.mi-headline-label {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #60a5fa;
  background: rgba(96,165,250,0.12);
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: middle;
}

.mi-views-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.mi-view-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 16px;
}
.mi-view-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.mi-view-header h3 {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
  color: #e8eef7; margin: 0; flex: 1;
}
.mi-stance {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 4px; text-transform: uppercase;
}
.mi-stance-positive { background: rgba(34,197,94,0.15);  color: #4ade80; }
.mi-stance-negative { background: rgba(194,74,74,0.15);  color: #D87878; }
.mi-stance-neutral  { background: rgba(148,163,184,0.15); color: #cbd5e1; }
.mi-conviction {
  font-size: 0.72rem; color: #8a9bae; font-weight: 500;
}
.mi-summary {
  font-size: 0.86rem; line-height: 1.6; color: #cdd6e3; margin: 0 0 12px;
}
.mi-summary:last-of-type { margin-bottom: 10px; }
.mi-summary + .mi-summary { margin-top: 0; }
.mi-sublabel {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: #8a9bae; margin: 12px 0 4px; text-transform: uppercase;
}
.mi-bullets { margin: 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.5; color: #cdd6e3; }
.mi-bullets li { margin-bottom: 3px; }
.mi-bullets-trigger li { color: #fbbf24; }

.mi-traj-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px;
}
.mi-traj-grid > div {
  background: rgba(0,0,0,0.18); border-radius: 5px; padding: 7px 9px;
  text-align: center;
}
.mi-traj-label {
  display: block; font-size: 0.62rem; letter-spacing: 0.09em;
  font-weight: 700; color: #8a9bae; margin-bottom: 3px; text-transform: uppercase;
}
.mi-traj-val {
  display: block; font-size: 0.78rem; color: #e8eef7; font-weight: 600;
  text-transform: capitalize;
}

/* ============================================================
   MI Opinion — Executive Brief redesign (Apr 2026)
   Compact, scannable, banking / sell-side research style.
   Replaces prose-heavy .mi-view-card layout for Market View
   and Economy View. Old .mi-view-card classes are still defined
   above so any other surface that re-uses them keeps working.
   ============================================================ */
.mi-eb-card {
  background: linear-gradient(180deg, rgba(15,21,32,0.85), rgba(11,15,22,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 14px 16px 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #d6dde8;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mi-eb-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mi-eb-title {
  margin: 0; flex: 1 1 auto;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f1f5fb;
  font-family: 'Inter Tight', 'Inter', sans-serif;
}
.mi-eb-stance {
  display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 3px 9px; border-radius: 3px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
}
.mi-eb-stance.mi-stance-positive { color: #5dd39e; }
.mi-eb-stance.mi-stance-negative { color: #f08a8a; }
.mi-eb-stance.mi-stance-neutral  { color: #94a3b8; }

.mi-eb-conv {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.66rem; letter-spacing: 0.1em;
  color: #94a3b8;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.mi-eb-conv-key { font-weight: 700; }
.mi-eb-conv-bar {
  display: inline-block; position: relative;
  width: 64px; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.mi-eb-conv-fill {
  display: block; height: 100%;
  background: #94a3b8;
  transition: width 0.4s ease;
}
.mi-eb-conv.mi-eb-conv-low  .mi-eb-conv-fill { background: #94a3b8; }
.mi-eb-conv.mi-eb-conv-mid  .mi-eb-conv-fill { background: #d4a373; }
.mi-eb-conv.mi-eb-conv-high .mi-eb-conv-fill { background: #5dd39e; }
.mi-eb-conv-num {
  font-size: 0.78rem; font-weight: 700; color: #e8eef7;
  font-variant-numeric: tabular-nums; min-width: 22px; text-align: right;
}

.mi-eb-block {
  display: flex; flex-direction: column; gap: 6px;
}
.mi-eb-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  color: #7a8aa0; text-transform: uppercase;
  font-family: 'Inter Tight', 'Inter', sans-serif;
}
.mi-eb-core-text {
  margin: 0;
  font-size: 0.86rem; line-height: 1.55;
  color: #e3e9f2;
  font-weight: 500;
  border-left: 2px solid rgba(96,165,250,0.55);
  padding: 2px 0 2px 10px;
}

/* Regime matrix */
.mi-eb-matrix {
  display: flex; flex-direction: column;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  overflow: hidden;
}
.mi-eb-matrix-head, .mi-eb-matrix-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
}
.mi-eb-matrix-head {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mi-eb-matrix-head span {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
  color: #7a8aa0; text-transform: uppercase;
}
.mi-eb-matrix-row + .mi-eb-matrix-row {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.mi-eb-matrix-cat {
  font-size: 0.78rem; font-weight: 600; color: #cdd6e3;
  letter-spacing: 0.02em;
}
.mi-eb-matrix-assess {
  font-size: 0.78rem; font-weight: 600;
  text-transform: capitalize;
}
.mi-eb-assess-positive { color: #5dd39e; }
.mi-eb-assess-negative { color: #f08a8a; }
.mi-eb-assess-neutral  { color: #cdd6e3; }
.mi-eb-matrix-conv {
  display: flex; justify-content: flex-start;
}
.mi-eb-conv-meter {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.mi-eb-conv-meter .mi-eb-conv-bar {
  width: 56px; height: 3px;
  background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;
}
.mi-eb-conv-meter .mi-eb-conv-fill {
  display: block; height: 100%;
}
.mi-eb-conv-meter.mi-eb-conv-low  .mi-eb-conv-fill { background: #94a3b8; }
.mi-eb-conv-meter.mi-eb-conv-mid  .mi-eb-conv-fill { background: #d4a373; }
.mi-eb-conv-meter.mi-eb-conv-high .mi-eb-conv-fill { background: #5dd39e; }
.mi-eb-conv-meter .mi-eb-conv-num {
  font-size: 0.74rem; color: #e8eef7; min-width: 22px; text-align: right;
}
.mi-eb-conv-empty { color: #6b7686; font-family: 'SF Mono', Menlo, monospace; font-size: 0.78rem; }

/* Key drivers — numbered list, tight spacing */
.mi-eb-drivers {
  margin: 0; padding-left: 22px;
  list-style: decimal;
  color: #cdd6e3;
  font-size: 0.81rem; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.mi-eb-drivers li {
  margin: 3px 0;
  padding-left: 4px;
}
.mi-eb-drivers li::marker {
  color: #7a8aa0; font-weight: 700; font-size: 0.78rem;
}

/* What would change the view — amber accent, square markers */
.mi-eb-triggers {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.mi-eb-triggers li {
  position: relative;
  padding: 5px 10px 5px 22px;
  font-size: 0.81rem; line-height: 1.5;
  color: #f5d68a;
  background: rgba(212,163,115,0.06);
  border-left: 2px solid rgba(212,163,115,0.55);
  border-radius: 0 4px 4px 0;
}
.mi-eb-triggers li::before {
  content: '▸';
  position: absolute; left: 8px; top: 5px;
  color: #d4a373; font-size: 0.78rem;
}

/* Bottom line — closing call, slightly muted but italic-italic free */
.mi-eb-bottom-text {
  margin: 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 0.81rem; line-height: 1.55;
  color: #d6dde8; font-weight: 500;
}

@media (max-width: 800px) {
  .mi-eb-card { padding: 12px 13px 10px; }
  .mi-eb-title { font-size: 0.74rem; letter-spacing: 0.12em; }
  .mi-eb-matrix-head, .mi-eb-matrix-row {
    grid-template-columns: 0.9fr 1fr 0.9fr; gap: 8px; padding: 7px 10px;
  }
  .mi-eb-conv-meter .mi-eb-conv-bar { width: 40px; }
  .mi-eb-conv-bar { width: 48px; }
  .mi-eb-drivers { font-size: 0.79rem; }
  .mi-eb-triggers li { font-size: 0.79rem; }
}

.mi-ideas { margin-bottom: 16px; }
.mi-ideas h3, .mi-ratings h3, .mi-tensions h3 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  color: #8a9bae; margin: 0 0 8px; text-transform: uppercase;
}
.mi-ideas-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mi-idea {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px; padding: 10px 12px;
}
.mi-idea-long  { border-left: 3px solid #4ade80; }
.mi-idea-short { border-left: 3px solid #D87878; }
.mi-idea-pair  { border-left: 3px solid #a78bfa; }
.mi-idea-label {
  font-size: 0.62rem; letter-spacing: 0.09em; font-weight: 700;
  color: #8a9bae; margin-bottom: 5px; text-transform: uppercase;
}
.mi-idea-val { font-size: 0.86rem; color: #e8eef7; line-height: 1.45; }

.mi-distribution {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 16px;
}
.mi-distribution.mi-dist-fail { border-color: rgba(194,74,74,0.3); background: rgba(194,74,74,0.05); }
.mi-dist-label {
  font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 700;
  color: #8a9bae; text-transform: uppercase; margin-right: 6px;
}
.mi-dist-pill {
  font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 3px;
}
.mi-dist-meta { font-size: 0.74rem; color: #cdd6e3; margin-left: auto; }
.mi-dist-fail .mi-dist-meta { color: #D87878; }

.mi-ratings { margin-bottom: 16px; }
.mi-ratings-table-wrap { overflow-x: auto; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); }
.mi-ratings-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.mi-ratings-table th {
  background: rgba(255,255,255,0.04);
  padding: 9px 10px; text-align: left; font-weight: 600;
  color: #8a9bae; font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mi-ratings-table td {
  padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #cdd6e3; vertical-align: top;
}
.mi-ratings-table tr:last-child td { border-bottom: none; }
.mi-tk { font-weight: 700; color: #e8eef7; font-family: 'SF Mono', Menlo, monospace; font-size: 0.82rem; }
/* Ticker link — opens Watchlists tab + chart on click. Plain look in ratings table (already bold); accent in prose. */
.mi-ticker-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.mi-ticker-link:hover,
.mi-ticker-link:focus {
  color: var(--accent, #4ea1ff);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.mi-tk .mi-ticker-link { color: #e8eef7; }
.mi-tk .mi-ticker-link:hover,
.mi-tk .mi-ticker-link:focus { color: var(--accent, #4ea1ff); }
/* In free-text (top ideas, one-line, invalidation) make the link a touch more discoverable */
.mi-oneline .mi-ticker-link,
.mi-invalidation .mi-ticker-link,
.mi-idea-val .mi-ticker-link {
  color: var(--accent, #4ea1ff);
  font-weight: 600;
}
.mi-conv { color: #8a9bae; font-variant-numeric: tabular-nums; }
.mi-oneline { color: #cdd6e3; line-height: 1.45; }
.mi-invalidation { color: #94a3b8; font-size: 0.78rem; line-height: 1.45; font-style: italic; }

.mi-rating-pill {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.mi-rating-strongbuy  { background: rgba(34,197,94,0.22);  color: #4ade80; }
.mi-rating-buy        { background: rgba(34,197,94,0.12);  color: #86efac; }
.mi-rating-hold       { background: rgba(148,163,184,0.15); color: #cbd5e1; }
.mi-rating-sell       { background: rgba(194,74,74,0.12);  color: #fca5a5; }
.mi-rating-strongsell { background: rgba(194,74,74,0.22);  color: #D87878; }

/* Horizon chip — timeframe label on each rating row.
   tactical = 1–4w technical/event-risk, swing = 1–3m valuation/catalyst,
   position = 3–12m thesis-level fundamental. Helps users read a Sell with conv 30
   driven by RSI/overbought as a positioning call rather than a thesis short. */
.mi-horizon-cell { white-space: nowrap; }
.mi-horizon-chip {
  display: inline-block;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 10px;
  border: 1px solid transparent;
  text-transform: uppercase;
  cursor: help;
}
.mi-horizon-tactical {
  background: rgba(251,191,36,0.10);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.28);
}
.mi-horizon-swing {
  background: rgba(78,161,255,0.10);
  color: #7cc1ff;
  border-color: rgba(78,161,255,0.28);
}
.mi-horizon-position {
  background: rgba(167,139,250,0.10);
  color: #c4b5fd;
  border-color: rgba(167,139,250,0.28);
}
.mi-horizon-unknown {
  background: transparent;
  color: #6b7785;
  border-color: rgba(148,163,184,0.18);
}

.mi-tensions-list { list-style: none; padding: 0; margin: 0; }
.mi-tensions-list li {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid #fbbf24;
  border-radius: 6px;
  padding: 9px 12px; margin-bottom: 7px;
  font-size: 0.84rem; line-height: 1.5;
}
.mi-tension-desc { color: #cdd6e3; display: block; }
.mi-tension-src {
  display: inline-block; margin-top: 4px; font-size: 0.7rem;
  color: #8a9bae; font-family: 'SF Mono', Menlo, monospace;
}

@media (max-width: 800px) {
  .mi-views-grid, .mi-ideas-grid { grid-template-columns: 1fr; }
  .mi-traj-grid { grid-template-columns: repeat(3, 1fr); }
  .mi-ratings-table { font-size: 0.76rem; }
  .mi-ratings-table th, .mi-ratings-table td { padding: 7px 8px; }
}

/* ============================================================
   Watchlist — Company Info button + Modal
   ============================================================ */

/* Small oval "i" pill next to ticker symbol. Tiny on purpose — must not
   dominate the row. Colour neutral; hovers to the theme accent. */
.wl-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 5px;
  margin-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  user-select: none;
}
.wl-info-btn:hover,
.wl-info-btn:focus-visible {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.45);
  color: #93c5fd;
  outline: none;
}
.wl-info-btn:active {
  transform: translateY(0.5px);
}

/* --- Modal --- */
.wl-ci-modal[hidden] { display: none; }
.wl-ci-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wl-ci-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 14, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.wl-ci-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: min(80vh, 640px);
  background: #0f1620;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wlCiPop 0.16s ease-out;
}
@keyframes wlCiPop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wl-ci-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wl-ci-topbar-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}
.wl-ci-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.wl-ci-close:hover {
  background: rgba(194,74,74, 0.14);
  border-color: rgba(194,74,74, 0.45);
  color: #fca5a5;
}
.wl-ci-body {
  padding: 16px;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}
.wl-ci-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.wl-ci-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  padding: 3px;
  flex-shrink: 0;
}
.wl-ci-head-text { min-width: 0; }
.wl-ci-name {
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  word-break: break-word;
}
.wl-ci-ticker {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.wl-ci-desc {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.8);
}
.wl-ci-desc-empty { color: rgba(255, 255, 255, 0.45); font-style: italic; }
.wl-ci-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
}
.wl-ci-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}
.wl-ci-meta-k {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
}
.wl-ci-meta-v {
  color: rgba(255, 255, 255, 0.88);
  text-align: right;
  word-break: break-word;
}
.wl-ci-website {
  display: inline-block;
  font-size: 0.82rem;
  color: #93c5fd;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 6px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.wl-ci-website:hover {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.55);
}
.wl-ci-loading {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 30px 0;
}
.wl-ci-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: wlCiDot 1.2s infinite ease-in-out;
}
.wl-ci-loading span:nth-child(2) { animation-delay: 0.15s; }
.wl-ci-loading span:nth-child(3) { animation-delay: 0.30s; }
@keyframes wlCiDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40%           { opacity: 1;   transform: scale(1.1); }
}
.wl-ci-error {
  padding: 20px 0;
  text-align: center;
  color: #fca5a5;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .wl-ci-modal { padding: 12px; }
  .wl-ci-card { max-width: 100%; max-height: 90vh; }
  .wl-ci-body { padding: 14px; font-size: 0.84rem; }
}


/* ═══════════════════════════════════════════════════════════
   Pulse tab — Earnings Pulse sub-tab styles
   Refreshed: 2026-04-19 — mirrors Sentiment/FV card + controls pattern
   Tokens: teal #4F98A3, border #30363d, panel #1c1c20, text #c9d1d9
   ═══════════════════════════════════════════════════════════ */

/* Container — card-style panel (mirrors Sentiment card look) */
.pulse-card {
  background: #1c1c20;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 20px 22px 22px;
  margin-top: 14px;
}

/* ── Header ── */
.pulse-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pulse-title-group { flex: 1 1 260px; }
.pulse-title-group .section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4F98A3;
  margin: 0 0 4px;
}
.pulse-subtitle {
  font-size: 12px;
  color: #8b949e;
  margin: 4px 0 0;
  line-height: 1.5;
  max-width: 520px;
}
.pulse-meta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.pulse-latest-date {
  font-size: 12px;
  color: #8b949e;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pulse-badge {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.01em;
  color: #4F98A3;
  background: rgba(79,152,163,0.12);
}
.pulse-progress {
  font-size: 11px;
  color: #6e7681;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pulse-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pulse-info-btn {
  color: #6e7681;
}
.pulse-info-btn:hover { color: #9b78d2; }
.pulse-tooltip {
  max-width: 380px;
  font-size: 12px;
  line-height: 1.6;
}
.pulse-progress-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pulse-progress-bar {
  position: relative;
  width: 90px;
  height: 6px;
  background: rgba(79,152,163,0.12);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.pulse-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(79,152,163,0.85), rgba(79,152,163,0.55));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ── Controls row ── */
.pulse-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pulse-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pulse-select-label {
  font-size: 11px;
  color: #6e7681;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  cursor: default;
  letter-spacing: 0.02em;
}
.pulse-select {
  background: #1c1c20;
  border: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  padding: 4px 28px 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s, color 0.15s;
  outline: none;
}
.pulse-select:hover,
.pulse-select:focus {
  border-color: #4F98A3;
  color: #e6edf3;
}
.pulse-pill-toggle {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid #30363d;
  border-radius: 20px;
  padding: 2px;
  gap: 0;
  flex-shrink: 0;
}
.pulse-pill-btn {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 4px 12px;
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.pulse-pill-btn:hover { color: #c9d1d9; }
.pulse-pill-btn.active {
  background: rgba(79,152,163,0.18);
  color: #4F98A3;
}

/* ── Status row (legacy, hidden by [hidden] attr) ── */
.pulse-status-row {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  color: #8b949e;
  margin-bottom: 12px;
  padding: 0 2px;
}

/* ── Chart wrapper ── */
.pulse-chart-wrap {
  position: relative;
  min-height: 320px;
  margin: 0 -4px;
  padding: 4px 0 0;
}
.pulse-chart-wrap canvas {
  width: 100% !important;
}
.pulse-chart-wrap.pulse-loading::after {
  content: 'Loading\2026';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8b949e;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  pointer-events: none;
}

/* ── Empty state ── */
.pulse-empty {
  padding: 40px 24px;
  text-align: center;
  color: #8b949e;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
}
.pulse-empty code {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  background: rgba(255,255,255,0.07);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c9d1d9;
}

/* ── Source / footnote ── */
.pulse-source {
  font-size: 11px;
  color: #6e7681;
  font-family: 'Inter', sans-serif;
  margin-top: 12px;
  padding: 0 2px;
  line-height: 1.5;
}

/* ── AI Commentary card ── */
.pulse-commentary-card {
  margin-top: 18px;
  padding: 14px 16px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #4F98A3;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  color: #c9d1d9;
}
.pulse-commentary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pulse-commentary-label {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4F98A3;
  font-family: 'Inter', sans-serif;
}
.pulse-commentary-meta {
  font-size: 11px;
  color: #6e7681;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pulse-commentary-body {
  font-size: 13px;
  line-height: 1.6;
  color: #c9d1d9;
}
.pulse-commentary-body p { margin: 4px 0; }
.pulse-commentary-body h4 {
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #e6edf3;
  letter-spacing: 0.02em;
}
.pulse-commentary-body ul { margin: 4px 0; padding-left: 18px; }
.pulse-commentary-body li { margin: 2px 0; }
.pulse-commentary-body strong { color: #e6edf3; }
.pulse-commentary-stale {
  color: #f59e0b;
  font-size: 11px;
  margin: 0 0 8px;
}
.pulse-commentary-regen {
  margin-top: 12px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  color: #4F98A3;
  background: rgba(79,152,163,0.1);
  border: 1px solid #4F98A3;
  border-radius: 20px;
  transition: background 0.15s, color 0.15s;
}
.pulse-commentary-regen:hover:not(:disabled) {
  background: rgba(79,152,163,0.2);
}
.pulse-commentary-regen:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Industry meta footer ── */
#pulseIndustryMeta {
  font-size: 11px !important;
  color: #6e7681 !important;
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  margin: 6px 0 0 !important;
  padding: 0 2px !important;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .pulse-card { padding: 16px 14px; }
  .pulse-header { flex-direction: column; }
  .pulse-meta-group { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .pulse-controls-row { gap: 10px; }
  .pulse-select-group { width: 100%; justify-content: space-between; }
  .pulse-pill-btn { font-size: 11px; padding: 4px 10px; }
}

/* US/UK Market Switch (shared across MI Rank, Earnings, Treemap) */
.mkt-switch {
  display: inline-flex;
  gap: 0;
  background: transparent;
  border: 1px solid #14b8a6;
  border-radius: 6px;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.mkt-switch-btn {
  background: transparent;
  border: 0;
  color: #14b8a6;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: color .15s, background .15s;
  line-height: 1;
  white-space: nowrap;
}
.mkt-switch-btn + .mkt-switch-btn { border-left: 1px solid #14b8a6; }
.mkt-switch-btn:hover { background: rgba(20, 184, 166, 0.12); color: #fff; }
.mkt-switch-btn.active,
.mkt-switch-btn[aria-selected="true"] {
  background: #14b8a6;
  color: #fff;
}

/* =========================================================================
   EARNINGS TRADE — Post-earnings 5-pillar ranking
   ========================================================================= */
.et-container {
  padding: 18px 20px 40px;
  max-width: 1600px;
  margin: 0 auto;
  color: var(--text);
  font-size: 13px;
}

/* Header strip */
.et-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.et-header-title h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}
.et-header-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.et-header-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.et-meta-item {
  display: flex;
  flex-direction: column;
  min-width: 88px;
}
.et-meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.et-meta-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Section titles */
.et-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 20px 0 10px;
  font-weight: 600;
}

/* ─── Iter 7m: Single Universe summary card ─────────────────────────────
   Replaces the per-sector card grid. Three flex zones (stats / score
   distribution / leaders) inside one full-width card with a cyan-teal
   accent stripe matching the trending-beta source-panel palette. */
.et-summary-card {
  --et-sum-accent: #22d3ee;             /* cyan-400 */
  --et-sum-accent-soft: rgba(34,211,238,0.10);
  --et-sum-accent-edge: rgba(34,211,238,0.40);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 18px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--et-sum-accent-soft) 0%, transparent 60%), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.et-summary-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--et-sum-accent) 0%, var(--et-sum-accent-edge) 100%);
  opacity: 0.9;
  pointer-events: none;
}
.et-summary-zone {
  flex: 1 1 240px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.et-summary-zone + .et-summary-zone {
  border-left: 1px solid var(--border2);
  padding-left: 18px;
}
.et-summary-zone-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 2px;
}
.et-summary-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.et-summary-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  min-width: 56px;
}
.et-summary-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
}

/* Centre zone — median + grade ribbon */
.et-summary-distribution {
  align-items: flex-start;
}
.et-summary-median {
  font-size: 32px;
  font-weight: 800;
  color: var(--et-sum-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px var(--et-sum-accent-edge);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.et-summary-median-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
  font-weight: 600;
}
.et-grade-ribbon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.et-grade-cell {
  --gc: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
  border-top: 2px solid var(--gc);
  border-radius: var(--radius-sm);
  padding: 6px 4px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.et-grade-letter {
  font-size: 11px;
  font-weight: 700;
  color: var(--gc);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.et-grade-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.et-grade-Aplus { --gc: #22c55e; }      /* green-500 — A+ */
.et-grade-A     { --gc: #4ade80; }      /* green-400 — A */
.et-grade-B     { --gc: #38bdf8; }      /* sky-400  — B */
.et-grade-C     { --gc: #fbbf24; }      /* amber-400 — C */
.et-grade-D     { --gc: #fb923c; }      /* orange-400 — D */
.et-grade-F     { --gc: #ef4444; }      /* red-500   — F */

/* Right zone — leaders + momentum */
.et-leaders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.et-leader {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.et-leader-sym {
  font-weight: 700;
  color: var(--text);
  min-width: 56px;
  letter-spacing: 0.2px;
}
.et-leader-score {
  color: var(--up);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.et-leader-empty { color: var(--text-faint); font-size: 12px; }
.et-summary-mom-row {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border2);
}
.et-summary-mom b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* Mobile: collapse the divider, stack zones */
@media (max-width: 720px) {
  .et-summary-card { padding: 14px 14px 12px; gap: 12px; }
  .et-summary-zone + .et-summary-zone {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border2);
    padding-top: 12px;
  }
  .et-summary-median { font-size: 28px; }
}

/* Filters */
.et-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.et-filter-select,
.et-search {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  min-width: 140px;
  font-family: inherit;
}
.et-filter-select:focus,
.et-search:focus {
  outline: none;
  border-color: var(--accent);
}
.et-search { min-width: 220px; flex: 1; max-width: 340px; }
.et-info-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.et-info-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* Ranking table */
.et-rank-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  min-height: 220px;
}
.et-rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  table-layout: auto;
}
.et-rank-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.et-rank-table th.et-sortable { cursor: pointer; user-select: none; }
.et-rank-table th.et-sortable:hover { color: var(--accent); }
.et-rank-table th.et-sorted-asc::after  { content: ' ▲'; color: var(--accent); }
.et-rank-table th.et-sorted-desc::after { content: ' ▼'; color: var(--accent); }
.et-rank-table tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text);
}
.et-rank-table tbody tr { cursor: pointer; transition: background 0.1s ease; }
.et-rank-table tbody tr:hover { background: var(--surface-hover); }
.et-rank-table .et-num { text-align: right; font-variant-numeric: tabular-nums; }
.et-rank-table .et-sym { font-weight: 700; color: var(--accent); }
.et-ticker-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.et-ticker-link:hover { border-bottom-color: currentColor; opacity: 0.85; }
.et-rank-table .et-company {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.et-rank-table .et-sector-cell {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.et-rank-table .et-final { font-weight: 700; color: var(--text); }
/* Give the first (rank) column a tight fixed footprint */
.et-rank-table th:first-child,
.et-rank-table td:first-child { width: 36px; text-align: right; padding-right: 8px; }
/* AI badge cells can sit tighter than default text cells */
.et-rank-table td.et-ai-cell { padding-left: 6px; padding-right: 6px; }

/* Pillar score chips */
.et-pillar {
  display: inline-block;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.et-pillar-p5 { background: rgba(14,179,91,0.20);  color: #23d47c; }
.et-pillar-p4 { background: rgba(14,179,91,0.12);  color: #6fdcaa; }
.et-pillar-p3 { background: rgba(176,190,197,0.10); color: var(--text); }
.et-pillar-p2 { background: rgba(194,74,74,0.10);  color: #D87878; }
.et-pillar-p1 { background: rgba(194,74,74,0.18);  color: #D87878; }
.et-pillar-na { background: transparent; color: var(--text-faint); }

/* Grade badges */
.et-grade {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.4px;
}
.et-grade-ap, .et-grade-a   { background: rgba(14,179,91,0.22); color: #23d47c; }
.et-grade-b                 { background: rgba(79,152,163,0.22); color: #6cd4e0; }
.et-grade-c                 { background: rgba(255,193,7,0.20); color: #ffcf4c; }
.et-grade-d                 { background: rgba(255,138,64,0.22); color: #ff9f5a; }
.et-grade-f                 { background: rgba(194,74,74,0.22); color: #D87878; }
.et-grade-na                { background: transparent; color: var(--text-faint); }

/* Trade tag pills */
.et-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.et-tag-strong-buy, .et-tag-buy          { background: rgba(14,179,91,0.14);  color: #23d47c; border-color: rgba(14,179,91,0.30); }
.et-tag-positive                         { background: rgba(79,152,163,0.14); color: #6cd4e0; border-color: rgba(79,152,163,0.30); }
.et-tag-watch, .et-tag-hold              { background: rgba(255,193,7,0.14);  color: #ffcf4c; border-color: rgba(255,193,7,0.30); }
.et-tag-avoid                            { background: rgba(255,138,64,0.14); color: #ff9f5a; border-color: rgba(255,138,64,0.30); }
.et-tag-negative, .et-tag-sell           { background: rgba(194,74,74,0.14);  color: #D87878; border-color: rgba(194,74,74,0.30); }
.et-tag-na                               { background: transparent; }

/* Confidence badges */
.et-conf {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
}
.et-conf-high    { background: rgba(14,179,91,0.16); color: #23d47c; border-color: rgba(14,179,91,0.30); }
.et-conf-medium  { background: rgba(79,152,163,0.14); color: #6cd4e0; border-color: rgba(79,152,163,0.30); }
.et-conf-low     { background: rgba(194,74,74,0.14); color: #D87878; border-color: rgba(194,74,74,0.30); }
.et-conf-na      { background: transparent; color: var(--text-faint); }

/* Loading / empty / error */
.et-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 10px;
  color: var(--text-muted);
  font-size: 13px;
}
.et-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: et-spin 0.7s linear infinite;
}
@keyframes et-spin { to { transform: rotate(360deg); } }
.et-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.et-error {
  padding: 18px 16px;
  color: #ff8f95;
  background: rgba(194,74,74,0.08);
  border: 1px solid rgba(194,74,74,0.25);
  border-radius: var(--radius);
  font-size: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.et-retry {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Detail drawer */
.et-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}
.et-drawer.et-drawer-open {
  pointer-events: auto;
  visibility: visible;
}
.et-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.et-drawer.et-drawer-open .et-drawer-backdrop { opacity: 1; }
.et-drawer-panel {
  position: absolute;
  top: 24px;
  right: 24px;
  width: min(620px, 92vw);
  max-height: calc(100vh - 48px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  box-shadow: -6px 12px 32px rgba(0,0,0,0.55);
  transform: translateX(calc(100% + 24px));
  transition: transform 0.28s ease;
  overflow-y: auto;
  padding: 20px 22px 24px;
}
.et-drawer.et-drawer-open .et-drawer-panel { transform: translateX(0); }
.et-drawer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
}
.et-drawer-close:hover { background: var(--surface-hover); color: var(--text); }

.et-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.et-drawer-sym {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3px;
}
.et-drawer-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.et-drawer-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}
.et-drawer-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-size: 12px;
}
.et-drawer-final {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.et-drawer-final b { color: var(--text); font-size: 18px; margin-left: 4px; font-variant-numeric: tabular-nums; }

.et-drawer-pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.et-drawer-pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
}
.et-drawer-pillar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.35;
}
.et-drawer-pillar-weight {
  display: block;
  margin: 2px 0 0;
  color: var(--text-faint);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.6px;
}
.et-drawer-pillar-val { font-size: 16px; }
.et-drawer-pillar-val .et-pillar { min-width: 48px; padding: 4px 8px; font-size: 14px; }

.et-drawer-section { margin-top: 18px; }
.et-drawer-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
}
.et-drawer-events {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.et-drawer-events th,
.et-drawer-events td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border2);
  text-align: center;
  white-space: nowrap;
}
.et-drawer-events th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.et-drawer-events .et-num { text-align: center; font-variant-numeric: tabular-nums; }

.et-tone-summary {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.et-tone-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.et-tone-list li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px dashed var(--border2);
  padding: 4px 0;
}
.et-tone-k { color: var(--text-muted); text-transform: capitalize; }
.et-tone-v { color: var(--text); font-weight: 600; }

.et-factors {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-muted);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ─── ET drawer: Financial Summary section (tiles + EPS chart) ─── */
.et-drawer-financials .et-drawer-fin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.et-drawer-fin-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.et-drawer-fin-label {
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-drawer-fin-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-drawer-fin-val.earn-kpi-pos  { color: #3fb9a8; }
.et-drawer-fin-val.earn-kpi-neg  { color: #e06262; }
.et-drawer-fin-val.earn-kpi-warn { color: #d6a44a; }

.et-drawer-chart-wrap {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 12px 10px;
}
.et-drawer-chart-title {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.et-drawer-chart-canvas {
  width: 100%;
  height: 200px;
  display: block;
}
.et-drawer-beat-summary {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.et-drawer-beat-summary strong { color: var(--text); }
.et-drawer-open-chart-row {
  text-align: center;
  margin-top: 10px;
}
.et-drawer-open-chart-link {
  color: #3fb9a8;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.et-drawer-open-chart-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .et-drawer-pillars { grid-template-columns: repeat(2, 1fr); }
  .et-tone-list { grid-template-columns: 1fr; }
  .et-header-meta { gap: 12px; }
  .et-drawer-panel {
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }
  .et-drawer-financials .et-drawer-fin-grid { grid-template-columns: repeat(2, 1fr); }
  .et-drawer-chart-canvas { height: 170px; }
}

/* ─── Earnings Trade: title info icon + scoring methodology modal ─── */
.et-header-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.et-title-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.et-title-info:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: scale(1.05);
}
.et-title-info:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Info modal */
.et-info-modal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
}
.et-info-modal[aria-hidden="false"] { pointer-events: auto; }
.et-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.et-info-modal[aria-hidden="false"] .et-info-backdrop { opacity: 1; }
.et-info-panel {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -12px);
  width: min(720px, 92vw);
  max-height: calc(100vh - 80px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  overflow-y: auto;
  padding: 24px 28px 28px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.22s ease;
}
.et-info-modal[aria-hidden="false"] .et-info-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}
.et-info-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.et-info-close:hover { color: var(--text); border-color: var(--accent); background: var(--accent-bg); }
.et-info-panel h3 {
  margin: 0 36px 10px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.et-info-panel h4 {
  margin: 20px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}
.et-info-panel p {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.et-info-panel p.et-info-lead {
  color: var(--text-muted);
  font-size: 13px;
}
.et-info-panel p.et-info-foot {
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 12px;
}
.et-info-panel b { color: var(--text); font-weight: 700; }
.et-info-pillars, .et-info-sector {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.et-info-pillars li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  line-height: 1.5;
}
.et-info-pillars li b {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--accent);
  font-weight: 700;
}
.et-info-pillars .et-info-w {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.et-info-pillars li span {
  color: var(--text-muted);
}
.et-info-sector li {
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border2);
}
.et-info-sector li:last-child { border-bottom: 0; }
.et-info-sector li b { margin-right: 8px; }

/* AI Impact badge cells in the ET ranking table (reuse .scr-ai-* colours) */
.et-rank-table td.et-ai-cell {
  white-space: nowrap;
  padding: 6px 10px;
  text-align: left;
}

/* Pillar sparkline cell — 5 vertical bars (Exec / Guide / Qual / Tone / Mom) */
.et-rank-table td.et-spark-cell {
  padding: 4px 8px;
  width: 72px;
  cursor: help;
  vertical-align: middle;
}
.et-spark-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  width: 58px;
}
.et-spark-bar {
  flex: 1 1 0;
  min-width: 6px;
  height: 6%;
  background: var(--border2);
  border-radius: 2px 2px 0 0;
  transition: opacity 0.12s ease;
}
.et-spark-bar:hover { opacity: 0.8; }
.et-spark-empty { background: var(--border2); opacity: 0.4; height: 6%; }

/* Field-reference table inside the ET scoring info modal */
.et-info-fields-wrap {
  margin-top: 10px;
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--border2);
  border-radius: 8px;
}
.et-info-fields {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}
.et-info-fields thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elev-2, var(--bg));
  color: var(--text);
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2);
  z-index: 1;
}
.et-info-fields tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2);
  color: var(--text-muted);
  vertical-align: top;
}
.et-info-fields tbody tr:last-child td { border-bottom: 0; }
.et-info-fields tbody td:first-child {
  white-space: nowrap;
  color: var(--text);
  width: 120px;
}

/* ============================================================
   chartonly mode — embedded inside ticker-page Adv Chart iframe.
   Hide every chrome element and full-screen the expanded chart.
   ============================================================ */
body.chartonly-mode {
  background: #131316;
  overflow: hidden;
}
body.chartonly-mode .mi-topbar,
body.chartonly-mode .db-tabs-nav,
body.chartonly-mode .db-tab-panel,
body.chartonly-mode .news-sidebar,
body.chartonly-mode .mi-footer,
body.chartonly-mode footer,
body.chartonly-mode .db-modals,
body.chartonly-mode #miTopbar {
  display: none !important;
}
/* Re-show only the elements the expanded chart needs (it gets portaled to body) */
body.chartonly-mode .wl-chart-panel.wl-chart-expanded,
body.chartonly-mode #wlChartSection,
body.chartonly-mode .wl-chart-section {
  display: flex !important;
}
body.chartonly-mode .wl-chart-panel.wl-chart-expanded {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  z-index: 10000 !important;
}
/* Hide the modal backdrop when chart fills the viewport */
body.chartonly-mode .wl-chart-backdrop {
  display: none !important;
}


/* ============================================================
   Inline-overlay variant of the account-overlay backdrop, used
   by pages that open the modal in place (e.g. AI Lab right-rail
   user icon). Translucent dark wash + heavy blur over the
   underlying page gives a professional frosted-glass effect.
   ============================================================ */
.acct-overlay.acct-overlay--opaque {
  background: rgba(8, 11, 17, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* Sit above AI Lab floating windows (z-index up to 9999) */
  z-index: 12000;
}

/* ============================================================
   Account modal brand cluster (logo + wordmark + divider)
   shown to the left of the "Account" title in the modal header.
   Mirrors the topbar .mi-brand visual but sized for a modal.
   ============================================================ */
.acct-modal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.acct-modal-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(79, 152, 163, 0.35));
  flex-shrink: 0;
}
.acct-modal-brand-mark svg { display: block; width: 100%; height: 100%; }
.acct-modal-brand-name {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 27px;
  letter-spacing: -0.015em;
  display: inline-flex;
  white-space: nowrap;
  line-height: 1;
}
.acct-modal-brand-name-strong { font-weight: 700; color: var(--text, #e6edf3); }
.acct-modal-brand-name-light  { font-weight: 400; color: #6FBCC9; margin-left: 1px; }
.acct-modal-brand-divider {
  width: 1px;
  height: 33px;
  background: var(--border, #30363d);
  margin: 0 4px;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .acct-modal-brand-name { font-size: 24px; }
  .acct-modal-brand-divider { display: none; }
  .acct-modal-brand { gap: 8px; }
}

/* =========================================================
   Theme toggle button (top-right of mi-topbar) + light mode
   Light mode is currently scoped to the Earnings detail panel
   (.earn-hub-detail). Other pages remain dark for now.
   ========================================================= */

.mi-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #c8d0db;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mi-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.mi-theme-toggle:focus-visible {
  outline: 2px solid #3fb9a8;
  outline-offset: 2px;
}
.mi-theme-toggle .mi-theme-icon { display: block; }
/* Show moon in dark mode (suggesting "click to go light"), sun in light mode. */
:root[data-theme="dark"]  .mi-theme-toggle .mi-theme-icon--sun  { display: none; }
:root[data-theme="light"] .mi-theme-toggle .mi-theme-icon--moon { display: none; }

/* In light mode the topbar itself stays dark to preserve site identity until
   the rest of the chrome is migrated. The toggle button just inverts its
   colors slightly so the active state is obvious. */
:root[data-theme="light"] .mi-theme-toggle {
  background: rgba(255, 215, 110, 0.14);
  border-color: rgba(255, 215, 110, 0.45);
  color: #ffd76e;
}
:root[data-theme="light"] .mi-theme-toggle:hover {
  background: rgba(255, 215, 110, 0.22);
}

/* ---------- Light mode: Earnings detail panel ---------- */
:root[data-theme="light"] .earn-hub-detail {
  background: #f6f8fb;
  border-color: rgba(15, 23, 42, 0.10);
  color: #1f2a37;
}
:root[data-theme="light"] .earn-detail-tabs {
  border-bottom-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] .earn-detail-tab {
  color: #6b7785;
}
:root[data-theme="light"] .earn-detail-tab:hover {
  color: #1f2a37;
}
:root[data-theme="light"] .earn-detail-tab.active {
  color: #2a8f80;
  border-bottom-color: #2a8f80;
}
:root[data-theme="light"] .earn-detail-body {
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
:root[data-theme="light"] .earn-detail-placeholder {
  color: #6b7785;
}

/* Header */
:root[data-theme="light"] .earn-detail-logo {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] .earn-detail-logo-fb {
  background: rgba(42, 143, 128, 0.12);
  color: #2a8f80;
}
:root[data-theme="light"] .earn-detail-info h3 {
  color: #0f172a;
}
:root[data-theme="light"] .earn-detail-info .earn-detail-name {
  color: #6b7785;
}
:root[data-theme="light"] .earn-detail-info .earn-detail-price {
  color: #1f2a37;
}
:root[data-theme="light"] .earn-detail-change.up { color: #15803d; }
:root[data-theme="light"] .earn-detail-change.down { color: #b91c1c; }
:root[data-theme="light"] .earn-detail-ext {
  color: #4a5562;
}
:root[data-theme="light"] .earn-detail-ext-label {
  color: #6b7785;
}

/* Stats row */
:root[data-theme="light"] .earn-detail-stat {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .earn-detail-stat-label {
  color: #6b7785;
}
:root[data-theme="light"] .earn-detail-stat-val {
  color: #1f2a37;
}
:root[data-theme="light"] .earn-detail-stat-val.earn-kpi-pos { color: #15803d; }
:root[data-theme="light"] .earn-detail-stat-val.earn-kpi-neg { color: #b91c1c; }
:root[data-theme="light"] .earn-detail-stat-val.earn-kpi-warn { color: #b45309; }

/* Chart panel */
:root[data-theme="light"] .earn-detail-chart-wrap {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
:root[data-theme="light"] .earn-detail-chart-title {
  color: #2a8f80;
  border-bottom-color: rgba(42, 143, 128, 0.22);
}
:root[data-theme="light"] .earn-detail-empty-chart {
  color: #6b7785;
}
:root[data-theme="light"] .earn-detail-beat-summary {
  color: #4a5562;
}
:root[data-theme="light"] .earn-detail-beat-summary strong {
  color: #15803d;
}

/* Beat banner */
:root[data-theme="light"] .earn-beat-banner {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] .earn-beat-banner.beat {
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.10), rgba(21, 128, 61, 0.02));
  border-color: rgba(21, 128, 61, 0.40);
  box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.14) inset;
}
:root[data-theme="light"] .earn-beat-banner.miss {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.10), rgba(185, 28, 28, 0.02));
  border-color: rgba(185, 28, 28, 0.40);
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.14) inset;
}
:root[data-theme="light"] .earn-beat-banner.inline {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .earn-beat-banner-verdict { color: #6b7785; }
:root[data-theme="light"] .earn-beat-banner.beat .earn-beat-banner-verdict { color: #15803d; }
:root[data-theme="light"] .earn-beat-banner.miss .earn-beat-banner-verdict { color: #b91c1c; }
:root[data-theme="light"] .earn-beat-banner-eps { color: #0f172a; }
:root[data-theme="light"] .earn-beat-banner.beat .earn-beat-banner-eps { color: #15803d; }
:root[data-theme="light"] .earn-beat-banner.miss .earn-beat-banner-eps { color: #b91c1c; }
:root[data-theme="light"] .earn-beat-banner-sub { color: #6b7785; }
:root[data-theme="light"] .earn-beat-banner-surprise { color: #0f172a; }
:root[data-theme="light"] .earn-beat-banner.beat .earn-beat-banner-surprise { color: #15803d; }
:root[data-theme="light"] .earn-beat-banner.miss .earn-beat-banner-surprise { color: #b91c1c; }

/* Earnings release CTA */
:root[data-theme="light"] .earn-release-cta {
  background: rgba(42, 143, 128, 0.08);
  border-color: rgba(42, 143, 128, 0.30);
}
:root[data-theme="light"] .earn-release-cta .earn-release-link {
  color: #2a8f80;
}
:root[data-theme="light"] .earn-release-cta .earn-release-link:hover {
  color: #1f6f63;
}
:root[data-theme="light"] .earn-release-cta .earn-release-meta {
  color: #6b7785;
}

/* =========================================================
   Light mode — full Earnings calendar page
   Scope: everything inside #dbtab-earnings (Calendar + Pulse).
   The mi-topbar and dashboard tab strip stay dark intentionally.
   ========================================================= */

/* ---- Sub-tabs (Calendar | Pulse) within the earnings tab ---- */
:root[data-theme="light"] #dbtab-earnings .db-subtabs-row {
  border-bottom-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .db-subtab-btn {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .db-subtab-btn:hover:not(.active) {
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .db-subtab-btn.active {
  color: #2a8f80;
  border-bottom-color: #2a8f80;
}

/* ---- US/UK market switch (only inside earnings tab) ---- */
:root[data-theme="light"] #dbtab-earnings .mkt-switch {
  border-color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .mkt-switch-btn {
  color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .mkt-switch-btn + .mkt-switch-btn {
  border-left-color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .mkt-switch-btn:hover {
  background: rgba(42, 143, 128, 0.10);
  color: #1f6f63;
}
:root[data-theme="light"] #dbtab-earnings .mkt-switch-btn.active,
:root[data-theme="light"] #dbtab-earnings .mkt-switch-btn[aria-selected="true"] {
  background: #2a8f80;
  color: #ffffff;
}

/* ---- Earnings hub topbar (arrows, title, view toggle, search, filter) ---- */
:root[data-theme="light"] #dbtab-earnings .earn-hub-arrow {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .earn-hub-arrow:hover {
  background: rgba(42, 143, 128, 0.10);
  border-color: rgba(42, 143, 128, 0.40);
  color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .earn-hub-title {
  color: #0f172a;
}
:root[data-theme="light"] #dbtab-earnings .earn-hub-title .earn-hub-dates {
  color: #6b7785;
}

/* Filter dropdown */
:root[data-theme="light"] #dbtab-earnings .earn-filter-select {
  background-color: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #1f2a37;
  /* Replace chevron stroke color via embedded svg (slate instead of grey) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%234a5562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E");
}
:root[data-theme="light"] #dbtab-earnings .earn-filter-select:hover,
:root[data-theme="light"] #dbtab-earnings .earn-filter-select:focus {
  background-color: #ffffff;
  border-color: rgba(42, 143, 128, 0.55);
}
:root[data-theme="light"] #dbtab-earnings .earn-filter-select option {
  background: #ffffff;
  color: #1f2a37;
}

/* View toggle (list / grid) */
:root[data-theme="light"] #dbtab-earnings .earn-view-toggle {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .earn-view-btn {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-view-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .earn-view-btn.active {
  background: rgba(42, 143, 128, 0.14);
  border-color: rgba(42, 143, 128, 0.40);
  color: #2a8f80;
}

/* Search box */
:root[data-theme="light"] #dbtab-earnings .earn-search-icon {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-search-input {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .earn-search-input::placeholder {
  color: #94a3b8;
}
:root[data-theme="light"] #dbtab-earnings .earn-search-input:hover,
:root[data-theme="light"] #dbtab-earnings .earn-search-input:focus {
  background: #ffffff;
  border-color: rgba(42, 143, 128, 0.55);
}
:root[data-theme="light"] #dbtab-earnings .earn-search-clear {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-search-clear:hover {
  color: #1f2a37;
  background: rgba(15, 23, 42, 0.06);
}

/* Search toast (light mode) */
:root[data-theme="light"] #dbtab-earnings .earn-search-toast,
:root[data-theme="light"] .earn-search-toast {
  background: #ffffff;
  border-color: rgba(185, 28, 28, 0.40);
  color: #b91c1c;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .earn-search-toast.success {
  border-color: rgba(42, 143, 128, 0.40);
  color: #1f6f63;
}

/* ---- Week grid columns ---- */
:root[data-theme="light"] #dbtab-earnings .earn-day-col {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col-header .earn-col-day {
  color: #0f172a;
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col-header .earn-col-date {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col-body {
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

/* Today highlighting */
:root[data-theme="light"] #dbtab-earnings .earn-day-col.earn-today {
  border-color: rgba(79, 152, 163, 0.55);
  background: rgba(79, 152, 163, 0.06);
  box-shadow: 0 0 14px rgba(79, 152, 163, 0.12);
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col.earn-today .earn-day-col-header {
  border-bottom-color: rgba(79, 152, 163, 0.30);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-day.earn-today .earn-list-panel {
  border-color: rgba(79, 152, 163, 0.50);
  background: rgba(79, 152, 163, 0.05);
  box-shadow: 0 0 12px rgba(79, 152, 163, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-day.earn-today .earn-list-date-label-num {
  color: #4F98A3;
}
:root[data-theme="light"] #dbtab-earnings .earn-today-badge {
  color: #ffffff;
  background: #4F98A3;
}

/* Section labels (Before Open / After Close) */
:root[data-theme="light"] #dbtab-earnings .earn-section-label,
:root[data-theme="light"] #dbtab-earnings .earn-list-section-label {
  color: #6b7785;
}

/* Hub-level loading + empty */
:root[data-theme="light"] #dbtab-earnings .earn-hub-loading,
:root[data-theme="light"] #dbtab-earnings .earn-hub-empty {
  color: #4a5562;
}

/* ---- Company tiles (column view) ---- */
:root[data-theme="light"] #dbtab-earnings .earn-tile:hover {
  background: rgba(42, 143, 128, 0.08);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .earn-tile.active {
  background: rgba(42, 143, 128, 0.14);
  box-shadow: 0 0 0 1px #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-logo {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-fallback {
  background: rgba(42, 143, 128, 0.10);
  color: #2a8f80;
  border-color: rgba(42, 143, 128, 0.30);
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-ticker {
  color: #1f2a37;
}
/* Beat dots — keep colored but adjust the inset/glow for light bg */
:root[data-theme="light"] #dbtab-earnings .earn-tile-dot {
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) inset;
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-dot-beat {
  background: #16a34a;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) inset, 0 0 4px rgba(22, 163, 74, 0.35);
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-dot-miss {
  background: #dc2626;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) inset, 0 0 4px rgba(220, 38, 38, 0.35);
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-dot-inline {
  background: #d97706;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) inset;
}
:root[data-theme="light"] #dbtab-earnings .earn-tile-dot-pending {
  background: rgba(15, 23, 42, 0.20);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) inset;
}

/* ---- List view rows ---- */
:root[data-theme="light"] #dbtab-earnings .earn-list-wrap {
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-date-label-day {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-date-label-num {
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-panel {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-row:hover {
  background: rgba(42, 143, 128, 0.07);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-row.active {
  background: rgba(42, 143, 128, 0.13);
  box-shadow: inset 0 0 0 1px rgba(42, 143, 128, 0.40);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-logo {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-logo-fb {
  background: rgba(42, 143, 128, 0.10);
  color: #2a8f80;
  border-color: rgba(42, 143, 128, 0.25);
}
:root[data-theme="light"] #dbtab-earnings .earn-list-ticker {
  color: #0f172a;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-time {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-price {
  color: #0f172a;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-change.up {
  color: #15803d;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-change.down {
  color: #b91c1c;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-pill {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.10);
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-pill-label {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .earn-list-empty-day {
  color: #6b7785;
}

/* ---- Skeleton tiles in light mode ---- */
:root[data-theme="light"] #dbtab-earnings .earn-skel-tile {
  background: rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] #dbtab-earnings .earn-skel-sq,
:root[data-theme="light"] #dbtab-earnings .earn-skel-txt {
  background: rgba(15, 23, 42, 0.08);
}

/* ---- Pulse subtab ---- */
:root[data-theme="light"] #dbtab-earnings .pulse-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] #dbtab-earnings .pulse-title-group .section-title {
  color: #0f172a;
}
:root[data-theme="light"] #dbtab-earnings .pulse-subtitle {
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .pulse-latest-date {
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .pulse-badge {
  background: rgba(42, 143, 128, 0.10);
  color: #2a8f80;
  border-color: rgba(42, 143, 128, 0.30);
}
:root[data-theme="light"] #dbtab-earnings .pulse-progress {
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .pulse-progress-bar {
  background: rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] #dbtab-earnings .pulse-progress-fill {
  background: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .pulse-info-btn {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .pulse-info-btn:hover {
  color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .pulse-tooltip {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  color: #1f2a37;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] #dbtab-earnings .pulse-select-label {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .pulse-select {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .pulse-select:hover,
:root[data-theme="light"] #dbtab-earnings .pulse-select:focus {
  border-color: rgba(42, 143, 128, 0.55);
}
:root[data-theme="light"] #dbtab-earnings .pulse-pill-toggle {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .pulse-pill-btn {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .pulse-pill-btn:hover {
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .pulse-pill-btn.active {
  background: rgba(42, 143, 128, 0.14);
  color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .pulse-status-row {
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .pulse-empty {
  color: #4a5562;
}
:root[data-theme="light"] #dbtab-earnings .pulse-empty code {
  background: rgba(15, 23, 42, 0.05);
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .pulse-source {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .pulse-commentary-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .pulse-commentary-label {
  color: #2a8f80;
}
:root[data-theme="light"] #dbtab-earnings .pulse-commentary-meta {
  color: #6b7785;
}
:root[data-theme="light"] #dbtab-earnings .pulse-commentary-body {
  color: #1f2a37;
}
:root[data-theme="light"] #dbtab-earnings .pulse-commentary-body h4 {
  color: #0f172a;
}

/* ============================================================
   Light mode — fixes for missed surfaces (page underlay + today
   column solid background + readable headers)
   ============================================================ */

/* Page-level underlay: the earnings tab panel itself + key wrappers
   so the area surrounding the white columns is no longer dark. */
:root[data-theme="light"] #dbtab-earnings {
  background: #f6f8fb;
}
:root[data-theme="light"] #dbtab-earnings .earn-hub,
:root[data-theme="light"] #dbtab-earnings .earn-hub-body,
:root[data-theme="light"] #dbtab-earnings .earn-hub-left,
:root[data-theme="light"] #dbtab-earnings .earn-hub-week {
  background: transparent;
}

/* Today column — original semi-transparent teal lets dark page bleed
   through. Use a solid pale teal tinted on white. */
:root[data-theme="light"] #dbtab-earnings .earn-day-col.earn-today {
  background: #eef7f6;
  border-color: rgba(42, 143, 128, 0.45);
  box-shadow: 0 0 14px rgba(42, 143, 128, 0.10);
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col.earn-today .earn-day-col-header {
  border-bottom-color: rgba(42, 143, 128, 0.25);
}
/* Day name + date text inside the today column header (e.g. "Mon 27", "Apr").
   Inherits .earn-col-day default color (#eee) on dark — must be re-coloured
   on the today column too, since we overrode its background. */
:root[data-theme="light"] #dbtab-earnings .earn-day-col.earn-today .earn-col-day {
  color: #0f172a;
}
:root[data-theme="light"] #dbtab-earnings .earn-day-col.earn-today .earn-col-date {
  color: #4a5562;
}

/* Today list-view panel — same fix: solid pale teal */
:root[data-theme="light"] #dbtab-earnings .earn-list-day.earn-today .earn-list-panel {
  background: #eef7f6;
  border-color: rgba(42, 143, 128, 0.45);
  box-shadow: 0 0 12px rgba(42, 143, 128, 0.10);
}

/* =====================================================================
 * SLP info popover + chart style toggle
 * (added 29 Apr 2026 — slp4)
 * ===================================================================== */

/* '?' info icon next to the SLP toggle inside the indicators dropdown. */
.wl-slp-row { position: relative; }
.wl-slp-info-btn {
  margin-left: auto;
  width: 18px; height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #c9d1d9;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  font: 600 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
.wl-slp-info-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}

/* Popover panel — sits inside the indicators dropdown, below the SLP row.
   Constrained to ~340px, scrolls if too tall, and pulls into view via z-index. */
.wl-slp-info-panel {
  margin: 6px 12px 4px;
  padding: 10px 12px;
  background: #11161e;
  color: #c9d1d9;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  font: 12px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 340px;
  max-height: 340px;
  overflow-y: auto;
}
.wl-slp-info-panel[hidden] { display: none; }
.wl-slp-info-title {
  font-weight: 700;
  color: #f0f6fc;
  margin-bottom: 6px;
  font-size: 13px;
}
.wl-slp-info-h {
  font-weight: 700;
  color: #8b949e;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  margin: 8px 0 4px;
}
.wl-slp-info-panel p { margin: 0 0 8px; }
.wl-slp-info-panel ul {
  margin: 0 0 4px;
  padding-left: 16px;
}
.wl-slp-info-panel li { margin-bottom: 4px; }
.wl-slp-info-panel b { color: #f0f6fc; }

/* ============================================================
   slp6 — single-row chart toolbar (replaces slp5 multi-row).
   Design: compact segmented controls, unified 24px height,
   teal accent (rgba(79,152,163,0.22)) for active states.
   Borrowed from AI Lab .ailab-chart-stylegroup pattern.
   ============================================================ */

/* Force the toolbar onto a single line. The wider TF group + indicators
   + RSI + style fits in ~600px on desktop; falls back to wrap on narrow. */
.wl-chart-controls--slp6 {
  max-width: none;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  /* still allow wrap on tablet < 900px so it doesn't overflow horizontally */
}
@media (max-width: 900px) {
  .wl-chart-controls--slp6 { flex-wrap: wrap; }
}

/* Bar interval segmented control */
.wl-tf-group {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  overflow: hidden;
  height: 26px;
  background: rgba(255,255,255,0.02);
}
.wl-tf-btn {
  padding: 0 9px;
  background: transparent;
  border: none;
  color: #8b949e;
  font: 600 11px/26px 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  height: 100%;
  min-width: 30px;
  transition: color 0.15s, background 0.15s;
}
.wl-tf-btn + .wl-tf-btn { border-left: 1px solid rgba(255,255,255,0.06); }
.wl-tf-btn:hover { color: #e6edf3; background: rgba(255,255,255,0.04); }
.wl-tf-btn.active {
  color: #fff;
  background: rgba(79,152,163,0.22);
}

/* Cap notice ("Max 60d for 5m"). Shown when the user drags the time-axis
   past the per-interval Yahoo cap. Subtle amber, no border. */
.wl-range-notice {
  font: 600 10px/1 'Inter', system-ui, sans-serif;
  color: #d29922;
  background: rgba(210,153,34,0.12);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.wl-range-notice[hidden] { display: none; }

/* Chart-style dropdown trigger (matches the existing Indicators dd). */
.wl-style-dd { position: relative; display: inline-block; }
.wl-style-trigger {
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  padding: 0 10px 0 12px;
  height: 26px;
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  color: #8b949e;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wl-style-trigger:hover { color: #e6edf3; background: rgba(255,255,255,0.04); }
.wl-style-trigger[aria-expanded="true"] {
  color: #fff;
  background: rgba(79,152,163,0.22);
  border-color: rgba(79,152,163,0.40);
}
.wl-style-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.wl-style-trigger[aria-expanded="true"] .wl-style-chevron { transform: rotate(180deg); }

.wl-style-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #131316;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  padding: 4px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wl-style-panel[hidden] { display: none; }
.wl-style-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #c9d1d9;
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.12s;
}
.wl-style-item:hover { background: rgba(255,255,255,0.04); }
.wl-style-item.active {
  background: rgba(79,152,163,0.22);
  color: #fff;
}
.wl-style-hint {
  font: 500 10px/1 'Inter', sans-serif;
  color: #6e7681;
  letter-spacing: 0.02em;
}
.wl-style-item.active .wl-style-hint { color: rgba(255,255,255,0.70); }

/* navfix3: tiny iconless 3D toggle replacing the Coloured/Neutral dropdown.
   Red glossy when on (coloured candles), grey when off (neutral). */
.wl-style-toggle .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.wl-style-toggle {
  height: 22px;
  width: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.6);
  cursor: pointer;
  user-select: none;
  display: inline-block;
  position: relative;
  background: linear-gradient(180deg, #5a5f66 0%, #3a3e44 55%, #2a2d31 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 3px rgba(0,0,0,0.35);
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.wl-style-toggle::after {
  /* glossy highlight on the top half */
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
.wl-style-toggle:hover { filter: brightness(1.08); }
.wl-style-toggle:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 1px 1px rgba(0,0,0,0.40);
}
.wl-style-toggle.is-on {
  color: #fff;
  border-color: rgba(120,40,40,0.75);
  background: linear-gradient(180deg, #c24a4a 0%, #a33a3a 55%, #7a2828 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 6px rgba(194,74,74,0.30),
    0 0 8px rgba(194,74,74,0.18);
}
.wl-style-toggle:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 0 2px rgba(79,152,163,0.55);
}

/* Harmonise Indicators trigger + RSI toggle to the same 26px height
   and teal accent so the row reads as one unified control set. */
.wl-chart-controls--slp6 .wl-indicators-trigger {
  height: 26px;
  padding: 0 10px 0 12px;
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.10);
  font: 600 11px/1 'Inter', system-ui, sans-serif;
}
.wl-chart-controls--slp6 .wl-indicators-trigger:hover {
  color: #e6edf3; background: rgba(255,255,255,0.04);
}
.wl-chart-controls--slp6 .wl-indicators-trigger[aria-expanded="true"] {
  color: #fff;
  background: rgba(79,152,163,0.22);
  border-color: rgba(79,152,163,0.40);
}
.wl-chart-controls--slp6 .wl-sma-toggle {
  height: 26px;
  padding: 0 12px;
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.10);
  font: 600 11px/26px 'Inter', system-ui, sans-serif;
}
.wl-chart-controls--slp6 .wl-sma-toggle:has(input:checked) {
  background: rgba(79,152,163,0.22);
  border-color: rgba(79,152,163,0.40);
  color: #fff;
}

/* Chart canvas wrap + crosshair legend (kept from slp5) */
.wl-chart-canvas-wrap {
  position: relative;
  width: 100%;
}
.wl-chart-legend {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 4;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: #c9d1d9;
  background: rgba(13, 17, 23, 0.78);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(48, 54, 61, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.wl-chart-legend.visible { opacity: 1; }
.wl-legend-sym { color: #4f98a3; font-weight: 700; margin-right: 4px; }
.wl-legend-tf  { color: #6e7681; margin-right: 8px; font-size: 10px; }
.wl-legend-k   { color: #6e7681; margin-right: 2px; }
.wl-legend-v   { color: #e6edf3; margin-right: 8px; font-weight: 600; }
.wl-legend-chg { margin-right: 8px; font-weight: 600; }
.wl-legend-up   { color: #3fb9a8; }
.wl-legend-down { color: #f85149; }

/* ──────────────────────────────────────────────────────────────────────────
   AI Social sub-tab (admin-only) — iframe wrapper for /trending-beta?embed=1.
   The base .db-admin-only rule (≈L2735) hides with display:none and reveals
   as inline-flex; that works for tab buttons but the panel + frame wrapper
   need to lay out as block. These overrides re-enable block display when
   admin AND the panel is the active sub-tab. The iframe is sized to fill
   the available viewport height minus dashboard chrome.
   ────────────────────────────────────────────────────────────────────────── */
body[data-admin="1"] .db-subtab-panel.db-admin-only#dbsubtab-aisocial { display: block !important; }
body[data-admin="1"] .db-subtab-panel.db-admin-only#dbsubtab-aisocial:not(.active) { display: none !important; }
/* Iter 9o: parallel rules so non-admins with the flag enabled get the same
   block layout for the AI Social panel + iframe wrapper. */
body[data-trending-ai-social="1"] .db-subtab-panel.db-admin-only#dbsubtab-aisocial { display: block !important; }
body[data-trending-ai-social="1"] .db-subtab-panel.db-admin-only#dbsubtab-aisocial:not(.active) { display: none !important; }

.db-aisocial-frame-wrap {
  /* Trending Beta is dark-only; the frame’s own background paints, but a
     fallback colour avoids a white flash before the iframe loads on the
     first click. */
  background: #0d1114;
  border-radius: 6px;
  overflow: hidden;
  /* Clamp the iframe height to viewport so the page only scrolls inside
     the frame, not the dashboard shell. ~280px accounts for the topbar +
     sub-tab nav + a small gutter. */
  height: calc(100vh - 240px);
  min-height: 600px;
}
.db-aisocial-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0d1114;
  color-scheme: dark;
}
@media (max-width: 720px) {
  .db-aisocial-frame-wrap { height: calc(100vh - 200px); min-height: 500px; }
}