:root {
  --bg: #080b12;
  --panel: #101625;
  --panel2: #121a2b;
  --text: #e8eefc;
  --muted: #8d9ab5;
  --line: rgba(255,255,255,.08);
  --accent: #37d67a;
  --danger: #ff5c7a;
  --warn: #ffd166;
  --cyan: #3bdfff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(55,214,122,.14), transparent 35%),
    radial-gradient(circle at top right, rgba(79,156,255,.12), transparent 35%),
    var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.page {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.nav a,
.nav a:visited {
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 14px;
  line-height: 1;
}

.nav a:hover {
  border-color: rgba(55,214,122,.45);
  background: rgba(55,214,122,.08);
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 24px;
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 8px;
}

h1 {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1;
  margin: 0;
}

h2 {
  margin-top: 0;
}

.subtitle {
  color: var(--muted);
  margin: 12px 0 0;
}

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.25);
  margin-bottom: 18px;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.expandedControls {
  grid-template-columns: repeat(6, 1fr) auto;
}

.field label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

input,
select,
button {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 0 12px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 15px;
}

button {
  cursor: pointer;
  background: var(--accent);
  color: #061008;
  border: none;
  font-weight: 800;
  padding: 0 22px;
}

button.smallBtn {
  min-height: 32px;
  width: auto;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
}

button.dangerBtn {
  background: rgba(255,92,122,.18);
  color: var(--danger);
  border: 1px solid rgba(255,92,122,.35);
}

.status {
  min-height: 24px;
  color: var(--muted);
  margin: 8px 0 14px;
}

.status.error {
  color: var(--danger);
}

.forecastHero {
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  gap: 14px;
  margin-bottom: 18px;
}

.medianBox {
  background:
    radial-gradient(circle at top left, rgba(55,214,122,.26), transparent 45%),
    linear-gradient(180deg, rgba(55,214,122,.13), rgba(255,255,255,.045));
  border: 1px solid rgba(55,214,122,.35);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 20px 80px rgba(55,214,122,.08);
}

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

.medianBox span,
.summaryBox span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.medianBox strong {
  display: block;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1;
}

.medianBox em {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
  font-size: 22px;
}

.summaryBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.summaryBox > div {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}

.summaryBox strong {
  display: block;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.card {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.card strong {
  font-size: 26px;
}

.card small {
  display: block;
  color: var(--muted);
  margin-top: 8px;
  font-size: 13px;
}

.card.highlight {
  border-color: rgba(55,214,122,.35);
  background: rgba(55,214,122,.08);
}

.card.highlight small,
.goodText {
  color: var(--accent);
}

.card.goodCard {
  border-color: rgba(55,214,122,.22);
}

.card.goodCard small {
  color: var(--accent);
}

.card.dangerCard {
  border-color: rgba(255,92,122,.22);
}

.card.dangerCard small,
.badText {
  color: var(--danger);
}

.neutralText {
  color: var(--muted);
}

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

.chartHeader h2 {
  margin: 0;
}

.chartHeader p {
  color: var(--muted);
  margin: 6px 0 0;
}

canvas {
  width: 100%;
  max-height: 620px;
}

.targetStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.targetPill {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 14px;
}

.targetPill span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.targetPill strong {
  font-size: 22px;
}

.goodPill {
  border-color: rgba(55,214,122,.25);
}

.goodPill strong {
  color: var(--accent);
}

.dangerPill {
  border-color: rgba(255,92,122,.25);
}

.dangerPill strong {
  color: var(--danger);
}

.medianPill {
  border-color: rgba(255,255,255,.25);
}

.infoPanel {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  align-items: start;
}

.infoPanel p {
  color: var(--muted);
  line-height: 1.5;
}

.finePrint {
  color: var(--warn) !important;
}

.metaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.metaGrid > div {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 13px;
}

.metaGrid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.metaGrid strong {
  display: block;
  font-size: 15px;
}

.compareControls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 6px;
}

.tableWrap {
  overflow-x: auto;
}

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

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

td {
  color: var(--text);
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.badge.good {
  background: rgba(55,214,122,.16);
  color: var(--accent);
}

.badge.warn {
  background: rgba(255,209,102,.15);
  color: var(--warn);
}

.badge.bad {
  background: rgba(255,92,122,.15);
  color: var(--danger);
}

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

  .expandedControls button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 850px) {
  .controls,
  .expandedControls {
    grid-template-columns: 1fr;
  }

  .grid,
  .forecastHero,
  .infoPanel {
    grid-template-columns: 1fr;
  }

  .summaryBox,
  .targetStrip,
  .metaGrid {
    grid-template-columns: 1fr;
  }

  .hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .compareControls {
    grid-template-columns: 1fr;
  }
}
/* Fix dropdown contrast */
select {
  background-color: #1b2435;
  color: var(--text);
  border-color: var(--line);
}

select option {
  background-color: #101625;
  color: #e8eefc;
}

select:focus,
input:focus {
  outline: none;
  border-color: rgba(55,214,122,.65);
  box-shadow: 0 0 0 3px rgba(55,214,122,.12);
}

/* Firefox dropdown polish */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--text);
}
.noteGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

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

/* Risk monitor polish */
.noteCell {
  white-space: normal;
  min-width: 260px;
  max-width: 420px;
  line-height: 1.35;
}

tr.riskRowCritical {
  background: rgba(255, 92, 122, 0.075);
}

tr.riskRowWarning,
tr.riskRowWatch,
tr.riskRowThinWarning {
  background: rgba(255, 209, 102, 0.055);
}

tr.riskRowThin {
  background: rgba(255, 209, 102, 0.025);
}

tr.riskRowNormal {
  background: rgba(55, 214, 122, 0.025);
}

tr.riskRowNoData {
  opacity: 0.72;
}

tr.riskRowCritical td:first-child {
  border-left: 3px solid var(--danger);
}

tr.riskRowWarning td:first-child,
tr.riskRowWatch td:first-child,
tr.riskRowThinWarning td:first-child {
  border-left: 3px solid var(--warn);
}

tr.riskRowNormal td:first-child {
  border-left: 3px solid var(--accent);
}

.watchControls {
  grid-template-columns: 2fr 1fr 1fr auto;
}

.miniLink,
.miniLink:visited {
  display: inline-block;
  color: #061008;
  background: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.miniLink:hover {
  filter: brightness(1.08);
}

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

.commandBox {
  display: block;
  overflow-x: auto;
  white-space: pre-wrap;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  color: var(--accent);
  font-size: 14px;
  line-height: 1.5;
}

code {
  color: var(--accent);
  white-space: normal;
}

.collapsedPayload {
  display: none;
}

.adminTools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.adminToolCard {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 16px;
}

.adminToolCard h3 {
  margin: 0 0 8px;
}

.adminToolCard p {
  color: var(--muted);
  line-height: 1.4;
}

.adminToolCard input {
  margin-bottom: 10px;
}

.exportGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

.warnBtn {
  background: rgba(255, 209, 102, .18);
  color: var(--warn);
  border: 1px solid rgba(255, 209, 102, .38);
}

.warnBtn:hover {
  background: rgba(255, 209, 102, .26);
}

.loginPage {
  max-width: 640px;
}

.loginPanel form {
  display: grid;
  gap: 16px;
}

.nav a[href="/logout"] {
  border-color: rgba(255, 92, 122, .35);
  color: #ff8aa0;
}

.nav a[href="/logout"]:hover {
  background: rgba(255, 92, 122, .12);
}

.disabledControl,
button:disabled,
select:disabled,
input:disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: grayscale(0.6);
}

a.disabledControl,
a.disabledControl:visited {
  pointer-events: auto;
  opacity: 0.45;
  filter: grayscale(0.6);
  cursor: not-allowed !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--muted) !important;
}

.noteGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.miniCard {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 14px;
}

.miniCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.miniCard strong {
  color: var(--text);
  font-size: 15px;
}

.warnText {
  color: var(--warn);
}

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

.clickRow {
  cursor: pointer;
}

.clickRow:hover {
  background: rgba(47, 211, 131, .08);
}

.tableLink {
  color: var(--text);
  text-decoration: none;
}

.tableLink:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Compact Sector Detail cards */
.detailStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 24px;
}

.detailStatCard {
  min-height: 112px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    linear-gradient(180deg, rgba(28, 39, 60, .82), rgba(15, 23, 38, .92));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

.detailStatCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.detailStatCard strong {
  display: block;
  color: var(--text);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1;
  margin-bottom: 8px;
}

.detailStatCard small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.detailScoreCard {
  border-color: rgba(47, 211, 131, .42);
  background:
    radial-gradient(circle at 20% 0%, rgba(47, 211, 131, .18), transparent 38%),
    linear-gradient(180deg, rgba(12, 60, 46, .78), rgba(15, 23, 38, .94));
}

.detailValueGood {
  color: var(--good) !important;
}

.detailValueWarn {
  color: var(--warn) !important;
}

.detailValueBad {
  color: var(--bad) !important;
}

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

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

.detailStatsGrid + .panel {
  margin-top: 8px;
}

.detailStatsGrid .detailStatCard:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 211, 131, .28);
}

.sortableHeader {
  cursor: pointer;
  user-select: none;
}

.sortableHeader:hover {
  color: var(--accent);
}

.sortableHeader::after {
  content: " ↕";
  opacity: .45;
  font-size: 11px;
}

.sortableHeader.sortAsc::after {
  content: " ↑";
  opacity: 1;
}

.sortableHeader.sortDesc::after {
  content: " ↓";
  opacity: 1;
}

.sortableHeader {
  cursor: pointer;
  user-select: none;
}

.sortableHeader:hover {
  color: var(--accent);
}

.sortableHeader::after {
  content: " ↕";
  opacity: .45;
  font-size: 11px;
}

.sortableHeader.sortAsc::after {
  content: " ↑";
  opacity: 1;
}

.sortableHeader.sortDesc::after {
  content: " ↓";
  opacity: 1;
}

.sectorInsightPanel {
  margin-top: 8px;
}

.sectorInsightPanel #sectorInsightHeadline {
  color: var(--text);
  font-size: 16px;
  margin-top: 6px;
}

.insightBullets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.insightBullet {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--muted);
  line-height: 1.35;
}

.detailLeadersGrid {
  margin-top: 16px;
}

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

.journalForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.journalForm label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.journalForm input,
.journalForm select,
.journalForm textarea,
.journalFilters input,
.journalFilters select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}

.journalForm textarea {
  resize: vertical;
}

.journalFull {
  grid-column: 1 / -1;
}

.journalFilters {
  display: grid;
  grid-template-columns: 1fr 220px 160px;
  gap: 14px;
  margin-bottom: 18px;
}

.journalList {
  display: grid;
  gap: 14px;
}

.journalNote {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 18px;
}

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

.journalNote h3 {
  margin: 14px 0 8px;
}

.journalNote p {
  color: var(--muted);
  line-height: 1.45;
}

.journalActions {
  display: flex;
  gap: 8px;
}

.dangerBtn {
  background: rgba(255, 82, 120, .18) !important;
  color: var(--bad) !important;
  border-color: rgba(255, 82, 120, .35) !important;
}

.emptyState {
  padding: 22px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 16px;
  color: var(--muted);
}

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

  .journalFilters {
    grid-template-columns: 1fr;
  }

  .journalNoteHeader {
    align-items: flex-start;
    flex-direction: column;
  }
}

.buttonRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.contextNoteList {
  display: grid;
  gap: 12px;
}

.contextNote {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.contextNote strong {
  display: block;
  margin-bottom: 6px;
}

.contextNote p {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.4;
}

.contextNote small {
  color: var(--muted);
}

@media (max-width: 800px) {
  .contextNote {
    flex-direction: column;
  }
}

.helpSteps {
  display: grid;
  gap: 14px;
}

.helpStep {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 16px;
}

.helpStep strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
}

.helpStep p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.helpStep a {
  color: var(--accent);
  text-decoration: none;
}

.helpStep a:hover {
  text-decoration: underline;
}

.helpGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.helpCard {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 16px;
}

.helpCard h3 {
  margin: 0 0 8px;
}

.helpCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.adminHelpPanel {
  border-color: rgba(255, 209, 102, .25);
}

.adminHelpPanel h3 {
  margin-top: 24px;
}

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

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

.fundCardLink {
  text-decoration: none;
  color: inherit;
  display: block;
}

.fundCardLink:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 211, 131, .35);
}

.allocationGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.allocationList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.allocationRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}

.allocationRow span {
  color: var(--muted);
}

.allocationRow strong {
  color: var(--text);
}

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

.missingHoldingGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.missingHoldingCard {
  border: 1px solid rgba(255, 209, 102, .22);
  background: rgba(255, 209, 102, .06);
  border-radius: 16px;
  padding: 14px;
}

.missingHoldingCard span {
  display: block;
  color: var(--warn);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}

.missingHoldingCard strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  margin-bottom: 6px;
}

.missingHoldingCard small {
  display: block;
  color: var(--muted);
  line-height: 1.3;
  min-height: 34px;
  margin-bottom: 10px;
}

.missingCommandBlock {
  margin-top: 18px;
}

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

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

.etfHelpPanel {
  border-color: rgba(47, 211, 131, .16);
}

.etfHelpPanel p {
  color: var(--muted);
  line-height: 1.45;
}

.etfHelpPanel h2 {
  margin-bottom: 8px;
}

.changeTrackerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.changeTrackerGrid h3 {
  margin: 0 0 10px;
}

.allocationRow small {
  color: var(--muted);
  font-size: 11px;
}

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

/* Options Analyzer polish */
.optionsStrikeGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.optionStrikeCard {
  border-radius: 18px;
  padding: 14px;
  background: rgba(16, 27, 46, .78);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.optionStrikeCard h3 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: .02em;
}

.callStrikeCard {
  border-color: rgba(47, 211, 131, .24);
  background:
    linear-gradient(180deg, rgba(47, 211, 131, .075), rgba(16, 27, 46, .72)),
    rgba(16, 27, 46, .78);
}

.putStrikeCard {
  border-color: rgba(255, 77, 119, .24);
  background:
    linear-gradient(180deg, rgba(255, 77, 119, .075), rgba(16, 27, 46, .72)),
    rgba(16, 27, 46, .78);
}

.callStrikeCard h3 {
  color: var(--good);
}

.putStrikeCard h3 {
  color: var(--bad);
}

.optionsTopList {
  display: grid;
  gap: 6px;
}

.optionsTopRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
}

.optionsTopRow > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.optionsTopRow strong {
  color: var(--text);
  font-size: 14px;
}

.optionsTopRow b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.callTopRow {
  border-left: 3px solid rgba(47, 211, 131, .8);
}

.putTopRow {
  border-left: 3px solid rgba(255, 77, 119, .8);
}

.rankPill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255,255,255,.06);
}

.compactEmpty {
  padding: 8px 10px;
  min-height: 30px;
}

/* Strike Wall Matrix polish */
.strikeMatrixWrap {
  max-height: 620px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}

.strikeMatrixTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.strikeMatrixTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12, 20, 35, .98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.strikeMatrixTable th,
.strikeMatrixTable td {
  padding: 9px 12px;
}

.strikeMatrixTable tbody tr:nth-child(even) {
  background: rgba(255,255,255,.018);
}

.strikeMatrixTable tbody tr:hover {
  background: rgba(255,255,255,.055);
}

.numberCell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.strikeCell {
  font-variant-numeric: tabular-nums;
}

.callCol,
.callCell {
  color: rgba(47, 211, 131, .96);
}

.putCol,
.putCell {
  color: rgba(255, 77, 119, .96);
}

.strikeMatrixTable tbody tr.atmStrikeRow {
  outline: 1px solid rgba(255,255,255,.25);
  outline-offset: -1px;
  background: rgba(255,255,255,.055);
}

.strikeMatrixTable tbody tr.callWallRow {
  background: linear-gradient(90deg, rgba(47, 211, 131, .18), rgba(47, 211, 131, .03));
}

.strikeMatrixTable tbody tr.putWallRow {
  background: linear-gradient(90deg, rgba(255, 77, 119, .18), rgba(255, 77, 119, .03));
}

.strikeMatrixTable tbody tr.callWallRow.putWallRow {
  background: linear-gradient(90deg, rgba(255, 209, 102, .18), rgba(255, 209, 102, .035));
}

.strikeMatrixTable tbody tr.callWallRow .strikeCell::after {
  content: " CALL WALL";
  margin-left: 8px;
  color: var(--good);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.strikeMatrixTable tbody tr.putWallRow .strikeCell::after {
  content: " PUT WALL";
  margin-left: 8px;
  color: var(--bad);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.strikeMatrixTable tbody tr.atmStrikeRow .strikeCell strong::before {
  content: "ATM ";
  color: var(--warn);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

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

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

  .strikeMatrixWrap {
    max-height: 520px;
  }
}

/* Options Analyzer polish */
.optionsStrikeGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.optionStrikeCard {
  border-radius: 18px;
  padding: 14px;
  background: rgba(16, 27, 46, .78);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.optionStrikeCard h3 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: .02em;
}

.callStrikeCard {
  border-color: rgba(47, 211, 131, .24);
  background:
    linear-gradient(180deg, rgba(47, 211, 131, .075), rgba(16, 27, 46, .72)),
    rgba(16, 27, 46, .78);
}

.putStrikeCard {
  border-color: rgba(255, 77, 119, .24);
  background:
    linear-gradient(180deg, rgba(255, 77, 119, .075), rgba(16, 27, 46, .72)),
    rgba(16, 27, 46, .78);
}

.callStrikeCard h3 {
  color: var(--good);
}

.putStrikeCard h3 {
  color: var(--bad);
}

.optionsTopList {
  display: grid;
  gap: 6px;
}

.optionsTopRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
}

.optionsTopRow > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.optionsTopRow strong {
  color: var(--text);
  font-size: 14px;
}

.optionsTopRow b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.callTopRow {
  border-left: 3px solid rgba(47, 211, 131, .8);
}

.putTopRow {
  border-left: 3px solid rgba(255, 77, 119, .8);
}

.rankPill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255,255,255,.06);
}

.compactEmpty {
  padding: 8px 10px;
  min-height: 30px;
}

/* Strike Wall Matrix polish */
.strikeMatrixWrap {
  max-height: 620px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}

.strikeMatrixTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.strikeMatrixTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12, 20, 35, .98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.strikeMatrixTable th,
.strikeMatrixTable td {
  padding: 9px 12px;
}

.strikeMatrixTable tbody tr:nth-child(even) {
  background: rgba(255,255,255,.018);
}

.strikeMatrixTable tbody tr:hover {
  background: rgba(255,255,255,.055);
}

.numberCell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.strikeCell {
  font-variant-numeric: tabular-nums;
}

.callCol,
.callCell {
  color: rgba(47, 211, 131, .96);
}

.putCol,
.putCell {
  color: rgba(255, 77, 119, .96);
}

.strikeMatrixTable tbody tr.atmStrikeRow {
  outline: 1px solid rgba(255,255,255,.25);
  outline-offset: -1px;
  background: rgba(255,255,255,.055);
}

.strikeMatrixTable tbody tr.callWallRow {
  background: linear-gradient(90deg, rgba(47, 211, 131, .18), rgba(47, 211, 131, .03));
}

.strikeMatrixTable tbody tr.putWallRow {
  background: linear-gradient(90deg, rgba(255, 77, 119, .18), rgba(255, 77, 119, .03));
}

.strikeMatrixTable tbody tr.callWallRow.putWallRow {
  background: linear-gradient(90deg, rgba(255, 209, 102, .18), rgba(255, 209, 102, .035));
}

