:root {
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f2e;
  --bg-card: #1e2538;
  --text-primary: #e8eaed;
  --text-secondary: #b8bcc2;
  --text-muted: #8a8f96;
  --accent-gold: #ffd700;
  --accent-silver: #c0c0c0;
  --accent-green: #00c853;
  --accent-red: #ff1744;
  --accent-blue: #448aff;
  --border: #2d3748;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --component-tabs-sticky-top: 58px;
  --component-tabs-sticky-height: 58px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

header {
  background: var(--bg-secondary);
  padding: 1rem 2rem 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title meta" "nav nav";
  gap: 0.5rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-silver));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.price-panel-toggle {
  display: none;
  min-height: 32px;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.price-panel-toggle:hover, .price-panel-toggle:focus-visible { border-color: var(--accent-gold); color: var(--accent-gold); outline: none; }

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

.status-dot.error { background: var(--accent-red); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1rem;
}

main.app-layout {
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "prices content";
  align-items: start;
  gap: 1rem;
  transition: grid-template-columns 0.28s ease, column-gap 0.28s ease;
}

.price-sidebar {
  grid-area: prices;
  min-width: 0;
}

#price-panel-details > summary {
  display: none;
}

#prices-section {
  position: sticky;
  top: calc(var(--component-tabs-sticky-top) + var(--component-tabs-sticky-height) + 0.5rem);
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  margin-bottom: 0;
  scrollbar-width: thin;
}

@media (min-width: 1001px) {
  .price-panel-toggle { display: inline-flex; align-items: center; }
  .price-sidebar { overflow: hidden; transition: transform 0.28s ease, opacity 0.2s ease; }
  #prices-section {
    height: calc(100vh - var(--component-tabs-sticky-top) - var(--component-tabs-sticky-height) - 2rem);
    max-height: none;
  }
  main.app-layout.prices-collapsed {
    grid-template-columns: minmax(0, 0px) minmax(0, 1fr);
    column-gap: 0.5rem;
  }
  main.app-layout.prices-collapsed .price-sidebar {
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
  }
}

#prices-section .price-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

#prices-section .price-market-group + .price-market-group {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

#prices-section .price-market-group h3 {
  margin-bottom: 0.4rem;
  color: var(--accent-gold);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

#prices-section .price-market-group .price-grid {
  margin-top: 0;
}

#prices-section .price-group-empty {
  color: var(--text-muted);
  font-size: 0.68rem;
}

#prices-section .price-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  text-align: left;
}

#prices-section .price-card-coming-soon {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
}

#prices-section .price-card-coming-soon:hover {
  transform: none;
  border-color: var(--border);
}

#prices-section .price-coming-soon {
  color: var(--text-muted);
  font-size: 0.65rem;
  white-space: nowrap;
}

#prices-section .price-card:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

#prices-section .price-label {
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#prices-section .price-delay-note {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
}

#prices-section .price-value {
  font-size: 0.88rem;
  text-align: right;
  white-space: nowrap;
}

#prices-section .price-change,
#prices-section .price-change-percent {
  margin: 0;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

#prices-section .mini-chart {
  height: 36px !important;
  margin-top: 0.35rem;
}

#prices-section .price-tf-selector {
  flex-wrap: wrap;
  padding: 0.5rem;
}

.component-tabs {
  grid-area: nav;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding-top: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-padding-inline: 0.5rem;
}
.component-tabs::-webkit-scrollbar { height: 4px; }
.component-tabs::-webkit-scrollbar-thumb { background: var(--border); }
.component-tabs::-webkit-scrollbar-track { background: transparent; }

.component-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.5rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.component-dropdown {
  position: relative;
}

.component-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
}

.component-dropdown > summary::-webkit-details-marker { display: none; }
.component-dropdown > summary::after {
  content: '';
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
}
.component-dropdown[open] > summary::after { transform: translateY(0.1rem) rotate(225deg); }
.component-dropdown-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  display: grid;
  gap: 0.15rem;
  min-width: 220px;
  max-width: calc(100vw - 1rem);
  max-height: min(70vh, 360px);
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow);
  overflow: auto;
}
.component-dropdown:not([open]) > .component-dropdown-menu { display: none; }
.component-dropdown-menu .component-tab {
  width: 100%;
  text-align: left;
}

.component-tab:hover,
.component-tab:focus-visible {
  border-color: var(--border);
  color: var(--text-primary);
  outline: none;
}

.component-tab.active {
  background: var(--accent-gold);
  color: var(--bg-primary);
  font-weight: 700;
}

.component-panel {
  grid-area: content;
  min-width: 0;
  margin-bottom: 0;
}

.component-panel[hidden] {
  display: none !important;
}

.roadmap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.roadmap-group { min-width: 0; }
.roadmap-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.roadmap-heading h3 { margin: 0; font-size: 0.95rem; }
.roadmap-heading output { color: var(--text-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.roadmap-items { list-style: none; margin: 0; padding: 0; }
.roadmap-items li { border-bottom: 1px solid var(--border); }
.roadmap-items label { display: flex; align-items: flex-start; gap: 0.7rem; min-height: 48px; padding: 0.85rem 0; cursor: pointer; }
.roadmap-link-item { display: flex; align-items: center; gap: 0.75rem; }
.roadmap-link-item label { flex: 1; min-width: 0; }
.roadmap-link-item > a { flex: 0 0 auto; color: var(--accent-blue); font-size: 0.75rem; }
.roadmap-items input { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 0.2rem; accent-color: var(--accent-green); cursor: pointer; }
.roadmap-items span { min-width: 0; color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; overflow-wrap: anywhere; }
.roadmap-items input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.roadmap-items input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
@media (max-width: 800px) {
  .roadmap-groups { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

@media (max-width: 1000px) {
  main.app-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "prices" "content";
  }

  #price-panel-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  #price-panel-details > summary::-webkit-details-marker {
    display: none;
  }

  #price-panel-details > summary::after {
    content: 'Show';
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
  }

  #price-panel-details[open] > summary::after {
    content: 'Hide';
  }

  #price-panel-details[open] #prices-section h2 {
    display: none;
  }

  #prices-section {
    position: static;
    max-height: none;
    overflow: visible;
  }

  #prices-section .price-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  :root { --component-tabs-sticky-top: 64px; --component-tabs-sticky-height: 54px; }
}

@media (max-width: 560px) {
  main.app-layout {
    padding: 0.75rem;
    gap: 0.65rem;
  }

  .component-tab {
    padding-inline: 0.65rem;
    font-size: 0.75rem;
  }

  .component-dropdown-menu { min-width: min(220px, calc(100vw - 2rem)); }
}

.section {
  margin-bottom: 2rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border);
}

.section h2 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

.section-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Price Cards */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.price-card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid var(--border);
  transition: transform 0.2s, border-color 0.2s;
}

.price-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-blue);
}

.price-card.positive { border-left: 3px solid var(--accent-green); }
.price-card.negative { border-left: 3px solid var(--accent-red); }

