/* ============================================================
   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;
}

/* Iter 12DB — Markets Risk RAG bullets. The marker `[RAG:red|amber|green]`
   is parsed out of each bullet by dashboard.js markdownToHtml() and the
   <li> is tagged with `bl-rag` + `bl-rag-<level>`. We swap the default
   bullet dot for a coloured left-border + tinted background, override the
   ::before dot colour, and give a touch more padding so the strip reads as
   a discrete risk callout rather than a generic bullet. */
.db-bulletin-content li.bl-rag {
  padding: 6px 10px 6px 16px;
  margin: 6px 0;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
}
.db-bulletin-content li.bl-rag::before {
  display: none;
}
.db-bulletin-content li.bl-rag-red {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.db-bulletin-content li.bl-rag-amber {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.db-bulletin-content li.bl-rag-green {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}

/* Iter 12DB — admin-only mini refresh button injected into the Markets
   Risk h3 by renderBulletin(). Uses db-admin-only so it stays hidden for
   non-admin visitors. */
.db-bulletin-content h3 .db-bulletin-risk-refresh {
  display: none;
  margin-left: 8px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease, background 120ms ease;
  align-items: center;
  justify-content: center;
}
body[data-admin="1"] .db-bulletin-content h3 .db-bulletin-risk-refresh.db-admin-only {
  display: inline-flex !important;
}
.db-bulletin-content h3 .db-bulletin-risk-refresh:hover {
  opacity: 1;
  background: rgba(255,255,255,0.04);
}
.db-bulletin-content h3 .db-bulletin-risk-refresh.spinning svg {
  animation: db-bulletin-spin 900ms linear infinite;
}
@keyframes db-bulletin-spin { to { transform: rotate(360deg); } }

/* --- 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; }
}

/* ============================================================
   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; }
}

/* ============================================================
   Iter 12C — Index-card colour test (2026-05-12)
   ------------------------------------------------------------
   Scoped colour test on the Watchlists tab. Only the index
   ticker cards (.idx-item: S&P / DOW / NASDAQ / RUSSELL / VIX /
   FTSE / BTC / ETH) are repainted from var(--surface) #1c1c20
   to #2b2f3a. The watchlist table, chart panel, right insight
   sidebar and every other surface stay on var(--surface) and
   are intentionally NOT touched here.

   Companion overrides (all scoped to .idx-item only):
     - flash-up / flash-down keyframes settle to #2b2f3a so a
       price tick doesn't snap back to the old colour.
     - :hover bumped to #353a47 so hover stays distinct from
       the new base.

   Price-text colours (.idx-change, .idx-ah) are unchanged --
   var(--up) #0EB35B and var(--down) #C24A4A read fine on the
   new base, same contrast as before.

   To revert: delete this entire block + bump the dashboard.css
   cache-bust on dashboard.html. No other CSS changed.
   ============================================================ */
#dbtab-watchlists .idx-item {
  background: #2b2f3a;
}

/* Index card flash-up / flash-down animations settle back onto the
   new card colour. Override the keyframe endpoint so they don't
   snap to the old #1c1c20 after a price tick. */
@keyframes idx-flash-green-12c {
  0%   { background: rgba(14,179,91,0.15); }
  100% { background: #2b2f3a; }
}
@keyframes idx-flash-red-12c {
  0%   { background: rgba(194,74,74,0.15); }
  100% { background: #2b2f3a; }
}
#dbtab-watchlists .idx-item.flash-up   { animation: idx-flash-green-12c 0.6s ease; }
#dbtab-watchlists .idx-item.flash-down { animation: idx-flash-red-12c   0.6s ease; }

/* Brighter hover state so it stays distinct from the new base. */
#dbtab-watchlists .idx-item:hover {
  background: #353a47;
}

/* ============================================================
   Iter 12I — Watchlist panel outline test (2026-05-12)
   ------------------------------------------------------------
   Mirrors the Iter 12D AI Lab widget outline change onto the
   Watchlists tab. Default panel outlines were the solid
   var(--border) #2a2a30. Brightened to rgba(255,255,255,0.16)
   — the same value used on .ailab-window in Iter 12D so the
   two pages share a single outline language.

   Scope:
     - .wl-table-wrap       (left watchlist list / ticker table)
     - .wl-chart-section    (centre chart panel)
     - .wl-news-sidebar     (right insight column when open)
     - .wl-insight-tab      (collapsed insight tab, when closed)

   Explicitly NOT touched:
     - .idx-item (the index card row at the top) — already on
       Iter 12C's #2b2f3a fill + var(--border) edge, intentionally
       kept distinct from the page panels.
     - Any panel outside #dbtab-watchlists.

   To revert: delete this entire block + bump the dashboard.css
   cache-bust on dashboard.html. No other CSS changed.
   ============================================================ */
#dbtab-watchlists .wl-table-wrap,
#dbtab-watchlists .wl-chart-section,
#dbtab-watchlists .wl-news-sidebar,
#dbtab-watchlists .wl-insight-tab {
  border-color: rgba(255,255,255,0.16);
}

/* ============================================================
   Iter 12J — Watchlist 'Add ticker' input restyle (2026-05-12)
   ------------------------------------------------------------
   Bring the bottom-of-panel Add-ticker input visually in line
   with the global header search (.db-search-input). The two
   were close already (both var(--bg) background, both 6px
   vertical padding) but font-size, font-family fallback chain
   and placeholder colour differed enough to read as two
   different controls.

   Mirror the header search exactly:
     - font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif
     - font-size: 13px (was 12px)
     - padding: 6px 10px (was 6px 12px)
     - placeholder colour: var(--text-muted) (was var(--text-faint))
     - placeholder font-family: 'Inter', sans-serif, no text-transform

   To revert: delete this block + bump dashboard.css cache-bust.
   ============================================================ */
#dbtab-watchlists .wl-add-input {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  padding: 6px 10px;
}
#dbtab-watchlists .wl-add-input::placeholder {
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  text-transform: none;
}