.strikeMatrixTable tbody tr.callWallRow .strikeCell::after {
  content: " CALL WALL";
  margin-left: 8px;
  color: var(--good);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.strikeMatrixTable tbody tr.putWallRow .strikeCell::after {
  content: " PUT WALL";
  margin-left: 8px;
  color: var(--bad);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.strikeMatrixTable tbody tr.atmStrikeRow .strikeCell strong::before {
  content: "ATM ";
  color: var(--warn);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

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

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

  .strikeMatrixWrap {
    max-height: 520px;
  }
}

.strikeMatrixTable th.sortableHeader {
  cursor: pointer;
  user-select: none;
}

.strikeMatrixTable th.sortableHeader span {
  margin-left: 4px;
  opacity: .75;
  font-size: 11px;
}

.strikeMatrixTable th.sortableHeader:hover {
  filter: brightness(1.25);
}

.strikeMatrixTable tbody tr.atmFocusPulse {
  animation: atmPulse 1.4s ease-out;
}

@keyframes atmPulse {
  0% {
    box-shadow: inset 0 0 0 2px rgba(255, 209, 102, .95);
    background: rgba(255, 209, 102, .16);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 209, 102, 0);
  }
}

/* Center Strike Wall Matrix columns */
.strikeMatrixTable th,
.strikeMatrixTable td {
  text-align: center;
  vertical-align: middle;
}

.strikeMatrixTable .strikeCell {
  text-align: center;
}

.strikeMatrixTable .numberCell {
  text-align: center;
}

.strikeMatrixTable thead th {
  text-align: center;
}

/* Options Trade Setup Guide */
.tradeGuidePanel {
  border-color: rgba(47, 211, 131, .16);
}

.tradeGuideGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.tradeGuideMain,
.tradeGuideCard {
  border-radius: 18px;
  padding: 16px;
  background: rgba(16, 27, 46, .78);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 140px;
}

.tradeGuideMain span,
.tradeGuideCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.tradeGuideMain strong,
.tradeGuideCard strong {
  display: block;
  color: var(--text);
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.tradeGuideMain small,
.tradeGuideCard small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.tradeGuideCall {
  border-color: rgba(47, 211, 131, .35);
  background:
    linear-gradient(135deg, rgba(47, 211, 131, .16), rgba(16, 27, 46, .75)),
    rgba(16, 27, 46, .78);
}

.tradeGuidePut {
  border-color: rgba(255, 77, 119, .35);
  background:
    linear-gradient(135deg, rgba(255, 77, 119, .16), rgba(16, 27, 46, .75)),
    rgba(16, 27, 46, .78);
}

.tradeGuideNeutral {
  border-color: rgba(255, 209, 102, .30);
  background:
    linear-gradient(135deg, rgba(255, 209, 102, .11), rgba(16, 27, 46, .75)),
    rgba(16, 27, 46, .78);
}

.tradeRiskNote {
  margin-top: 14px;
  color: var(--warn);
}

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

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

/* Options Trade Setup Guide */
.tradeGuidePanel {
  border-color: rgba(47, 211, 131, .16);
}

.tradeGuideGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.tradeGuideMain,
.tradeGuideCard {
  border-radius: 18px;
  padding: 16px;
  background: rgba(16, 27, 46, .78);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 140px;
}

.tradeGuideMain span,
.tradeGuideCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.tradeGuideMain strong,
.tradeGuideCard strong {
  display: block;
  color: var(--text);
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.tradeGuideMain small,
.tradeGuideCard small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.tradeGuideCall {
  border-color: rgba(47, 211, 131, .35);
  background:
    linear-gradient(135deg, rgba(47, 211, 131, .16), rgba(16, 27, 46, .75)),
    rgba(16, 27, 46, .78);
}

.tradeGuidePut {
  border-color: rgba(255, 77, 119, .35);
  background:
    linear-gradient(135deg, rgba(255, 77, 119, .16), rgba(16, 27, 46, .75)),
    rgba(16, 27, 46, .78);
}

.tradeGuideNeutral {
  border-color: rgba(255, 209, 102, .30);
  background:
    linear-gradient(135deg, rgba(255, 209, 102, .11), rgba(16, 27, 46, .75)),
    rgba(16, 27, 46, .78);
}

.tradeRiskNote {
  margin-top: 14px;
  color: var(--warn);
}

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

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

.optionsDataModePanel {
  border-color: rgba(255,255,255,.10);
}

.optionsDataModePanel .metaGrid strong {
  font-size: 15px;
  line-height: 1.35;
}

/* Options long call / long put candidate zone */
.candidateZonePanel {
  border-color: rgba(255,255,255,.10);
}

.candidateZoneGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.candidateSideCard {
  border-radius: 18px;
  padding: 16px;
  background: rgba(16, 27, 46, .78);
  border: 1px solid rgba(255,255,255,.08);
}

.candidateCallCard {
  border-color: rgba(47, 211, 131, .30);
  background:
    linear-gradient(180deg, rgba(47, 211, 131, .08), rgba(16, 27, 46, .76)),
    rgba(16, 27, 46, .78);
}

.candidatePutCard {
  border-color: rgba(255, 77, 119, .30);
  background:
    linear-gradient(180deg, rgba(255, 77, 119, .08), rgba(16, 27, 46, .76)),
    rgba(16, 27, 46, .78);
}

.candidateHeader {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.candidateHeader span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.candidateHeader strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.candidateHeader small {
  max-width: 260px;
  color: var(--warn);
  line-height: 1.35;
  text-align: right;
}

.candidateList {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.candidateRow {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}

.candidateCallRow {
  border-left: 3px solid rgba(47, 211, 131, .85);
}

.candidatePutRow {
  border-left: 3px solid rgba(255, 77, 119, .85);
}

.candidateStrike {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.candidateStrike strong {
  color: var(--text);
  font-size: 18px;
}

.candidateStrike span {
  color: var(--muted);
  font-size: 12px;
}

.candidateMeta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.candidateMeta span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

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

  .candidateHeader small {
    text-align: left;
    max-width: none;
  }

  .candidateHeader {
    flex-direction: column;
  }
}

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

/* Candidate row badges */
.candidateBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.candidateBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.10);
}

.candidateBadge.good {
  color: var(--good);
  background: rgba(47, 211, 131, .10);
  border-color: rgba(47, 211, 131, .35);
}

.candidateBadge.warn {
  color: var(--warn);
  background: rgba(255, 209, 102, .10);
  border-color: rgba(255, 209, 102, .35);
}

.candidateBadge.bad {
  color: var(--bad);
  background: rgba(255, 77, 119, .10);
  border-color: rgba(255, 77, 119, .35);
}

/* Ticker Health sortable headers */
th[onclick] {
  cursor: pointer;
  user-select: none;
}

th[onclick]:hover {
  color: var(--accent);
}

/* Compact inline admin actions */
.inlineActions {
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.miniButton {
  width: auto;
  min-width: 0;
  max-width: max-content;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.helpCard .inlineActions {
  margin-top: 8px;
  margin-bottom: 10px;
}

.helpCard .miniButton {
  font-size: 11px;
  padding: 8px 12px;
}

/* Ticker Health quick filters */
.filterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 16px;
}

.filterButton {
  width: auto;
  min-width: 0;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(16, 27, 46, .72);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.filterButton:hover {
  border-color: rgba(47, 211, 131, .45);
}

.filterButton.active {
  background: rgba(47, 211, 131, .18);
  border-color: rgba(47, 211, 131, .65);
  color: var(--accent);
}

/* WayUp module roadmap/showcase cards */
.platformRoadmap {
  margin-top: 20px;
}

.moduleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.moduleCard {
  position: relative;
  border-radius: 18px;
  padding: 16px;
  min-height: 142px;
  background: rgba(16, 27, 46, .78);
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}

.moduleCard::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
}

.moduleCard.live::before {
  background: linear-gradient(135deg, rgba(47, 211, 131, .65), transparent 48%);
}

.moduleCard.updated::before {
  background: linear-gradient(135deg, rgba(91, 141, 239, .65), transparent 48%);
}

.moduleCard.planned::before {
  background: linear-gradient(135deg, rgba(255, 209, 102, .55), transparent 48%);
}

.moduleTop {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.moduleTop h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.moduleCard p {
  position: relative;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.revBadge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--accent);
  background: rgba(47, 211, 131, .10);
  border: 1px solid rgba(47, 211, 131, .34);
  white-space: nowrap;
}

.plannedBadge {
  color: var(--warn);
  background: rgba(255, 209, 102, .10);
  border-color: rgba(255, 209, 102, .36);
}

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

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

  .moduleTop {
    flex-direction: column;
  }
}

/* Sortable table headers */
th[onclick] {
  cursor: pointer;
  user-select: none;
}

th[onclick]:hover {
  color: var(--accent);
}

/* Roadmap compact action button */
.plannerSmallButton {
  width: 30%;
  min-width: 180px;
  max-width: 320px;
  padding: 10px 16px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .plannerSmallButton {
    width: 100%;
    max-width: none;
  }
}

/* Compact page refresh/action buttons */
.pageRefreshButton,
.hero button,
.chartHeader > button,
.panel > button {
  width: 30%;
  min-width: 180px;
  max-width: 340px;
  margin-left: auto;
}

@media (max-width: 760px) {
  .pageRefreshButton,
  .hero button,
  .chartHeader > button,
  .panel > button {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

/* Keep small admin/copy buttons compact */
.miniButton,
.filterButton,
.plannerSmallButton,
.inlineActions button {
  width: auto;
  min-width: 0;
  max-width: max-content;
  margin-left: 0;
}

/* Global compact primary action buttons */
.pageRefreshButton,
.hero button,
.chartHeader > button,
.panel > button {
  width: 30%;
  min-width: 180px;
  max-width: 340px;
  margin-left: auto;
}

/* Keep utility/action buttons compact */
.miniButton,
.filterButton,
.plannerSmallButton,
.inlineActions button,
.badge button {
  width: auto;
  min-width: 0;
  max-width: max-content;
  margin-left: 0;
}

/* Mobile: stack full width for tap targets */
@media (max-width: 760px) {
  .pageRefreshButton,
  .hero button,
  .chartHeader > button,
  .panel > button {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

/* Compact form submit buttons */
form button[type="submit"],
.formActions button,
.noteForm button {
  width: 30%;
  min-width: 180px;
  max-width: 340px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep mobile friendly */
@media (max-width: 760px) {
  form button[type="submit"],
  .formActions button,
  .noteForm button {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

/* Sector detail reason badges */
.reasonBadgeLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  line-height: 1.45;
}

.reasonMiniBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.14);
}

.reasonMiniBadge.info {
  color: #9bc7ff;
  background: rgba(91, 141, 239, .14);
  border-color: rgba(91, 141, 239, .34);
}

.reasonMiniBadge.good {
  color: #2fd383;
  background: rgba(47, 211, 131, .14);
  border-color: rgba(47, 211, 131, .36);
}

.reasonMiniBadge.warn {
  color: #ffd166;
  background: rgba(255, 209, 102, .14);
  border-color: rgba(255, 209, 102, .36);
}

.reasonMiniBadge.bad {
  color: #ff5c7a;
  background: rgba(255, 92, 122, .14);
  border-color: rgba(255, 92, 122, .38);
}

.reasonMiniBadge.score {
  color: #7fffe0;
  background: rgba(127, 255, 224, .10);
  border-color: rgba(127, 255, 224, .30);
}

/* Sector reason text + right-side summary badges */
.reasonTextBadgeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.reasonTextBadgeRow .reasonText {
  min-width: 0;
}

.reasonBadgeGroup {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.reasonTextBadgeRow .reasonMiniBadge {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .reasonTextBadgeRow {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .reasonBadgeGroup {
    justify-content: flex-start;
  }
}

.badgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}

/* ETF detail admin command/action buttons */
.etfAdminActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
}

.etfAdminActionRow button,
.etfAdminActionRow .miniButton,
button.etfCompactAction {
  width: 30%;
  min-width: 210px;
  max-width: 360px;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .etfAdminActionRow button,
  .etfAdminActionRow .miniButton,
  button.etfCompactAction {
    width: 100%;
    max-width: none;
  }
}

/* Admin script command run buttons */
.commandRunActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

.commandRunButton {
  width: 30%;
  min-width: 210px;
  max-width: 360px;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .commandRunButton {
    width: 100%;
    max-width: none;
  }
}

/* Admin command console modal */
.commandConsoleOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, .78);
  backdrop-filter: blur(8px);
}

.commandConsoleOverlay.show {
  display: flex;
}

.commandConsole {
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: rgba(15, 23, 42, .98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 20px;
}

.commandConsoleHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.commandConsoleHeader h2 {
  margin: 0;
}

.commandConsoleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.consoleLabel {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 8px 0 6px;
}

.commandConsoleCommand,
.commandConsoleOutput {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2, 6, 23, .72);
  color: #d1fae5;
  padding: 12px;
  white-space: pre-wrap;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
}

.commandConsoleCommand {
  max-height: 96px;
}

.commandConsoleOutput {
  min-height: 260px;
  max-height: 44vh;
}

.commandConsoleFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.commandConsoleFooter .miniButton,
.commandConsoleHeader .miniButton {
  width: auto;
  max-width: max-content;
  min-width: 110px;
}

@media (max-width: 760px) {
  .commandConsoleOverlay {
    padding: 10px;
  }

  .commandConsole {
    width: 100%;
    max-height: 94vh;
  }

  .commandConsoleHeader {
    flex-direction: column;
  }

  .commandConsoleFooter {
    flex-direction: column;
  }

  .commandConsoleFooter .miniButton,
  .commandConsoleHeader .miniButton {
    width: 100%;
    max-width: none;
  }
}

/* Admin danger-zone cards */
.dangerZone {
  border-color: rgba(255, 92, 122, .28);
  background: linear-gradient(180deg, rgba(255, 92, 122, .07), rgba(16, 27, 46, .76));
}

.dangerZone h2 {
  color: #ff8aa2;
}

/* Floating detail navigation */
.floatingDetailBack,
.floatingBackToTop {
  position: fixed;
  z-index: 7000;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #2fd37f;
  color: #03130b;
  font-weight: 900;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  cursor: pointer;
}

.floatingDetailBack {
  left: 24px;
  bottom: 24px;
  opacity: 1;
}

.floatingBackToTop {
  right: 24px;
  bottom: 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.floatingBackToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .floatingDetailBack {
    left: 14px;
    bottom: 14px;
  }

  .floatingBackToTop {
    right: 14px;
    bottom: 14px;
  }
}

/* Final detail-page floating nav placement */
.floatingDetailBack,
.floatingBackToTop {
  width: auto !important;
  min-width: 145px !important;
  max-width: 230px !important;
  height: auto !important;
  left: auto !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

.floatingBackToTop {
  bottom: 24px !important;
}

.floatingDetailBack {
  bottom: 78px !important;
}

@media (max-width: 760px) {
  .floatingDetailBack,
  .floatingBackToTop {
    right: 14px !important;
    min-width: 135px !important;
    max-width: 190px !important;
    padding: 11px 14px !important;
  }

  .floatingBackToTop {
    bottom: 14px !important;
  }

  .floatingDetailBack {
    bottom: 64px !important;
  }
}

/* Floating detail nav show/hide final behavior */
.floatingDetailBack,
.floatingBackToTop {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.floatingDetailBack.show,
.floatingBackToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Reference / roadmap sub-card layout */
.roadmapGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.roadmapCard {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .58);
  border-radius: 18px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.roadmapCard:hover {
  border-color: rgba(47, 211, 127, .28);
  background: rgba(15, 23, 42, .76);
}

.roadmapCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.roadmapCard h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
}

.roadmapCardHeader h3 {
  margin: 0;
}

.roadmapCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.roadmapCard .badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

#currentBuildReference .roadmapGrid,
#currentModuleVersions .roadmapGrid,
#futureRoadmapReference .roadmapGrid,
#adminWorkflowReference .roadmapGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#currentModuleVersions .roadmapGrid,
#futureRoadmapReference .roadmapGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .roadmapGrid,
  #currentBuildReference .roadmapGrid,
  #currentModuleVersions .roadmapGrid,
  #futureRoadmapReference .roadmapGrid,
  #adminWorkflowReference .roadmapGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .roadmapGrid,
  #currentBuildReference .roadmapGrid,
  #currentModuleVersions .roadmapGrid,
  #futureRoadmapReference .roadmapGrid,
  #adminWorkflowReference .roadmapGrid {
    grid-template-columns: 1fr;
  }
}

/* Global floating back/top navigation */
.floatingDetailBack,
.floatingBackToTop {
  position: fixed;
  z-index: 7000;
  width: auto !important;
  min-width: 130px !important;
  max-width: 230px !important;
  left: auto !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px !important;
  border: 0;
  border-radius: 999px !important;
  background: #2fd37f;
  color: #03130b;
  font-weight: 900;
  line-height: 1 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.floatingBackToTop {
  bottom: 24px !important;
}

.floatingDetailBack {
  bottom: 78px !important;
}

.floatingDetailBack.show,
.floatingBackToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .floatingDetailBack,
  .floatingBackToTop {
    right: 14px !important;
    min-width: 120px !important;
    max-width: 190px !important;
    padding: 11px 14px !important;
  }

  .floatingBackToTop {
    bottom: 14px !important;
  }

  .floatingDetailBack {
    bottom: 64px !important;
  }
}

/* Table ticker links to Monte Carlo */
.tickerMonteLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7fffe0;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px dashed rgba(127, 255, 224, .45);
}

.tickerMonteLink:hover {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,.85);
}

/* Ticker links: subtle by default, green underline on hover */
.tickerMonteLink {
  color: #e8eefc !important;
  font-weight: 900;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color .16s ease, border-color .16s ease;
}

.tickerMonteLink:hover {
  color: #2fd37f !important;
  border-bottom-color: #2fd37f !important;
}

/* Profile / account page */
.profileHero {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profileAvatar {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 30px;
  font-weight: 1000;
  color: #03130b;
  background: linear-gradient(135deg, #2fd37f, #7fffe0);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

.profileSummary h2 {
  margin: 0 0 4px;
}

.profileSummary p {
  margin: 0 0 10px;
  color: var(--muted);
}

.formGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.formGrid label {
  display: grid;
  gap: 7px;
}

.formGrid label span {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .04em;
}

.formGrid input {
  width: 100%;
}

@media (max-width: 900px) {
  .profileHero {
    align-items: flex-start;
  }

  .formGrid {
    grid-template-columns: 1fr;
  }
}

/* Admin user management */
.adminUserFormGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.adminUserCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adminUserAvatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: #03130b;
  background: linear-gradient(135deg, #2fd37f, #7fffe0);
}

.adminEditPanel {
  border-color: rgba(47, 211, 127, .32);
}

.rowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rowActions .smallBtn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

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

/* Admin user manager action/state colors */
.smallBtn.goodBtn {
  background: #2fd37f !important;
  color: #03130b !important;
  border: 1px solid rgba(47, 211, 127, .55) !important;
}

.smallBtn.goodBtn:hover {
  filter: brightness(1.08);
}

.smallBtn.dangerBtn {
  background: rgba(255, 92, 122, .16) !important;
  color: #ff6f8f !important;
  border: 1px solid rgba(255, 92, 122, .45) !important;
}

.smallBtn.dangerBtn:hover {
  background: rgba(255, 92, 122, .24) !important;
}

.rowActions .smallBtn:disabled,
.smallBtn.goodBtn:disabled,
.smallBtn.dangerBtn:disabled {
  opacity: .42 !important;
  filter: grayscale(.35);
  cursor: not-allowed !important;
}

.badge.statusActive {
  background: rgba(47, 211, 127, .16) !important;
  color: #2fd37f !important;
  border: 1px solid rgba(47, 211, 127, .38) !important;
}

.badge.statusDisabled {
  background: rgba(255, 92, 122, .16) !important;
  color: #ff6f8f !important;
  border: 1px solid rgba(255, 92, 122, .42) !important;
}

.badge.roleAdmin {
  background: rgba(47, 211, 127, .16) !important;
  color: #2fd37f !important;
  border: 1px solid rgba(47, 211, 127, .38) !important;
}

.badge.roleUser {
  background: rgba(255, 209, 102, .15) !important;
  color: #ffd166 !important;
  border: 1px solid rgba(255, 209, 102, .34) !important;
}

/* Admin user manager action/state colors */
.smallBtn.goodBtn {
  background: #2fd37f !important;
  color: #03130b !important;
  border: 1px solid rgba(47, 211, 127, .55) !important;
}

.smallBtn.goodBtn:hover {
  filter: brightness(1.08);
}

.smallBtn.dangerBtn {
  background: rgba(255, 92, 122, .16) !important;
  color: #ff6f8f !important;
  border: 1px solid rgba(255, 92, 122, .45) !important;
}

.smallBtn.dangerBtn:hover {
  background: rgba(255, 92, 122, .24) !important;
}

.rowActions .smallBtn:disabled,
.smallBtn.goodBtn:disabled,
.smallBtn.dangerBtn:disabled {
  opacity: .42 !important;
  filter: grayscale(.35);
  cursor: not-allowed !important;
}

.badge.statusActive {
  background: rgba(47, 211, 127, .16) !important;
  color: #2fd37f !important;
  border: 1px solid rgba(47, 211, 127, .38) !important;
}

.badge.statusDisabled {
  background: rgba(255, 92, 122, .16) !important;
  color: #ff6f8f !important;
  border: 1px solid rgba(255, 92, 122, .42) !important;
}

.badge.roleAdmin {
  background: rgba(47, 211, 127, .16) !important;
  color: #2fd37f !important;
  border: 1px solid rgba(47, 211, 127, .38) !important;
}

.badge.roleUser {
  background: rgba(255, 209, 102, .15) !important;
  color: #ffd166 !important;
  border: 1px solid rgba(255, 209, 102, .34) !important;
}

/* Password reset / auth utility pages */
.authPage {
  max-width: 760px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.authPanel {
  width: 100%;
}

.singleFormGrid {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.devResetPanel {
  margin-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, .18);
  padding-top: 18px;
}

.devResetPanel h2 {
  margin-top: 0;
}

/* Auth/reset pages: slim, consistent action buttons */
.authActionRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.authSlimButton {
  min-height: 34px !important;
  height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1 !important;
}

.authPanel .miniButton.authSlimButton,
.authPanel .miniLink.authSlimButton {
  min-width: auto;
}

/* Admin shortcut cards */
.adminShortcutGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.adminShortcutGrid .detailStatCard {
  min-height: 145px;
}

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

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

/* Internal messaging */
.messagesFormGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.messageBodyLabel {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.messageBodyLabel span {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .04em;
}

.messageBodyLabel textarea {
  width: 100%;
  resize: vertical;
  min-height: 140px;
}

.messageReadPanel {
  border-color: rgba(47, 211, 127, .32);
}

.messageReadBody {
  white-space: pre-wrap;
  background: rgba(2, 6, 23, .62);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  padding: 16px;
  color: #e8eefc;
  line-height: 1.5;
  max-height: 420px;
  overflow: auto;
}

.unreadMessageRow {
  background: rgba(255, 209, 102, .045);
}

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

/* Messages nav unread indicator */
.nav a.messageNavUnread {
  background: rgba(255, 209, 102, .18) !important;
  color: #ffd166 !important;
  border-color: rgba(255, 209, 102, .45) !important;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, .12), 0 0 18px rgba(255, 209, 102, .16);
}

.nav a.messageNavHot {
  background: rgba(255, 92, 122, .20) !important;
  color: #ff6f8f !important;
  border-color: rgba(255, 92, 122, .48) !important;
  box-shadow: 0 0 0 1px rgba(255, 92, 122, .14), 0 0 20px rgba(255, 92, 122, .22);
  animation: messageNavPulse 1.5s ease-in-out infinite;
}

@keyframes messageNavPulse {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-1px);
    filter: brightness(1.18);
  }
}

/* Messages compose textarea */
#messageBody {
  width: 100%;
  min-height: 150px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #e8eefc !important;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

#messageBody::placeholder {
  color: rgba(190, 205, 230, .58) !important;
}

#messageBody:focus {
  outline: none;
  border-color: rgba(47, 211, 127, .58) !important;
  box-shadow: 0 0 0 3px rgba(47, 211, 127, .12);
}

#messageBody:hover {
  border-color: rgba(148, 163, 184, .34) !important;
}

/* Admin Shortcuts: 2x2 card layout */
.adminShortcutGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.adminShortcutGrid .detailStatCard,
.adminShortcutGrid .fundCardLink {
  width: 100% !important;
  min-height: 145px;
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 850px) {
  .adminShortcutGrid {
    grid-template-columns: 1fr !important;
  }
}


/* Journal Sharing panel */
.journalSharePanel {
  border-color: rgba(47, 211, 127, .28);
}

.journalShareGrid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.journalShareGrid label {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.journalShareGrid span {
  display: block;
  margin-bottom: 6px;
}

.journalShareGrid select,
.journalShareGrid textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}

.journalShareGrid textarea {
  resize: vertical;
}

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


/* ETF Top 100 / Complete Holdings coverage badges */
.fundCardLink .badgeRow {
  gap: 7px;
  align-items: flex-start;
}

.fundCardLink .badge {
  line-height: 1.25;
}

.fundCardLink small {
  margin-top: 3px;
}


/* ETF / Options heatmaps */
.heatmapPanel {
  overflow: hidden;
}

.heatmapControls {
  min-width: 220px;
}

.heatmapControls label {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.heatmapControls span {
  display: block;
  margin-bottom: 6px;
}

.heatmapControls select {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.heatmapSummary {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.heatmapGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: stretch;
}

.heatmapTile {
  flex: var(--hmWeight, 1) 1 118px;
  min-width: 112px;
  min-height: 96px;
  border-radius: 16px;
  padding: 11px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.heatmapTile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .28);
}

.heatmapTileTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.heatmapTileTop strong {
  font-size: 15px;
  letter-spacing: .02em;
}

.heatmapTileTop span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.heatmapMetric {
  margin-top: 10px;
  font-weight: 800;
  font-size: 13px;
}

.heatmapTile small {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  line-height: 1.25;
}

.heatmapTile.heatGood {
  background: linear-gradient(135deg, rgba(47, 211, 127, .34), rgba(47, 211, 127, .10));
  border-color: rgba(47, 211, 127, .42);
}

.heatmapTile.heatMid {
  background: linear-gradient(135deg, rgba(77, 163, 255, .30), rgba(77, 163, 255, .09));
  border-color: rgba(77, 163, 255, .38);
}

.heatmapTile.heatWarn {
  background: linear-gradient(135deg, rgba(255, 204, 102, .34), rgba(255, 204, 102, .10));
  border-color: rgba(255, 204, 102, .40);
}

.heatmapTile.heatBad,
.heatmapTile.heatMissing {
  background: linear-gradient(135deg, rgba(255, 98, 98, .30), rgba(255, 98, 98, .09));
  border-color: rgba(255, 98, 98, .38);
}

.heatmapTile.heatNeutral {
  background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
}

.heatmapTile.heatCall {
  background: linear-gradient(135deg, rgba(47, 211, 127, .36), rgba(47, 211, 127, .10));
  border-color: rgba(47, 211, 127, .44);
}

.heatmapTile.heatPut {
  background: linear-gradient(135deg, rgba(255, 98, 98, .34), rgba(255, 98, 98, .10));
  border-color: rgba(255, 98, 98, .42);
}

.heatmapTile.heatAtm {
  background: linear-gradient(135deg, rgba(170, 128, 255, .38), rgba(170, 128, 255, .10));
  border-color: rgba(170, 128, 255, .48);
}

.optionsHeatTile {
  min-width: 128px;
}

@media (max-width: 800px) {
  .heatmapControls {
    width: 100%;
  }

  .heatmapTile {
    flex-basis: 145px;
  }
}


/* Options heatmap v2 controls and badges */
.heatmapControls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.heatmapControls label {
  min-width: 180px;
}

.heatmapBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.heatmapMiniBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
}

.heatAtmBadge {
  background: rgba(170, 128, 255, .22);
  border-color: rgba(170, 128, 255, .45);
}

.heatCallBadge {
  background: rgba(47, 211, 127, .22);
  border-color: rgba(47, 211, 127, .45);
}

.heatPutBadge {
  background: rgba(255, 98, 98, .22);
  border-color: rgba(255, 98, 98, .45);
}


/* Signed-in user avatar badge */
.userBadgeStrip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -8px 0 16px;
  min-height: 34px;
}

.userAvatarWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.userAvatarBadge {
  border: 1px solid color-mix(in srgb, var(--avatarColor) 75%, white 15%);
  background: linear-gradient(135deg, var(--avatarColor), color-mix(in srgb, var(--avatarColor) 65%, black 28%));
  color: white;
  min-width: 54px;
  height: 34px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
  cursor: default;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.userAvatarTooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
  background: rgba(8, 13, 24, .96);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  z-index: 5000;
}

.userAvatarWrap:hover .userAvatarTooltip {
  opacity: 1;
  transform: translateY(0);
}

.avatarColorPanel {
  margin-top: 0;
}

.avatarColorGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.avatarColorSwatch {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
}

.avatarColorSwatch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--avatarColor), color-mix(in srgb, var(--avatarColor) 65%, black 28%));
  color: white;
  font-weight: 900;
  letter-spacing: .05em;
}

.avatarColorSwatch small {
  color: var(--muted);
  font-size: 11px;
}

.avatarColorSwatch:hover,
.avatarColorSwatch.selected {
  border-color: color-mix(in srgb, var(--avatarColor) 72%, white 20%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

@media (max-width: 700px) {
  .userBadgeStrip {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .userAvatarTooltip {
    left: 0;
    right: auto;
  }
}


/* Avatar color picker compact profile layout fix */
.avatarColorPanel {
  margin-top: 14px;
  margin-bottom: 14px;
}

.avatarColorPanel .chartHeader {
  margin-bottom: 10px;
}

.avatarColorGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(82px, 96px));
  gap: 10px;
  justify-content: start;
  align-items: stretch;
}

.avatarColorSwatch {
  width: 96px !important;
  min-width: 0 !important;
  max-width: 96px !important;
  height: auto !important;
  min-height: 78px;
  padding: 10px 8px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatarColorSwatch span {
  min-width: 46px;
  height: 30px;
  font-size: 12px;
}

.avatarColorSwatch small {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.1;
}

#avatarColorStatus {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .avatarColorGrid {
    grid-template-columns: repeat(auto-fit, minmax(76px, 88px));
  }

  .avatarColorSwatch {
    width: 88px !important;
    max-width: 88px !important;
  }
}