.price-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.price-value {
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.price-change {
  font-size: 0.85rem;
  margin-top: 0.25rem;
  font-weight: 500;
}

.price-change.positive { color: var(--accent-green); }
.price-change.negative { color: var(--accent-red); }

.price-range {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.mini-chart {
  width: 100% !important;
  height: 50px !important;
  margin-top: 0.6rem;
  border-radius: 4px;
}

.mini-chart-tf {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.price-tf-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.price-tf-selector .tf-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-tf-selector .tf-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
}

.tf-btn {
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.tf-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.tf-btn.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.price-trend {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.price-trend .trend-label {
  font-weight: 600;
}

.price-trend .trend-up { color: var(--accent-green); }
.price-trend .trend-down { color: var(--accent-red); }
.price-trend .trend-flat { color: var(--text-muted); }

.price-pattern {
  margin-top: 0.3rem;
  font-size: 0.65rem;
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
  display: none;
  font-weight: 600;
}

.price-pattern.visible { display: inline-block; }
.price-pattern.bullish { background: rgba(0, 200, 83, 0.15); color: var(--accent-green); }
.price-pattern.bearish { background: rgba(255, 23, 68, 0.15); color: var(--accent-red); }

.ratio-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(192, 192, 192, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Sentiment Gauges */
.sentiment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.sentiment-panel {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.sentiment-panel h3 {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.sentiment-basis-note { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.8rem; }

.gauge-container {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.gauge {
  width: 100%;
  height: auto;
}

.gauge-value {
  text-align: center;
  margin-top: -1rem;
}

.gauge-score {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
}

.gauge-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.gauge-label.fear { color: var(--accent-red); }
.gauge-label.greed { color: var(--accent-green); }
.gauge-label.neutral { color: var(--text-secondary); }
.gauge-label.extreme-fear { color: #c0392b; }
.gauge-label.extreme-greed { color: #1e8449; }

.sentiment-history-mini {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.history-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.75rem;
  color: white;
}

.history-badge.fear { background: var(--accent-red); }
.history-badge.greed { background: var(--accent-green); }
.history-badge.neutral { background: var(--text-muted); }
.history-badge.extreme-fear { background: #c0392b; }
.history-badge.extreme-greed { background: #1e8449; }

.sentiment-source {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Sentiment Comments */
.sentiment-comments {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem;
}

.sentiment-comments h3 {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.sentiment-formula-wrap {
  overflow-x: auto;
  margin: 0.75rem 0;
}

.sentiment-formula-table {
  width: 100%;
  min-width: 740px;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: left;
}

.sentiment-formula-table th,
.sentiment-formula-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border);
}

.sentiment-formula-table thead th {
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.sentiment-formula-table tbody th {
  font-weight: 500;
}

.refresh-btn {
  padding: 0.4rem 0.8rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.refresh-btn:hover:not(:disabled) {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  background: rgba(68, 138, 255, 0.05);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sentiment Summary Panels */
.sentiment-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.sentiment-panel {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--border);
  transition: border-color 0.2s;
}

.sentiment-panel.bullish { border-left-color: var(--accent-green); }
.sentiment-panel.bearish { border-left-color: var(--accent-red); }
.sentiment-panel.mixed { border-left-color: #ffb74d; }
.sentiment-panel.empty { opacity: 0.5; }

.sp-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

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

.sp-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.sp-sentiment-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.sp-sentiment-badge.bullish {
  background: rgba(0, 200, 83, 0.12);
  color: #00c853;
}

.sp-sentiment-badge.bearish {
  background: rgba(255, 23, 68, 0.12);
  color: #ff1744;
}

.sp-sentiment-badge.mixed {
  background: rgba(255, 183, 77, 0.12);
  color: #ffb74d;
}

.sp-breakdown {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
}

.sp-bull { color: #00c853; }
.sp-bear { color: #ff1744; }
.sp-neut { color: var(--text-secondary); }
.sp-total {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.65rem;
}

.sp-snippet,
.sp-projections {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.sp-projection-header {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.sp-proj-col-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sp-projection-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 0;
}

.sp-projection-asset {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sp-projection-near,
.sp-projection-med {
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.sp-projection-near small,
.sp-projection-med small {
  font-size: 0.65rem;
  opacity: 0.7;
}

.sp-summary {
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.5;
  padding: 0.5rem 0.25rem;
  font-weight: 500;
}

.sp-summary-direction {
  font-weight: 700;
  margin-right: 0.25rem;
}

.sp-comments-list {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.sp-comment {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.sp-comment:last-child {
  border-bottom: none;
}

.sp-comment-icon {
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sp-comment-text {
  flex: 1;
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sp-comment-time {
  font-size: 0.6rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.sp-empty {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* CoT Charts */
.cot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.cot-panel {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem;
}

.cot-panel h3 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.cot-chart-updated {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: -0.25rem 0 0.6rem;
}

.cot-panel canvas {
  width: 100% !important;
  max-height: 200px;
}

.cot-context {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
}

.cot-context .cot-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
}

.cot-context .cot-stat-label {
  color: var(--text-secondary);
}

.cot-context .cot-stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.cot-context .cot-percentile-bar {
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  margin: 0.4rem 0;
  position: relative;
  overflow: visible;
}

.cot-context .cot-percentile-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}

.cot-context .cot-percentile-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 12px;
  background: var(--accent-gold);
  border-radius: 2px;
  transform: translateX(-50%);
}

.cot-context .cot-interpretation {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(68, 138, 255, 0.05);
  border-radius: 4px;
  border-left: 2px solid var(--accent-blue);
  font-size: 0.72rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.cot-context .cot-momentum-commentary {
  margin-top: 0.3rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.cot-context .cot-momentum-trend {
  margin-top: 0.2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.3;
}

.cot-meta {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* CoT Workspace */
.asset-tabs {
  position: sticky;
  top: calc(var(--component-tabs-sticky-top) + var(--component-tabs-sticky-height));
  z-index: 80;
  isolation: isolate;
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin: 1.5rem 0 1rem;
  padding: 0 0.5rem;
  background: var(--bg-secondary);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.28);
}
.forecast-tabs { flex-wrap: wrap; gap: 0.25rem 1rem; }
/* 13 CoT markets: wrap onto a second row rather than overflowing, and keep names on one line */
.cot-asset-tabs { flex-wrap: wrap; gap: 0 1.1rem; }
.cot-asset-tabs button { white-space: nowrap; padding: 0.65rem 0.2rem; }
.asset-tabs button { background: none; color: var(--text-secondary); border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 0.8rem 0.2rem; font: inherit; cursor: pointer; }
.asset-tabs button[aria-selected="true"], .asset-tabs button.active { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.asset-tabs button:hover { color: var(--text-primary); }
.asset-tabs button:focus-visible, .cot-group-selector label:focus-within { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
#cot-market-panel { min-width: 0; }
.cot-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.cot-toolbar h3 { font-size: 1.1rem; margin: 0; }
.cot-report-date, .cot-benchmark-note { color: var(--text-secondary); font-size: 0.75rem; line-height: 1.6; margin-top: 0.4rem; }
.cot-group-selector { display: flex; padding: 3px; margin: 0; border: 1px solid var(--border); border-radius: 6px; gap: 3px; max-width: 100%; }
.cot-group-selector label { position: relative; cursor: pointer; min-width: 0; }
.cot-group-selector input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cot-group-selector span { display: block; padding: 0.6rem 0.8rem; border-radius: 3px; font-size: 0.8rem; color: var(--text-secondary); }
.cot-group-selector input:checked + span { background: var(--bg-card); color: var(--text-primary); }
.cot-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cot-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; padding: 1rem 0 1.4rem; border-bottom: 1px solid var(--border); }
.cot-summary dt { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.cot-summary dd { margin: 0; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cot-summary small { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; margin-top: 0.4rem; }
.cot-positive { color: var(--accent-green); }
.cot-negative { color: var(--accent-red); }
.cot-chart-frame { position: relative; width: 100%; height: 410px; min-width: 0; margin-top: 1rem; }
.cot-benchmark-note { margin: 0.6rem 0 1.5rem; }
.cot-analysis { padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cot-details { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
.cot-details summary { cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); }
.cot-details[open] summary { margin-bottom: 0.8rem; }
.cot-analysis h4 { font-size: 0.85rem; margin: 0 0 0.5rem; }
.cot-analysis p { color: var(--text-secondary); line-height: 1.65; font-size: 0.8rem; margin: 0; overflow-wrap: anywhere; }
.cot-subheading { font-size: 0.95rem; margin: 1.75rem 0 0.8rem; }
.cot-table-scroll { overflow-x: auto; max-width: 100%; }
.cot-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 640px; }
.cot-table th, .cot-table td { padding: 0.85rem 0.9rem; text-align: right; border-bottom: 1px solid var(--border); line-height: 1.6; font-variant-numeric: tabular-nums; }
.cot-table thead th { color: var(--text-muted); font-size: 0.72rem; font-weight: 500; }
.cot-table th:first-child { text-align: left; }
.cot-table tbody th { font-weight: 600; }
.cot-explainer { table-layout: fixed; min-width: 700px; }
.cot-explainer th, .cot-explainer td { text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cot-explainer th:first-child { width: 19%; }
.cot-explainer td { color: var(--text-secondary); }
@media (max-width: 700px) {
  .cot-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-chart-frame { height: 310px; }
  .cot-summary dd { font-size: 1.1rem; }
}

/* Events Timeline */
.events-filters {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover, .filter-btn.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

/* The Economic Calendar tab lists every event on the page itself, no inner scroll box */
.events-timeline {
  overflow: visible;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--border);
  margin-bottom: 0.5rem;
  border-radius: 0 6px 6px 0;
  background: var(--bg-card);
  transition: background 0.2s;
}

.event-item:hover {
  background: rgba(68, 138, 255, 0.05);
}

.event-item.high { border-left-color: var(--accent-red); }
.event-item.medium { border-left-color: #ff9800; }
.event-item.low { border-left-color: var(--accent-blue); }
.source-calendar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.source-calendar-heading h2 { margin-bottom: 0.25rem; }
.source-calendar-filters { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.8rem 0; }
.source-calendar-table-wrap { overflow-x: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.source-calendar-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.78rem; }
.source-calendar-table th, .source-calendar-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.source-calendar-table thead th { position: sticky; top: 0; color: var(--text-muted); font-size: 0.67rem; text-transform: uppercase; background: var(--bg-primary); }
.source-calendar-table tbody th { min-width: 190px; color: var(--text-primary); font-weight: 650; }
.source-calendar-table td { color: var(--text-secondary); }
.source-calendar-table td time { display: block; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.source-calendar-impact { display: inline-block; color: var(--text-muted); text-transform: capitalize; }
.source-calendar-impact.high { color: var(--accent-red); font-weight: 700; }
.source-calendar-impact.medium { color: #d99a21; font-weight: 650; }
.source-calendar-impact.low { color: var(--accent-blue); }
.source-calendar-note { margin-top: 0.8rem; color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; }

.event-date {
  min-width: 80px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.event-type {
  min-width: 60px;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.event-type.fomc { background: rgba(255, 23, 68, 0.2); color: var(--accent-red); }
.event-type.cpi, .event-type.ppi { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.event-type.adp, .event-type.nfp { background: rgba(0, 200, 83, 0.2); color: var(--accent-green); }
.event-type.options_expiry, .event-type.quad_witching { background: rgba(156, 39, 176, 0.2); color: #ce93d8; }
.event-type.eom, .event-type.eoq, .event-type.eoh, .event-type.eoy { background: rgba(68, 138, 255, 0.2); color: var(--accent-blue); }

.event-name {
  flex: 1;
  font-size: 0.85rem;
}

.event-countdown {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 70px;
  text-align: right;
}

/* War Monitor */
.war-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.war-summary {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

.war-summary.risk-escalation {
  border-left-color: #ff5b5b;
  background: rgba(255, 91, 91, 0.08);
}

.war-summary.risk-peace {
  border-left-color: #00c875;
  background: rgba(0, 200, 117, 0.08);
}

.war-summary.risk-neutral {
  border-left-color: var(--text-muted);
}

.war-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.war-mode-pill {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.war-mode-pill.risk-escalation {
  color: #ffd8d8;
  background: rgba(255, 91, 91, 0.25);
  border-color: rgba(255, 91, 91, 0.45);
}

.war-mode-pill.risk-peace {
  color: #d8ffeb;
  background: rgba(0, 200, 117, 0.25);
  border-color: rgba(0, 200, 117, 0.45);
}

.war-mode-pill.risk-neutral {
  color: #e2e5ea;
  background: rgba(138, 143, 150, 0.2);
  border-color: rgba(138, 143, 150, 0.4);
}

.war-summary-score {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.war-summary-text {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.war-impact-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.impact-bullish { color: #00c875; }
.impact-bearish { color: #ff5b5b; }
.impact-neutral { color: #b8bcc2; }

.war-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.9rem;
}

.war-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
}

.war-card.risk-escalation {
  border-color: rgba(255, 91, 91, 0.5);
}

.war-card.risk-peace {
  border-color: rgba(0, 200, 117, 0.5);
}

.war-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.war-card-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.war-card-state {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.war-card-metrics {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.war-card-risks {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.risk-flag {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.risk-flag.on {
  color: #ffe0e0;
  background: rgba(255, 91, 91, 0.18);
  border-color: rgba(255, 91, 91, 0.45);
}

.war-card-list {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.war-card-list strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text-primary);
}

.war-card-list ul {
  margin: 0;
  padding-left: 1.1rem;
}

.war-card-list li {
  margin-bottom: 0.16rem;
}

.war-meta {
  margin-top: 0.75rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Forecast Section */
.overview-heading, .overview-section-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; }
.overview-heading h2 { margin-bottom: 0.25rem; }
#overview-refresh { min-width: 90px; }
.overview-status, .overview-muted, .overview-section-heading span { color: var(--text-muted); font-size: 0.73rem; line-height: 1.6; overflow-wrap: anywhere; }
.overview-status { margin: 0.8rem 0 1rem; }
.overview-regime { border-top: 2px solid var(--accent-gold); padding: 1.15rem 0; }
#overview-content h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.overview-regime h3 { color: var(--accent-gold); }
#overview-content p, #overview-content li { font-size: 0.8rem; line-height: 1.65; }
.overview-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.overview-brief p, .overview-regime p { margin: 0; color: var(--text-secondary); }
.overview-confirmation { grid-column: 1 / -1; }
.overview-watch { padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
.overview-watch h3 { color: #eab75a; }
.overview-watch ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.overview-watch li { margin-bottom: 0.65rem; }
.overview-section-heading { margin: 1.4rem 0 0.5rem; }
.overview-outperformance { padding: 0.2rem 0 1rem; border-bottom: 1px solid var(--border); }
.overview-outperformance .overview-section-heading { margin-top: 1rem; }
.overview-table-scroll { overflow-x: auto; max-width: 100%; }
.overview-table { border-collapse: collapse; width: 100%; min-width: 820px; font-size: 0.77rem; }
.overview-table th, .overview-table td { text-align: left; padding: 0.85rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
.overview-table thead th { font-size: 0.68rem; text-transform: uppercase; font-weight: 500; color: var(--text-muted); }
.overview-table small { display: block; color: var(--text-secondary); font-weight: 400; font-size: 0.69rem; line-height: 1.6; margin-top: 0.25rem; }
.overview-market-link { color: var(--accent-gold); background: none; padding: 0; border: 0; border-bottom: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; }
.overview-market-link:hover { border-bottom-color: currentColor; }
.overview-calendar-scroll { overflow-x: auto; max-width: 100%; }
.overview-calendar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--border); padding: 0.35rem 0; }
.overview-calendar section { min-width: 0; padding: 0.3rem 0.6rem; border-right: 1px solid var(--border); }
.overview-calendar section:first-child { padding-left: 0; }
.overview-calendar section:last-child { border-right: 0; }
.overview-calendar h4 { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 0.4rem; font-size: 0.75rem; }
.overview-calendar h4 time { font-weight: 400; font-size: 0.68rem; color: var(--text-secondary); }
.overview-calendar .is-today h4, .overview-calendar .is-today time { color: var(--accent-gold); }
.overview-calendar .is-past { opacity: 0.55; }
#overview-content .overview-calendar-empty { font-size: 0.68rem; color: var(--text-muted); margin: 0; }
.overview-event-list { list-style: none; margin: 0; padding: 0; }
#overview-content .overview-event-list li { padding: 0 0 0 0.4rem; margin: 0.35rem 0; border-left: 2px solid var(--text-muted); font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere; }
#overview-content .overview-event-list li[data-impact="high"] { border-left-color: var(--accent-red); }
#overview-content .overview-event-list li[data-impact="medium"] { border-left-color: var(--accent-gold); }
.overview-next-week { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.overview-next-week summary { cursor: pointer; color: var(--text-secondary); font-size: 0.75rem; }
.overview-next-week summary small { color: var(--text-muted); }
.overview-methodology { padding: 1rem 0; color: var(--text-secondary); font-size: 0.77rem; }
.overview-methodology summary { cursor: pointer; }
.overview-news { border-top: 1px solid var(--border); padding-top: 1.2rem; margin-top: 1rem; }
.overview-news ul { padding-left: 1.2rem; }
.overview-news li { margin-bottom: 0.6rem; }
.overview-news small { display: block; color: var(--text-muted); font-size: 0.68rem; }
.overview-news a { color: var(--text-primary); text-decoration-color: var(--text-muted); overflow-wrap: anywhere; }

.dashboard2-section { display: grid; gap: 1rem; }
.dashboard2-heading, .dashboard2-panel-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
.dashboard2-heading h2 { margin: 0; }
.dashboard2-heading .section-subtitle { margin-top: 0.25rem; }
.dashboard2-section h3 { margin: 0; font-size: 1rem; }
.dashboard2-calendar { padding: 0.5rem 0 0.25rem; border-top: 2px solid var(--accent-gold); border-bottom: 1px solid var(--border); }
.dashboard2-calendar > .dashboard2-panel-heading { margin-bottom: 0; }
/* Day chips: one per trading day, filling the row on wide screens and swiping sideways on narrow ones */
.dashboard2-calendar, .dashboard2-week { min-width: 0; max-width: 100%; }
.dashboard2-day-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); width: 100%; gap: 0.4rem; padding: 0.55rem 0 0.45rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dashboard2-day-chip { display: grid; align-content: start; gap: 0.25rem; min-width: 0; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; text-align: left; scroll-snap-align: start; }
button.dashboard2-day-chip { cursor: pointer; }
button.dashboard2-day-chip:hover, button.dashboard2-day-chip:focus-visible { border-color: rgba(255, 210, 63, 0.6); }
.dashboard2-day-chip.week-start { margin-left: 0.5rem; }
.dashboard2-day-chip.is-today { border-color: var(--accent-gold); }
.dashboard2-day-chip > strong { font-size: 0.76rem; font-weight: 600; }
.dashboard2-day-chip.is-today > strong { color: var(--accent-gold); }
.dashboard2-chip-event { display: grid; gap: 0.05rem; min-width: 0; padding-left: 0.35rem; border-left: 2px solid var(--text-muted); font-size: 0.7rem; line-height: 1.25; }
.dashboard2-chip-event.impact-high { border-color: var(--accent-red); }
.dashboard2-chip-event.impact-medium { border-color: var(--accent-gold); }
.dashboard2-chip-event > span { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 700px) { .dashboard2-day-chips { grid-auto-columns: minmax(118px, 1fr); } }
.dashboard2-chip-event small { flex: none; color: var(--text-secondary); font-size: 0.62rem; }
.dashboard2-chip-more { color: var(--accent-gold); font-size: 0.62rem; text-decoration: underline; text-underline-offset: 2px; }
.dashboard2-chip-empty { color: var(--text-muted); font-size: 0.66rem; }
.dashboard2-panel-heading > span, .dashboard2-panel-heading > div > span { color: var(--text-muted); font-size: 0.75rem; }
/* 230px fits the fullest day (date, two events and "+N more") above or below the line */
.dashboard2-days { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); min-height: 230px; }
.dashboard2-days::before { position: absolute; top: 50%; left: 5%; right: 5%; border-top: 1px dashed var(--text-muted); content: ''; }
.dashboard2-day.week-start::before { position: absolute; top: 22%; bottom: 22%; left: 0; border-left: 1px solid var(--border); content: ''; }
.dashboard2-day { position: relative; min-width: 0; min-height: 230px; padding: 0; }
.dashboard2-day.is-past { opacity: 0.55; }
.dashboard2-day-content { position: absolute; left: 0.3rem; right: 0.3rem; display: grid; gap: 0.2rem; height: calc(50% - 14px); overflow: hidden; text-align: center; }
.dashboard2-day.timeline-above .dashboard2-day-content { top: 0; align-content: end; padding-bottom: 0.2rem; }
.dashboard2-day.timeline-below .dashboard2-day-content { top: calc(50% + 14px); align-content: start; padding-top: 0.2rem; }
.dashboard2-day-date { display: flex; justify-content: center; align-items: baseline; gap: 0.35rem; }
.dashboard2-day-date strong { color: var(--text-primary); font-size: 0.8rem; }
.dashboard2-day-date time { color: var(--text-secondary); font-size: 0.72rem; }
.dashboard2-day-stem { position: absolute; left: 50%; width: 0; height: 14px; border-left: 1px dashed var(--border); }
.dashboard2-day.timeline-above .dashboard2-day-stem { top: calc(50% - 14px); }
.dashboard2-day.timeline-below .dashboard2-day-stem { top: 50%; }
.dashboard2-day-dot { position: absolute; z-index: 1; top: 50%; left: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); border: 2px solid var(--text-muted); border-radius: 50%; background: var(--bg-secondary); }
.dashboard2-day.has-high-impact .dashboard2-day-dot { border-color: var(--accent-red); }
.dashboard2-day.has-medium-impact .dashboard2-day-dot { border-color: var(--accent-gold); }
.dashboard2-day.is-today .dashboard2-day-dot { width: 14px; height: 14px; border-color: var(--accent-gold); background: var(--accent-gold); box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15); }
/* Each event row sizes to its content and centers under the date; the time sits right after the label */
.dashboard2-day ul { display: grid; justify-self: center; justify-items: start; max-width: 100%; gap: 0.3rem; margin: 0.15rem 0 0; padding: 0; list-style: none; }
.dashboard2-day li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3rem; max-width: 100%; min-width: 0; padding: 0.04rem 0.3rem; border-left: 2px solid var(--text-muted); color: var(--text-primary); font-size: 0.66rem; line-height: 1.2; text-align: left; }
.dashboard2-day li.impact-high { border-color: var(--accent-red); }
.dashboard2-day li.impact-medium { border-color: var(--accent-gold); }
.dashboard2-day li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard2-day li small { flex-shrink: 0; color: var(--text-secondary); font-size: 0.6rem; white-space: nowrap; }
.dashboard2-day-content > p { margin: 0; color: var(--text-muted); font-size: 0.62rem; }
.dashboard2-more-events { justify-self: center; padding: 0; border: 0; background: none; color: var(--accent-gold); font: inherit; font-size: 0.62rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dashboard2-more-events:hover, .dashboard2-more-events:focus-visible { color: var(--text-primary); }
.dashboard2-day-dialog { width: min(440px, calc(100vw - 32px)); }
.dashboard2-day-events { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.dashboard2-day-events li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: start; gap: 0.6rem; padding: 0.5rem 0.6rem; border-left: 3px solid var(--text-muted); border-radius: 4px; background: rgba(255, 255, 255, 0.03); }
.dashboard2-day-events li.impact-high { border-color: var(--accent-red); }
.dashboard2-day-events li.impact-medium { border-color: var(--accent-gold); }
.dashboard2-day-events time { color: var(--text-secondary); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dashboard2-day-events strong { display: block; color: var(--text-primary); font-size: 0.85rem; }
.dashboard2-day-events small { display: block; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.72rem; }
.dashboard2-market-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 0.7rem; }
.dashboard2-market-row > * { min-width: 0; }
.dashboard2-analysis-stack { display: grid; align-content: start; gap: 0.7rem; min-width: 0; }
.dashboard2-analysis-panel { display: grid; align-content: start; gap: 0.25rem; }
.dashboard2-title-row { display: flex; align-items: center; gap: 0.45rem; }

/* Info tooltip: hover or keyboard focus reveals the bubble */
.info-tip { position: relative; display: inline-flex; }
.info-tip-button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--text-muted); border-radius: 50%; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.7rem; font-weight: 700; line-height: 1; cursor: help; }
.info-tip-button:hover, .info-tip-button:focus-visible { border-color: var(--accent-gold); color: var(--accent-gold); outline: none; }
.info-tip-bubble { position: absolute; z-index: 20; top: calc(100% + 8px); left: -0.5rem; width: min(340px, calc(100vw - 3rem)); padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); color: var(--text-secondary); font-size: 0.8rem; font-weight: 400; line-height: 1.5; display: none; }
.info-tip-bubble strong { color: var(--accent-gold); }
/* Hidden bubbles are out of the layout entirely, so a wide one can't stretch the page on a phone */
.info-tip:hover .info-tip-bubble, .info-tip:focus-within .info-tip-bubble { display: block; }
/* Dashboard panels: the bubble spans the panel instead of hanging off the "i", wherever the "i" sits */
.dashboard2-panel { position: relative; }
.dashboard2-panel .info-tip { position: static; }
.dashboard2-panel .info-tip-bubble { top: 2.6rem; left: 0.75rem; right: 0.75rem; width: auto; max-width: 420px; }
/* Lift the open tooltip's panel above the panels that follow it */
.dashboard2-panel:has(.info-tip:hover), .dashboard2-panel:has(.info-tip:focus-within) { position: relative; z-index: 30; }

/* Gold Cycle Tracker */
.dashboard2-goldturn-panel { border-left: 3px solid var(--accent-gold); }
/* Tile version in the Gold forecast's Seasonality column */
.forecast-goldturn { min-width: 0; padding: 0.62rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--accent-gold); border-radius: 8px; background: rgba(20, 28, 44, 0.6); }
.forecast-goldturn-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin-bottom: 0.5rem; }
.forecast-goldturn-header h5 { margin: 0; font-size: 0.8rem; letter-spacing: 0; }
.forecast-goldturn-header small { color: var(--text-muted); font-size: 0.68rem; }
/* Rightmost column: open the bubble leftward so it stays on screen */
.forecast-goldturn .info-tip-bubble { left: auto; right: -12rem; width: min(300px, calc(100vw - 2rem)); }
.forecast-goldturn .goldturn-steps span { font-size: 0.66rem; }
.forecast-goldturn .goldturn-stage p, .forecast-goldturn .goldturn-signal strong { font-size: 0.78rem; }
.forecast-goldturn .goldturn-signal small { font-size: 0.7rem; }
.forecast-goldturn .goldturn-value { font-size: 0.8rem; }
.goldturn-stage { display: grid; gap: 0.3rem; margin-bottom: 0.6rem; }
.goldturn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
.goldturn-steps span { padding: 0.3rem 0.4rem; border-radius: 3px; background: rgba(255, 255, 255, 0.05); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; text-align: center; }
.goldturn-steps span.done { background: rgba(46, 204, 113, 0.14); color: #65e69a; }
.goldturn-group.met span:first-child { color: #65e69a; }
.goldturn-steps span.current { background: var(--accent-gold); color: var(--bg-primary); }
.goldturn-stage p { margin: 0; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
.goldturn-stage p strong { color: var(--text-primary); }
.goldturn-signals { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.goldturn-signal { display: grid; grid-template-columns: 0.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.goldturn-dot { width: 9px; height: 9px; border-radius: 50%; background: #59616d; transform: translateY(1px); }
.goldturn-signal.met .goldturn-dot { background: #3ddc84; }
.goldturn-signal.watch .goldturn-dot { background: var(--accent-gold); }
.goldturn-signal.unavailable .goldturn-dot { background: transparent; border: 1px solid #59616d; }
.goldturn-signal strong { color: var(--text-primary); font-size: 0.85rem; }
.goldturn-signal small { display: block; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.75rem; line-height: 1.45; }
.ratio-turn { margin-top: 0.45rem; }
.ratio-turn .alt-card-vortex { margin-bottom: 0.3rem; }
.goldturn-signal small b { color: var(--text-secondary); font-weight: 600; }
.goldturn-signal small.goldturn-target { color: var(--text-secondary); }
.goldturn-group { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.2rem 0.6rem; padding: 0.5rem 0 0.2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.goldturn-group span:last-child { color: var(--text-muted); font-weight: 600; text-transform: none; }
.goldturn-group.met span:last-child { color: #65e69a; }
.goldturn-value { color: var(--text-primary); font-size: 0.88rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.goldturn-signal.met .goldturn-value { color: #65e69a; }
.goldturn-signal.watch .goldturn-value { color: #e9cf6a; }
.goldturn-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.45rem; color: var(--text-muted); font-size: 0.72rem; }
.goldturn-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 0.3rem; border-radius: 50%; content: ''; }
.goldturn-legend .met::before { background: #3ddc84; }
.goldturn-legend .watch::before { background: var(--accent-gold); }
.goldturn-legend .not-met::before { background: #59616d; }
.dashboard2-analysis-full .dashboard2-analysis-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.dashboard2-analysis-status { margin: -0.35rem 0 0.3rem; color: var(--text-muted); font-size: 0.8rem; }
.dashboard2-analysis-list { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.dashboard2-analysis-item { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0.65rem; padding: 0.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dashboard2-analysis-topic { padding-top: 0.1rem; color: var(--accent-gold); font-size: 0.78rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.dashboard2-analysis-copy { min-width: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
.dashboard2-analysis-copy a { color: var(--text-primary); text-decoration-color: var(--border); }
.dashboard2-analysis-source { display: block; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.75rem; }

/* FOMC odds: one stacked bar per meeting, one segment per target range */
.fomc-odds { display: grid; gap: 0.35rem; }
.fomc-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.fomc-date { color: var(--text-primary); font-size: 0.78rem; font-weight: 600; }
.fomc-bar { display: flex; height: 1.15rem; overflow: hidden; border-radius: 4px; background: var(--bg-primary); }
.fomc-seg { display: flex; align-items: center; justify-content: center; min-width: 2px; color: #0f1419; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.fomc-seg + .fomc-seg { border-left: 1px solid var(--bg-card); }
.fomc-seg.hold { background: #8a94a6; }
.fomc-seg.hike1 { background: #f0a24a; }
.fomc-seg.hike2 { background: #e5534b; color: #fff; }
.fomc-seg.cut1 { background: #4fb3d9; }
.fomc-seg.cut2 { background: #2f7fd1; color: #fff; }
.fomc-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; margin-top: 0.1rem; color: var(--text-secondary); font-size: 0.72rem; }
.fomc-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.fomc-legend i.fomc-seg { width: 0.65rem; height: 0.65rem; border-radius: 2px; }
.fomc-note { margin: 0; color: var(--text-muted); font-size: 0.72rem; }
#dashboard2-resistance-content ul { display: grid; gap: 0.4rem; margin: 0; padding-left: 1rem; }
#dashboard2-resistance-content li, .dashboard2-resistance-empty, .dashboard2-resistance-catalyst { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
.dashboard2-resistance-empty, .dashboard2-resistance-catalyst { margin: 0; }
.dashboard2-resistance-catalyst { margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.dashboard2-resistance-catalyst strong { color: var(--text-primary); }
.dashboard2-panel { min-width: 0; padding: 0.9rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.dashboard2-panel-heading { align-items: flex-start; margin-bottom: 0.65rem; }
.dashboard2-panel-heading > span { text-align: right; }
.dashboard2-ranking-list { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.dashboard2-ranking-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-height: 38px; padding: 0.22rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.dashboard2-ranking-market { display: grid; gap: 0.05rem; min-width: 0; }
.dashboard2-link { padding: 0; border: 0; background: none; color: var(--accent-gold); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dashboard2-link:hover { text-decoration: underline; }
.dashboard2-trend-groups { display: grid; gap: 0.6rem; }
.dashboard2-trend-label { margin: 0 0 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.dashboard2-trend-label.up { color: #3ddc84; }
.dashboard2-trend-label.down { color: #ff707a; }
.dashboard2-ranking-market small.dashboard2-trend-tag, .dashboard2-trend-tag { font-size: 0.7rem; font-weight: 600; }
.dashboard2-trend-tag.up { color: #3ddc84; }
.dashboard2-trend-tag.down { color: #ff707a; }
.dashboard2-trend-tag.flat { color: var(--text-muted); }
.dashboard2-trend-line { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.dashboard2-trend-alert { padding: 0 0.35rem; border: 1px solid rgba(240, 180, 41, 0.45); border-radius: 4px; background: rgba(240, 180, 41, 0.1); color: var(--accent-gold); font-size: 0.66rem; font-weight: 700; white-space: nowrap; cursor: help; }
.dashboard2-trend-dialog { width: min(720px, calc(100vw - 32px)); overflow-y: auto; }
.dashboard2-trend-table-wrap { overflow-x: auto; }
.dashboard2-trend-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dashboard2-trend-table th { padding: 0.4rem 0.5rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.dashboard2-trend-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; }
.dashboard2-trend-table td:first-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dashboard2-trend-table button { padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.dashboard2-trend-table button:hover { color: var(--accent-gold); }
.dashboard2-trend-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; }
/* Phones: close button in the corner, and only the columns that matter (rank, market, 20-day, trend) */
@media (max-width: 640px) {
  .dashboard2-trend-dialog .ti-chart-panel { padding: 0.9rem 0.7rem; }
  .dashboard2-trend-table { font-size: 0.78rem; }
  .dashboard2-trend-table .trend-col-wide { display: none; }
  .dashboard2-trend-table th, .dashboard2-trend-table td { padding: 0.4rem 0.3rem; }
  .dashboard2-trend-table td { white-space: normal; }
  .dashboard2-trend-table td.dashboard2-value { white-space: nowrap; }
}
.dashboard2-signal-list { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.dashboard2-signal { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.35rem 0.5rem; border: 1px solid transparent; border-left: 3px solid var(--text-muted); border-radius: 6px; background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.dashboard2-signal:hover { border-color: var(--accent-gold); }
.dashboard2-signal.bullish { border-left-color: var(--accent-green); }
.dashboard2-signal.bearish { border-left-color: var(--accent-red); }
.dashboard2-signal-score { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border: 2px solid var(--accent-green); border-radius: 50%; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dashboard2-signal.bearish .dashboard2-signal-score { border-color: var(--accent-red); }
.dashboard2-signal-main { display: grid; gap: 0.05rem; flex: 1; min-width: 0; }
.dashboard2-signal-line { display: flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: 0.84rem; }
.dashboard2-signal-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard2-signal-line.sub { justify-content: space-between; color: var(--text-muted); font-size: 0.74rem; }
.dashboard2-signal-line.sub > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard2-signal-line.sub > span:last-child { flex-shrink: 0; color: var(--text-secondary); }
.dashboard2-signal-divider { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; color: var(--accent-gold); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.dashboard2-signal-divider:first-child { margin-top: 0; }
.dashboard2-signal-divider strong { padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--accent-gold); color: #1a1d29; font-size: 0.74rem; font-weight: 800; }
.dashboard2-signal-divider::after { content: ''; flex: 1; height: 1px; background: var(--accent-gold); opacity: 0.6; }
.dashboard2-signal-support { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.2rem; }
.dashboard2-signal-support > small { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; }
.dashboard2-signal-support .ti-factor { padding: 0.05rem 0.4rem; font-size: 0.68rem; }
/* Chart popup "View details": a card's full forecast-page breakdown */
#alt-details-content { margin-top: 0.9rem; }
.alt-details-section { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dashboard2-ranking-line { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.dashboard2-ranking-market button { width: fit-content; padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: 0.88rem; font-weight: 700; text-align: left; cursor: pointer; }
.dashboard2-ranking-market button:hover { color: var(--accent-gold); }
.dashboard2-ranking-line button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard2-ranking-market small { flex: 0 0 auto; color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.dashboard2-value { font-size: 0.88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard2-value.positive, .dashboard2-value.strong-positive { color: #3ddc84; }
.dashboard2-value.negative, .dashboard2-value.strong-negative { color: #ff707a; }
.dashboard2-value.flat { color: var(--text-secondary); }
.dashboard2-empty { margin: 0; padding: 0.7rem 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; }
.dashboard2-heatmap-panel { padding: 1rem; }
.dashboard2-heatmap-heading { align-items: center; }
.dashboard2-heatmap-heading > div:first-child { display: grid; gap: 0.1rem; }
.dashboard2-heatmap-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; }
.dashboard2-periods { display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.18rem; border: 1px solid var(--border); border-radius: 5px; }
.dashboard2-periods button { min-height: 30px; padding: 0.28rem 0.5rem; border: 0; border-radius: 3px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.75rem; cursor: pointer; }
.dashboard2-periods button.active { background: var(--accent-gold); color: var(--bg-primary); font-weight: 700; }
.dashboard2-heatmap-legend { display: flex; justify-content: flex-end; gap: 0.75rem; margin: 0.1rem 0 0.65rem; color: var(--text-muted); font-size: 0.72rem; }
.dashboard2-heatmap-legend span::before { display: inline-block; width: 9px; height: 9px; margin-right: 0.25rem; border-radius: 2px; content: ''; }
.dashboard2-heatmap-legend .heatmap-negative::before { background: #be4650; }
.dashboard2-heatmap-legend .heatmap-neutral::before { background: #59616d; }
.dashboard2-heatmap-legend .heatmap-positive::before { background: #278352; }
.dashboard2-heatmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.dashboard2-heat-sector { min-width: 0; padding: 0.55rem; border: 1px solid var(--border); border-radius: 4px; background: rgba(0, 0, 0, 0.12); }
.dashboard2-heat-sector > header { position: static; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; padding: 0; border: 0; background: transparent; }
.dashboard2-heat-sector h4 { margin: 0; color: var(--text-secondary); font-size: 0.82rem; }
.dashboard2-heat-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 0.3rem; }
.dashboard2-heat-cell { display: grid; align-content: space-between; gap: 0.4rem; min-width: 0; min-height: 62px; padding: 0.5rem; border: 1px solid transparent; border-radius: 3px; color: #f5f7fa; text-align: left; cursor: pointer; }
/* Long ETF/trust names wrap to two lines before truncating */
.dashboard2-heat-cell span { display: -webkit-box; overflow: hidden; font-size: 0.72rem; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard2-heat-cell strong { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.dashboard2-heat-cell.strong-positive { background: #246f46; }
.dashboard2-heat-cell.positive { background: #29563f; }
.dashboard2-heat-cell.negative { background: #673940; }
.dashboard2-heat-cell.strong-negative { background: #933d46; }
.dashboard2-heat-cell.flat { background: #3b4651; }
/* Indicator cells (e.g. Gold/Silver ratio): neutral fill with a gold outline so they aren't read as gains/losses */
.dashboard2-heat-cell.ratio-cell { background: #2a3140; border: 1px dashed rgba(255, 215, 0, 0.55); }
.dashboard2-heat-cell.ratio-cell strong { color: var(--accent-gold); }
.dashboard2-heat-cell:hover, .dashboard2-heat-cell:focus-visible { border-color: var(--text-primary); outline: none; }
.dashboard2-footnote { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.75rem; line-height: 1.5; }
.dashboard2-insights { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0.7rem; }
.dashboard2-war-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.65rem; padding: 0.65rem; border-left: 3px solid var(--text-muted); background: rgba(255, 255, 255, 0.025); }
.dashboard2-war-summary.bullish { border-color: #3ddc84; background: rgba(61, 220, 132, 0.07); }
.dashboard2-war-summary.bearish { border-color: #ff707a; background: rgba(255, 112, 122, 0.08); }
.dashboard2-war-summary > div:first-child { display: grid; gap: 0.4rem; }
.dashboard2-war-summary > div:first-child > strong { color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; line-height: 1.45; }
.dashboard2-sentiment-badge { width: fit-content; padding: 0.18rem 0.5rem; border-radius: 3px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.dashboard2-sentiment-badge.bullish { background: rgba(61, 220, 132, 0.16); color: #65e69a; }
.dashboard2-sentiment-badge.bearish { background: rgba(255, 112, 122, 0.17); color: #ff8991; }
.dashboard2-war-scores { display: grid; gap: 0.25rem; min-width: 110px; color: var(--text-muted); font-size: 0.75rem; text-align: right; }
.dashboard2-war-scores strong { margin-left: 0.25rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dashboard2-war-impacts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0; }
.dashboard2-impact { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border: 1px solid var(--border); border-radius: 3px; color: var(--text-muted); font-size: 0.75rem; text-transform: capitalize; }
.dashboard2-impact strong { color: var(--text-secondary); }
.dashboard2-impact.bullish { border-color: rgba(61, 220, 132, 0.35); color: #65e69a; }
.dashboard2-impact.bearish { border-color: rgba(255, 112, 122, 0.35); color: #ff8991; }
.dashboard2-conflicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.dashboard2-conflict { min-width: 0; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-top: 2px solid var(--text-muted); border-radius: 3px; }
.dashboard2-conflict.bullish { border-top-color: #3ddc84; }
.dashboard2-conflict.bearish { border-top-color: #ff707a; }
.dashboard2-conflict > div { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.dashboard2-conflict h4 { margin: 0; font-size: 0.88rem; }
.dashboard2-conflict p { margin: 0.4rem 0 0; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; }@media (max-width: 700px) {
  .overview-brief { grid-template-columns: minmax(0, 1fr); }
  .overview-calendar { grid-template-columns: repeat(5, minmax(104px, 1fr)); }
}
@media (max-width: 900px) {
  .dashboard2-market-row { grid-template-columns: 1fr; }
  .dashboard2-insights { grid-template-columns: 1fr; }
  .dashboard2-heatmap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dashboard2-analysis-full .dashboard2-analysis-list { grid-template-columns: 1fr; }
  .dashboard2-days { grid-template-columns: repeat(10, minmax(130px, 1fr)); }
  .dashboard2-heatmap-heading { align-items: flex-start; }
  .dashboard2-heatmap-controls { justify-content: flex-start; width: 100%; }
  .dashboard2-periods { width: 100%; }
  .dashboard2-periods button { flex: 1; padding-inline: 0.25rem; }
  .dashboard2-conflicts { grid-template-columns: 1fr; }
  .dashboard2-war-summary { grid-template-columns: 1fr; }
  .dashboard2-war-scores { grid-template-columns: repeat(2, auto); justify-content: start; text-align: left; }
}

.forecast-content {
  margin-top: 1.5rem;
}

.forecast-coming-soon {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.forecast-coming-soon[hidden] {
  display: none;
}

.forecast-coming-soon h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.forecast-coming-soon p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.forecast-chart-container {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}

.forecast-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.forecast-chart-title {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.forecast-tf-buttons {
  display: flex;
  gap: 0.35rem;
}

.forecast-tf-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s;
}

.forecast-tf-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(255, 215, 0, 0.1);
}

.forecast-tf-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}

.forecast-chart-container canvas {
  width: 100% !important;
  max-height: 280px;
}

/* Forecast Current Price */
.forecast-current-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin-bottom: 1rem;
}
.forecast-current-price .price-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}
.forecast-current-price .price-change {
  font-size: 0.85rem;
  font-weight: 600;
}
.forecast-current-price .price-change.up { color: var(--accent-green); }
.forecast-current-price .price-change.down { color: var(--accent-red); }
.forecast-current-price .forecast-price-percent {
  font-size: 0.85rem;
  font-weight: 600;
}
.forecast-current-price .forecast-price-percent.up { color: var(--accent-green); }
.forecast-current-price .forecast-price-percent.down { color: var(--accent-red); }
.forecast-open-chart {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--accent-gold);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-gold);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.forecast-open-chart:hover,
.forecast-open-chart:focus-visible {
  background: transparent;
  color: var(--accent-gold);
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
.forecast-trade-button {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--accent-green);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-green);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.forecast-trade-button:hover,
.forecast-trade-button:focus-visible {
  background: transparent;
  color: var(--accent-green);
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}
.trade-table { min-width: 760px; }
.trade-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.trade-row-actions button, .trade-dialog-actions button {
  min-height: 2.2rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.trade-row-actions .trade-close-button, .trade-dialog-confirm { border-color: var(--accent-green); color: var(--accent-green); }
.trade-row-actions .trade-cancel-button, .trade-dialog-cancel { color: var(--text-secondary); }
.trade-row-actions button:hover, .trade-row-actions button:focus-visible,
.trade-dialog-actions button:hover, .trade-dialog-actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.trade-return-positive { color: var(--accent-green); font-weight: 700; }
.trade-return-negative { color: var(--accent-red); font-weight: 700; }
dialog.trade-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(440px, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
dialog.trade-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.trade-dialog-shell { padding: 1.2rem; }
.trade-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
.trade-dialog-header h2 { margin: 0; font-size: 1.1rem; }
.trade-dialog-summary { margin: 1rem 0; color: var(--text-secondary); line-height: 1.6; }
.trade-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.trade-dialog-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.trade-dialog-fields[hidden], .trade-dialog-error[hidden] { display: none; }
.trade-dialog-field { display: grid; gap: 0.35rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.trade-dialog-field input { min-height: 38px; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 0.95rem; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.trade-dialog-field input:focus-visible { border-color: var(--accent-gold); outline: none; }
.trade-dialog-field small { color: var(--text-muted); font-size: 0.7rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.trade-dialog-error { margin: -0.4rem 0 0.9rem; color: var(--accent-red); font-size: 0.8rem; }
.trade-row-actions .trade-edit-button { color: var(--accent-gold); border-color: rgba(255, 215, 0, 0.45); }
.trade-dialog-confirm.is-danger { border-color: var(--accent-red); color: var(--accent-red); }

.forecast-news {
  margin: 0 0 1.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(154, 160, 166, 0.28);
  border-radius: 6px;
  background: rgba(154, 160, 166, 0.08);
}

.forecast-news-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.forecast-news h3 {
  margin: 0;
  font-size: 0.95rem;
}

.forecast-news-header > span {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.forecast-news-status {
  margin: 0.4rem 0 0.65rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.forecast-news ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.forecast-news li {
  min-width: 0;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}

.forecast-news li a {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.forecast-news li a:hover,
.forecast-news li a:focus-visible {
  color: var(--accent-gold);
}

/* Forecast Commentary */
.forecast-commentary {
  margin-bottom: 1.25rem;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--text-muted);
  background: #171c23;
}
.forecast-commentary.take-profit {
  border-left-color: #f59e0b;
}
.forecast-commentary.build-position {
  border-left-color: var(--accent-green);
}
.forecast-commentary.caution {
  border-left-color: var(--accent-red);
}
.forecast-commentary.neutral {
  border-left-color: var(--text-muted);
}
.commentary-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.commentary-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  color: #fff;
}
.take-profit .commentary-badge { background: #f59e0b; }
.build-position .commentary-badge { background: var(--accent-green); }
.caution .commentary-badge { background: var(--accent-red); }
.neutral .commentary-badge { background: var(--text-muted); }
.commentary-action {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.analysis-grid-wrap {
  margin-top: 0.8rem;
}

.analysis-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.analysis-overall-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.analysis-overall-pill.bullish {
  color: #d7ffe8;
  background: rgba(0, 200, 117, 0.24);
  border-color: rgba(0, 200, 117, 0.55);
}

.analysis-overall-pill.bearish {
  color: #ffd9d9;
  background: rgba(255, 68, 68, 0.22);
  border-color: rgba(255, 68, 68, 0.5);
}

.analysis-overall-pill.neutral {
  color: #d6dbe2;
  background: rgba(154, 160, 166, 0.2);
  border-color: rgba(154, 160, 166, 0.45);
}

.analysis-grid-counts {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.55rem;
}

.analysis-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.analysis-subcomponent {
  min-width: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.analysis-subcomponent h4 {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.analysis-subcomponent-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  align-content: start;
}

.analysis-sentiment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: 112px;
  padding: 0.5rem;
  border: 1px solid rgba(154, 160, 166, 0.4);
  border-radius: 8px;
  background: rgba(154, 160, 166, 0.1);
}

.analysis-sentiment-card.bullish {
  border-color: rgba(0, 200, 117, 0.45);
  background: rgba(0, 200, 117, 0.12);
}

.analysis-sentiment-card.bearish {
  border-color: rgba(255, 68, 68, 0.45);
  background: rgba(255, 68, 68, 0.12);
}

.analysis-sentiment-main {
  min-width: 0;
  text-align: center;
}

.analysis-sentiment-title {
  margin-bottom: 0.1rem;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.analysis-sentiment-gauge {
  display: block;
  width: 100%;
  height: auto;
}

.analysis-sentiment-reading {
  margin-top: -0.45rem;
}

.analysis-sentiment-reading strong {
  display: block;
  color: var(--text-primary);
  font-size: 1.45rem;
  line-height: 1;
}

.analysis-sentiment-reading .gauge-label {
  margin-top: 0.15rem;
  font-size: 0.72rem;
}

.analysis-sentiment-history {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding-left: 0.4rem;
  border-left: 1px solid var(--border);
}

.analysis-sentiment-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.62rem;
}

.analysis-sentiment-history-row strong {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text-muted);
  color: #ffffff;
  font-size: 0.68rem;
}

.analysis-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 8px;
  padding: 0.56rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 28, 44, 0.6);
  min-height: 60px;
}

.analysis-tile.bullish {
  border-color: rgba(0, 200, 117, 0.45);
  background: rgba(0, 200, 117, 0.12);
}

.analysis-tile.bearish {
  border-color: rgba(255, 68, 68, 0.45);
  background: rgba(255, 68, 68, 0.12);
}

.analysis-tile.neutral {
  border-color: rgba(154, 160, 166, 0.4);
  background: rgba(154, 160, 166, 0.1);
}

.forecast-cot-card { display: block; min-width: 0; padding: 0.62rem 0.7rem; min-height: 0; }
.forecast-war-summary { display: block; min-width: 0; padding: 0.75rem; }
.forecast-war-summary h5 { margin: 0; font-size: 0.8rem; letter-spacing: 0; }
.war-score-badge { cursor: help; }
.war-score-breakdown { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.4rem; color: var(--text-muted); font-size: 0.68rem; }
.war-score-breakdown strong { color: var(--text-secondary); font-weight: 600; }
.dashboard-war-card { min-width: 0; }
.war-news-conflicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.war-news-header, .war-news-conflict-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; }
.war-news-header h3 { margin: 0; font-size: 0.95rem; letter-spacing: 0; }
.war-news-refresh { min-height: 30px; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.68rem; cursor: pointer; }
.war-news-refresh:hover, .war-news-refresh:focus-visible { border-color: var(--accent-blue); }
.war-news-refresh:disabled { opacity: 0.6; cursor: wait; }
.war-news-conflict { padding: 0.65rem 0; }
.war-news-conflict + .war-news-conflict { border-left: 1px solid var(--border); padding-left: 1rem; }
.war-news-conflict h4 { margin: 0; font-size: 0.75rem; font-weight: 650; }
.war-news-topic { font-size: 0.62rem; font-weight: 650; color: var(--text-secondary); }
.war-news-topic.diplomacy { color: #8de4ba; }
.war-news-topic.escalation { color: #ffb283; }
.dashboard-war-card .war-news-headlines { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.war-news-headlines li { margin: 0.4rem 0; font-size: 0.72rem; line-height: 1.45; overflow-wrap: anywhere; }
.war-news-headlines a { color: var(--text-primary); text-decoration: none; }
.war-news-headlines a:hover, .war-news-headlines a:focus-visible { color: var(--accent-gold); text-decoration: underline; }
.war-news-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin-top: 0.2rem; color: var(--text-muted); font-size: 0.62rem; line-height: 1.45; }
.war-news-footer { display: grid; gap: 0.25rem; padding-top: 0.45rem; border-top: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); font-size: 0.62rem; line-height: 1.45; }
@media (max-width: 640px) {
  .war-news-conflicts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .war-news-conflict + .war-news-conflict { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }
}
.forecast-cot-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.forecast-cot-header h5 { margin: 0; font-size: 0.8rem; letter-spacing: 0; }
.forecast-cot-header small { color: var(--text-muted); font-size: 0.68rem; }
.forecast-cot-header .technical-label { margin-left: auto; }
/* Compact one-line rows shared by the CoT and storage tiles */
.cot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.28rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-secondary); font-size: 0.78rem; cursor: help; }
.cot-row > span:last-child { color: var(--text-primary); font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.cot-row small { margin-left: 0.3rem; font-size: 0.72rem; font-weight: 600; }

.technical-card { display: block; min-width: 0; padding: 0.75rem; }
.technical-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; }
.technical-card h5 { font-size: 0.8rem; font-weight: 700; margin: 0; letter-spacing: 0; }
.gold-silver-ratio-reading { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.5rem 0; }
.gold-silver-ratio-reading strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.gold-silver-ratio-reading span { color: var(--text-muted); font-size: 0.7rem; }
.gold-silver-ratio-levels { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 0.68rem; line-height: 1.4; }
.technical-label { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.65rem; font-weight: 750; line-height: 1.6; background: #3b424a; color: #e8eaed; }
.technical-label.bullish { background: #15553e; color: #a5f3ce; }
.technical-label.bearish { background: #6c2531; color: #ffccd1; }
.technical-value.bullish { color: #8de4ba; }
.technical-value.bearish { color: #ffa8b0; }
.technical-horizon { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.72rem; line-height: 1.45; }
.technical-horizon:last-child { padding-bottom: 0; border-bottom: 0; }
.technical-horizon-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.technical-horizon p { margin: 0.2rem 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.technical-horizon-change { font-size: 0.68rem; font-weight: 600; }
/* RSI and MACD share one line; qualifiers are muted */
.technical-horizon-indicators { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.technical-horizon-indicators small { color: var(--text-muted); font-size: 0.66rem; }
.technical-horizon-sep { margin: 0 0.35rem; color: var(--text-muted); }
.technical-level-row dd span { color: var(--text-secondary); font-size: 0.68rem; font-weight: 400; }
.technical-note { margin: 0.4rem 0 0; color: var(--text-secondary); font-size: 0.72rem; line-height: 1.5; overflow-wrap: anywhere; }
.technical-levels { margin: 0; }
.technical-level-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.4rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.76rem; }
.technical-level-row:last-child { border-bottom: 0; }
.technical-level-row dt { display: flex; align-items: baseline; gap: 0.3rem; }
.technical-level-source { color: var(--text-muted); font-size: 0.58rem; font-weight: 600; }
.technical-level-row dd { display: grid; grid-template-columns: max-content 5ch; justify-content: end; align-items: baseline; gap: 0.5rem; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.technical-methodology { color: var(--text-secondary); font-size: 0.68rem; line-height: 1.5; }
.technical-methodology summary { cursor: pointer; color: var(--text-muted); }
.technical-methodology p { margin-top: 0.45rem; }

.analysis-tile-dot {
  margin-top: 0.25rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: #9aa0a6;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  flex: 0 0 auto;
}

.analysis-tile.bullish .analysis-tile-dot { background: #00c875; }
.analysis-tile.bearish .analysis-tile-dot { background: #ff5b5b; }

.analysis-tile-content {
  min-width: 0;
}

.analysis-tile-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.2rem;
}

.analysis-info-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 0.35rem;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.58rem;
  line-height: 1;
  text-transform: none;
  vertical-align: 1px;
  cursor: help;
}

.analysis-info-tooltip:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.seasonality-chart-link {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-gold);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.seasonality-chart-link:hover,
.seasonality-chart-link:focus-visible {
  color: var(--text-primary);
}

.analysis-tile-text {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-secondary);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
  .analysis-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .analysis-groups { grid-template-columns: minmax(0, 1fr); }
}

.forecast-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.seasonality-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(780px, calc(100vw - 2rem));
  max-width: 780px;
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.seasonality-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.seasonality-dialog-shell {
  padding: 1.1rem;
}

.seasonality-dialog-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.seasonality-dialog-header h2 {
  margin: 0.2rem 0;
  font-size: 1.1rem;
}

.seasonality-dialog-header p,
.seasonality-method-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.seasonality-chart-wrap {
  position: relative;
  width: 100%;
  height: min(52vh, 380px);
  min-height: 250px;
}

.seasonality-method-note {
  margin-top: 0.65rem;
}

.signal-card {
  background: var(--bg-card);
  border-radius: 6px;
  padding: 0.75rem;
  text-align: center;
}

.signal-card .signal-name {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.signal-card .signal-value {
  font-size: 0.85rem;
  font-weight: 600;
}

.signal-value.bullish, .signal-value.greedy, .signal-value.producers-covering { color: var(--accent-green); }
.signal-value.bearish, .signal-value.fearful, .signal-value.producers-adding-shorts { color: var(--accent-red); }
.signal-value.neutral { color: var(--text-secondary); }
.signal-value.overbought { color: #ff9800; }
.signal-value.oversold { color: var(--accent-blue); }

/* Forecast timeframe card styles removed */

/* Loading state */
.loading {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-style: italic;
}

/* Footer */
footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sentiment-grid {
    grid-template-columns: 1fr;
  }
  .cot-grid {
    grid-template-columns: 1fr;
  }
  /* Forecast timeframe cards removed */
  header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "meta" "nav";
    justify-items: start;
    gap: 0.3rem;
    padding: 0.8rem 1rem 0.65rem;
  }
  header h1 { font-size: 1.2rem; }
  .component-tabs { gap: 0.15rem 0.25rem; }
  .component-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-padding-inline: 0.5rem;
  }
  .component-tab { padding: 0.4rem 0.55rem; }
  :root {
    --component-tabs-sticky-top: 62px;
    --component-tabs-sticky-height: 58px;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ─── Tactical Mode ─────────────────────────────────────────────────────────── */

.tactical-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tactical-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tactical-toggle:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.tactical-toggle.active {
  border-color: #00c853;
  color: #00c853;
  background: rgba(0, 200, 83, 0.08);
}

.tactical-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.3s;
}

.tactical-toggle.active .tactical-toggle-dot {
  background: #00c853;
  box-shadow: 0 0 6px rgba(0, 200, 83, 0.6);
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 200, 83, 0.4); }
  50% { box-shadow: 0 0 10px rgba(0, 200, 83, 0.8); }
}

.tactical-price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

.tactical-price-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tactical-price-change {
  font-size: 0.9rem;
  font-weight: 600;
}

.tactical-price-change.positive { color: var(--accent-green); }
.tactical-price-change.negative { color: var(--accent-red); }

.tactical-refresh-time {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  align-self: center;
}

/* Market Structure Summary */
.tactical-structure {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.tactical-structure-badge {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.tactical-structure-badge.breakout { color: #00e676; }
.tactical-structure-badge.prebreakout { color: #ffab00; }
.tactical-structure-badge.squeeze { color: #7c4dff; }
.tactical-structure-badge.bullish { color: #00e676; }
.tactical-structure-badge.reversal { color: #00bcd4; }
.tactical-structure-badge.choppy { color: #ff9100; }
.tactical-structure-badge.bearish { color: #ff1744; }
.tactical-structure-badge.consolidation { color: #78909c; }
.tactical-structure-badge.neutral { color: var(--text-muted); }

.tactical-structure-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.tactical-structure-action {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.5;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}

.tactical-lanes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tactical-candlestick-container {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.tactical-candle-tf {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.tactical-candle-btn {
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.tactical-candle-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.tactical-candle-btn.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.tactical-candle-chart-wrap {
  height: 200px;
  position: relative;
}

.tactical-trend-indicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 980px) {
  .tactical-trend-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tactical-trend-indicators { grid-template-columns: minmax(0, 1fr); }
}

.tactical-trend-card {
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}

.tactical-trend-card.signal-buy {
  border-color: rgba(0, 200, 83, 0.5);
  background: rgba(0, 200, 83, 0.05);
}

.tactical-trend-card.signal-watch {
  border-color: rgba(255, 152, 0, 0.5);
  background: rgba(255, 152, 0, 0.05);
}

.tactical-trend-card.signal-bearish {
  border-color: rgba(255, 23, 68, 0.3);
}

.tactical-trend-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tactical-trend-subtitle {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  margin-bottom: 0.5rem;
}

.tactical-trend-status {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.tactical-trend-status.bullish { color: #00c853; }
.tactical-trend-status.bearish { color: #ff1744; }
.tactical-trend-status.neutral { color: var(--text-muted); }
.tactical-trend-status.watch { color: #ff9800; }

.tactical-trend-detail {
  font-size: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Trade Idea Section */
.tactical-trade-idea {
  margin-bottom: 1rem;
}

.trade-idea-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  border-left: 3px solid var(--accent-blue);
}

.trade-idea-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.trade-idea-disclaimer {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.06);
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.45;
}
.trade-idea-disclaimer strong { color: var(--accent-gold); }
.modal-details .trade-idea-disclaimer { margin: 0.75rem 0 0; }
.trade-idea-risk-note { margin: -0.2rem 0 0.5rem; color: var(--text-muted); font-size: 0.7rem; }

.trade-idea-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8rem;
}

.trade-idea-card {
  background: var(--bg-card);
  border-radius: 6px;
  padding: 0.8rem;
  border-left: 3px solid;
  font-size: 0.75rem;
  position: relative;
  transition: all 0.2s ease;
}

.trade-idea-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.trade-idea-card.long {
  border-left-color: #00c853;
  background: linear-gradient(135deg, rgba(0, 200, 83, 0.05), transparent);
}

.trade-idea-card.short {
  border-left-color: #ff1744;
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.05), transparent);
}

.trade-idea-card.none {
  border-left-color: var(--border);
  opacity: 0.6;
  grid-column: 1 / -1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

.trade-idea-type-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(68, 138, 255, 0.2);
  color: var(--accent-blue);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  margin-bottom: 0.4rem;
}

.trade-idea-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.trade-idea-timeframe-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(68, 138, 255, 0.15);
  color: var(--accent-blue);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border: 1px solid rgba(68, 138, 255, 0.3);
  white-space: nowrap;
}

.trade-idea-header {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.trade-idea-detail {
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  line-height: 1.3;
  font-size: 0.7rem;
}

.trade-idea-levels {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid var(--border);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.7rem;
}

.trade-idea-level {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.trade-idea-label-text {
  color: var(--text-muted);
  font-weight: 600;
  min-width: 40px;
}

.trade-idea-price {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
}

.trade-idea-rr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(68, 138, 255, 0.1);
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  border: 1px solid rgba(68, 138, 255, 0.2);
}

.trade-idea-rr-label {
  color: var(--text-muted);
  font-weight: 600;
}

.trade-idea-rr-value {
  color: var(--accent-blue);
  font-weight: 700;
}

/* Trade Idea Grid Styling */
.trade-idea-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}

/* Modal Styling */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--bg-secondary);
  border-radius: 12px;
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

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

/* Every popup's close button sits in the popup's own top-right corner (an open modal dialog is fixed-position,
   so it anchors the button), and each header leaves room for it */
/* The site header's sticky bar styling targets the <header> element; popup headers are plain blocks */
dialog header { position: static; z-index: auto; padding: 0; background: none; border-bottom: 0; }
dialog .modal-close, dialog .ti-close { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 5; }
dialog .ti-close { display: flex; align-items: center; justify-content: center; }
dialog .seasonality-dialog-header, dialog .price-details-header, dialog .trade-dialog-header, dialog .ti-chart-header, dialog .alt-price-header { padding-right: 2.8rem; }

.modal-body {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.modal-chart-container {
  flex: 2;
  min-width: 0;
  min-height: 400px;
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--border);
}

#modal-trade-chart {
  width: 100%;
  height: 100%;
}

.modal-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}

.modal-detail-item {
  background: var(--bg-card);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 3px solid var(--accent-blue);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-label {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.modal-value {
  color: var(--text-primary);
  font-weight: 500;
}

dialog.price-details-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(980px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(94vh, 1080px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

dialog.price-details-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.price-details-shell {
  padding: 1.25rem 1.5rem 1.5rem;
}

.price-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.price-details-header h2 {
  margin-top: 0.15rem;
  font-size: 1.3rem;
}
.price-details-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.price-details-title-row h2 { margin: 0; }
.price-analysis-link { min-height: 30px; padding: 0.3rem 0.55rem; border: 1px solid var(--accent-gold); border-radius: 4px; background: transparent; color: var(--accent-gold); font: inherit; font-size: 0.68rem; font-weight: 650; cursor: pointer; }
.price-analysis-link:hover, .price-analysis-link:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.price-analysis-link[hidden] { display: none; }

/* Price popup: chart + insight cards + overall analysis */
dialog.alt-price-dialog { position: fixed; inset: 0; margin: auto; width: min(1080px, calc(100vw - 2rem)); max-width: none; max-height: 94vh; padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: #131a2b; color: var(--text-primary); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
dialog.alt-price-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.alt-price-shell { display: grid; gap: 0.9rem; padding: 1.1rem 1.2rem 1.2rem; }
.alt-price-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.alt-price-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.alt-price-name h2 { margin: 0; font-size: 1.2rem; }
.alt-price-ticker { color: var(--text-muted); font-size: 0.75rem; }
.alt-price-now { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.15rem; }
.alt-price-now strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.alt-price-now span { font-weight: 700; font-size: 0.95rem; }
.alt-price-tools { display: flex; align-items: center; gap: 0.6rem; }
.alt-tf { display: flex; gap: 0.3rem; }
.alt-tf button { min-width: 2.2rem; padding: 0.3rem 0.5rem; border: 0; border-radius: 6px; background: #1a2236; color: #a9b3c7; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.alt-tf button.active { background: #4c8dff; color: #fff; }
.alt-price-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.alt-price-main { min-width: 0; }
/* One dark panel for price, MACD and RSI, like the standard view */
.alt-price-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); }
.alt-price-chart { position: relative; height: 380px; padding: 0.6rem 0.4rem 0.3rem 0.6rem; }
.alt-price-pane { position: relative; height: 105px; padding: 1.2rem 0.4rem 0.3rem 0.6rem; border-top: 1px solid var(--border); }
.alt-price-pane-label { position: absolute; top: 0.3rem; left: 0.7rem; color: #8a8f96; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; }
.alt-price-pane-label span { margin-left: 0.3rem; color: #9b7bff; }
.alt-price-pane-label b { margin-left: 0.25rem; font-weight: 700; }
.alt-price-chart canvas, .alt-price-pane canvas { width: 100% !important; height: 100% !important; }
.alt-price-tech { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.6rem; color: var(--text-secondary); font-size: 0.8rem; }
.alt-price-tech small { color: var(--text-muted); }
.alt-tech-label { padding: 0.1rem 0.45rem; border-radius: 4px; background: #1a2236; color: #a9b3c7; font-size: 0.68rem; font-weight: 700; }
.alt-price-cards { display: grid; align-content: start; gap: 0.6rem; max-height: 650px; overflow-y: auto; padding-right: 0.15rem; }
.alt-card { padding: 0.65rem 0.75rem; border: 1px solid #2b3650; border-radius: 10px; background: #1a2236; }
.alt-card.bullish { border-color: rgba(46, 204, 113, 0.45); }
.alt-card.bearish { border-color: rgba(255, 77, 106, 0.45); }
.alt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; color: #a9b3c7; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.alt-card-title { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Cards sit at the popup's right edge, so the bubble is anchored to the card and spans its width */
.alt-card { position: relative; }
.alt-card .info-tip { position: static; }
.alt-card .info-tip-bubble { top: 2rem; left: 0.4rem; right: 0.4rem; width: auto; font-size: 0.76rem; letter-spacing: 0; text-transform: none; }
.alt-card .info-tip-button { width: 16px; height: 16px; font-size: 0.62rem; }
.alt-chip { padding: 0.08rem 0.4rem; border-radius: 4px; background: #212b42; color: #a9b3c7; font-size: 0.64rem; font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.alt-chip.bullish { background: rgba(46, 204, 113, 0.16); color: #7ee2a8; }
.alt-chip.bearish { background: rgba(255, 77, 106, 0.16); color: #ff9aac; }
.alt-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.15rem 0; font-size: 0.78rem; }
.alt-card-row span { color: var(--text-primary); font-weight: 600; min-width: 0; }
.alt-card-row strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt-card-row small { color: var(--text-muted); font-weight: 600; margin-left: 0.25rem; }
.alt-card-text { margin: 0; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.45; }
.alt-card-text strong { color: var(--text-primary); }
.alt-card-vortex { margin: 0.4rem 0 0; padding-left: 0.5rem; border-left: 2px solid var(--text-muted); color: var(--text-secondary); font-size: 0.74rem; line-height: 1.45; cursor: help; }
.alt-card-vortex strong { color: var(--text-primary); }
.alt-card-vortex.bullish { border-left-color: var(--accent-green); }
.alt-card-vortex.watch { border-left-color: var(--accent-gold); }
.alt-card-vortex.bearish { border-left-color: var(--accent-red); }
.alt-card-foot { margin: 0.35rem 0 0; color: #ffd23f; font-size: 0.74rem; font-weight: 700; }
.alt-card-foot.bearish { color: #ff9aac; }
.alt-card-sub { margin: 0.25rem 0 0.2rem; color: var(--text-muted); font-size: 0.7rem; }
.alt-card-empty { margin: 0; color: var(--text-muted); font-size: 0.8rem; }
.alt-card .pattern-details-link, .alt-card .seasonality-chart-link { margin-top: 0.35rem; }
.alt-big-number { display: flex; align-items: baseline; gap: 0.45rem; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.alt-big-number small { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; }
.alt-meter { height: 8px; margin-top: 0.3rem; overflow: hidden; border-radius: 999px; background: #2b3650; }
.alt-meter span { display: block; height: 100%; border-radius: 999px; background: #8a94a6; }
.alt-meter.up span { background: #2ecc71; }
.alt-meter.down span { background: #ff4d6a; }
.alt-meter.gold span { background: #ffd23f; }
.alt-card.compact { padding: 0.5rem 0.7rem; }
.alt-card.compact .alt-card-head { margin-bottom: 0.3rem; }
.alt-card.compact .pattern-details-link { margin-top: 0.2rem; }
.alt-inline-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; }
.alt-inline-meter strong { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.alt-inline-meter .alt-meter { margin-top: 0; }
.alt-inline-meter small { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.alt-meter-scale { display: flex; justify-content: space-between; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.62rem; }
.alt-card.compact .alt-card-sub { margin: 0.2rem 0 0; }
.alt-up { color: #2ecc71; }
.alt-down { color: #ff4d6a; }
.alt-flat { color: #6f7b93; }
.alt-price-tech { position: relative; }
.alt-pattern { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
/* Signal under the chart: one card (score ring, pattern, setup and trend context); tapping it opens the explainer */
.alt-signal-card { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-left: 3px solid var(--accent-green); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.alt-signal-card.bearish { border-left-color: var(--accent-red); }
.alt-signal-card .ti-score-ring { width: 40px; height: 40px; }
.alt-signal-text { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.alt-signal-text strong { font-size: 0.92rem; }
.alt-signal-text small { color: var(--text-muted); font-size: 0.74rem; line-height: 1.35; }
.alt-signal-info { flex-shrink: 0; color: var(--accent-gold); font-size: 1.05rem; }
.alt-trend-line { margin: 0; color: var(--text-muted); font-size: 0.78rem; }
.alt-pattern-learn:not(.alt-signal-card) { padding: 0.15rem 0.6rem; border: 1px solid rgba(255, 210, 63, 0.55); border-radius: 999px; background: rgba(255, 210, 63, 0.08); color: #ffd23f; font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.alt-pattern-learn:not(.alt-signal-card):hover, .alt-pattern-learn:not(.alt-signal-card):focus-visible, .alt-pattern-learn:not(.alt-signal-card)[aria-expanded="true"] { background: rgba(255, 210, 63, 0.18); border-color: #ffd23f; outline: none; }
.alt-signal-card:hover, .alt-signal-card[aria-expanded="true"] { border-top-color: var(--accent-gold); border-right-color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.alt-pattern-explainer { position: absolute; z-index: 25; bottom: calc(100% + 8px); left: 0; width: min(560px, 100%); padding: 0.85rem 1rem; border: 1px solid rgba(46, 204, 113, 0.35); border-radius: 10px; background: #141b2b; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; }
.alt-pattern-explainer[hidden] { display: none; }
.alt-pattern-explainer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.alt-pattern-explainer-head strong { color: #2ecc71; font-size: 0.95rem; }
.alt-pattern-explainer-close { border: 0; background: none; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.alt-pattern-explainer-close:hover { color: var(--text-primary); }
.alt-pattern-explainer-body { display: grid; grid-template-columns: 240px 1fr; gap: 0.9rem; align-items: start; }
.alt-pattern-explainer-body figure { margin: 0; padding: 0.5rem; border-radius: 8px; background: #0d1220; }
.alt-pattern-explainer-body figcaption { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.7rem; }
.alt-pattern-explainer-body p { margin: 0 0 0.5rem; }
.alt-pattern-sample { display: block; width: 100%; height: auto; }
.alt-pattern-rate b { color: #2ecc71; }
.alt-pattern-why { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.alt-pattern-why span { color: #ffd23f; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.alt-pattern-why ul { margin: 0.3rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.15rem 0.8rem; }
.alt-pattern-why b { display: inline-block; min-width: 2.2rem; color: #2ecc71; }
.alt-pattern-note { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.72rem; }
@media (max-width: 600px) {
  .alt-pattern-explainer-body { grid-template-columns: 1fr; }
}
.alt-pattern-score { padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(46, 204, 113, 0.16); font-weight: 700; }
.alt-pattern-score.medium { color: #ffd23f; background: rgba(255, 210, 63, 0.14); }
.alt-pattern-score.low { color: #9aa3b2; background: rgba(154, 163, 178, 0.14); }
.alt-down .alt-pattern-score { background: rgba(255, 77, 106, 0.16); }
.alt-pattern-setup, .alt-pattern-explainer-head small { color: var(--text-muted); font-size: 0.75em; font-weight: 600; }
.alt-pattern-explainer.bearish { border-color: rgba(255, 77, 106, 0.4); }
.alt-pattern-explainer.bearish .alt-pattern-explainer-head strong,
.alt-pattern-explainer.bearish .alt-pattern-rate b,
.alt-pattern-explainer.bearish .alt-pattern-why b { color: #ff4d6a; }
.alt-card-row b { font-size: 0.75rem; }
.alt-price-overall { padding: 0.8rem 1rem; border-radius: 10px; background: #1a2236; }
.alt-price-overall[hidden] { display: none; }
.alt-overall-label { color: #ffd23f; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.alt-price-overall.bullish .alt-overall-label { color: #7ee2a8; }
.alt-price-overall.bearish .alt-overall-label { color: #ff9aac; }
.alt-price-overall p { margin: 0.3rem 0 0; color: var(--text-primary); font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.alt-overall-label small { margin-left: 0.4rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.alt-overall-factors { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.alt-overall-factors span { padding: 0.15rem 0.5rem; border-radius: 999px; background: #212b42; font-size: 0.74rem; font-weight: 700; }
.alt-overall-factors .alt-up { background: rgba(46, 204, 113, 0.14); }
.alt-overall-factors .alt-down { background: rgba(255, 77, 106, 0.14); }
@media (max-width: 860px) {
  .alt-price-body { grid-template-columns: 1fr; }
  .alt-price-cards { max-height: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .alt-price-chart { height: 280px; }
}
/* Phones: the timeframe buttons take a full row under the price */
@media (max-width: 640px) {
  .alt-price-shell { padding: 0.9rem 0.8rem 1rem; }
  .alt-price-tools { width: 100%; }
  .alt-tf { flex: 1; }
  .alt-tf button { flex: 1; }
}

.price-details-symbol,
.price-details-caption {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.price-details-quote {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 1rem;
  padding: 0.35rem 0 1rem;
  border-bottom: 1px solid var(--border);
}

.price-details-value {
  margin-top: 0.1rem;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.price-details-metrics {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.75rem, 3vw, 2rem);
}

.price-details-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.price-details-metrics span {
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.price-details-metrics strong {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-details-change.positive { color: var(--accent-green); }
.price-details-change.negative { color: var(--accent-red); }

.price-details-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem 0 0.65rem;
}

.price-chart-mode {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
}

.price-chart-mode button {
  min-height: 30px;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}

.price-chart-mode button:hover,
.price-chart-mode button:focus-visible {
  color: var(--text-primary);
  outline: 1px solid var(--accent-blue);
}

.price-chart-mode button.active {
  background: var(--accent-blue);
  color: #fff;
  font-weight: 700;
}

.price-details-chart-header h3,
.price-details-analysis h3 {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.price-details-dialog .price-tf-selector {
  justify-content: flex-end;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.price-details-dialog .price-tf-selector .tf-label {
  margin-right: 0.25rem;
}

.price-details-chart-stack {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
}

.price-details-chart-wrap {
  position: relative;
  height: 320px;
  min-width: 0;
  padding: 0.6rem 0.6rem 0.3rem;
}

.price-indicator-pane {
  position: relative;
  height: 130px;
  padding: 0.3rem 0.6rem;
  border-top: 1px solid var(--border);
}

/* The bottom pane also carries the shared time axis */
.price-indicator-pane-axis {
  height: 150px;
  padding-bottom: 0.45rem;
}

.price-details-chart-wrap canvas,
.price-indicator-pane canvas {
  width: 100% !important;
  height: 100% !important;
}

.price-indicator-legend {
  position: absolute;
  top: 0.4rem;
  left: 0.75rem;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.price-indicator-legend .legend-name { color: var(--text-primary); }
.price-indicator-legend .legend-params { color: var(--text-muted); }

.price-details-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.price-details-analysis section {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
}

.price-details-analysis p {
  margin-top: 0.3rem;
  color: var(--text-primary);
  font-size: 0.82rem;
}

.price-details-pattern.bullish { color: var(--accent-green); }
.price-details-pattern.bearish { color: var(--accent-red); }
.price-details-pattern.neutral { color: #ffd54f; }

.pattern-details-link { margin-top: 0.45rem; padding: 0; border: 0; background: none; color: var(--accent-gold); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.pattern-details-link:hover, .pattern-details-link:focus-visible { text-decoration: underline; outline: none; }
.pattern-details-link[hidden] { display: none; }

.price-details-analysis .price-details-pattern-description {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.price-details-range {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.72rem;
}

@media (max-width: 640px) {
  dialog.price-details-dialog {
    width: calc(100vw - 1rem);
    max-height: 96vh;
  }

  .price-details-shell {
    padding: 0.8rem;
  }

  .price-details-quote {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .price-details-metrics {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
  }

  .price-details-chart-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .price-details-chart-header > div {
    max-width: 100%;
  }

  .price-details-dialog .price-tf-selector {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .price-details-chart-wrap {
    height: 250px;
  }

  .price-indicator-pane {
    height: 110px;
  }

  .price-indicator-pane-axis {
    height: 128px;
  }

  .price-details-analysis {
    grid-template-columns: 1fr;
  }
}

/* Natural Gas Weather Tracker (a tile in the Seasonality & Positioning column) */
.natgas-weather { min-width: 0; padding: 0.62rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid #4fc3f7; border-radius: 8px; background: rgba(20, 28, 44, 0.6); }
.natgas-weather-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; cursor: help; }
.natgas-weather-header h4 { margin: 0; font-size: 0.8rem; }
.natgas-weather-catalyst { margin: 0 0 0.5rem; padding: 0.35rem 0.5rem; border-radius: 4px; background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--text-muted); color: var(--text-secondary); font-size: 0.75rem; line-height: 1.4; }
.natgas-weather-catalyst strong { color: var(--text-primary); }
.natgas-weather-catalyst.continuation { border-left-color: #4fc3f7; }
.natgas-weather-catalyst.turning-point { border-left-color: var(--accent-gold); background: rgba(255, 215, 0, 0.06); }
.natgas-weather-catalyst.breakout { border-left-color: #b388ff; }
.natgas-weather-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.natgas-weather-grid section { min-width: 0; }
.natgas-weather-grid h5 { margin: 0 0 0.15rem; color: var(--text-muted); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; }
.natgas-weather-grid h5 .technical-value { letter-spacing: 0; text-transform: none; }
.weather-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.24rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.76rem; }
.weather-row[title] { cursor: help; }
.weather-row > span:first-child { color: var(--text-secondary); white-space: nowrap; }
.weather-row > .technical-value { text-align: right; font-variant-numeric: tabular-nums; }
.natgas-weather .technical-value.watch, .natgas-storage .technical-value.watch { color: var(--accent-gold); }
.weather-updated { margin: -0.1rem 0 0.2rem; color: var(--text-muted); font-size: 0.66rem; }
.weather-early { margin:0.35rem 0 0; padding: 0.35rem 0.5rem; border-radius: 4px; background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); font-size: 0.73rem; line-height: 1.4; }
.weather-early.act, .weather-early.prepare { background: rgba(255, 215, 0, 0.08); }
.weather-early.act strong, .weather-early.prepare strong { color: var(--accent-gold); }
.weather-early.watch strong { color: #4fc3f7; }
.weather-early a, .natgas-storage a { color: #4fc3f7; font-weight: 600; text-decoration: none; white-space: nowrap; }
.weather-early a:hover, .weather-early a:focus-visible, .natgas-storage a:hover, .natgas-storage a:focus-visible { text-decoration: underline; }

/* Crop Weather tile (Seasonality column, agricultural assets); builds on the Weather Tracker styles */
.crop-weather { border-left-color: #8bc34a; }
.crop-weather-row > span:first-child { display: flex; flex-direction: column; white-space: normal; }
.crop-weather-row small { color: var(--text-muted); font-size: 0.66rem; }
.crop-weather-row > .technical-value { white-space: nowrap; }
.crop-weather-quiet { color: var(--text-muted); font-size: 0.7rem; }
.crop-weather-quiet > span:last-child { text-align: right; }
.crop-weather-enso strong.bullish { color: var(--accent-green); }
.crop-weather-enso strong.bearish { color: var(--accent-red); }
.crop-weather-drivers { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 0.7rem; line-height: 1.4; }
.crop-weather-drivers strong { color: var(--text-secondary); }

/* EIA storage report tile (Sentiment & Headlines column, Natural Gas only) */
.natgas-storage { min-width: 0; padding: 0.62rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid #b388ff; border-radius: 8px; background: rgba(20, 28, 44, 0.6); }
.natgas-storage-footer { margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.7rem; }
/* Next storage report: a highlighted strip so traders can plan around the release */
.eia-released { margin: 0.15rem 0 0.45rem; padding: 0.35rem 0.55rem; border-left: 3px solid var(--accent-gold); background: rgba(255, 210, 63, 0.07); color: var(--text-primary); font-size: 0.82rem; }
.eia-released strong { color: var(--accent-gold); font-weight: 700; }
.eia-released span { color: var(--text-secondary); }
.natgas-storage-next { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0; padding: 0.25rem 0.5rem; border: 1px solid rgba(255, 210, 63, 0.35); border-radius: 6px; background: rgba(255, 210, 63, 0.08); font-size: 0.74rem; }
.natgas-storage-next.soon { border-color: rgba(255, 210, 63, 0.75); background: rgba(255, 210, 63, 0.16); }
.natgas-storage-next div { min-width: 0; flex: 1; }
.natgas-storage-next div span { color: #ffd23f; font-weight: 700; }
.natgas-storage-next div strong { color: var(--text-primary); }
.natgas-storage-next div small { color: var(--text-muted); font-size: 0.68rem; }
.natgas-storage-next em { padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(255, 210, 63, 0.18); color: #ffd23f; font-size: 0.68rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.alt-card-next { margin: 0.4rem 0 0; padding: 0.3rem 0.45rem; border-radius: 6px; background: rgba(255, 210, 63, 0.08); color: var(--text-secondary); font-size: 0.74rem; }
.alt-card-next strong { color: #ffd23f; }
.alt-card-next small { color: var(--text-muted); margin-left: 0.2rem; }
.alt-card-next.soon { background: rgba(255, 210, 63, 0.16); }
.natgas-storage-explain { margin: 0.45rem 0 0; color: var(--text-secondary); font-size: 0.75rem; line-height: 1.45; }
.natgas-storage.petroleum-inventories { border-left-color: #ff9a3c; }
/* US LNG exports (natural gas fundamentals) */
.natgas-storage.lng-exports { border-left-color: #26c6da; }
.lng-exports .lng-chart-wrap { height: 150px; margin-top: 0.5rem; }
.lng-util-bar { display: inline-block; width: 46px; height: 6px; margin-right: 0.4rem; border-radius: 3px; background: rgba(255, 255, 255, 0.1); vertical-align: middle; overflow: hidden; }
.lng-util-bar i { display: block; height: 100%; border-radius: 3px; background: #26c6da; }
.lng-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }
.lng-chip { padding: 0.08rem 0.45rem; border: 1px solid rgba(38, 198, 218, 0.3); border-radius: 999px; background: rgba(38, 198, 218, 0.08); color: var(--text-secondary); font-size: 0.68rem; white-space: nowrap; cursor: help; }
.lng-chip b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lng-alert { margin: 0.35rem 0; padding: 0.25rem 0.5rem; border: 1px solid rgba(255, 107, 129, 0.4); border-radius: 6px; background: rgba(255, 107, 129, 0.08); color: #ff9aac; font-size: 0.72rem; line-height: 1.4; cursor: help; }
.lng-exports .lng-summary { color: var(--text-muted); font-size: 0.72rem; }
.lng-exports .lng-warning { color: var(--accent-gold); }

/* Put/Call tile (Technicals column) and details modal */
.technical-label.watch { background: rgba(255, 215, 0, 0.16); color: var(--accent-gold); }
/* .analysis-tile sets display, so the hidden attribute needs an explicit rule */
.forecast-putcall[hidden] { display: none; }
.putcall-comment { margin: 0.35rem 0 0; color: var(--text-secondary); font-size: 0.73rem; line-height: 1.4; cursor: help; }
.putcall-comment.extreme-put, .putcall-comment.extreme-call { color: var(--accent-gold); font-weight: 600; }
.putcall-comment.thin { color: var(--text-muted); }
.forecast-putcall .pattern-details-link { margin-top: 0.3rem; }
dialog.putcall-dialog { width: min(820px, calc(100vw - 2rem)); }
.putcall-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.9rem 0 0.5rem; }
.putcall-summary > div { display: grid; gap: 0.15rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); }
.putcall-summary span { color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.putcall-summary strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.putcall-summary small { color: var(--text-muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.putcall-reading.extreme-put, .putcall-reading.extreme-call { color: var(--accent-gold); }
.putcall-modal-comment { margin: 0.4rem 0 0.75rem; color: var(--text-secondary); font-size: 0.85rem; }
.putcall-chart-wrap { position: relative; height: 300px; padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); }
.putcall-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.putcall-note { margin: 0.7rem 0 0; color: var(--text-muted); font-size: 0.74rem; line-height: 1.5; }
.putcall-note a { color: var(--text-secondary); }
@media (max-width: 640px) { .putcall-summary { grid-template-columns: 1fr; } .putcall-chart-wrap { height: 240px; } }

/* Contrarian setup notes on Put/Call and CoT cards (forecast pages and alternative popup) */
.setup-note { margin: 0.4rem 0 0; padding: 0.3rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; line-height: 1.35; cursor: help; }
.setup-note.bullish { background: rgba(46, 204, 113, 0.12); color: var(--accent-green); }
.setup-note.bearish { background: rgba(255, 77, 106, 0.12); color: var(--accent-red); }
.setup-note b { font-weight: 800; }
.setup-note-condition { display: block; margin-top: 0.1rem; font-size: 0.66rem; font-weight: 700; opacity: 0.85; }
.setup-note-text { display: block; margin-top: 0.2rem; color: var(--text-secondary); font-weight: 500; }

/* CoT divergence callout (CoT popup and CoT tab) */
.cot-divergence { margin: 0.5rem 0 0.75rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: 6px; background: var(--bg-card); color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; }
.cot-divergence.bullish { border-left-color: var(--accent-green); }
.cot-divergence.bearish { border-left-color: var(--accent-red); }
.cot-divergence > strong { color: var(--text-primary); }
.cot-divergence.bullish > strong { color: var(--accent-green); }
.cot-divergence.bearish > strong { color: var(--accent-red); }
.cot-divergence-condition { margin-left: 0.35rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; }
.cot-divergence p { margin: 0.3rem 0 0.25rem; color: var(--text-primary); }
.cot-divergence small { color: var(--text-muted); font-size: 0.72rem; }

/* CoT details popup */
.cot-details-dialog .putcall-summary > div { align-content: start; }
.cot-details-dialog .putcall-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cot-table th small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }
@media (max-width: 1280px) { .cot-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cot-details-dialog .putcall-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cot-details-dialog .putcall-summary { grid-template-columns: 1fr; } }

/* Trend & Momentum details modal: reuses the Tactical tab's lanes and trend cards */
dialog.tactical-details-dialog { width: min(1240px, calc(100vw - 2rem)); }
.tactical-details-dialog .tactical-trend-indicators { margin: 0.9rem 0 0.75rem; }
.tactical-details-status { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.78rem; }
.tactical-details-status.error { color: var(--accent-red); }
.tactical-details-note { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; }
.technical-details-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; padding: 0; border: 0; background: none; color: var(--accent-gold); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.technical-details-link:hover, .technical-details-link:focus-visible { text-decoration: underline; outline: none; }

.trade-idea-view-btn {
  background: linear-gradient(135deg, rgba(68, 138, 255, 0.2), rgba(68, 138, 255, 0.05));
  border: 1px solid rgba(68, 138, 255, 0.3);
  color: var(--accent-blue);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.trade-idea-view-btn:hover {
  background: linear-gradient(135deg, rgba(68, 138, 255, 0.35), rgba(68, 138, 255, 0.15));
  border-color: var(--accent-blue);
}

.trade-idea-view-btn:active {
  transform: scale(0.98);
}

@media (max-width: 980px) {
  .modal-body {
    flex-direction: column;
  }

  .modal-chart-container {
    min-height: 300px;
  }
}

.tactical-lane {
  display: grid;
  grid-template-columns: 80px 1fr 140px 140px 140px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 72px;
}

.tactical-lane-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tactical-lane-chart {
  height: 68px;
  position: relative;
}

.tactical-lane-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.tactical-indicator {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tactical-indicator-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tactical-indicator-value {
  font-size: 0.8rem;
  font-weight: 600;
}

.tactical-indicator-value.oversold { color: #00c853; }
.tactical-indicator-value.overbought { color: #ff1744; }
.tactical-indicator-value.neutral-rsi { color: var(--text-secondary); }

.tactical-indicator-value.macd-bullish { color: #00c853; }
.tactical-indicator-value.macd-bearish { color: #ff1744; }

.tactical-signal {
  display: flex;
  align-items: center;
}

.tactical-signal-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tactical-signal-badge.strong {
  background: rgba(0, 200, 83, 0.15);
  color: #00c853;
  border: 1px solid rgba(0, 200, 83, 0.4);
  animation: signal-glow 1.5s infinite;
}

.tactical-signal-badge.moderate {
  background: rgba(0, 200, 83, 0.1);
  color: #69f0ae;
  border: 1px solid rgba(0, 200, 83, 0.25);
}

.tactical-signal-badge.weak {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.25);
}

.tactical-signal-badge.downtrend {
  background: rgba(255, 23, 68, 0.08);
  color: #ff5252;
  border: 1px solid rgba(255, 23, 68, 0.2);
  font-size: 0.55rem;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

@keyframes signal-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 200, 83, 0.3); }
  50% { box-shadow: 0 0 12px rgba(0, 200, 83, 0.6); }
}

@media (max-width: 768px) {
  .tactical-lane {
    grid-template-columns: 60px 1fr;
    gap: 0.5rem;
    min-height: auto;
    flex-wrap: wrap;
  }

  .tactical-lane-label {
    grid-column: 1;
    grid-row: 1;
  }

  .tactical-lane-chart {
    grid-column: 2;
    grid-row: 1 / 5;
    height: 120px;
  }

  .tactical-indicator {
    grid-column: 1;
    font-size: 0.7rem;
  }

  .tactical-indicator-value {
    font-size: 0.75rem;
  }

  .tactical-signal {
    grid-column: 1;
    padding-right: 0.3rem;
  }

  .tactical-signal-badge {
    padding: 0.15rem 0.35rem;
    font-size: 0.52rem;
    max-width: 60px;
    text-align: center;
    word-break: break-word;
  }

  .tactical-signal-badge.downtrend {
    max-width: 60px;
  }
}

.tactical-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.tactical-refresh-indicator {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.5rem;
}

/* ─── Profit Calculator ──────────────────────────────────────────────────────── */

.profit-calculator {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid var(--border);
}

.profit-calc-title {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.profit-calc-inputs {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.profit-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.profit-input-group label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.profit-input-group input,
.profit-input-group select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  width: 160px;
  font-family: 'JetBrains Mono', monospace;
}

.profit-input-group input:focus {
  outline: none;
  border-color: var(--accent-gold);
}

.profit-calc-btn {
  padding: 0.5rem 1.25rem;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.profit-calc-btn:hover {
  opacity: 0.85;
}

.profit-calc-results {
  margin-top: 1.25rem;
}

.profit-levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.profit-level-card {
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 0.75rem;
  border-left: 3px solid var(--border);
}

.profit-level-card.support { border-left-color: #ff1744; }
.profit-level-card.current { border-left-color: var(--accent-gold); }
.profit-level-card.breakout { border-left-color: #00c853; }
.profit-level-card.target { border-left-color: #ce93d8; }
.profit-level-card.loss { border-left-color: #ff5722; }

.profit-level-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.profit-level-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

.profit-level-pct {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.profit-investment-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.profit-investment-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.profit-tranches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.profit-tranche {
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 0.6rem;
  text-align: center;
}

.profit-tranche-num {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.profit-tranche-price {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

.profit-tranche-amount {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
}

.profit-tranche-shares {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.profit-summary {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.profit-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.78rem;
}

.profit-summary-label {
  color: var(--text-secondary);
}

.profit-summary-value {
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

.profit-summary-value.green { color: #00c853; }
.profit-summary-value.red { color: #ff1744; }
.profit-summary-value.gold { color: var(--accent-gold); }

/* ─── Slam Risk ──────────────────────────────────────────────────────────────── */

.slam-risk-container {
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.06), rgba(255, 23, 68, 0.02));
  border: 1px solid rgba(255, 23, 68, 0.2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
}

.slam-risk-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.slam-risk-icon {
  font-size: 1.1rem;
}

.slam-risk-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ff1744;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slam-risk-probability {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.slam-risk-probability.high {
  background: rgba(255, 23, 68, 0.2);
  color: #ff1744;
}

.slam-risk-probability.medium {
  background: rgba(255, 183, 77, 0.2);
  color: #ffb74d;
}

.slam-risk-probability.low {
  background: rgba(129, 199, 132, 0.2);
  color: #81c784;
}

.slam-risk-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Overbought Alert */
.slam-overbought-alert {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.slam-overbought-alert.warning {
  background: rgba(255, 183, 77, 0.1);
  border: 1px solid rgba(255, 183, 77, 0.3);
}

.slam-overbought-alert.critical {
  background: rgba(255, 23, 68, 0.12);
  border: 1px solid rgba(255, 23, 68, 0.35);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 23, 68, 0); }
  50% { box-shadow: 0 0 8px 0 rgba(255, 23, 68, 0.15); }
}

.ob-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.ob-alert-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffb74d;
  letter-spacing: 0.4px;
}

.critical .ob-alert-label {
  color: #ff1744;
}

.ob-event-proximity {
  font-size: 0.65rem;
  font-weight: 600;
  color: #ff1744;
  background: rgba(255, 23, 68, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
}

.ob-tf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ob-tf-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #ffb74d;
  background: rgba(255, 183, 77, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.ob-tf-badge.deep {
  color: #ff1744;
  background: rgba(255, 23, 68, 0.12);
}

.ob-rsi {
  opacity: 0.7;
  font-size: 0.6rem;
}

.slam-risk-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

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

.slam-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.slam-stat-value {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 600;
}

.slam-target-value {
  color: #ff1744;
  font-size: 0.95rem;
}

.slam-event-value {
  font-size: 0.75rem;
}

.slam-risk-commentary {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.slam-history-title {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.4rem;
}

.slam-history-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 3px 0;
  font-size: 0.72rem;
}

.slam-hist-date {
  color: var(--text-muted);
  min-width: 50px;
}

.slam-hist-event {
  color: var(--text-secondary);
  flex: 1;
}

.slam-hist-drop {
  color: #ff1744;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.slam-hist-low {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
}

/* Moderate Slam / Fib Retracement */

.slam-moderate {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 171, 0, 0.2);
}

.moderate-slam-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.moderate-slam-icon {
  font-size: 0.9rem;
}

.moderate-slam-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffab00;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.moderate-slam-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.moderate-target-value {
  color: #ffab00 !important;
  font-size: 0.95rem !important;
}

.moderate-slam-commentary {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.4rem;
}

/* Extreme Slam / Capitulation */

.slam-extreme {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(156, 39, 176, 0.2);
}

.extreme-slam-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.extreme-slam-icon {
  font-size: 0.9rem;
}

.extreme-slam-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ce93d8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Zones of Liquidity */

.slam-liquidity-zones {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(68, 138, 255, 0.25);
}

.liquidity-zones-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.liquidity-zones-icon {
  color: var(--accent-blue);
  font-size: 0.8rem;
}

.liquidity-zones-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.liquidity-zones-range {
  margin-left: auto;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.liquidity-zones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.liquidity-zone-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.02);
}

.liquidity-zone-card.supply {
  border-color: rgba(255, 23, 68, 0.32);
  background: rgba(255, 23, 68, 0.05);
}

.liquidity-zone-card.demand {
  border-color: rgba(0, 200, 83, 0.32);
  background: rgba(0, 200, 83, 0.05);
}

.liquidity-zone-card.breakdown {
  border-color: rgba(68, 138, 255, 0.35);
  background: rgba(68, 138, 255, 0.08);
}

.liquidity-zone-title {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.2rem;
}

.liquidity-zone-range {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  font-family: 'JetBrains Mono', monospace;
}

.liquidity-zone-share {
  font-size: 0.66rem;
  color: var(--accent-blue);
  margin-bottom: 0.2rem;
}

.liquidity-zone-note {
  font-size: 0.69rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.liquidity-swing-low {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.liquidity-targets-grid {
  margin-top: 0.45rem;
  border-top: 1px solid rgba(255, 23, 68, 0.2);
  padding-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.liquidity-target-card {
  border: 1px solid rgba(255, 23, 68, 0.2);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 23, 68, 0.04);
}

.liquidity-target-label {
  color: var(--text-secondary);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: 0.15rem;
}

.liquidity-target-range {
  color: #ff8a80;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.1rem;
}

.liquidity-target-meta {
  color: #ffb4a9;
  font-size: 0.66rem;
}

.liquidity-nodes-table {
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.45rem;
}

.liquidity-node-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  font-size: 0.67rem;
  color: var(--text-secondary);
  padding: 0.2rem 0;
}

.liquidity-node-row.demand {
  color: #81c784;
}

.liquidity-node-row.supply {
  color: #ef9a9a;
}

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

  .liquidity-targets-grid {
    grid-template-columns: 1fr;
  }

  .liquidity-zones-range {
    width: 100%;
    margin-left: 0;
  }
}

.extreme-slam-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.extreme-target-value {
  color: #ce93d8 !important;
  font-size: 0.95rem !important;
}

.extreme-slam-commentary {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.4rem;
}

.extreme-slam-supports {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Trading vs Investing ─────────────────────────────────────────────────── */
.ti-section { display: grid; gap: 1rem; }
.ti-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ti-heading h2 { margin: 0; }
/* Stays under the header while scrolling, like the commodity asset rows */
.ti-subtabs { position: sticky; top: calc(var(--component-tabs-sticky-top) + var(--component-tabs-sticky-height)); z-index: 80; display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); background: var(--bg-secondary); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.28); transition: top 0.22s ease; }
.ti-subtabs button { padding: 0.6rem 1.2rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.ti-subtabs button[aria-selected="true"] { border-bottom-color: var(--accent-gold); color: var(--accent-gold); }
.ti-subtabs button:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
#ti-trading, #ti-investing { display: grid; gap: 1rem; }
#ti-trading[hidden], #ti-investing[hidden] { display: none; }
.ti-intro { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }
.ti-loading, .ti-empty { margin: 0; padding: 1rem; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.ti-timeframes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ti-timeframe { display: grid; gap: 0.75rem; align-content: start; padding: 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); }
.ti-timeframe h3 { margin: 0; font-size: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
/* Each timeframe heading pins under the Trading / Investing switch while its cards scroll past; the next
   section's heading takes over. It spans the section's padding so cards slide cleanly underneath. */
.ti-timeframe { --ti-timeframe-pad: 0.9rem; }
.ti-timeframe > h3 { position: sticky; top: calc(var(--component-tabs-sticky-top) + var(--component-tabs-sticky-height) + var(--ti-subtabs-height, 45px)); z-index: 70; margin: -0.9rem calc(-1 * var(--ti-timeframe-pad)) 0; padding: 0.9rem var(--ti-timeframe-pad) 0.55rem; border-radius: 10px 10px 0 0; background: var(--bg-secondary); transition: top 0.22s ease; }
.ti-timeframe h3 span { color: var(--text-muted); font-size: 0.72rem; font-weight: 500; }
.ti-empty { border: 1px dashed var(--border); border-radius: 8px; }
.ti-trade { display: grid; gap: 0.45rem; padding: 0.8rem; border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: 8px; background: var(--bg-card); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.ti-trade.long { border-left-color: var(--accent-green); }
.ti-trade.short { border-left-color: var(--accent-red); }
.ti-trade:hover, .ti-trade.selected { border-color: var(--accent-gold); }
.ti-trade:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.ti-trade-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ti-direction { font-size: 0.78rem; font-weight: 700; }
.ti-direction.long { color: var(--accent-green); }
.ti-direction.short { color: var(--accent-red); }
.ti-trade-type { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.ti-trade-setup, .ti-trade-context { margin: 0; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.4; }
.ti-trade-context { color: var(--text-muted); font-size: 0.72rem; }
.ti-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0; }
.ti-levels div { padding: 0.35rem; border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.ti-levels dt { color: var(--text-muted); font-size: 0.66rem; text-transform: uppercase; }
.ti-levels dd { margin: 0; font-size: 0.85rem; font-weight: 600; }
.ti-levels dd.target { color: var(--accent-green); }
.ti-levels dd.stop { color: var(--accent-red); }
.ti-trade-rr { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.72rem; }
.ti-trade-rr strong { color: var(--accent-gold); }
.ti-chart-panel { display: grid; gap: 0.6rem; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); }
.ti-chart-panel[hidden] { display: none; }
.ti-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ti-chart-header h3 { margin: 0; font-size: 1.05rem; }
.ti-chart-header p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.78rem; }
.ti-chart-actions { display: flex; align-items: center; gap: 0.5rem; }
.ti-close { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; }
.ti-chart-wrap { position: relative; height: 340px; }
.ti-chart-wrap.tall { height: 420px; }
.ti-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin: 0; color: var(--text-muted); font-size: 0.75rem; }
.ti-key { display: inline-block; width: 18px; height: 3px; margin-right: -0.5rem; border-radius: 2px; vertical-align: middle; }
.ti-key.ema20, .ti-key.entry, .ti-key.sma200d { background: #4c8dff; }
.ti-key.ema50 { background: #ff9a3c; }
.ti-key.target { background: #00c853; }
.ti-key.stop { background: #ff1744; }
.ti-key.sma200w { background: #ffd700; }
.ti-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ti-view-toggle button { padding: 0.4rem 0.7rem; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 0.78rem; cursor: pointer; }
.ti-view-toggle button[aria-pressed="true"] { background: var(--accent-gold); color: #111; font-weight: 700; }
.ti-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 1.25rem; align-items: center; padding: 1rem 1.15rem; border: 1px solid rgba(255, 215, 0, 0.25); border-radius: 10px; background: linear-gradient(120deg, rgba(255, 215, 0, 0.1), rgba(0, 200, 83, 0.05) 60%, transparent), var(--bg-secondary); }
.ti-hero-kicker { margin: 0 0 0.15rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ti-hero-copy h3 { margin: 0 0 0.3rem; color: var(--accent-gold); font-size: 1.35rem; }
.ti-hero-copy p:last-child { margin: 0; color: var(--text-primary); font-size: 0.88rem; line-height: 1.45; }
.ti-hero-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.ti-hero-steps li { display: flex; gap: 0.5rem; align-items: flex-start; }
.ti-hero-step { display: grid; place-items: center; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-gold); color: #111; font-size: 0.8rem; font-weight: 800; }
.ti-hero-steps strong { display: block; font-size: 0.85rem; }
.ti-hero-steps small { display: block; margin-top: 0.1rem; color: var(--text-secondary); font-size: 0.74rem; line-height: 1.35; }
.ti-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.ti-count { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.ti-count strong { font-size: 1.15rem; }
.ti-count span { color: var(--text-muted); font-size: 0.74rem; }
.ti-count.bullish strong { color: var(--accent-green); }
.ti-count.bearish strong { color: var(--accent-red); }
.ti-count.gold strong { color: var(--accent-gold); }
.ti-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.ti-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ti-table th { padding: 0.6rem 0.75rem; background: var(--bg-secondary); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.ti-table td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--border); white-space: nowrap; }
.ti-table td small { display: block; color: var(--text-muted); font-size: 0.7rem; }
.ti-table tbody tr[data-ti-asset] { cursor: pointer; }
.ti-table tbody tr[data-ti-asset]:hover, .ti-table tbody tr.selected { background: rgba(255, 215, 0, 0.06); }
.ti-table tbody tr:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.ti-dist { font-weight: 600; }
.ti-dist.up { color: var(--accent-green); }
.ti-dist.down { color: var(--accent-red); }
.ti-status { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(138, 143, 150, 0.16); color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.ti-status.buy-confirmed { background: rgba(0, 200, 83, 0.2); color: #5ee49a; }
.ti-status.buy-zone, .ti-status.weekly-support { background: rgba(255, 215, 0, 0.16); color: var(--accent-gold); }
.ti-status.uptrend { background: rgba(0, 200, 83, 0.1); color: #8fdcb0; }
.ti-status.extended { background: rgba(255, 154, 60, 0.16); color: #ffb26b; }
.ti-status.below-both { background: rgba(255, 23, 68, 0.14); color: #ff7a92; }
.ti-commentary { display: grid; gap: 0.75rem; }
.ti-verdict { display: grid; gap: 0.4rem; padding: 0.8rem; border-radius: 8px; background: var(--bg-card); }
.ti-verdict .ti-status { justify-self: start; }
.ti-verdict p { margin: 0; color: var(--text-primary); font-size: 0.88rem; line-height: 1.5; }
.ti-confirmations { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.76rem; }
.ti-confirmations li.met { color: var(--accent-green); }
.ti-factor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ti-deep-dives { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; }
.ti-deep-dives:empty { display: none; }
.ti-factor { display: grid; gap: 0.4rem; align-content: start; padding: 0.8rem; border: 1px solid var(--border); border-radius: 8px; }
.ti-factor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ti-factor h4 { margin: 0; font-size: 0.85rem; }
.ti-factor p { margin: 0; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.45; }
.ti-factor .ti-thesis-line { color: var(--text-primary); font-style: italic; }
.ti-season-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 64px; margin-top: 0.3rem; }
.ti-season-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.ti-season-bar span { display: block; border-radius: 2px 2px 0 0; }
.ti-season-bar span.up { background: rgba(0, 200, 83, 0.6); }
.ti-season-bar span.down { background: rgba(255, 23, 68, 0.6); }
.ti-season-bar small { color: var(--text-muted); font-size: 0.62rem; }
.ti-season-bar.current small { color: var(--accent-gold); font-weight: 700; }
.ti-season-bar.current span { outline: 1px solid var(--accent-gold); }
@media (max-width: 1000px) {
  .ti-timeframes { grid-template-columns: 1fr; }
  .ti-hero { grid-template-columns: 1fr; gap: 0.8rem; }
  .ti-hero-steps { gap: 0.4rem; }
  .ti-hero-steps li { flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
  .ti-hero-steps small { display: none; }
  .ti-hero-steps strong { font-size: 0.78rem; line-height: 1.25; }
}
@media (max-width: 700px) {
  .ti-factor-grid { grid-template-columns: 1fr; }
  .ti-chart-wrap { height: 280px; }
  .ti-chart-wrap.tall { height: 320px; }
  .ti-counts { grid-template-columns: repeat(2, 1fr); }
}
.ti-trade-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); }
.ti-trade-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.ti-trade-dialog .ti-chart-panel { border: 0; }
.ti-invest-dialog { overflow-y: auto; }
.ti-trade-dialog-setup { margin: 0; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.45; }
/* Uranium contracting cycle */
.uranium-cycle { border-left-color: #26b5a6; }
.uranium-contracting { margin-top: 0.6rem; }
.uranium-contracting p { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.7rem; line-height: 1.4; }
.uranium-plot { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: end; height: 80px; margin-top: 14px; border-bottom: 1px solid var(--border); }
.uranium-plot span { position: relative; display: block; border-radius: 3px 3px 0 0; }
.uranium-plot span.above { background: rgba(0, 200, 83, 0.55); }
.uranium-plot span.below { background: rgba(138, 143, 150, 0.45); }
.uranium-plot b { position: absolute; top: -13px; left: 0; right: 0; color: var(--text-secondary); font-size: 0.6rem; font-weight: 600; text-align: center; }
.uranium-replacement { position: absolute; left: 0; right: 0; z-index: 1; border-top: 1px dashed var(--accent-gold); pointer-events: none; }
.uranium-replacement em { position: absolute; right: 0; top: -12px; color: var(--accent-gold); font-size: 0.58rem; font-style: normal; }
.uranium-years { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 2px; text-align: center; }
.uranium-years small { color: var(--text-muted); font-size: 0.6rem; }
.uranium-chart-wrap { position: relative; height: 170px; margin-top: 0.6rem; }
.uranium-points { display: grid; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.uranium-points li { padding: 0.4rem 0.55rem; border-left: 3px solid var(--text-muted); border-radius: 4px; background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 0.74rem; line-height: 1.4; }
.uranium-points li.bullish { border-left-color: var(--accent-green); }
.uranium-points li.bearish { border-left-color: var(--accent-red); }
.uranium-points strong { color: var(--text-primary); }
.uranium-news-title { margin: 0.75rem 0 0.3rem; color: var(--text-muted); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.uranium-news { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.uranium-news li { display: grid; gap: 0.1rem; font-size: 0.76rem; line-height: 1.35; }
.uranium-news a { color: var(--text-primary); text-decoration: none; }
.uranium-news a:hover { color: var(--accent-gold); text-decoration: underline; }
.uranium-news small { color: var(--text-muted); font-size: 0.66rem; }
.ti-uranium { display: grid; gap: 0.5rem; padding: 0.8rem; border: 1px solid var(--border); border-left: 3px solid #26b5a6; border-radius: 8px; }
.ti-uranium > p { margin: 0; color: var(--text-secondary); font-size: 0.82rem; }
.ti-uranium h4 { margin: 0; font-size: 0.85rem; }
.ti-uranium-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.4rem; }
.ti-uranium-stats div { padding: 0.45rem 0.55rem; border-radius: 6px; background: var(--bg-card); }
.ti-uranium-stats span { display: block; color: var(--text-muted); font-size: 0.68rem; }
.ti-uranium-stats strong { font-size: 0.95rem; }
.ti-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.ti-filters label { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted); font-size: 0.8rem; }
.ti-filters select { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.82rem; }
.ti-filter-count { color: var(--accent-gold); font-size: 0.8rem; }
/* Trading: pattern-at-level opportunities */
.ti-opportunity { display: grid; gap: 0.4rem; padding: 0.8rem; border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: 8px; background: var(--bg-card); cursor: pointer; transition: border-color 0.15s; }
.ti-opportunity.bullish { border-left-color: var(--accent-green); }
.ti-opportunity.bearish { border-left-color: var(--accent-red); }
.ti-opportunity:hover { border-color: var(--accent-gold); }
.ti-opportunity:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.ti-pattern-name { margin: 0; font-size: 0.9rem; font-weight: 700; }
.ti-pattern-name small { margin-left: 0.3rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; }
.ti-level-line { margin: 0; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.4; }
.ti-level-line strong { color: var(--text-primary); }
.ti-open-chart { color: var(--accent-gold); font-size: 0.74rem; font-weight: 600; }
.ti-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.ti-card-title { display: grid; gap: 0.15rem; min-width: 0; }
.ti-card-title strong { font-size: 1rem; }
.ti-card-score { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; max-width: 45%; text-align: right; }
.ti-card-pattern { font-size: 0.8rem; font-weight: 700; line-height: 1.2; }
.ti-score-ring { width: 46px; height: 46px; flex-shrink: 0; }
.ti-score-ring .track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 4; }
.ti-score-ring .fill { fill: none; stroke-width: 4; stroke-linecap: round; }
.ti-score-ring.bullish .fill { stroke: var(--accent-green); }
.ti-score-ring.bearish .fill { stroke: var(--accent-red); }
.ti-score-ring text { fill: var(--text-primary); font-size: 14px; font-weight: 700; }
.ti-card-levels { display: flex; align-items: baseline; gap: 0.6rem; color: var(--text-muted); font-size: 0.8rem; }
.ti-card-levels strong { color: var(--text-primary); font-size: 0.9rem; }
.ti-change { font-weight: 600; font-variant-numeric: tabular-nums; }
.ti-change.up { color: var(--accent-green); }
.ti-change.down { color: var(--accent-red); }
.ti-change small { color: var(--text-muted); font-size: 0.68rem; font-weight: 500; }
.ti-trigger { margin-left: auto; color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }
.dashboard2-signal-time { color: var(--text-secondary); }
.ti-factors { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ti-factor { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.12rem 0.45rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.7rem; font-weight: 600; cursor: help; }
.ti-factor.with.bullish { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: var(--accent-green); }
.ti-factor.with.bearish { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); color: var(--accent-red); }
.ti-factor.against { border: 1px dashed var(--border); color: var(--text-muted); opacity: 0.75; }
/* Uranium: concise stat tiles and the supply/demand outlook */
.uranium-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0.4rem; margin-top: 0.5rem; }
.uranium-stat { display: grid; gap: 0.05rem; padding: 0.45rem 0.55rem; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.uranium-stat span { color: var(--text-muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; }
.uranium-stat strong { font-size: 0.95rem; }
.uranium-stat small { color: var(--text-muted); font-size: 0.66rem; }
.uranium-points.compact li { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
.uranium-outlook-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.uranium-outlook-lists h5 { margin: 0 0 0.3rem; color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
.uranium-outlook-lists ul { display: grid; gap: 0.3rem; margin: 0; padding-left: 1rem; color: var(--text-secondary); font-size: 0.74rem; line-height: 1.4; }
.uranium-sources { margin: 0.6rem 0 0; color: var(--text-muted); font-size: 0.66rem; line-height: 1.5; }
.uranium-sources a { color: var(--text-secondary); }
.ti-uranium-outlook { margin: 0; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.45; }
/* War Monitor evidence: linked headlines behind the escalation vs diplomacy weighting */
.war-evidence { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.war-evidence-bar { display: flex; height: 6px; overflow: hidden; border-radius: 3px; background: var(--border); }
.war-evidence-bar .escalation { background: var(--accent-red); }
.war-evidence-bar .diplomacy { background: var(--accent-green); }
.war-evidence-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.war-evidence-cols h5 { margin: 0 0 0.3rem; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.war-evidence-cols h5.escalation { color: #ff7a92; }
.war-evidence-cols h5.diplomacy { color: #5ee49a; }
.war-evidence-cols p { margin: 0; color: var(--text-muted); font-size: 0.72rem; }
.war-evidence-list { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.war-evidence-list li { display: grid; gap: 0.05rem; font-size: 0.74rem; line-height: 1.35; }
.war-evidence-list a { color: var(--text-primary); text-decoration: none; }
.war-evidence-list a:hover { color: var(--accent-gold); text-decoration: underline; }
.war-evidence-list small { color: var(--text-muted); font-size: 0.64rem; }
@media (max-width: 700px) { .war-evidence-cols { grid-template-columns: 1fr; } }.ti-uranium-outlook .natgas-weather-header h4 { margin: 0; font-size: 0.85rem; }
.ti-uranium-outlook .natgas-weather-catalyst { margin: 0; }
.ti-uranium-outlook .uranium-chart-wrap { height: 200px; }
/* ─── Phones: use the full width ──────────────────────────────────────────────
   On desktop each layer (page, section card, panel, inner group) has its own padding and border. Stacked on a
   phone they cost a third of the screen, so here the section card becomes the page itself, panels keep a thin
   card, inner groups get thin padding, and popups open full screen. */
@media (max-width: 640px) {
  main.app-layout { padding: 0.4rem 0; }
  .section.component-panel, #prices-section { padding-left: 0.4rem; padding-right: 0.4rem; border-left: 0; border-right: 0; border-radius: 0; }
  .dashboard2-panel, .dashboard2-calendar, .forecast-commentary, .profit-calculator, .ti-timeframe, .trade-idea-disclaimer, .event-item { padding-left: 0.6rem; padding-right: 0.6rem; }
  .dashboard2-heat-sector, .dashboard2-war-summary, .dashboard2-conflict, .analysis-sentiment-card, .forecast-news, .analysis-tile,
  .natgas-weather, .natgas-storage, .forecast-goldturn, .ti-opportunity, .alt-card { padding-left: 0.5rem; padding-right: 0.5rem; }

  /* Popups fill the screen: no gap above, below or at the sides */
  body dialog:modal:not(.mobile-sheet) { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .alt-price-shell, .price-details-shell, .seasonality-dialog-shell, .trade-dialog-shell, dialog .ti-chart-panel { padding-left: 0.6rem; padding-right: 0.6rem; }
  /* The price chart runs edge to edge */
  .alt-price-panel { margin-left: -0.6rem; margin-right: -0.6rem; border-left: 0; border-right: 0; border-radius: 0; }
}

/* ─── Phone navigation ────────────────────────────────────────────────────────
   Hidden on desktop. On phones: a compact header that slides away while scrolling down, a bottom tab bar,
   a sector switcher under Markets, a "More" sheet, and single-line asset rows. */
.mobile-tabbar, .mobile-sectorbar { display: none; }
@media (max-width: 640px) {
  /* Compact top bar: title and live status on one line; the tab row moves to the bottom bar */
  body > header { grid-template-areas: "title meta" "sectors sectors"; padding: 0.55rem 0.75rem; gap: 0.4rem 0.75rem; transition: transform 0.22s ease; }
  header h1 { font-size: 1.02rem; }
  header .component-tabs { display: none; }
  .header-meta { gap: 0.45rem; font-size: 0.72rem; }
  body.mobile-header-hidden > header { transform: translateY(-100%); }
  .asset-tabs { transition: top 0.22s ease; }
  body.mobile-header-hidden .asset-tabs, body.mobile-header-hidden .ti-subtabs { top: 0; }
  body.mobile-header-hidden .ti-timeframe > h3 { top: var(--ti-subtabs-height, 45px); }
  /* Dashboard: each section's heading (and the heatmap's period tabs) stays pinned while you scroll through it */
  .dashboard2-panel > .dashboard2-panel-heading { position: sticky; top: calc(var(--component-tabs-sticky-top) + var(--component-tabs-sticky-height)); z-index: 60; margin: -0.9rem -0.6rem 0.65rem; padding: 0.9rem 0.6rem 0.55rem; border-radius: 6px 6px 0 0; background: var(--bg-card); box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.5); transition: top 0.22s ease; }
  .dashboard2-heatmap-panel > .dashboard2-panel-heading { margin-top: -1rem; padding-top: 1rem; }
  body.mobile-header-hidden .dashboard2-panel > .dashboard2-panel-heading { top: 0; }
  .ti-timeframe { --ti-timeframe-pad: 0.6rem; }

  /* Sector switcher, shown under Markets */
  body.tab-markets .mobile-sectorbar { display: flex; grid-area: sectors; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; }
  .mobile-sectorbar::-webkit-scrollbar { display: none; }
  .mobile-sectorbar button { flex: 1 0 auto; min-height: 36px; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
  .mobile-sectorbar button.active { border-color: var(--accent-gold); background: var(--accent-gold); color: #1a1d29; }

  /* Market Prices belongs to Markets only (and its empty row leaves no gap elsewhere) */
  body:not(.tab-markets) .price-sidebar { display: none; }
  main.app-layout { row-gap: 0.4rem; }
  body:not(.tab-markets) main.app-layout { row-gap: 0; padding-top: 0; }

  /* Bottom tab bar */
  body { padding-bottom: 64px; }
  .mobile-tabbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 150; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 60px; border-top: 1px solid var(--border); background: var(--bg-secondary); }
  .mobile-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 44px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.66rem; font-weight: 600; cursor: pointer; }
  .mobile-tabbar button.active { color: var(--accent-gold); }
  .mobile-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-tabbar circle { fill: currentColor; stroke: none; }

  /* "More" sheet */
  dialog.mobile-sheet:modal { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; padding: 0.4rem 0.75rem 1.2rem; border: 0; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; background: var(--bg-secondary); color: var(--text-primary); }
  .mobile-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
  .mobile-sheet-handle { width: 38px; height: 4px; margin: 0.2rem auto 0.6rem; border-radius: 2px; background: var(--border); }
  .mobile-sheet h3 { margin: 0.7rem 0 0.2rem; color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .mobile-sheet button { display: block; width: 100%; min-height: 48px; padding: 0 0.4rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: none; color: var(--text-primary); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
  .mobile-sheet button.active { color: var(--accent-gold); font-weight: 700; }

  /* Asset rows: one sideways-scrolling line, no scrollbar, edge fades where more is off-screen */
  .asset-tabs, .asset-tabs.forecast-tabs, .asset-tabs.cot-asset-tabs { flex-wrap: nowrap; gap: 1.1rem; margin: 0.6rem 0 0.75rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .asset-tabs::-webkit-scrollbar { display: none; }
  .asset-tabs button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
  .asset-tabs.fade-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .asset-tabs.fade-left { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
  .asset-tabs.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
}
/* Chart popup title: full name by default, the short form on phones */
.alt-name-short { display: none; }
@media (max-width: 640px) {
  .alt-name-full { display: none; }
  .alt-name-short { display: inline; }
  /* The name row (name + View Analysis) sticks to the top while the popup scrolls. The header wrappers are
     flattened so the row sits directly in the tall shell, which is what sticky positioning needs. */
  .alt-price-header, .alt-price-quote { display: contents; }
  .alt-price-name { position: sticky; top: 0; z-index: 4; flex-wrap: nowrap; margin: -0.9rem -0.6rem 0; padding: 0.6rem 2.9rem 0.6rem 0.6rem; border-bottom: 1px solid var(--border); background: #131a2b; }
  .alt-price-name h2 { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
  .alt-price-name .price-analysis-link { flex-shrink: 0; }
  .alt-price-ticker { display: none; }
  .alt-price-now { margin-top: 0; }
  /* The × stays in the corner of the screen as the popup scrolls */
  #alt-price-close { position: fixed; z-index: 6; }
}
/* Phones: one market per line in Market Prices (two squeezed side by side cut names off) */
@media (max-width: 640px) {
  #prices-section .price-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Supply & Demand (ag futures curve, ICE certified stocks, USDA balance sheet) */
.natgas-storage.ag-supply { border-left-color: #4fc3f7; }
.ag-supply .natgas-weather-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ag-supply .natgas-weather-header h4 { margin: 0; }
.ag-supply-headline { font-weight: 600; color: var(--text-primary); }
.ag-supply-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem 1rem; margin-top: 0.4rem; }
.ag-supply-section h5 { margin: 0.35rem 0 0.25rem; font-size: 0.78rem; cursor: help; }
.ag-supply-chart-wrap { height: 140px; }

/* Forecast summary as bullet points (chart popup overall analysis and forecast page) */
.analysis-bullets { margin: 0.35rem 0; padding-left: 1.1rem; }
.analysis-bullets li { margin: 0.2rem 0; line-height: 1.45; }
.analysis-bullets li strong { color: var(--text-primary); }
.alt-price-overall .analysis-bullets { color: var(--text-primary); font-size: 0.9rem; }

/* Skeleton loaders in the chart popup: cards, chart panes and overall analysis while their data loads */
.skeleton-bar { height: 0.7rem; margin: 0.55rem 0; border-radius: 4px; background: linear-gradient(90deg, #232d45 25%, #2f3b58 50%, #232d45 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton-bar.short { width: 60%; }
.skeleton-chip { display: inline-block; width: 3.2rem; height: 1.1rem; margin: 0; border-radius: 6px; }
.alt-card.skeleton { border-color: #2b3650; }
.alt-price-overall.skeleton .skeleton-bar { height: 0.85rem; max-width: 90%; }
.alt-price-panel.loading .alt-price-chart, .alt-price-panel.loading .alt-price-pane { background: linear-gradient(90deg, #141a2a 25%, #1d2539 50%, #141a2a 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.alt-price-panel.loading canvas, .alt-price-panel.loading .alt-price-pane-label span { visibility: hidden; }
/* Copper fundamentals: balance path bars and the discoveries map */
.copper-supply, .copper-discoveries { border-left-color: #c87533; }
.copper-path-note { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.66rem; line-height: 1.4; }
.copper-balance-chart { height: 190px; }
.copper-discoveries-wide { margin-top: 0.9rem; container-type: inline-size; }
.copper-layout { display: grid; gap: 0.8rem; }
@container (min-width: 820px) { .copper-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } .copper-map-col { position: sticky; top: calc(var(--component-tabs-sticky-top) + var(--component-tabs-sticky-height)); } }
.copper-score-key { display: grid; gap: 0.3rem; margin-top: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 6px; background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 0.72rem; line-height: 1.45; }
.copper-score-key p { margin: 0; }
.copper-score-key strong { color: var(--text-primary); }
.copper-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.copper-projects > li { display: grid; gap: 0.35rem; padding: 0.55rem 0.65rem; border-radius: 6px; background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 0.74rem; line-height: 1.4; overflow-wrap: anywhere; }
.copper-project-head { display: flex; align-items: center; gap: 0.45rem; }
.copper-project-head strong { flex: 1; min-width: 0; color: var(--text-primary); font-size: 0.8rem; }
.copper-project-head em { display: grid; flex: none; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--cu); color: #0f1419; font-size: 0.64rem; font-style: normal; font-weight: 700; }
.copper-score { flex: none; padding: 0.1rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: help; }
.copper-score small { color: var(--text-muted); font-size: 0.64rem; font-weight: 500; }
.copper-score.alt-up { border-color: rgba(46, 204, 113, 0.6); color: #2ecc71; }
.copper-score.alt-down { border-color: rgba(255, 77, 106, 0.6); color: #ff4d6a; }
.copper-owners { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; }
.copper-owner { padding: 0.12rem 0.45rem; border: 1px solid rgba(255, 215, 0, 0.45); border-radius: 4px; background: rgba(255, 215, 0, 0.06); color: var(--accent-gold); font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.copper-owner:hover, .copper-owner:focus-visible { background: rgba(255, 215, 0, 0.16); outline: none; }
.copper-owner small { color: var(--text-muted); font-weight: 500; }
.copper-owner.plain { border-color: var(--border); background: none; color: var(--text-secondary); cursor: default; }
.copper-owners .meta { color: var(--text-muted); font-size: 0.7rem; }
.copper-projects ul { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.copper-projects ul li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.4rem; }
.copper-projects ul li > span { color: var(--text-muted); font-size: 0.66rem; letter-spacing: 0.03em; text-transform: uppercase; padding-top: 0.1rem; }
.copper-projects ul li.copper-why { margin-top: 0.15rem; padding-top: 0.3rem; border-top: 1px dashed var(--border); color: var(--text-muted); }
.copper-projects b { color: var(--text-primary); }
.copper-map { margin-top: 0.6rem; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: rgba(68, 138, 255, 0.04); }
.copper-map svg { display: block; width: 100%; height: auto; }
.copper-map .land { fill: rgba(138, 143, 150, 0.2); stroke: rgba(138, 143, 150, 0.35); stroke-width: 0.3; stroke-linejoin: round; }
.copper-map .halo { opacity: 0.35; filter: url(#cu-blur); }
.copper-map .dot { opacity: 0.85; }
.copper-map line { stroke: var(--text-muted); stroke-width: 0.35; }
.copper-map .badge { stroke: #0f1419; stroke-width: 0.5; }
.copper-map text { fill: #0f1419; font-size: 4.2px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.cu-producing { --cu: #00c853; }
.cu-building { --cu: #ffd700; }
.cu-study { --cu: #448aff; }
.cu-stalled { --cu: #ff1744; }
.copper-map g circle { fill: var(--cu); }
.copper-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.4rem; color: var(--text-muted); font-size: 0.66rem; }
.copper-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--cu); vertical-align: middle; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar, .alt-price-panel.loading .alt-price-chart, .alt-price-panel.loading .alt-price-pane { animation: none; } }

/* ─── Accounts: sign-in screens, account menu, admin page ─────────────────── */
html.auth-checking body > *, html.auth-locked body > :not(#auth-screen) { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(400px, 100%); padding: 2rem 1.75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); }
.auth-logo { display: block; width: 52px; height: 52px; margin: 0 0 0.75rem; }
.brand-logo { flex: none; width: 1.5em; height: 1.5em; }
header h1 a { display: inline-flex; align-items: center; gap: 0.5rem; }
.auth-brand { margin-bottom: 0.4rem; font-size: 1.35rem; font-weight: 600; color: var(--accent-gold); }
.auth-title { margin: 0.6rem 0 0.4rem; font-size: 1.1rem; font-weight: 600; }
.auth-lead { margin-bottom: 1.25rem; color: var(--text-secondary); font-size: 0.9rem; }
.auth-google, .auth-primary, .auth-secondary { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; border-radius: 6px; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.auth-google { border: 1px solid var(--border); background: #fff; color: #1f1f1f; }
.auth-primary { border: 0; background: var(--accent-gold); color: #1a1500; }
.auth-secondary { border: 1px solid var(--border); background: transparent; color: var(--text-primary); }
.auth-google:disabled, .auth-primary:disabled { opacity: 0.6; cursor: wait; }
.auth-google:focus-visible, .auth-primary:focus-visible, .auth-secondary:focus-visible, .auth-links button:focus-visible, .auth-form input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0; color: var(--text-muted); font-size: 0.78rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.auth-form { display: grid; gap: 0.85rem; }
.auth-form label { display: grid; gap: 0.3rem; color: var(--text-secondary); font-size: 0.8rem; }
.auth-form input { min-height: 40px; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 0.92rem; }
.auth-message { min-height: 1.1em; font-size: 0.8rem; color: var(--accent-red); }
.auth-message:empty { display: none; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }
.auth-links button { padding: 0; border: 0; background: none; color: var(--accent-blue); font: inherit; font-size: 0.82rem; cursor: pointer; }
.auth-signed-in { margin-bottom: 1.25rem; font-size: 0.85rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.auth-actions { display: grid; gap: 0.6rem; }

.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; border-radius: 50%; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.account-avatar { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--accent-gold); font-weight: 600; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 300; min-width: 230px; max-width: min(320px, calc(100vw - 2rem)); padding: 0.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); box-shadow: var(--shadow); }
.account-menu-who { display: grid; gap: 0.1rem; padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.account-menu-who strong { color: var(--text-primary); font-size: 0.85rem; }
.account-menu-who span { color: var(--text-muted); font-size: 0.75rem; }
.account-menu-item { display: block; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: 6px; background: none; color: var(--text-primary); font: inherit; font-size: 0.85rem; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--bg-card); outline: none; }
/* Between 641 and 768px the header stacks and the account menu sits on the left, so open the panel rightwards */
@media (min-width: 641px) and (max-width: 768px) { .account-menu-panel { right: auto; left: 0; } }

/* ─── Crop Weather, full width (forecast page and the chart's details popup) ─── */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crop-weather-wide { margin-top: 0.9rem; padding: 0.9rem 1rem 1rem; }
dialog.alt-details-dialog.alt-details-wide { width: min(1240px, calc(100vw - 2rem)); }
.alt-details-wide #alt-details-content.crop-weather-wide { margin-top: 0.9rem; }
.cw-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }
.cw-title { display: grid; gap: 0.1rem; }
.cw-title h4 { margin: 0; font-size: 0.95rem; }
.cw-updated { color: var(--text-muted); font-size: 0.72rem; cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.cw-call { padding: 0.3rem 0.75rem; border-radius: 999px; background: #3b424a; color: #e8eaed; font-size: 0.85rem; font-weight: 750; white-space: nowrap; }
.cw-call.bullish { background: #15553e; color: #a5f3ce; }
.cw-call.bearish { background: #6c2531; color: #ffccd1; }
.cw-call.small { padding: 0.12rem 0.5rem; font-size: 0.72rem; }
.cw-impact { font-size: 0.82rem; }
.cw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0.7rem 0 0.9rem; }
.cw-tile { display: grid; gap: 0.15rem; padding: 0.6rem 0.75rem; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.cw-tile span { color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cw-tile strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cw-tile strong.bullish { color: #8de4ba; }
.cw-tile strong.bearish { color: #ffa8b0; }
.cw-tile small { color: var(--text-secondary); font-size: 0.72rem; }

.cw-map-card { border: 1px solid var(--border); border-radius: 8px; background: rgba(68, 138, 255, 0.04); overflow: hidden; }
.cw-map-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.cw-modes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cw-modes button { min-height: 30px; padding: 0.25rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.75rem; cursor: pointer; }
.cw-modes button[aria-pressed="true"] { border-color: #4fc3f7; background: rgba(79, 195, 247, 0.14); color: var(--text-primary); }
.cw-modes button:focus-visible, .cw-region:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.cw-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; color: var(--text-muted); font-size: 0.7rem; }
.cw-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--cw); vertical-align: middle; }
.cw-map svg { display: block; width: 100%; height: auto; }
.cw-map .land { fill: rgba(138, 143, 150, 0.2); stroke: rgba(138, 143, 150, 0.35); stroke-width: 0.3; stroke-linejoin: round; }
.cw-region { cursor: pointer; outline: none; }
.cw-region .dot { fill: var(--cw); fill-opacity: 0.55; stroke: var(--cw); stroke-width: 0.5; }
.cw-region .badge { fill: var(--cw); stroke: #0f1419; stroke-width: 0.5; }
.cw-region .num { fill: #0f1419; font-size: 3.8px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.cw-region .val { fill: var(--text-primary); font-size: 3.8px; font-weight: 600; dominant-baseline: central; paint-order: stroke; stroke: #0f1419; stroke-width: 0.9px; pointer-events: none; }
.cw-region:hover .dot, .cw-region:focus-visible .dot { fill-opacity: 0.85; }
.cw-map-note { margin: 0; padding: 0.45rem 0.7rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.7rem; }

/* Map and table colors: price effect, rain (% of normal) and temperature (vs normal) */
.cw-bullish { --cw: #3ecf8e; } .cw-bearish { --cw: #ff6b7d; } .cw-neutral { --cw: #b8c1cc; } .cw-quiet { --cw: #5b6470; }
.cw-vdry { --cw: #c8793a; } .cw-dry { --cw: #e2b36b; } .cw-normal { --cw: #b8c1cc; } .cw-wet { --cw: #4fc3f7; } .cw-vwet { --cw: #2f7fd8; } .cw-none { --cw: #5b6470; }
.cw-cold { --cw: #2f7fd8; } .cw-cool { --cw: #8fd3f5; } .cw-warm { --cw: #ffb366; } .cw-hot { --cw: #ff5a5a; }
.cw-frost { --cw: #b28dff; }

/* Risk flags under a region's weather status (frost nights, disease weather, dust, dry air) */
.cw-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.cw-flag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(255, 179, 102, 0.14); color: #ffd2a1; font-size: 0.68rem; font-weight: 500; white-space: nowrap; cursor: help; }
.cw-flag.alert { background: rgba(178, 141, 255, 0.2); color: #dccbff; font-weight: 650; }
.cw-table td.cw-river-warn { color: #ffd2a1; }
.cw-rivers-note { border-top: 0; padding: 0.4rem 0 0; }

.cw-section { margin: 1.1rem 0 0.45rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.cw-enso-text { margin: 0 0 0.5rem; color: var(--text-secondary); font-size: 0.8rem; }
.cw-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.cw-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.cw-table th, .cw-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: left; vertical-align: middle; white-space: nowrap; }
.cw-table thead th { color: var(--text-muted); font-size: 0.7rem; font-weight: 600; background: rgba(255, 255, 255, 0.02); }
.cw-table tbody tr:last-child > * { border-bottom: 0; }
.cw-table tbody th { font-weight: 600; }
.cw-table small { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.cw-table td.cw-wrap { white-space: normal; min-width: 240px; color: var(--text-secondary); }
.cw-table tr.cw-off { opacity: 0.6; }
.cw-table tr.cw-flash > * { background: rgba(79, 195, 247, 0.16); transition: background 0.3s; }
.cw-idx { width: 1%; }
.cw-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cw); color: #0f1419; font-size: 0.7rem; font-weight: 700; }
.cw-chip { display: inline-block; min-width: 3.4rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: color-mix(in srgb, var(--cw) 22%, transparent); color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: center; }
.cw-num { font-variant-numeric: tabular-nums; }
.cw-num.bullish { color: #8de4ba; } .cw-num.bearish { color: #ffa8b0; }

@media (max-width: 900px) { .cw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .crop-weather-wide { padding: 0.7rem; }
  .cw-region .val { display: none; }
}
/* Trading and Investing are separate tabs now (no switch bar), so timeframe headings pin right under the main tabs */
.ti-section { --ti-subtabs-height: 0px; }

/* Gas Weather: the overnight forecast change, called out above the catalyst, and its regional breakdown */
.natgas-weather-revision { margin: 0 0 0.45rem; padding: 0.35rem 0.5rem; border-radius: 4px; border-left: 3px solid var(--text-muted); background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); font-size: 0.75rem; line-height: 1.4; }
.natgas-weather-revision strong { color: var(--text-primary); }
.natgas-weather-revision.bullish { border-left-color: var(--accent-green); background: rgba(0, 200, 83, 0.08); }
.natgas-weather-revision.bearish { border-left-color: var(--accent-red); background: rgba(255, 23, 68, 0.08); }
.weather-regions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: -0.1rem 0 0.35rem; color: var(--text-muted); font-size: 0.68rem; cursor: help; }
.weather-regions .bullish { color: #8de4ba; }
.weather-regions .bearish { color: #ffa8b0; }

/* Gas Weather: weather models (overnight change per model) and ensemble odds */
.gas-models { margin-top: 0.5rem; }
.gas-models .weather-row span small { display: block; color: var(--text-muted); font-size: 0.66rem; }
.gas-models .technical-value .bullish { color: #8de4ba; }
.gas-models .technical-value .bearish { color: #ffa8b0; }
.gas-models .weather-early.bullish { color: #8de4ba; }
.gas-models .weather-early.bearish { color: #ffa8b0; }

/* Crop Weather growing regions: one card per region instead of a wide table, so nothing scrolls sideways.
   Wide: number · region · stage · metrics · status on one line. Narrow: metrics wrap under the name. */
.cw-regions { list-style: none; display: grid; gap: 0.5rem; container-type: inline-size; }
.cw-region-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "badge name status" "badge stage stage" "metrics metrics metrics"; gap: 0.35rem 0.7rem; align-items: start; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.02); }
.cw-region-card.cw-off { opacity: 0.6; }
.cw-region-card.cw-flash { background: rgba(79, 195, 247, 0.16); transition: background 0.3s; }
.cw-rc-badge { grid-area: badge; padding-top: 0.1rem; }
.cw-rc-name { grid-area: name; min-width: 0; font-size: 0.85rem; }
.cw-rc-name strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.cw-rc-name small, .cw-rc-stage small { display: block; color: var(--text-muted); font-size: 0.7rem; }
.cw-rc-stage { grid-area: stage; font-size: 0.8rem; }
.cw-rc-status { grid-area: status; text-align: right; font-size: 0.8rem; font-weight: 600; max-width: 14rem; }
.cw-rc-status .cw-flags { justify-content: flex-end; }
.cw-rc-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem 0.75rem; margin: 0.15rem 0 0; }
.cw-metric { min-width: 0; }
.cw-metric dt { margin-bottom: 0.15rem; color: var(--text-muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; }
.cw-metric dd { margin: 0; font-size: 0.8rem; }
.cw-metric dd small { display: block; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.68rem; line-height: 1.3; }
.cw-rc-metrics .cw-chip { min-width: 3.6rem; }
@container (min-width: 900px) {
  .cw-region-card { grid-template-columns: 26px minmax(150px, 1.2fr) minmax(95px, 0.7fr) minmax(0, 3.4fr) minmax(130px, 1fr); grid-template-areas: "badge name stage metrics status"; align-items: center; }
  .cw-rc-metrics { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); margin: 0; }
}

/* Narrow screens: Crop Weather's other tables (river levels, El Niño outlook) become stacked, labelled rows */
.cw-table-wrap { container-type: inline-size; }
@container (max-width: 640px) {
  .cw-table thead { display: none; }
  .cw-table, .cw-table tbody { display: block; }
  .cw-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.75rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .cw-table tr:last-child { border-bottom: 0; }
  .cw-table th, .cw-table td { display: block; padding: 0; border: 0; white-space: normal; }
  .cw-table th[scope='row'] { grid-column: 1 / -1; }
  .cw-table td.cw-wrap { grid-column: 1 / -1; min-width: 0; }
  .cw-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.1rem; color: var(--text-muted); font-size: 0.64rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; }
}

/* EIA Storage: the expected value for the upcoming report, on its own line under the date */
.natgas-storage-next div .natgas-storage-expected { display: block; margin-top: 0.15rem; color: var(--text-secondary); font-weight: 400; }
.ag-supply-section .wasde-prior { color: var(--text-muted); white-space: nowrap; }
.natgas-storage-expected strong { color: var(--text-primary); font-weight: 700; }
.natgas-storage-expected .natgas-storage-pending { color: var(--text-primary); font-weight: 600; }
.natgas-storage-expected small { color: var(--text-muted); }

/* Gold Cycle Tracker: compact rows (goal · what's left); the full explanation is in each row's tooltip */
.goldturn-signal { cursor: help; }
.goldturn-signal small.goldturn-brief { color: var(--text-secondary); }
.goldturn-signal.met .goldturn-left { color: var(--accent-green); font-weight: 600; }
.goldturn-signal.watch .goldturn-left { color: var(--accent-gold); }

/* Send feedback popup (avatar menu) and the menu's unread badge */
.feedback-dialog { width: min(520px, calc(100vw - 2rem)); max-height: 92vh; margin: auto; padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); }
.feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.feedback-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.feedback-head h2, .feedback-done h2 { font-size: 1.1rem; }
.feedback-lead, .feedback-done p { margin: 0.35rem 0 0.9rem; color: var(--text-secondary); font-size: 0.85rem; }
.feedback-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin: 0 0 0.9rem; padding: 0; border: 0; }
.feedback-types legend { margin-bottom: 0.4rem; color: var(--text-secondary); font-size: 0.8rem; }
.feedback-types label { position: relative; display: block; cursor: pointer; }
.feedback-types input { position: absolute; opacity: 0; }
.feedback-types span { display: grid; gap: 0.1rem; height: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; }
.feedback-types span small { color: var(--text-muted); font-size: 0.72rem; }
.feedback-types input:checked + span { border-color: var(--accent-gold); background: rgba(255, 215, 0, 0.1); }
.feedback-types input:focus-visible + span { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.feedback-message { display: grid; gap: 0.35rem; color: var(--text-secondary); font-size: 0.8rem; }
.feedback-message textarea { width: 100%; min-height: 120px; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 0.9rem; resize: vertical; }
.feedback-message textarea:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.feedback-error { min-height: 1.1em; margin-top: 0.4rem; color: var(--accent-red); font-size: 0.8rem; }
.feedback-error:empty { min-height: 0; margin: 0; }
.feedback-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }
.feedback-send, .feedback-cancel { min-height: 38px; padding: 0.4rem 1.1rem; border-radius: 6px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.feedback-send { border: 0; background: var(--accent-gold); color: #1a1500; }
.feedback-send:disabled { opacity: 0.6; cursor: wait; }
.feedback-cancel { border: 1px solid var(--border); background: transparent; color: var(--text-primary); }
@media (max-width: 480px) { .feedback-types { grid-template-columns: minmax(0, 1fr); } }
.account-badge { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--accent-blue); color: #fff; font-size: 0.68rem; font-weight: 700; }
.account-avatar-wrap { position: relative; display: inline-block; }
.account-avatar-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border: 2px solid var(--bg-secondary); border-radius: 50%; background: var(--accent-blue); }

/* Fundamental Movers: one compact line per event (two lines on phones) */
.dashboard2-movers { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.dashboard2-mover { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.55rem; border: 1px solid transparent; border-left: 3px solid var(--text-muted); border-radius: 6px; background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; }
.dashboard2-mover:hover { border-color: var(--accent-gold); }
.dashboard2-mover.bullish { border-left-color: var(--accent-green); }
.dashboard2-mover.bearish { border-left-color: var(--accent-red); }
.dashboard2-mover-arrow { font-size: 0.7rem; }
.dashboard2-mover.bullish .dashboard2-mover-arrow { color: var(--accent-green); }
.dashboard2-mover.bearish .dashboard2-mover-arrow { color: var(--accent-red); }
.dashboard2-mover-name { white-space: nowrap; }
.dashboard2-mover-text { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.dashboard2-mover-move { font-weight: 700; font-variant-numeric: tabular-nums; }
.dashboard2-mover-move.positive { color: var(--accent-green); }
.dashboard2-mover-move.negative { color: var(--accent-red); }
.dashboard2-mover-time { min-width: 1.8rem; color: var(--text-muted); font-size: 0.75rem; text-align: right; }
.dashboard2-movers .dashboard2-empty { padding: 0.2rem 0; }
@media (max-width: 640px) {
  .dashboard2-mover { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 0.15rem; }
  .dashboard2-mover-text { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
}

/* Natural gas Weather Tracker: line chart + compact 2x2 tables */
.weather-updated-inline { margin-left: 0.35rem; color: var(--text-muted); font-size: 0.66rem; font-weight: 400; }
.natgas-weather-chart { margin: 0.2rem 0 0.55rem; }
.natgas-weather-chart-title { margin: 0 0 0.2rem; color: var(--text-muted); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; }
.natgas-weather-chart-box { position: relative; height: 200px; }
#forecast-weather, .natgas-weather:has(.natgas-weather-compact) { container-type: inline-size; }
.natgas-weather-compact { grid-template-columns: minmax(0, 1fr); column-gap: 1rem; row-gap: 0.55rem; }
.natgas-weather-compact .weather-row span small { display: block; color: var(--text-muted); font-size: 0.64rem; }
.natgas-weather-compact .weather-row > .technical-value { white-space: nowrap; }
/* Two columns only when the tracker itself is wide (e.g. the details popup) */
@container (min-width: 520px) {
  .natgas-weather-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .natgas-weather-chart-box { height: 230px; }
}