/* ============================================================
   Iter 12V — Watchlist 'Add ticker' INPUT border (2026-05-12)
   ------------------------------------------------------------
   Clarification from user: the previous Iter 12V button-border
   attempts were on the wrong target. The control that needed a
   more visible edge is the .wl-add-input field, not the Add
   button. That field was carrying `1px solid var(--border)`
   (#2a2a30) which is barely visible against the dark panel.

   Bump it to `1px solid rgba(255,255,255,0.17)` — same family as
   the Iter 12I panel-outline value (0.16) so the field reads as
   a distinct input rather than blending into the panel
   background.

   Scoped to #dbtab-watchlists so the rule cannot leak onto any
   other .wl-add-input instance.

   To revert: delete this block + bump dashboard.css cache-bust.
   ============================================================ */
#dbtab-watchlists .wl-add-input {
  border-color: rgba(255,255,255,0.17);
  /* Iter 12V.1 (corrected) — match the header search input
     background. The .mi-search-mount .db-search-input rule in
     mi-nav.css uses rgba(255,255,255,0.04) for its panel-on-panel
     translucent fill (and 0.07 on focus). Mirror both values so the
     two inputs read as the same control in two places. */
  background: rgba(255,255,255,0.04);
}
#dbtab-watchlists .wl-add-input:focus {
  background: rgba(255,255,255,0.07);
}

/* ============================================================
   Iter 12W — Watchlist table header labels: brighter (2026-05-12)
   ------------------------------------------------------------
   The Ticker / Last / Day / AH column headers were rendering in
   --text-faint (#5A5957) which read washed-out against the
   panel surface. Bump to --text-muted (#ffffff80 = 50% white)
   so the labels are clearly readable while still subordinate to
   the row content. font-family is already 'Inter', sans-serif
   via the base .wl-table th rule — confirmed during this iter,
   no font change needed.

   Scoped under #dbtab-watchlists for defensive isolation.

   To revert: delete this block + bump dashboard.css cache-bust.
   ============================================================ */
#dbtab-watchlists .wl-table th {
  color: var(--text-muted);
}

/* ============================================================
   Iter 12CF — Mobile (≤640px) Watchlist Redesign (IG-style)
   ============================================================
   Phone-only redesign of /dashboard?dbtab=watchlists.
   - 4-cell row grid: Bid · Offer · Change · Change%
   - Full-screen detail swap with relocated chart + accordions
   Desktop + tablet (>640px) unchanged.
   ============================================================ */