/* Profile hero avatar uses selected user avatar color */
.profileAvatar.profileAvatarColorSynced {
  color: #061018;
  background: linear-gradient(
    135deg,
    var(--profileAvatarColor, #2fd37f),
    color-mix(in srgb, var(--profileAvatarColor, #2fd37f) 55%, white 35%)
  ) !important;
  border: 1px solid color-mix(in srgb, var(--profileAvatarColor, #2fd37f) 70%, white 18%);
}


/* Editable avatar initials */
.avatarInitialsEditor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 4px 0 14px;
}

.avatarInitialsEditor label {
  display: block;
  min-width: 160px;
}

.avatarInitialsEditor span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.avatarInitialsEditor input {
  width: 120px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  text-align: center;
}

.avatarInitialsEditor .miniButton {
  width: auto;
  min-width: 112px;
  height: 40px;
}


/* Active signed-in users avatar strip */
.userBadgeStrip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -8px 0 16px;
  min-height: 34px;
}

.activeUserStripInner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.userAvatarWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.userAvatarWrap.isSelf .userAvatarBadge {
  box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 10px 24px rgba(0, 0, 0, .24);
}

.userAvatarBadge {
  border: 1px solid color-mix(in srgb, var(--avatarColor) 75%, white 15%);
  background: linear-gradient(135deg, var(--avatarColor), color-mix(in srgb, var(--avatarColor) 65%, black 28%));
  color: white;
  min-width: 54px;
  height: 34px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
  cursor: default;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.userAvatarTooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
  background: rgba(8, 13, 24, .96);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--text);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  z-index: 5000;
}

.userAvatarWrap:hover .userAvatarTooltip {
  opacity: 1;
  transform: translateY(0);
}


/* Monte Carlo Median Forecast bias background colors.
   Text color is intentionally unchanged. */
.medianBox.medianBiasGood {
  background:
    radial-gradient(circle at top left, rgba(55,214,122,.26), transparent 45%),
    linear-gradient(180deg, rgba(55,214,122,.13), rgba(255,255,255,.045));
  border-color: rgba(55,214,122,.35);
  box-shadow: 0 20px 80px rgba(55,214,122,.08);
}

.medianBox.medianBiasWarn {
  background:
    radial-gradient(circle at top left, rgba(255,204,102,.25), transparent 45%),
    linear-gradient(180deg, rgba(255,204,102,.12), rgba(255,255,255,.045));
  border-color: rgba(255,204,102,.36);
  box-shadow: 0 20px 80px rgba(255,204,102,.08);
}

.medianBox.medianBiasBad {
  background:
    radial-gradient(circle at top left, rgba(255,98,98,.26), transparent 45%),
    linear-gradient(180deg, rgba(255,98,98,.13), rgba(255,255,255,.045));
  border-color: rgba(255,98,98,.38);
  box-shadow: 0 20px 80px rgba(255,98,98,.08);
}


/* Monte Carlo Options Overlay */
.optionsOverlayToggleField .toggleLine {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.optionsOverlayToggleField input {
  width: auto;
  margin: 0;
}

.optionsOverlayContext {
  border-color: rgba(77, 163, 255, .25);
}

.optionsOverlayContext .chartHeader {
  margin-bottom: 12px;
}

.overlayWallGrid {
  margin-top: 12px;
}


.overlayInfoPill.warn {
  border-color: rgba(255,204,102,.38);
  background:
    radial-gradient(circle at top left, rgba(255,204,102,.20), transparent 48%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 34px rgba(255,204,102,.08);
}


/* Options Context pill layout */
.optionsOverlayContext .chartHeader {
  margin-bottom: 14px;
}

.overlayPillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.overlayInfoPill {
  min-width: 170px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.overlayInfoPill span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .9;
}

.overlayInfoPill strong {
  font-size: 20px;
  line-height: 1.15;
}

.overlayInfoPill.info {
  border-color: rgba(77,163,255,.35);
  background:
    radial-gradient(circle at top left, rgba(77,163,255,.16), transparent 48%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 34px rgba(77,163,255,.08);
}

.overlayInfoPill.good {
  border-color: rgba(55,214,122,.35);
  background:
    radial-gradient(circle at top left, rgba(55,214,122,.18), transparent 48%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 34px rgba(55,214,122,.08);
}

.overlayInfoPill.bad {
  border-color: rgba(255,98,98,.35);
  background:
    radial-gradient(circle at top left, rgba(255,98,98,.18), transparent 48%),
    rgba(255,255,255,.04);
  box-shadow: 0 12px 34px rgba(255,98,98,.08);
}

.badge.info {
  color: #9fd2ff;
  background: rgba(77,163,255,.16);
  border: 1px solid rgba(77,163,255,.28);
}

@media (max-width: 900px) {
  .overlayInfoPill {
    min-width: calc(50% - 6px);
  }
}

@media (max-width: 640px) {
  .overlayInfoPill {
    min-width: 100%;
  }
}


/* Monte Carlo action row: Run Model + Use Options */
.modelRunActions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.modelRunActions > button {
  width: auto;
  min-width: 170px;
}

.optionsMiniToggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 14px;
  border: 1px solid rgba(77, 163, 255, .26);
  background:
    radial-gradient(circle at top left, rgba(77, 163, 255, .12), transparent 48%),
    rgba(255, 255, 255, .045);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.optionsMiniToggle:hover {
  border-color: rgba(77, 163, 255, .46);
}

.optionsMiniToggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2fd37f;
}

.optionsMiniToggle span {
  white-space: nowrap;
}

/* Hide/neutralize old overlay toggle field styling if cached markup remains */
.optionsOverlayToggleField {
  display: none;
}

@media (max-width: 700px) {
  .modelRunActions {
    align-items: stretch;
  }

  .modelRunActions > button,
  .optionsMiniToggle {
    width: 100%;
    justify-content: center;
  }
}

/* Documentation split: user guide and admin ops guide */
.helpTable {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}

.helpTable th,
.helpTable td {
  text-align: left;
  vertical-align: top;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.helpTable th {
  color: var(--text);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.helpTable td {
  color: var(--muted);
}

.helpList {
  color: var(--muted);
  line-height: 1.7;
}

.helpList li {
  margin-bottom: 7px;
}

.buttonLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  background: #2fd37f;
  color: #061018;
  font-weight: 900;
  text-decoration: none;
}

.dangerLink {
  border-color: rgba(255,98,98,.45) !important;
  color: #ff9aaa !important;
}


/* Global blue page background override.
   Keeps cards, pills, buttons, and signal colors unchanged. */
html,
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(77, 163, 255, .22), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(0, 194, 199, .12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(30, 64, 175, .18), transparent 42%),
    linear-gradient(180deg, #071426 0%, #08111f 48%, #050914 100%) !important;
  background-attachment: fixed;
}


/* Background-only theme picker.
   These themes only change the html/body page background. */
html[data-bg-theme="blue"],
body[data-bg-theme="blue"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(77, 163, 255, .22), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(0, 194, 199, .12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(30, 64, 175, .18), transparent 42%),
    linear-gradient(180deg, #071426 0%, #08111f 48%, #050914 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="green"],
body[data-bg-theme="green"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 211, 127, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(0, 194, 199, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(22, 101, 52, .18), transparent 42%),
    linear-gradient(180deg, #071a14 0%, #08140f 48%, #050b08 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="purple"],
body[data-bg-theme="purple"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(170, 128, 255, .22), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(77, 163, 255, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(88, 28, 135, .22), transparent 42%),
    linear-gradient(180deg, #130d26 0%, #0c1020 48%, #070712 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="slate"],
body[data-bg-theme="slate"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(148, 163, 184, .16), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(77, 163, 255, .08), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(51, 65, 85, .24), transparent 42%),
    linear-gradient(180deg, #0b1220 0%, #090f1a 48%, #05070d 100%) !important;
  background-attachment: fixed;
}


html[data-bg-theme="red"],
body[data-bg-theme="red"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 98, 98, .18), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 107, 154, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(127, 29, 29, .22), transparent 42%),
    linear-gradient(180deg, #1a0b0d 0%, #100b10 48%, #070507 100%) !important;
  background-attachment: fixed;
}

/* Profile background theme picker */
.backgroundThemePanel {
  margin-top: 14px;
}

.backgroundThemePicker {
  display: grid;
  gap: 14px;
}

.backgroundThemePicker label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.backgroundThemePicker select {
  max-width: 260px;
}

.backgroundThemePreviewRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.backgroundThemePreview {
  width: auto !important;
  min-width: 92px;
  border-radius: 999px;
  padding: 9px 13px !important;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
}

.backgroundThemePreview.theme-blue {
  background: linear-gradient(135deg, rgba(77,163,255,.32), rgba(30,64,175,.22));
}

.backgroundThemePreview.theme-green {
  background: linear-gradient(135deg, rgba(47,211,127,.30), rgba(22,101,52,.22));
}

.backgroundThemePreview.theme-purple {
  background: linear-gradient(135deg, rgba(170,128,255,.32), rgba(88,28,135,.22));
}

.backgroundThemePreview.theme-slate {
  background: linear-gradient(135deg, rgba(148,163,184,.26), rgba(51,65,85,.24));
}


.backgroundThemePreview.theme-red {
  background: linear-gradient(135deg, rgba(255,98,98,.30), rgba(127,29,29,.22));
}


html[data-bg-theme="orange"],
body[data-bg-theme="orange"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 159, 67, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 204, 102, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(154, 52, 18, .20), transparent 42%),
    linear-gradient(180deg, #1b1008 0%, #120d09 48%, #080604 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="pink"],
body[data-bg-theme="pink"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 107, 154, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(170, 128, 255, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(157, 23, 77, .22), transparent 42%),
    linear-gradient(180deg, #1a0b16 0%, #100b13 48%, #07050a 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="teal"],
body[data-bg-theme="teal"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 194, 199, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(77, 163, 255, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(15, 118, 110, .22), transparent 42%),
    linear-gradient(180deg, #061918 0%, #071314 48%, #05090a 100%) !important;
  background-attachment: fixed;
}

.backgroundThemePreview.theme-orange {
  background: linear-gradient(135deg, rgba(255,159,67,.30), rgba(154,52,18,.22));
}

.backgroundThemePreview.theme-pink {
  background: linear-gradient(135deg, rgba(255,107,154,.30), rgba(157,23,77,.22));
}

.backgroundThemePreview.theme-teal {
  background: linear-gradient(135deg, rgba(0,194,199,.30), rgba(15,118,110,.22));
}


/* Expanded background theme colors */
html[data-bg-theme="gold"],
body[data-bg-theme="gold"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(245, 197, 66, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 204, 102, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(146, 64, 14, .20), transparent 42%),
    linear-gradient(180deg, #191307 0%, #100d08 48%, #080604 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="cyan"],
body[data-bg-theme="cyan"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(77, 163, 255, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(8, 145, 178, .20), transparent 42%),
    linear-gradient(180deg, #061820 0%, #07121a 48%, #05080c 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="indigo"],
body[data-bg-theme="indigo"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(99, 102, 241, .22), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(170, 128, 255, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(67, 56, 202, .22), transparent 42%),
    linear-gradient(180deg, #0e102b 0%, #0a0d1f 48%, #050611 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="rose"],
body[data-bg-theme="rose"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(251, 113, 133, .20), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 107, 154, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(190, 18, 60, .20), transparent 42%),
    linear-gradient(180deg, #1a0b10 0%, #100a0e 48%, #070507 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="lime"],
body[data-bg-theme="lime"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(132, 204, 22, .18), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(47, 211, 127, .08), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(77, 124, 15, .20), transparent 42%),
    linear-gradient(180deg, #101807 0%, #0c1108 48%, #050704 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="ocean"],
body[data-bg-theme="ocean"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(14, 165, 233, .22), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(0, 194, 199, .10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(3, 105, 161, .24), transparent 42%),
    linear-gradient(180deg, #061525 0%, #07101d 48%, #040812 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="midnight"],
body[data-bg-theme="midnight"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(30, 58, 138, .30), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(77, 163, 255, .08), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(15, 23, 42, .42), transparent 42%),
    linear-gradient(180deg, #050b1c 0%, #050814 48%, #03050b 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="graphite"],
body[data-bg-theme="graphite"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(71, 85, 105, .24), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(148, 163, 184, .08), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(30, 41, 59, .28), transparent 42%),
    linear-gradient(180deg, #090d14 0%, #070a10 48%, #040508 100%) !important;
  background-attachment: fixed;
}

html[data-bg-theme="copper"],
body[data-bg-theme="copper"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(196, 122, 61, .22), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 159, 67, .09), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(120, 53, 15, .23), transparent 42%),
    linear-gradient(180deg, #180f09 0%, #100b08 48%, #070504 100%) !important;
  background-attachment: fixed;
}

.backgroundThemePreview.theme-gold {
  background: linear-gradient(135deg, rgba(245,197,66,.30), rgba(146,64,14,.22));
}

.backgroundThemePreview.theme-cyan {
  background: linear-gradient(135deg, rgba(34,211,238,.30), rgba(8,145,178,.22));
}

.backgroundThemePreview.theme-indigo {
  background: linear-gradient(135deg, rgba(99,102,241,.34), rgba(67,56,202,.24));
}

.backgroundThemePreview.theme-rose {
  background: linear-gradient(135deg, rgba(251,113,133,.30), rgba(190,18,60,.22));
}

.backgroundThemePreview.theme-lime {
  background: linear-gradient(135deg, rgba(132,204,22,.28), rgba(77,124,15,.24));
}

.backgroundThemePreview.theme-ocean {
  background: linear-gradient(135deg, rgba(14,165,233,.34), rgba(3,105,161,.24));
}

.backgroundThemePreview.theme-midnight {
  background: linear-gradient(135deg, rgba(30,58,138,.42), rgba(15,23,42,.40));
}

.backgroundThemePreview.theme-graphite {
  background: linear-gradient(135deg, rgba(71,85,105,.34), rgba(30,41,59,.30));
}

.backgroundThemePreview.theme-copper {
  background: linear-gradient(135deg, rgba(196,122,61,.34), rgba(120,53,15,.24));
}


/* Ticker Doctor admin tools */
.tickerDoctorPanel {
  border-color: rgba(77, 163, 255, .24);
}

.tickerDoctorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tickerDoctorCard {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
}

.tickerDoctorCard h3 {
  margin: 0 0 6px;
}

.tickerDoctorCard p {
  margin: 0 0 12px;
  color: var(--muted);
}

.tickerDoctorRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tickerDoctorRow input {
  flex: 1;
  min-width: 160px;
}

.tickerDoctorRow button {
  width: auto;
  min-width: 140px;
}

.dangerButton {
  border-color: rgba(255, 98, 98, .38) !important;
  background: rgba(255, 98, 98, .14) !important;
  color: #ffb0bd !important;
}

.tickerDoctorOutput {
  margin-top: 16px;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 360px;
}

.tickerDoctorOutput.error {
  border-color: rgba(255,98,98,.35);
  color: #ffb0bd;
}

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


/* Ticker Health page-only bottom jump button */
.tickerHealthBottomButton {
  position: fixed;
  right: 32px;
  bottom: 26px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #2fd37f;
  color: #061018;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 50px rgba(47, 211, 127, .18);
}

.tickerHealthBottomButton:hover {
  filter: brightness(1.06);
}

#tickerHealthBottom {
  height: 1px;
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 700px) {
  .tickerHealthBottomButton {
    right: 18px;
    bottom: 18px;
    min-width: 96px;
  }
}

/* Roadmap build status cards */
.buildStatusGrid {
  align-items: stretch;
}

.buildStatusCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.buildStatusCard > p {
  margin-bottom: 0;
}

.versionTag {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.nextBuildBox {
  margin-top: auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 204, 102, .18);
  background:
    radial-gradient(circle at top left, rgba(255, 204, 102, .10), transparent 54%),
    rgba(255,255,255,.035);
}

.nextBuildBox strong {
  display: inline-flex;
  margin-bottom: 6px;
  color: #ffcc66;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nextBuildBox p {
  margin: 0;
  color: var(--muted);
}


/* WayUp Monte Carlo source card polish */
.wyMcFinalPlain {
  position: relative !important;
  overflow: hidden !important;
}

.wyMcFinalPlain::before,
.wyMcFinalPlain::after,
.wyMcFinalPlain *::before,
.wyMcFinalPlain *::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.wyMcFinalProbabilityUp {
  border-color: rgba(47, 211, 127, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(47, 211, 127, .10),
    0 0 0 1px rgba(47, 211, 127, .08),
    0 18px 60px rgba(47, 211, 127, .06) !important;
  background:
    radial-gradient(circle at top right, rgba(47, 211, 127, .08), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalProbabilityDown {
  border-color: rgba(255, 98, 98, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 98, 98, .10),
    0 0 0 1px rgba(255, 98, 98, .08),
    0 18px 60px rgba(255, 98, 98, .06) !important;
  background:
    radial-gradient(circle at top right, rgba(255, 98, 98, .08), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalExpectedReturn {
  border-color: rgba(47, 211, 127, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(47, 211, 127, .08),
    0 0 0 1px rgba(47, 211, 127, .06),
    0 18px 60px rgba(47, 211, 127, .04) !important;
  background:
    radial-gradient(circle at top right, rgba(47, 211, 127, .08), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalRewardRisk {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  border-color: rgba(255, 204, 102, .46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 204, 102, .10),
    0 0 0 1px rgba(255, 204, 102, .08),
    0 18px 60px rgba(255, 204, 102, .05) !important;
  background:
    radial-gradient(circle at top right, rgba(255, 204, 102, .10), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalRewardRisk .wyRrTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #ffcf70;
}

.wyMcFinalRewardRisk .wyRrTop span {
  font-size: 14px;
  font-weight: 850;
}

.wyMcFinalRewardRisk .wyRrTop strong {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 950;
  line-height: 1;
}

.wyMcFinalRewardRisk .wyRrSpacer {
  height: 7px;
}

.wyMcFinalRewardRisk .wyRrRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wyMcFinalRewardRisk .wyRrRow span {
  color: var(--muted);
  font-size: 13px;
}

.wyMcFinalRewardRisk .wyRrRow strong {
  font-size: 17px;
  font-weight: 900;
}

.wyMcFinalRewardRisk .wyRrGood {
  color: #2fd37f !important;
}

.wyMcFinalRewardRisk .wyRrWarn {
  color: #ffcf70 !important;
}


/* Reward / Risk conditional strength colors */
.wyMcFinalRewardRisk.rrStrong {
  border-color: rgba(47, 211, 127, .54) !important;
  box-shadow:
    inset 0 1px 0 rgba(47, 211, 127, .12),
    0 0 0 1px rgba(47, 211, 127, .09),
    0 18px 60px rgba(47, 211, 127, .06) !important;
  background:
    radial-gradient(circle at top right, rgba(47, 211, 127, .10), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalRewardRisk.rrStrong .wyRrTop,
.wyMcFinalRewardRisk.rrStrong .wyRrTop strong {
  color: #2fd37f !important;
}

.wyMcFinalRewardRisk.rrNeutral {
  border-color: rgba(255, 204, 102, .46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 204, 102, .10),
    0 0 0 1px rgba(255, 204, 102, .08),
    0 18px 60px rgba(255, 204, 102, .05) !important;
  background:
    radial-gradient(circle at top right, rgba(255, 204, 102, .10), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalRewardRisk.rrNeutral .wyRrTop,
.wyMcFinalRewardRisk.rrNeutral .wyRrTop strong {
  color: #ffcf70 !important;
}

.wyMcFinalRewardRisk.rrWeak {
  border-color: rgba(255, 98, 98, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 98, 98, .10),
    0 0 0 1px rgba(255, 98, 98, .08),
    0 18px 60px rgba(255, 98, 98, .06) !important;
  background:
    radial-gradient(circle at top right, rgba(255, 98, 98, .09), transparent 36%),
    rgba(255,255,255,.035) !important;
}

.wyMcFinalRewardRisk.rrWeak .wyRrTop,
.wyMcFinalRewardRisk.rrWeak .wyRrTop strong {
  color: #ff6b85 !important;
}


/* Admin manual historic backfill */
.manualBackfillPanel {
  border-color: rgba(255, 204, 102, .22);
}

.manualBackfillGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.manualBackfillGrid label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.manualBackfillActions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.manualBackfillCheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.manualBackfillCheck input {
  width: auto;
}

.manualBackfillActions button {
  width: auto;
  min-width: 130px;
}

.manualBackfillOutput {
  margin-top: 14px;
  white-space: pre-wrap;
  max-height: 420px;
  overflow: auto;
}

.manualBackfillOutput.error {
  color: #ffb0bd;
  border-color: rgba(255, 98, 98, .35);
}

@media (max-width: 1050px) {
  .manualBackfillGrid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

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

/* Daily Forecast v1 */
.dailyForecastControls {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}

.dailyForecastControls .field label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.dailyForecastControls button {
  min-height: 42px;
}

.checkField .checkRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.checkField input {
  width: auto;
}

.dangerButton {
  border-color: rgba(255, 98, 98, .42) !important;
  color: #ffc0ca !important;
}

.forecastLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: stretch;
}

.forecastChartPanel {
  min-width: 0;
}

.dailyForecastChart {
  min-height: 480px;
  width: 100%;
  margin-top: 12px;
}

.emptyChartMessage {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
}

.forecastSidePanel {
  display: grid;
  gap: 12px;
}

.forecastMiniCard strong {
  font-size: clamp(20px, 2vw, 28px);
}

.twoColGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.levelList {
  display: grid;
  gap: 10px;
}

.levelItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.levelItem strong {
  display: block;
  font-size: 18px;
}

.levelItem span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.fibLevelGrid {
  display: grid;
  grid-template-columns: repeat(9, minmax(90px, 1fr));
  gap: 10px;
}

.fibPill {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}

.fibPill span,
.fibPill small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.fibPill strong {
  display: block;
  font-size: 18px;
  margin: 3px 0;
}

.fibPill.good {
  border-color: rgba(47, 211, 127, .36);
  background: rgba(47, 211, 127, .07);
}

.fibPill.bad {
  border-color: rgba(255, 98, 98, .36);
  background: rgba(255, 98, 98, .07);
}

.fibPill.warn {
  border-color: rgba(255, 204, 102, .38);
  background: rgba(255, 204, 102, .08);
}

.metaPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 1250px) {
  .dailyForecastControls {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .forecastLayout {
    grid-template-columns: 1fr;
  }

  .forecastSidePanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fibLevelGrid {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }
}

@media (max-width: 700px) {
  .dailyForecastControls,
  .forecastSidePanel,
  .twoColGrid,
  .fibLevelGrid {
    grid-template-columns: 1fr;
  }
}


/* Daily Forecast v2 polish */
.chartControlRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.chartControlLabel {
  color: var(--muted);
  font-size: 12px;
  margin-right: 2px;
}

.chartRangeButton {
  width: auto !important;
  min-width: 46px;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chartRangeButton:hover,
.chartRangeButton.active {
  border-color: rgba(47, 211, 127, .55);
  background: rgba(47, 211, 127, .16);
  color: #dfffea;
}

.dailyForecastChart {
  margin-top: 8px;
}

.forecastChartPanel .chartHeader {
  align-items: flex-start;
}

@media (max-width: 700px) {
  .chartControlRow {
    gap: 6px;
  }

  .chartRangeButton {
    min-width: 42px;
    padding: 6px 9px !important;
  }
}


/* Daily Forecast v3 chart/fib controls */
.chartIntervalButton {
  width: auto !important;
  min-width: 46px;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chartIntervalButton:hover,
.chartIntervalButton.active {
  border-color: rgba(86, 166, 255, .6);
  background: rgba(86, 166, 255, .16);
  color: #e7f2ff;
}

.forecastOverlayChecks {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(95px, 1fr));
  gap: 8px 10px !important;
}

.forecastOverlayChecks label {
  white-space: nowrap;
}

.fibPill.extension {
  border-color: var(--fib-color, rgba(255, 152, 45, .45));
  background: rgba(255, 152, 45, .07);
}

.fibPill[style*="--fib-color"] {
  border-color: color-mix(in srgb, var(--fib-color) 72%, transparent);
}

@media (max-width: 700px) {
  .chartIntervalButton {
    min-width: 42px;
    padding: 6px 9px !important;
  }

  .forecastOverlayChecks {
    grid-template-columns: 1fr;
  }
}


/* Daily Forecast v4 visual control cleanup */
.dailyForecastControls {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 18px !important;
}

.dailyForecastControls > .field:not(.checkField) {
  grid-column: span 2;
  min-width: 0;
}

.dailyForecastControls > .field:not(.checkField) input,
.dailyForecastControls > .field:not(.checkField) select {
  width: 100%;
}

.dailyForecastControls > .forecastActionButton,
.dailyForecastControls > button:not(.forecastActionButton) {
  grid-column: span 2;
  align-self: end;
  min-height: 42px;
}

.dailyForecastControls > .checkField {
  grid-column: 1 / -1;
  order: 50;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.dailyForecastControls > .checkField > label {
  margin-bottom: 8px !important;
}

.forecastOverlayChecks,
.checkField .forecastOverlayChecks {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
}

.forecastOverlayChecks label,
.checkField .forecastOverlayChecks label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
}

.forecastOverlayChecks label:hover {
  border-color: rgba(47, 211, 127, .35);
  background: rgba(47, 211, 127, .08);
  color: #dfffea;
}

.forecastOverlayChecks input,
.checkField .forecastOverlayChecks input,
.dailyForecastControls .checkField input {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

.dailyForecastControls .dangerButton {
  background: rgba(255, 98, 140, .14) !important;
}

.chartControlRow {
  padding: 2px 0;
}

.chartRangeButton,
.chartIntervalButton {
  line-height: 1 !important;
}

@media (max-width: 1050px) {
  .dailyForecastControls > .field:not(.checkField),
  .dailyForecastControls > .forecastActionButton,
  .dailyForecastControls > button:not(.forecastActionButton) {
    grid-column: span 4;
  }
}

@media (max-width: 720px) {
  .dailyForecastControls {
    grid-template-columns: 1fr !important;
  }

  .dailyForecastControls > .field:not(.checkField),
  .dailyForecastControls > .forecastActionButton,
  .dailyForecastControls > button:not(.forecastActionButton),
  .dailyForecastControls > .checkField {
    grid-column: 1 / -1;
  }

  .forecastOverlayChecks,
  .checkField .forecastOverlayChecks {
    align-items: stretch !important;
  }

  .forecastOverlayChecks label,
  .checkField .forecastOverlayChecks label {
    width: 100%;
  }
}


/* Daily Forecast v6 candle interval cleanup */
.chartControlHint {
  color: var(--muted);
  font-size: 12px;
  margin-left: 10px;
}

.chartIntervalButton.disabled,
.chartIntervalButton:disabled {
  opacity: .38;
  cursor: not-allowed;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.45);
}

.chartIntervalButton.disabled:hover,
.chartIntervalButton:disabled:hover {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.45);
}

/* Market Events v1 */
.marketEventControls {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(160px, 220px));
  gap: 14px;
  align-items: end;
}

.marketEventControls button {
  min-height: 42px;
}

.marketEventSummaryGrid {
  margin-top: 18px;
}

.marketEventLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.eventList {
  display: grid;
  gap: 10px;
}

.eventList.wide {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.eventList.compact {
  margin-top: 12px;
}

.eventItem {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  border-radius: 16px;
  padding: 13px 14px;
}

.eventItem strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 4px;
}

.eventItem span,
.eventItem em,
.eventItem p,
.eventItem small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.eventItem p {
  margin: 8px 0 0;
  color: var(--muted);
}

.eventItem small {
  margin-top: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.eventItem.dangerCard {
  border-color: rgba(255, 98, 140, .35);
  background: linear-gradient(180deg, rgba(255, 98, 140, .09), rgba(255,255,255,.025));
}

.eventItem.warnCard {
  border-color: rgba(255, 207, 112, .35);
  background: linear-gradient(180deg, rgba(255, 207, 112, .08), rgba(255,255,255,.025));
}

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


/* Market Events v2 cache wording polish */
.eventItem strong + p {
  margin-top: 6px;
}

#meCacheCard strong {
  letter-spacing: -.02em;
}


/* Market Events v3 polish */
.eventItem.neutralEvent {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
}

.eventList.wide {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

#meFedEvents .eventItem {
  padding: 11px 12px;
  border-radius: 14px;
}

#meFedEvents .eventItem strong {
  font-size: 14px;
  line-height: 1.15;
}

#meFedEvents .eventItem span,
#meFedEvents .eventItem em,
#meFedEvents .eventItem p,
#meFedEvents .eventItem small {
  font-size: 11px;
}

#meFedEvents .eventItem p {
  margin-top: 6px;
}

.marketEventSummaryGrid .card strong {
  line-height: 1.05;
}

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

/* Watchlist Ranked Tables v1 */
.rankedWatchControls {
  grid-template-columns: minmax(280px, 1.4fr) minmax(180px, .8fr) repeat(3, minmax(130px, 170px));
  align-items: end;
}

.rankedWatchControls button,
.rankedWatchControls .buttonLike {
  min-height: 42px;
}

.buttonLike {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.watchRankLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

.compactTable table {
  min-width: 980px;
}

.compactTable td,
.compactTable th {
  white-space: nowrap;
}

.watchTickerLookup {
  display: grid;
  gap: 12px;
}

.lookupCard {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) minmax(210px, .8fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.lookupCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.lookupCard strong {
  display: block;
  color: var(--text);
  font-size: 20px;
}

.lookupCard small,
.lookupCard p {
  color: var(--muted);
  font-size: 12px;
}

.lookupActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.emptyState {
  padding: 16px;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 16px;
  color: var(--muted);
}

.watchDataIssues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 1300px) {
  .watchRankLayout {
    grid-template-columns: 1fr 1fr;
  }

  .compactTable table {
    min-width: 860px;
  }
}

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

  .lookupCard {
    grid-template-columns: 1fr;
  }

  .lookupActions {
    justify-content: flex-start;
  }
}


/* Watchlist layout polish v2 */
.watchRankLayout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.watchRankLayout > .panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.watchRankLayout .tableWrap,
.watchRankLayout .compactTable {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.watchRankLayout .compactTable table {
  width: 100%;
  min-width: 980px;
}

#tickerLookupPanel {
  margin-top: 18px;
}

@media (min-width: 1300px) {
  .watchRankLayout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .watchRankLayout > .panel {
    grid-column: 1 / -1 !important;
  }
}


/* Watchlist score tuning v1 */
.compactTable table {
  min-width: 1060px;
}

.compactTable .badge.neutral {
  color: #b8c7df;
  background: rgba(184,199,223,.10);
  border-color: rgba(184,199,223,.18);
}

.watchRankLayout td .badge {
  white-space: nowrap;
}


/* Watchlist polish v2 */
.watchScoreNote {
  margin: 16px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.watchScoreNote strong {
  color: var(--text);
}

.watchActionGroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.watchMiniAction,
.watchRankLayout .miniLink {
  min-height: 26px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.watchRankLayout th:last-child,
.watchRankLayout td:last-child {
  width: 170px;
  min-width: 170px;
}

.watchRankLayout th,
.watchRankLayout td {
  vertical-align: middle;
}

.watchRankLayout .compactTable table {
  min-width: 1020px;
}

@media (max-width: 900px) {
  .watchActionGroup {
    gap: 4px;
  }

  .watchMiniAction,
  .watchRankLayout .miniLink {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }
}


/* Watchlist polish v3: remove table action column */
.watchSymbolLink {
  color: var(--text);
  text-decoration: none;
}

.watchSymbolLink:hover strong {
  color: #2fd37f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.watchRankLayout th:last-child,
.watchRankLayout td:last-child {
  width: auto !important;
  min-width: 0 !important;
}

.watchRankLayout .compactTable table {
  min-width: 880px !important;
}

.watchRankLayout th,
.watchRankLayout td {
  padding-left: 10px;
  padding-right: 10px;
}

.watchRankLayout .badge {
  font-size: 11px;
  padding: 5px 9px;
}

.watchScoreNote {
  max-width: 100%;
}


/* Watchlist filters v1 */
.rankedWatchControls {
  grid-template-columns:
    minmax(240px, 1.2fr)
    minmax(150px, .65fr)
    minmax(95px, .35fr)
    minmax(140px, .45fr)
    repeat(3, minmax(115px, 150px)) !important;
}

.rankedWatchControls .filterField input {
  text-align: right;
}

.rankedWatchControls .filterField {
  min-width: 95px;
}

@media (max-width: 1200px) {
  .rankedWatchControls {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 750px) {
  .rankedWatchControls {
    grid-template-columns: 1fr !important;
  }
}


/* Watchlist filters layout v2 */
.rankedWatchControls {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.35fr) minmax(180px, .8fr) minmax(105px, .35fr) minmax(145px, .45fr) !important;
  gap: 12px !important;
  align-items: end !important;
}

.rankedWatchControls .field {
  min-width: 0 !important;
}

.rankedWatchControls .field input {
  width: 100% !important;
}

.rankedWatchControls .watchControlButton {
  min-height: 42px !important;
  width: 100% !important;
  margin: 0 !important;
}

.rankedWatchControls .watchRankButton {
  grid-column: 1 / 2;
}

.rankedWatchControls .watchInspectButton {
  grid-column: 2 / 3;
}

.rankedWatchControls .watchExportButton {
  grid-column: 3 / 5;
}

.watchStatsGrid {
  grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  gap: 14px !important;
}

.watchStatsGrid .card {
  min-width: 0;
}

@media (max-width: 1150px) {
  .rankedWatchControls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rankedWatchControls .watchRankButton,
  .rankedWatchControls .watchInspectButton,
  .rankedWatchControls .watchExportButton {
    grid-column: auto !important;
  }

  .watchStatsGrid {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .rankedWatchControls {
    grid-template-columns: 1fr !important;
  }

  .watchStatsGrid {
    grid-template-columns: 1fr !important;
  }
}


/* Watchlist status polish v1 */
#status.status {
  line-height: 1.45;
  max-width: 100%;
}


/* Watchlist sortable tables v1 */
.watchSortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.watchSortable:hover {
  color: #dfffea;
}

.watchSortable::after {
  content: "↕";
  margin-left: 6px;
  opacity: .35;
  font-size: 10px;
}

.watchSortable.sortAsc::after {
  content: "↑";
  opacity: .95;
  color: #2fd37f;
}

.watchSortable.sortDesc::after {
  content: "↓";
  opacity: .95;
  color: #2fd37f;
}


/* Daily Forecast intraday v1 */
.intradayCachePill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 700;
}

.intradayCachePill.fresh {
  border-color: rgba(47, 211, 127, .45);
  color: #dfffea;
  background: rgba(47, 211, 127, .12);
}

.intradayCachePill.stale {
  border-color: rgba(255, 207, 112, .45);
  color: #fff2cf;
  background: rgba(255, 207, 112, .10);
}

.intradayCachePill.daily {
  border-color: rgba(86, 166, 255, .35);
  color: #e7f2ff;
  background: rgba(86, 166, 255, .10);
}


/* Daily Forecast intraday chart range v3 */
.chartToolRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}

.chartToolButton {
  width: auto !important;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chartToolButton:hover {
  border-color: rgba(47, 211, 127, .55);
  background: rgba(47, 211, 127, .14);
  color: #dfffea;
}

.dailyForecastFullscreenPanel {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: auto !important;
  background: #07101f !important;
}

.dailyForecastFullscreenPanel .dailyForecastChart {
  min-height: 560px;
}

@media (max-width: 760px) {
  .chartToolRow {
    justify-content: flex-start;
  }
}


/* Daily Forecast chart-only window v4 */
.dailyForecastChartOnlyBody {
  min-height: 100vh;
  background: #07101f;
}

.dailyForecastChartOnlyPage {
  width: 100%;
  max-width: none;
  padding: 12px;
}

.dailyForecastChartOnlyPanel {
  min-height: calc(100vh - 70px);
}

.dailyForecastChartOnly {
  height: calc(100vh - 245px) !important;
  min-height: 560px;
}

.dailyForecastChartOnlyPanel .chartHeader {
  align-items: flex-start;
}

.dailyForecastChartOnlyPanel .chartControlRow {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .dailyForecastChartOnlyPage {
    padding: 8px;
  }

  .dailyForecastChartOnly {
    height: calc(100vh - 290px) !important;
    min-height: 430px;
  }
}


/* Daily Forecast disable fib v6 */
.chartOverlays input:disabled,
.chartControlRow input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.chartOverlays label:has(input:disabled) {
  opacity: .55;
}


/* Daily Forecast disable fib fix v7 */
.dailyForecastFibsDisabled #extendFibs,
.dailyForecastFibsDisabled #showFibExtensions {
  opacity: .45;
}

.dailyForecastFibsDisabled label:has(#extendFibs),
.dailyForecastFibsDisabled label:has(#showFibExtensions) {
  opacity: .55;
}


/* Daily Forecast disable fib hard strip v8 */
.dailyForecastFibsDisabled .fibLevelBadge,
.dailyForecastFibsDisabled .fibBadge,
.dailyForecastFibsDisabled [data-fib-level] {
  display: none !important;
}


/* Admin standard-user consistency v1 */
.adminOnlyMaintenanceArea .adminOnlyNotice {
  margin-top: 12px;
}

.adminOnlyNotice strong {
  display: block;
  color: var(--text);
  margin-bottom: 8px;
}

.adminOnlyNotice p {
  color: var(--muted);
}


/* Admin SMTP standard-user placeholder fix v2 */
.adminSmtpStdPlaceholder .adminOnlyNotice {
  margin-top: 12px;
}

.adminSmtpStdPlaceholder .adminOnlyNotice strong {
  display: block;
  color: var(--text);
  margin-bottom: 8px;
}

.adminSmtpStdPlaceholder .adminOnlyNotice p {
  color: var(--muted);
}


/* sync-page-shell-from-daily-forecast-v1 */
.userBadge,
.user-badge,
.profileBadge,
.profile-badge,
.avatarBadge,
.avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* market-events-shell-hard-sync-v2 */
body.market-events-shell-hard-sync-v2 {
  min-height: 100vh;
}


/* market-events-avatar-direct-fix-v4 */
.marketEventsAvatarFix {
  position: absolute;
  top: 92px;
  right: 54px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eaf2ff;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #1d4ed8, #172554);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 12px 28px rgba(0,0,0,.28);
}

@media (max-width: 900px) {
  .marketEventsAvatarFix {
    position: static;
    margin: 10px 0 0 auto;
  }
}


/* market-events-avatar-position-fix-v5 */
.marketEventsAvatarRow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin: 10px 0 8px;
  pointer-events: none;
}

.marketEventsAvatarRow .marketEventsAvatarFix,
.marketEventsAvatarFix {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eaf2ff;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #1d4ed8, #172554);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 12px 28px rgba(0,0,0,.28);
  pointer-events: auto;
}

/* Override the earlier bad absolute positioning if it is still present lower in the CSS. */
body .marketEventsAvatarFix {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}


/* market-events-real-user-shell-sync-v6 */
.marketEventsAvatarFix,
.marketEventsAvatarRow {
  display: none !important;
}


/* disable-admin-delete-cache-buttons-v2 */
button.adminDeleteCacheButton:disabled,
button[data-admin-disabled="true"] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(.35);
  box-shadow: none !important;
}

button.adminDeleteCacheButton:disabled:hover,
button[data-admin-disabled="true"]:hover {
  transform: none !important;
}


/* delete-cache-public-v1 */
button[data-admin-disabled="true"],
button.adminDeleteCacheButton {
  opacity: 1 !important;
  cursor: pointer !important;
  filter: none !important;
}


/* Market Events safe polish v1 */
.marketEventFilterBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.marketEventFilterLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 4px;
}

.marketEventFilterButton {
  width: auto !important;
  min-height: 30px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.marketEventFilterButton:hover,
.marketEventFilterButton.active {
  border-color: rgba(47, 211, 127, .55);
  background: rgba(47, 211, 127, .16);
  color: #dfffea;
}

.marketEventCard {
  position: relative;
  overflow: hidden;
}

.marketEventCard::before,
.marketSummaryFresh::before,
.marketSummarySoon::before,
.marketSummaryUrgent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: .9;
}

.marketImpactHigh::before,
.marketSummaryUrgent::before {
  background: #ff4f7b;
}

.marketImpactMedium::before,
.marketSummarySoon::before {
  background: #ffcf70;
}

.marketImpactNormal::before,
.marketSummaryFresh::before {
  background: #2fd37f;
}

.marketEventBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.marketEventBadge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.marketEventBadge.danger {
  color: #ffdbe5;
  border-color: rgba(255,79,123,.42);
  background: rgba(255,79,123,.16);
}

.marketEventBadge.warn {
  color: #fff0c5;
  border-color: rgba(255,207,112,.42);
  background: rgba(255,207,112,.14);
}

.marketEventBadge.fed {
  color: #f2d9ff;
  border-color: rgba(213,118,255,.38);
  background: rgba(213,118,255,.14);
}

.marketEventBadge.earnings {
  color: #ddf1ff;
  border-color: rgba(86,166,255,.38);
  background: rgba(86,166,255,.13);
}

.marketEventBadge.dividend {
  color: #dfffea;
  border-color: rgba(47,211,127,.38);
  background: rgba(47,211,127,.13);
}

.marketEventBadge.neutral {
  color: #c8d4e8;
  border-color: rgba(200,212,232,.20);
  background: rgba(200,212,232,.09);
}

.marketSummaryFresh,
.marketSummarySoon,
.marketSummaryUrgent {
  position: relative;
  overflow: hidden;
}

.marketSummaryFresh {
  border-color: rgba(47,211,127,.22) !important;
}

.marketSummarySoon {
  border-color: rgba(255,207,112,.32) !important;
}

.marketSummaryUrgent {
  border-color: rgba(255,79,123,.35) !important;
}

@media (max-width: 760px) {
  .marketEventFilterBar {
    align-items: stretch;
  }

  .marketEventFilterButton {
    flex: 1 1 140px;
  }
}


/* Market Events recent earnings hint v1 */
.marketRecentEarningsHint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(86,166,255,.22);
  background: rgba(86,166,255,.08);
  color: var(--muted);
  font-size: 12px;
}


/* remove-white-cream-keep-default-bg-v1 */
html[data-bg-theme="default"],
body[data-bg-theme="default"],
body.bg-default,
body.theme-default,
body.background-default,
body[data-background-theme="default"],
html[data-background-theme="default"] body {
  background:
    radial-gradient(circle at 25% 0%, rgba(28, 75, 140, .24), transparent 36%),
    linear-gradient(135deg, #050816 0%, #0a1630 45%, #07111f 100%) !important;
  color: #e8f0ff;
}

.backgroundThemePreview.theme-default,
button[value="default"],
[data-bg-theme="default"],
[data-background-theme="default"],
[data-theme="default"] {
  border-color: rgba(125, 160, 255, .35) !important;
}


/* watchlist-options-edge-ui-v1 */
.watchOptionsEdgeCell {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 8.5rem;
  max-width: 12rem;
}

.watchOptionsEdgeBadge {
  width: fit-content;
  white-space: nowrap;
}

.watchOptionsEdgeCell small {
  display: block;
  font-size: 0.72rem;
  line-height: 1.15;
  color: rgba(226, 232, 240, 0.72);
  white-space: normal;
}

.compactTable td .watchOptionsEdgeCell .badge {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .watchOptionsEdgeCell {
    min-width: 7.5rem;
    max-width: 10rem;
  }

  .watchOptionsEdgeCell small {
    font-size: 0.68rem;
  }
}


/* email-notifications-v1 */
.profilePreferencesGrid {
  display: grid;
  gap: 0.85rem;
}

.preferenceToggle {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.32);
}

.preferenceToggle input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
}

.preferenceToggle strong {
  display: block;
  color: rgba(248, 250, 252, 0.94);
}

.preferenceToggle small {
  display: block;
  margin-top: 0.18rem;
  color: rgba(203, 213, 225, 0.72);
  line-height: 1.35;
}


/* profile-appearance-spacing-normalize-v1 */
#profileAppearanceBottom.profileAppearanceBottom {
  display: contents;
}

#profileAppearanceBottom > .panel {
  margin-top: 1rem;
  margin-bottom: 0;
}

#profileAppearanceBottom > .panel + .panel {
  margin-top: 1rem;
}


/* market-events-status-top-only-v1 */
.topPageStatus {
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* options-positioning-detail-panel-v1 */
.optionsPositioningPanel {
  border-color: rgba(111, 211, 169, 0.22);
}

.optionsPositioningPanel .chartHeader {
  align-items: flex-start;
}

.optionsPositioningGrid {
  margin-top: 1rem;
}

.dealerRegimeCard {
  grid-column: span 2;
}

.optionsPositioningContextGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.positioningContextCard {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.48);
  border-radius: 1rem;
  padding: 1rem;
}

.positioningContextCard span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.positioningContextCard p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.positioningNotes {
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .dealerRegimeCard {
    grid-column: span 1;
  }

  .optionsPositioningContextGrid {
    grid-template-columns: 1fr;
  }
}


/* watchlist-options-positioning-summary-v1 */
.watchOptionsEdgeCell small.watchOptionsDealerSmall {
  color: var(--muted);
  opacity: 0.95;
}


/* daily-forecast-options-positioning-context-v1 */
.dailyForecastPositioningPanel {
  border-color: rgba(111, 211, 169, 0.18);
}

.dailyForecastPositioningPanel .chartHeader {
  align-items: flex-start;
}

.dailyForecastPositioningGrid {
  margin-top: 1rem;
}

.dailyForecastPositioningContext {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.dailyForecastPositioningContext > div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.45);
  border-radius: 1rem;
  padding: 1rem;
}

.dailyForecastPositioningContext span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.dailyForecastPositioningContext p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

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


/* Risk Monitor note wrapping polish */
#riskRows .noteCell {
  white-space: normal;
  min-width: 220px;
  max-width: 360px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: normal;
}

#riskRows td:nth-child(11),
#riskRows th:nth-child(11) {
  white-space: normal;
  min-width: 220px;
  max-width: 360px;
}

#riskRows td:nth-child(10),
#riskRows th:nth-child(10) {
  white-space: nowrap;
  min-width: 120px;
}

#riskRows td:nth-child(2),
#riskRows th:nth-child(2) {
  min-width: 120px;
}

#riskRows td {
  vertical-align: top;
}


/* Risk Monitor table column polish */
#riskTable th:nth-child(10),
#riskTable td:nth-child(10) {
  white-space: nowrap;
  min-width: 120px;
}

#riskTable th:nth-child(11),
#riskTable td:nth-child(11) {
  white-space: normal;
  min-width: 220px;
  max-width: 360px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: normal;
}

#riskTable td {
  vertical-align: top;
}


/* Daily Forecast crash risk context */
.dailyForecastRiskPanel {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dailyForecastRiskGrid {
  margin-top: 14px;
}

.dailyForecastRiskNote {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dailyForecastRiskNote span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.dailyForecastRiskNote p {
  margin: 0;
  line-height: 1.45;
  color: var(--text);
}

#dfRiskLevelCard.goodCard {
  border-color: rgba(99, 230, 190, 0.28);
}

#dfRiskLevelCard.dangerCard {
  border-color: rgba(255, 99, 132, 0.32);
}


/* Daily Forecast risk level card color/glow */
#dfRiskLevelCard.goodCard {
  border-color: rgba(69, 199, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(69, 199, 90, 0.08), 0 0 18px rgba(69, 199, 90, 0.12);
}

#dfRiskLevelCard.goodCard strong,
#dfRiskLevelCard.goodCard small {
  color: #45c75a;
}

#dfRiskLevelCard.warnCard {
  border-color: rgba(255, 209, 102, 0.50);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.10), 0 0 18px rgba(255, 209, 102, 0.14);
}

#dfRiskLevelCard.warnCard strong,
#dfRiskLevelCard.warnCard small {
  color: #ffd166;
}

#dfRiskLevelCard.dangerCard {
  border-color: rgba(255, 99, 132, 0.50);
  box-shadow: 0 0 0 1px rgba(255, 99, 132, 0.10), 0 0 18px rgba(255, 99, 132, 0.14);
}

#dfRiskLevelCard.dangerCard strong,
#dfRiskLevelCard.dangerCard small {
  color: #ff6384;
}

/* Admin Update Center planner card status colors */
#plannerQualityCard.plannerGoodCard,
#plannerMissingCard.plannerGoodCard,
#plannerThinCard.plannerGoodCard {
  border-color: rgba(69, 199, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(69, 199, 90, 0.08), 0 0 18px rgba(69, 199, 90, 0.10);
}

#plannerQualityCard.plannerGoodCard strong,
#plannerQualityCard.plannerGoodCard small,
#plannerMissingCard.plannerGoodCard strong,
#plannerMissingCard.plannerGoodCard small,
#plannerThinCard.plannerGoodCard strong,
#plannerThinCard.plannerGoodCard small {
  color: #45c75a;
}

#plannerQualityCard.plannerWarnCard,
#plannerMissingCard.plannerWarnCard,
#plannerThinCard.plannerWarnCard {
  border-color: rgba(255, 209, 102, 0.50);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.10), 0 0 18px rgba(255, 209, 102, 0.12);
}

#plannerQualityCard.plannerWarnCard strong,
#plannerQualityCard.plannerWarnCard small,
#plannerMissingCard.plannerWarnCard strong,
#plannerMissingCard.plannerWarnCard small,
#plannerThinCard.plannerWarnCard strong,
#plannerThinCard.plannerWarnCard small {
  color: #ffd166;
}

#plannerQualityCard.plannerDangerCard,
#plannerMissingCard.plannerDangerCard,
#plannerThinCard.plannerDangerCard {
  border-color: rgba(255, 99, 132, 0.50);
  box-shadow: 0 0 0 1px rgba(255, 99, 132, 0.10), 0 0 18px rgba(255, 99, 132, 0.12);
}

#plannerQualityCard.plannerDangerCard strong,
#plannerQualityCard.plannerDangerCard small,
#plannerMissingCard.plannerDangerCard strong,
#plannerMissingCard.plannerDangerCard small,
#plannerThinCard.plannerDangerCard strong,
#plannerThinCard.plannerDangerCard small {
  color: #ff6384;
}

/* Daily Forecast context explanation cards */
.dailyForecastContextHelp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.dailyForecastHelpCard {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.42);
  padding: 12px 14px;
}

.dailyForecastHelpCard span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.dailyForecastHelpCard p {
  margin: 0;
  color: var(--text);
  line-height: 1.4;
  font-size: 0.9rem;
}

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

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

/* Options Detail positioning help cards polish */
.optionsPositioningPanel .optionsDetailPositioningHelp,
#optionsPositioningPanel .optionsDetailPositioningHelp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.optionsPositioningPanel .optionsDetailHelpCard,
#optionsPositioningPanel .optionsDetailHelpCard {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  padding: 12px 14px;
}

.optionsPositioningPanel .optionsDetailHelpCard span,
#optionsPositioningPanel .optionsDetailHelpCard span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.optionsPositioningPanel .optionsDetailHelpCard p,
#optionsPositioningPanel .optionsDetailHelpCard p {
  margin: 0;
  color: var(--text);
  line-height: 1.4;
  font-size: 0.9rem;
}

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

@media (max-width: 640px) {
  .optionsPositioningPanel .optionsDetailPositioningHelp,
  #optionsPositioningPanel .optionsDetailPositioningHelp {
    grid-template-columns: 1fr;
  }
}

/* Options Detail positioning directional bias badge */
.positioningBadgeRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.positioningBiasBadge {
  min-width: 108px;
  text-align: center;
}

@media (max-width: 640px) {
  .positioningBadgeRow {
    justify-content: flex-start;
  }
}

/* Daily Forecast options-positioning directional bias badge */
.dfPositioningBadgeRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.dfPositioningBiasBadge {
  min-width: 108px;
  text-align: center;
}

@media (max-width: 640px) {
  .dfPositioningBadgeRow {
    justify-content: flex-start;
  }
}

/* Dealer bias consistency across Watchlist labels */
.watchOptionsEdgeCell small.watchOptionsDealerSmall.good {
  color: var(--green);
}

.watchOptionsEdgeCell small.watchOptionsDealerSmall.warn {
  color: var(--yellow);
}

.watchOptionsEdgeCell small.watchOptionsDealerSmall.bad {
  color: var(--red);
}

.watchOptionsEdgeCell small.watchOptionsDealerSmall.info {
  color: var(--muted);
}

/* Watchlist combined ranking note + options legend polish */
.status.watchRankingNote {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.44);
  padding: 12px 14px;
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status.watchRankingNote > div:first-child {
  color: var(--muted);
  line-height: 1.35;
}

.status.watchRankingNote > div:first-child strong,
.status.watchRankingNote .watchRankingLegend strong {
  color: var(--text);
}

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

.status.watchRankingNote .watchRankingLegend span {
  color: var(--muted);
  font-size: 0.9rem;
}

.status.watchRankingNote .watchRankingLegend .badge {
  margin-right: 5px;
}

.status.watchRankingNote small {
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .status.watchRankingNote .watchRankingLegend {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Watchlist ranking legend pill color fixes */
.status.watchRankingNote .watchRankingLegend .badge.good {
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.42);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.10);
}

.status.watchRankingNote .watchRankingLegend .badge.warn {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.42);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.10);
}