/* Default state (desktop / tablet): hide every mobile-only piece */
.wl-mobile-thead,
.wl-mobile-cell,
.wl-mobile-detail {
  display: none;
}

@media (max-width: 640px) {
  /* Iter 12CK — Hide the chart panel from the list view on phones.
     The chart is only needed inside the full-screen detail view (where
     #wlChartSection is JS-relocated into #wlMobileChartSlot). Keeping
     the panel visible at the bottom of the list view wasted ~400px
     of vertical space on a small screen and showed a chart for
     whatever ticker was last selected. Safe to hide unconditionally:
     - List view: panel is empty / unwanted.
     - Detail view: existing rule below hides .wl-split-layout entirely
       when body.wl-mobile-detail-open is set, and the chart section
       has been moved out of .wl-chart-panel into #wlMobileChartSlot. */
  .wl-chart-panel { display: none !important; }

  /* ---- Row layout: stacked two-line block, 4-cell grid on row 2 ---- */
  /* Hide desktop cells we don't want on phone */
  #wlTable .wl-drag-handle,
  #wlTable .wl-ticker-logo,
  #wlTable .wl-actions,
  #wlTable .wl-action-btn,
  #wlTable .wl-info-btn { display: none !important; }

  /* Hide the desktop thead (the one with Ticker/Last/Day% columns) */
  #wlTable > thead:not(.wl-mobile-thead) { display: none !important; }

  /* Show the mobile thead as the 4-col header */
  #wlTable thead.wl-mobile-thead { display: block; }
  #wlTable thead.wl-mobile-thead tr {
    display: grid;
    /* Iter 12CM — 4-col grid (Price / Change / Change % / RVOL).
       12CL had 3 cols; 12CM adds RVOL as a tighter 0.7fr column on the
       right so the change/change% columns keep their breathing room
       (RVOL is always 4 chars wide: e.g. "1.08x" / "3.42x"). */
    grid-template-columns: 1fr 1fr 1fr 0.7fr;
    padding: 6px 14px 8px;
    border-bottom: 1px solid var(--border);
    gap: 6px;
  }
  #wlTable thead.wl-mobile-thead th {
    background: transparent !important;
    border: none !important;
    text-align: left;
    text-transform: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--accent, #4F98A3);
    padding: 0;
    line-height: 1.2;
  }
  #wlTable thead.wl-mobile-thead th:nth-child(n) { text-align: left; }

  /* Override the 767px-media flex layout — switch each row back to a block. */
  #wlTable tbody tr {
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    padding: 10px 14px 12px !important;
    gap: 0 !important;
  }
  #wlTable tbody tr:last-child { border-bottom: none !important; }
  #wlTable tbody tr.selected { background: var(--surface-hover) !important; }

  /* Row 1: ticker / name */
  #wlTable td:nth-child(1) {
    display: block;
    flex: none;
    padding: 0 0 4px 0;
    min-width: 0;
  }
  #wlTable .wl-ticker-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  #wlTable .wl-ticker-cell .ticker-sym {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }
  #wlTable .wl-ticker-cell .ticker-name {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Hide the original desktop Price + Change cells; replaced by the 4 mobile cells */
  #wlTable td:nth-child(2),
  #wlTable td:nth-child(3),
  #wlTable td:nth-child(4) { display: none !important; }

  /* Row 2: 4-cell grid (Bid · Offer · Change · Change%) */
  #wlTable .wl-mobile-cell {
    display: block;
    padding: 0;
    border: none;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: left;
  }
  #wlTable tbody tr {
    position: relative;
  }
  /* Wrap the 4 mobile cells into a CSS grid via the row's display: grid on
     a pseudo-context — simplest path is to make the cells display: inline-block
     in a flex container we create with a wrapping rule on the row itself. We
     piggy-back on the row being a block: select the 4 mobile cells as a group
     and lay them out via a sibling grid context using container-style display. */
  #wlTable tbody tr {
    /* Reuse a CSS grid by hoisting via display: grid on a wrapping after the
       ticker cell. Since cells are still <td> children of <tr>, we make the
       <tr> a grid where col1 = ticker (full width), col2..5 = 4 mobile cells.
       Iter 12CM — 4-col grid (Price / Change / Change % / RVOL); RVOL
       column narrower (0.7fr) since the value is always 4-5 chars. */
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 0.7fr;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 4px;
  }
  #wlTable tbody tr > td:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #wlTable tbody tr > td.wl-mobile-cell {
    grid-row: 2;
  }
  #wlTable .wl-mc-chg,
  #wlTable .wl-mc-chgpct { font-weight: 600; }
  #wlTable .wl-mc-chg.up,
  #wlTable .wl-mc-chgpct.up   { color: var(--up, #22c55e); }
  #wlTable .wl-mc-chg.down,
  #wlTable .wl-mc-chgpct.down { color: var(--down, #ef4444); }

  /* Iter 12CM — RVOL (relative volume vs 10-day avg). Neutral grey by
     default; .high (≥2x) amber; .veryhigh (≥3x) red — mirrors the
     emphasis tiers used by trading platforms (3× normal volume is the
     industry-standard breakout signal). Right-aligned + tabular-nums
     so values column-align cleanly when scrolling a long watchlist. */
  #wlTable .wl-mc-rvol {
    font-weight: 600;
    text-align: right;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  #wlTable .wl-mc-rvol.high     { color: #f59e0b; }   /* amber */
  #wlTable .wl-mc-rvol.veryhigh { color: #ef4444; }   /* red */
  /* Right-align the RVOL header cell to match its column. */
  #wlTable thead.wl-mobile-thead th:last-child { text-align: right; }

  /* Iter 12CL — Price cell (replaces 12CJ Last + Day Range pair).
     .wl-mc-last keeps its class name for DOM/JS continuity but is
     labelled "Price" in the thead and is live-updated by
     pollWatchlistPrices every 1s while the Watchlists tab is on-screen. */
  #wlTable .wl-mc-last { font-weight: 600; }
  /* .wl-price-flash animation already defined at the top of this file
     (keyframes wl-price-flash) — reusing it for mobile price cells. */
  /* Legacy .wl-mc-range rule kept harmless in case any cached row still
     carries the class; the td itself is no longer rendered in 12CL. */
  #wlTable .wl-mc-range {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Loading + empty rows shouldn't try to be a grid */
  #wlTable tbody tr.wl-loading-row,
  #wlTable tbody tr:has(.wl-empty-state) {
    display: block !important;
  }

  /* ---- Full-screen detail view swap ---- */
  body.wl-mobile-detail-open .wl-split-layout,
  body.wl-mobile-detail-open .wl-tabs-row,
  body.wl-mobile-detail-open .wl-news-ticker,
  body.wl-mobile-detail-open .wl-indexes-strip {
    display: none !important;
  }
  body.wl-mobile-detail-open .wl-mobile-detail { display: block; }

  .wl-mobile-detail {
    background: var(--bg, #131316);
    color: var(--text);
    min-height: 100vh;
  }

  /* Iter 12CI — The .wl-mobile-detail-header used to show a duplicate
     "TICKER / Company Name" title above the chart, which repeated the
     identity row inside .wl-chart-section (logo + ticker + name +
     price + change%) directly below. We collapse the header so it
     takes no vertical space, hide the duplicate title, and the back
     button is JS-relocated into .wl-chart-identity on open so it sits
     inline with the ticker row — reclaiming ~64px for the chart. */
  .wl-mobile-detail-header {
    display: none;
  }
  .wl-mobile-detail-title { display: none; }
  .wl-mobile-back {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border2, var(--border));
    color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: none;
  }
  .wl-mobile-back:hover { background: var(--surface-hover, var(--surface)); }

  /* Iter 12CI — when the back button is JS-relocated into
     .wl-chart-identity, give the row a touch more breathing room and
     keep the logo/text laid out as before. */
  .wl-chart-identity > .wl-mobile-back {
    margin-right: 4px;
  }

  .wl-mobile-chart-slot {
    padding: 6px 0 0;
    background: transparent;
  }
  /* When the chart panel is mounted inside the mobile slot, force it
     to behave as a single full-bleed pane (no two-column grid). */
  .wl-mobile-chart-slot .wl-chart-section {
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .wl-mobile-chart-slot #chartContainer {
    height: 320px !important;
    max-height: 320px !important;
    width: 100% !important;
  }
  .wl-mobile-chart-slot .wl-chart-controls { flex-wrap: wrap; }
  .wl-mobile-chart-slot .wl-chart-expand-btn { display: none !important; }

  /* ---- Accordion ---- */
  .wl-mobile-accordion {
    margin-top: 8px;
    border-top: 1px solid var(--border);
  }
  .wl-mobile-acc-row {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
  }
  .wl-mobile-acc-chevron {
    transition: transform 0.18s ease;
    color: var(--text-muted);
    flex: none;
  }
  .wl-mobile-acc-row[aria-expanded="true"] .wl-mobile-acc-chevron {
    transform: rotate(90deg);
  }
  .wl-mobile-acc-panel {
    padding: 12px 16px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
  }
  .wl-mobile-acc-panel[hidden] { display: none; }
  .wl-mobile-acc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }
  .wl-mobile-acc-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border2, var(--border));
    min-width: 0;
  }
  .wl-mobile-acc-item:last-child { border-bottom: none; }
  .wl-mobile-acc-k {
    color: var(--text-muted);
    font-size: 12px;
    flex: none;
  }
  .wl-mobile-acc-v {
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .wl-mobile-acc-link {
    color: var(--accent, #4F98A3);
    text-decoration: none;
  }
  .wl-mobile-acc-link:hover { text-decoration: underline; }
  .wl-mobile-acc-desc {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .wl-mobile-acc-empty,
  .wl-mobile-acc-loading {
    font-size: 13px;
    color: var(--text-muted);
    padding: 4px 0;
  }
}

/* ============================================================
   Iter 12CG — Mobile (≤640px): single-row horizontal-scroll for
   the index cards strip and the watchlist tabs row.
   Desktop / tablet (>640px) intentionally untouched.
   ============================================================ */
@media (max-width: 640px) {
  /* Iter 12CG — Index cards: override the ≤900px wrap + ≤480px reflow
     so all 8 cards (incl. crypto) sit on a single horizontally-
     scrollable row with hidden scrollbar and scroll-snap. */
  .idx-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
  }
  .idx-bar::-webkit-scrollbar { display: none; }

  .idx-item {
    /* Iter 12CG — override the calc()-based flex sizing from the
       ≤900px / ≤480px / ≤375px blocks above. */
    flex: 0 0 auto !important;
    min-width: 112px;
    scroll-snap-align: start;
  }

  /* Iter 12CG — bring crypto cards back on mobile (they were hidden
     at L862 / L872). Iter 12CH hotfix: use `block` (not `flex`) so the
     child .idx-label / .idx-price / .idx-change spans stack vertically
     like the non-crypto cards (FTSE 100 etc.) rather than laying out
     horizontally on a single line. */
  .idx-crypto { display: block !important; }

  /* Iter 12CG — Watchlist tabs row: override the ≤900px column
     stack and turn the row itself into the horizontal-scroll
     container. Using display:contents on .wl-tabs flattens its
     children up into .wl-tabs-row's flex line so .wl-create-btn
     (a sibling of .wl-tabs in the DOM) naturally lands at the end
     of the scrollable strip. */
  .wl-tabs-row {
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .wl-tabs-row::-webkit-scrollbar { display: none; }

  .wl-tabs {
    display: contents;
  }

  .wl-create-btn {
    flex: 0 0 auto;
    margin-left: 0 !important;
    align-self: center;
  }
}

/* Iter 12CQ — The in-header maximize icon and close-X are mobile-only.
   Hide both by default; the @media (max-width: 640px) block below
   switches the maximize on (close-X stays hidden until fs mode). */
.wl-mob-fs-btn,
.wl-mob-fs-close-btn { display: none; }

/* Iter 12CR — Mobile: chart fullscreen via body-level overlay
   (replaces 12CO/12CP/12CQ in-place stretch which kept leaking
   ancestor padding/margin). The maximize and close-X buttons share
   one slot at the end of the chart-identity header row; CSS toggles
   which is visible based on body.wl-mobile-fs. On open, dashboard.js
   MOVES .wl-chart-header + .wl-chart-canvas-wrap into #wlChartFsOverlay
   (a direct <body> child) so no ancestor styling reaches them; on
   close they are restored to their original parents. Rotation is
   handled in JS via orientationchange / resize / screen.orientation
   listeners that fire _resizeCharts() at 50/300/700ms. */
@media (max-width: 640px) {
  /* Shared base for both in-header icon buttons (maximize + close-X).
     They share the same slot so the toggle is visually seamless. */
  .wl-mob-fs-btn,
  .wl-mob-fs-close-btn {
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    flex-shrink: 0;
    position: static;
    top: auto;
    right: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .wl-mob-fs-btn { display: inline-flex; }
  .wl-mob-fs-close-btn { display: none; }
  .wl-mob-fs-btn:active,
  .wl-mob-fs-close-btn:active { background: rgba(255, 255, 255, 0.12); }
  .wl-mob-fs-btn svg,
  .wl-mob-fs-close-btn svg { width: 18px; height: 18px; }
  /* Only one of the two siblings should reserve the auto margin so the
     pair stays flush right with no double-margin gap. */
  .wl-mob-fs-btn + .wl-mob-fs-close-btn { margin-left: 4px; }
}

/* ===== Iter 12CU — chart fullscreen overlay (no breakpoint gate) =====
   The overlay must work at ANY width because iPhone landscape (~844px)
   exceeds the 640px mobile breakpoint. The .wl-mobile-fs body class is
   added by _openMobileFs() which itself is only callable from the
   mobile flow (the in-header maximize button is gated to ≤640px via
   the block above + the JS isMobileWatchlist() check), so these rules
   can safely live outside the media query without affecting desktop.
   Before 12CU these rules lived inside @media (max-width: 640px) so
   on iPhone landscape the overlay's own CSS turned off and the user
   saw the underlying desktop watchlist through the now-unstyled
   overlay container.
   ===================================================================== */

/* Fullscreen state — applied to <body> when active. Iter 12CS:
   also lock <html> on iOS so the page can't rubber-band scroll during
   rotation (which would otherwise cause visualViewport jitter and a
   mid-rotation stale-dim redraw). Both elements are pinned with
   position:fixed + height/width 100% so they cannot reflow when the
   URL bar shows/hides mid-rotation. */
body.wl-mobile-fs {
  overflow: hidden;
  height: 100%;
  position: fixed;
  width: 100%;
}
html.wl-mobile-fs-html {
  overflow: hidden;
  height: 100%;
  position: fixed;
  width: 100%;
}

/* The body-level overlay. Hidden by default; only shown when
   body.wl-mobile-fs is set. Direct child of <body>, so no ancestor
   padding/margin/flex inheritance can reach what's moved inside.
   Iter 12CS: use 100vw + 100svh (small viewport — assumes URL bar
   visible, stable across rotation) instead of 100dvw/100dvh, which
   recalculated continuously during the rotation animation and caused
   LightweightCharts to redraw to stale dims. translate3d forces a
   compositing layer so iOS Safari doesn't reparent during rotation. */
.wl-chart-fs-overlay { display: none; }
body.wl-mobile-fs .wl-chart-fs-overlay {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100vw;
  /* Iter 12CV — use 100dvh (dynamic viewport) instead of 100svh so the
     overlay grows as Safari's URL bar + tab strip retract on scroll.
     JS additionally sets inline height = visualViewport.height on
     visualViewport.resize for the most accurate per-frame measure on
     iOS. min-height pins it to dvh as a floor. */
  height: 100dvh;
  min-height: 100dvh;
  z-index: 99999;
  background: #0a0a0a;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  box-sizing: border-box;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* The .wl-chart-header (ticker info + controls row) is moved in as a
   non-growing block; the .wl-chart-canvas-wrap takes the remaining
   vertical space so the chart fills the screen.
   Iter 12CU: re-state the mobile flex-column layout here so the
   header stays stacked at any width — the original mobile rule at
   ~L3018 is inside @media (max-width: 640px) and won't apply in
   iPhone landscape (~844px wide) where the chart now lives in this
   overlay. */
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-header {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
  padding: 8px 8px 0 8px;
  gap: 4px;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-info {
  min-height: 0;
  gap: 8px;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-controls {
  gap: 4px;
  row-gap: 4px;
  max-width: 100%;
  flex-wrap: wrap;
}
/* Iter 12CS: chart wrap is positioned (relative) so the absolute
   #chartContainer inside fills it exactly, and we clear any inline
   width/height that LightweightCharts may have persisted from the
   previous orientation before resizing. */
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}
body.wl-mobile-fs .wl-chart-fs-overlay #chartContainer {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Inside the overlay the maximize button is hidden; close-X is shown.
   Iter 12CV — drop the `.wl-chart-fs-overlay` parent scoping so the
   rule applies regardless of where in the DOM the button currently
   lives, and re-state visible-styling props on the close-X (the base
   .wl-mob-fs-btn block sits inside @media (max-width: 640px), which
   doesn't match iPhone landscape (~844px wide) — so without these
   overrides the close-X loses its background/border/size and
   effectively disappears in landscape FS). */
body.wl-mobile-fs #wlMobChartFsBtn { display: none !important; }
body.wl-mobile-fs #wlMobChartFsCloseBtn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: static;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
body.wl-mobile-fs #wlMobChartFsCloseBtn svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Iter 12CW — Compact FS header + reclaim chart space + hide all
   stray maximize/expand icons inside the FS overlay.
   Landscape iPhone Safari leaves ~717px viewport; we squeeze the
   header to a single 52px row and zero the overlay padding so the
   chart canvas fills nearly the entire remaining height.
   ============================================================ */

/* (A) Sledgehammer: hide ALL maximize/expand icons inside FS overlay.
   The .wl-chart-expand-btn is a sibling of .wl-chart-controls inside
   .wl-chart-header — moved with the header into the overlay — and was
   appearing as a small rounded-square icon above the chart on the
   left in landscape FS (it wraps to its own row when the controls
   row exceeds the viewport width). */
body.wl-mobile-fs #wlMobChartFsBtn,
body.wl-mobile-fs .wl-mob-fs-btn,
body.wl-mobile-fs [data-action="chart-maximize"],
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-expand-btn,
body.wl-mobile-fs #chartExpandBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* (B) Compact header to a single horizontal-scrolling row. */
body.wl-mobile-fs .wl-chart-fs-overlay {
  /* (C) Zero overlay padding — Safari's URL bar already provides the
     safe-area buffer, doubling it just wastes ~40px at the top. */
  padding: 0 !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-header {
  flex: 0 0 auto !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-info {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 10px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-info > * {
  flex-shrink: 0;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-info::-webkit-scrollbar {
  display: none;
}
/* Force ticker name + company name inline */
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-identity {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-id-text {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-ticker {
  font-size: 18px !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-name {
  font-size: 12px !important;
  opacity: 0.7;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-logo {
  width: 24px !important;
  height: 24px !important;
}
/* Force price block horizontal: regular row + after-hours row on one line */
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-prices {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 16px !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-price-row,
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-ext-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-ext-row {
  font-size: 12px !important;
  opacity: 0.7;
}

/* Compact the controls row */
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-controls::-webkit-scrollbar {
  display: none;
}
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-controls > * {
  flex-shrink: 0;
}

/* (C) Reclaim the gap between controls row and chart canvas. */
body.wl-mobile-fs .wl-chart-fs-overlay .wl-chart-canvas-wrap {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
}
body.wl-mobile-fs .wl-chart-fs-overlay #chartContainer {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ============================================================
   Iter 12CW — One-time PWA install hint banner (iOS Safari only,
   non-standalone). Shown the first time the user opens chart FS;
   dismissed manually or auto-hidden after 8s, then suppressed via
   localStorage on subsequent opens.
   ============================================================ */
.wl-pwa-hint {
  display: none;
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  left: 12px;
  right: 12px;
  z-index: 100000;
  background: rgba(20, 20, 25, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: wlPwaHintIn 0.3s ease-out;
}
.wl-pwa-hint.is-visible { display: block; }
.wl-pwa-hint-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wl-pwa-hint-text { flex: 1; }
.wl-pwa-hint-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes wlPwaHintIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (display-mode: standalone) {
  .wl-pwa-hint { display: none !important; }
}