.status.watchRankingNote .watchRankingLegend .badge.bad {
  color: #fb7185;
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.42);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.10);
}

.status.watchRankingNote .watchRankingLegend .badge.neutral {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.34);
  box-shadow: none;
}

/* Compact positioning bias legends for Daily Forecast and Options Detail */
.positioningBiasLegend {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.34);
  padding: 10px 12px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.positioningBiasLegend strong {
  color: var(--text);
}

.positioningBiasLegend span {
  color: var(--muted);
  font-size: 0.88rem;
}

.positioningBiasLegend .badge {
  margin-right: 5px;
}

.positioningBiasLegend .badge.good {
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.42);
}

.positioningBiasLegend .badge.warn {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.42);
}

.positioningBiasLegend .badge.bad {
  color: #fb7185;
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.42);
}

.positioningBiasLegend .badge.info {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.34);
}

@media (max-width: 720px) {
  .positioningBiasLegend {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Risk Monitor compact risk color legend */
.status.riskLevelLegend {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.44);
  padding: 12px 14px;
  margin: 12px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status.riskLevelLegend > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.status.riskLevelLegend strong {
  color: var(--text);
}

.status.riskLevelLegend span {
  color: var(--muted);
  font-size: 0.9rem;
}

.status.riskLevelLegend .badge {
  margin-right: 5px;
}

.status.riskLevelLegend .badge.good {
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.42);
}

.status.riskLevelLegend .badge.warn {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.42);
}

.status.riskLevelLegend .badge.bad {
  color: #fb7185;
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.42);
}

.status.riskLevelLegend .badge.info {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.34);
}

.status.riskLevelLegend small {
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .status.riskLevelLegend > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Risk Monitor legend embedded/tightened inside Risk Model Notes */
.infoPanel.riskNotesPanel {
  row-gap: 12px;
}

.infoPanel.riskNotesPanel .riskLevelLegend {
  grid-column: 1 / -1;
  margin: 0;
  background: rgba(15, 23, 42, 0.28);
}

.infoPanel.riskNotesPanel .riskLevelLegend small {
  max-width: 860px;
}