/* [project]/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ink: #111417;
  --ink-rgb: 17 20 23;
  --ink-contrast: #fff;
  --ink-contrast-rgb: 255 255 255;
  --text: var(--ink);
  --muted: #65716d;
  --muted-rgb: 101 113 109;
  --surface: #f2f4f1;
  --surface-grid: rgb(var(--ink-rgb) / 4%);
  --panel: #fff;
  --panel-rgb: 255 255 255;
  --panel-soft: #f7f9f7;
  --panel-glass: rgb(var(--panel-rgb) / 78%);
  --line: #d6ded8;
  --line-soft: rgb(var(--ink-rgb) / 10%);
  --line-strong: rgb(var(--ink-rgb) / 16%);
  --grid: #e0e6e1;
  --buy: #087a54;
  --buy-rgb: 8 122 84;
  --buy-soft: #e4f4ec;
  --buy-text: #07593e;
  --buy-active: #7ee3b8;
  --watch: #b27414;
  --watch-rgb: 178 116 20;
  --watch-soft: #fff2d7;
  --sell: #c9342c;
  --sell-rgb: 201 52 44;
  --sell-soft: #ffe7e2;
  --sell-text: #8c1b16;
  --sell-active: #ff9c91;
  --sell-watch: #d96824;
  --accent: #176f91;
  --accent-rgb: 23 111 145;
  --accent-soft: #e6f2f6;
  --accent-text: #114f68;
  --accent-contrast: #fff;
  --cyan: var(--accent);
  --focus-ring: rgb(var(--accent-rgb) / 14%);
  --placeholder: rgb(var(--ink-rgb) / 32%);
  --chip-bg: rgb(var(--panel-rgb) / 68%);
  --chip-border: rgb(var(--ink-rgb) / 9%);
  --chip-current-border: rgb(var(--ink-rgb) / 23%);
  --table-header-bg: #edf2ee;
  --table-muted-bg: #f1f2f0;
  --range-marker: #a7b0ab;
  --shadow-soft: 0 4px 12px rgb(var(--ink-rgb) / 5%);
  --chart-bg: #0d1117;
  --chart-panel: #111820;
  --chart-line: #26313a;
  --chart-soft-panel: #151c23;
  --chart-panel-hover: #1a232b;
  --chart-border: #26313a;
  --chart-border-strong: #3c4a54;
  --chart-text: #d7e1df;
  --chart-muted: #83919a;
  --chart-accent: #4aa0d8;
  --chart-accent-soft: #4aa0d829;
  --chart-accent-text: #d8f1ff;
  --shadow: 0 18px 52px rgb(var(--ink-rgb) / 9%);
}

:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ink: #edf7f5;
  --ink-rgb: 237 247 245;
  --ink-contrast: #0d1117;
  --ink-contrast-rgb: 13 17 23;
  --muted: #9aa8ad;
  --muted-rgb: 154 168 173;
  --surface: #0d1117;
  --surface-grid: rgb(var(--ink-rgb) / 5%);
  --panel: #111820;
  --panel-rgb: 17 24 32;
  --panel-soft: #151c23;
  --panel-glass: rgb(var(--panel-rgb) / 82%);
  --line: #26313a;
  --line-soft: rgb(var(--ink-rgb) / 10%);
  --line-strong: rgb(var(--ink-rgb) / 16%);
  --grid: #222b32;
  --buy: #21c784;
  --buy-rgb: 33 199 132;
  --buy-soft: rgb(var(--buy-rgb) / 16%);
  --buy-text: #baffd5;
  --buy-active: #8df0bc;
  --watch: #f0b23d;
  --watch-rgb: 240 178 61;
  --watch-soft: rgb(var(--watch-rgb) / 16%);
  --sell: #f0524f;
  --sell-rgb: 240 82 79;
  --sell-soft: rgb(var(--sell-rgb) / 16%);
  --sell-text: #ffc4c1;
  --sell-active: #ffb3b1;
  --sell-watch: #f17f2c;
  --accent: #78d7ff;
  --accent-rgb: 120 215 255;
  --accent-soft: rgb(var(--accent-rgb) / 14%);
  --accent-text: #d8f6ff;
  --accent-contrast: #0d1117;
  --focus-ring: rgb(var(--accent-rgb) / 20%);
  --placeholder: rgb(var(--ink-rgb) / 36%);
  --chip-bg: rgb(var(--ink-rgb) / 6%);
  --chip-border: rgb(var(--ink-rgb) / 10%);
  --chip-current-border: rgb(var(--ink-rgb) / 26%);
  --table-header-bg: #17212a;
  --table-muted-bg: #121922;
  --range-marker: #8f9ca3;
  --shadow-soft: 0 4px 14px #0000003d;
  --shadow: 0 20px 56px #00000052;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --ink: #edf7f5;
    --ink-rgb: 237 247 245;
    --ink-contrast: #0d1117;
    --ink-contrast-rgb: 13 17 23;
    --muted: #9aa8ad;
    --muted-rgb: 154 168 173;
    --surface: #0d1117;
    --surface-grid: rgb(var(--ink-rgb) / 5%);
    --panel: #111820;
    --panel-rgb: 17 24 32;
    --panel-soft: #151c23;
    --panel-glass: rgb(var(--panel-rgb) / 82%);
    --line: #26313a;
    --line-soft: rgb(var(--ink-rgb) / 10%);
    --line-strong: rgb(var(--ink-rgb) / 16%);
    --grid: #222b32;
    --buy: #21c784;
    --buy-rgb: 33 199 132;
    --buy-soft: rgb(var(--buy-rgb) / 16%);
    --buy-text: #baffd5;
    --buy-active: #8df0bc;
    --watch: #f0b23d;
    --watch-rgb: 240 178 61;
    --watch-soft: rgb(var(--watch-rgb) / 16%);
    --sell: #f0524f;
    --sell-rgb: 240 82 79;
    --sell-soft: rgb(var(--sell-rgb) / 16%);
    --sell-text: #ffc4c1;
    --sell-active: #ffb3b1;
    --sell-watch: #f17f2c;
    --accent: #78d7ff;
    --accent-rgb: 120 215 255;
    --accent-soft: rgb(var(--accent-rgb) / 14%);
    --accent-text: #d8f6ff;
    --accent-contrast: #0d1117;
    --focus-ring: rgb(var(--accent-rgb) / 20%);
    --placeholder: rgb(var(--ink-rgb) / 36%);
    --chip-bg: rgb(var(--ink-rgb) / 6%);
    --chip-border: rgb(var(--ink-rgb) / 10%);
    --chip-current-border: rgb(var(--ink-rgb) / 26%);
    --table-header-bg: #17212a;
    --table-muted-bg: #121922;
    --range-marker: #8f9ca3;
    --shadow-soft: 0 4px 14px #0000003d;
    --shadow: 0 20px 56px #00000052;
  }
}

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--surface-grid) 1px, transparent 1px),
    var(--surface);
  color: var(--ink);
  letter-spacing: 0;
  background-size: 32px 32px;
  margin: 0;
  font-family: Aptos, Segoe UI, Apple SD Gothic Neo, sans-serif;
}

button, input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

h1, h2, h3, p {
  margin: 0;
}

.shell {
  width: calc(100% - 24px);
  margin: 0 auto;
  padding: 14px 0 32px;
}

.topbar {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin-bottom: 14px;
  display: grid;
}

.eyebrow {
  color: var(--cyan);
  text-transform: uppercase;
  margin: 0 0 5px;
  font-size: .78rem;
  font-weight: 800;
}

h1 {
  font-family: Georgia, Times New Roman, serif;
  font-size: 2.1rem;
  font-weight: 700;
}

.controls {
  align-items: end;
  gap: 10px;
  display: flex;
}

.topbarActions {
  justify-content: flex-end;
  align-items: end;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.tickerInput {
  gap: 5px;
  display: grid;
}

.tickerInput span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 800;
}

.tickerInput input {
  border: 1px solid var(--line);
  background: var(--panel);
  width: 132px;
  height: 42px;
  color: var(--ink);
  text-transform: uppercase;
  border-radius: 7px;
  outline: none;
  padding: 0 12px;
  font-weight: 900;
}

.tickerInput input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.benchmarkInput input {
  width: 112px;
}

.segmented {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 7px;
  grid-template-columns: repeat(8, minmax(46px, 1fr));
  width: min(520px, 52vw);
  height: 42px;
  display: grid;
  overflow: hidden;
}

.segmented button {
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: none;
  font-size: .84rem;
  font-weight: 900;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button.active {
  background: var(--ink);
  color: var(--ink-contrast);
}

.primaryButton, .iconButton {
  border: 1px solid var(--ink);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  height: 42px;
  font-weight: 900;
  display: inline-flex;
}

.primaryButton {
  background: var(--ink);
  min-width: 118px;
  color: var(--ink-contrast);
  gap: 7px;
}

.iconButton {
  background: var(--panel);
  width: 42px;
  color: var(--ink);
}

.themeToggleButton {
  flex: none;
}

.themeToggleButton:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
}

.favoriteButton.active {
  border-color: var(--watch);
  background: var(--watch-soft);
  color: var(--watch);
}

.favoriteButton.active svg {
  fill: currentColor;
}

.exportButton {
  border-color: rgb(var(--accent-rgb) / 48%);
  color: var(--cyan);
}

.banner {
  border-radius: 7px;
  margin-bottom: 12px;
  padding: 12px 14px;
  font-weight: 800;
}

.errorBanner {
  border: 1px solid var(--sell);
  background: var(--sell-soft);
  color: var(--sell-text);
}

.noticeBanner {
  border: 1px solid var(--buy);
  background: var(--buy-soft);
  color: var(--buy-text);
}

.membershipBanner {
  border: 1px solid rgb(var(--accent-rgb) / 32%);
  background: var(--accent-soft);
  color: var(--accent-text);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.membershipBanner a {
  background: var(--ink);
  min-width: 72px;
  height: 30px;
  color: var(--ink-contrast);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
}

.chartPanel, .thresholdPanel, .watchlistPanel, .panel {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: 8px;
}

.watchlistPanel {
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 28px);
  margin-bottom: 0;
  padding: 12px 14px;
  display: flex;
}

.watchlistDrawer {
  z-index: 70;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.watchlistDrawer.open {
  pointer-events: auto;
}

.watchlistDrawerTab {
  z-index: 2;
  border: 1px solid rgb(var(--ink-rgb) / 16%);
  background: var(--ink);
  width: 38px;
  min-height: 116px;
  color: var(--ink-contrast);
  pointer-events: auto;
  box-shadow: 0 14px 34px rgb(var(--ink-rgb) / 18%);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  place-items: center;
  gap: 5px;
  padding: 9px 5px;
  display: grid;
  position: absolute;
  top: 46vh;
  right: 0;
}

.watchlistDrawerTab span {
  writing-mode: vertical-rl;
  color: rgb(var(--ink-contrast-rgb) / 84%);
  letter-spacing: 0;
  font-size: .78rem;
  font-weight: 900;
}

.watchlistDrawerTab strong {
  background: var(--watch);
  min-width: 22px;
  height: 22px;
  color: var(--ink-contrast);
  border-radius: 999px;
  place-items: center;
  font-size: .72rem;
  font-weight: 950;
  display: grid;
}

.watchlistDismissLayer {
  opacity: 0;
  pointer-events: none;
  background: none;
  border: 0;
  position: absolute;
  inset: 0;
}

.watchlistDrawer.open .watchlistDismissLayer {
  pointer-events: auto;
}

.watchlistDrawerPanel {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  width: min(360px, 100vw - 28px);
  height: min(640px, 100vh - 28px);
  max-height: calc(100vh - 28px);
  transition: transform .18s, opacity .18s;
  position: absolute;
  top: 14px;
  right: 14px;
  transform: translateX(calc(100% + 28px));
}

.watchlistDrawer.open .watchlistDrawerPanel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.watchlistHeader {
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 10px;
  display: flex;
}

.watchlistHeader svg {
  color: var(--watch);
  fill: var(--watch);
}

.watchlistHeader h2 {
  font-size: .96rem;
}

.watchlistHeader span {
  margin-left: auto;
}

.watchlistCloseButton {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  width: 28px;
  height: 28px;
  color: var(--muted);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.watchlistCloseButton:hover {
  color: var(--ink);
}

.watchlistSync {
  color: var(--muted);
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 900;
  display: inline-flex;
}

.watchlistSync.on {
  color: var(--buy);
}

.watchlistAddForm {
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 7px;
  margin-bottom: 10px;
  display: grid;
}

.watchlistAddInput {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 9px;
  display: grid;
}

.watchlistAddInput:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 8%);
}

.watchlistAddInput span {
  color: var(--muted);
  font-size: .73rem;
  font-weight: 950;
}

.watchlistAddInput input {
  min-width: 0;
  color: var(--ink);
  text-transform: uppercase;
  background: none;
  border: 0;
  outline: 0;
  font-size: .9rem;
  font-weight: 950;
}

.watchlistAddInput input::placeholder {
  color: rgb(var(--ink-rgb) / 32%);
}

.watchlistAddButton {
  border: 1px solid var(--ink);
  background: var(--ink);
  width: 38px;
  height: 38px;
  color: var(--ink-contrast);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.watchlistAddButton:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--muted);
}

.watchlistItems {
  gap: 7px;
  min-height: 0;
  padding-right: 2px;
  display: grid;
  overflow: auto;
}

.watchlistItems::-webkit-scrollbar {
  width: 8px;
}

.watchlistItems::-webkit-scrollbar-track {
  background: none;
}

.watchlistItems::-webkit-scrollbar-thumb {
  background: rgb(var(--ink-rgb) / 18%);
  border-radius: 999px;
}

.watchlistRow {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  min-height: 70px;
  color: var(--ink);
  border-radius: 7px;
  grid-template-columns: 18px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 7px;
  padding: 6px 7px 6px 5px;
  display: grid;
}

.watchlistRow.dragging {
  opacity: .56;
}

.watchlistRow.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-contrast);
}

.watchlistRow.loading {
  border-color: var(--watch);
  box-shadow: inset 0 0 0 1px rgb(var(--watch-rgb) / 28%);
}

.watchlistRow.active.loading {
  border-color: var(--watch);
  background: linear-gradient(135deg, var(--ink) 0%, rgb(var(--watch-rgb) / 36%) 100%);
}

.watchlistDragHandle {
  color: var(--muted);
  cursor: grab;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.watchlistRow.active .watchlistDragHandle {
  color: rgb(var(--ink-contrast-rgb) / 62%);
}

.watchlistMainButton {
  min-width: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto);
  align-items: center;
  gap: 8px;
  padding: 0;
  display: grid;
}

.watchlistMainButton:disabled {
  cursor: wait;
}

.watchlistIdentity, .watchlistPrice {
  min-width: 0;
}

.watchlistIdentity strong, .watchlistIdentity small, .watchlistPrice strong, .watchlistPrice small {
  display: block;
}

.watchlistIdentity strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 950;
  line-height: 1.15;
  overflow: hidden;
}

.watchlistIdentity small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
}

.watchlistRow.active .watchlistIdentity small {
  color: rgb(var(--ink-contrast-rgb) / 62%);
}

.watchlistSessionPrices {
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
  display: flex;
}

.watchlistSessionPrice {
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  max-width: 100%;
  color: var(--muted);
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
}

.watchlistSessionPrice.current {
  border-color: var(--chip-current-border);
  color: var(--ink);
}

.watchlistSessionPrice.up {
  color: var(--buy);
}

.watchlistSessionPrice.down {
  color: var(--sell);
}

.watchlistSessionName {
  opacity: .74;
}

.watchlistSessionValue {
  text-overflow: ellipsis;
  max-width: 58px;
  overflow: hidden;
}

.watchlistRow.active .watchlistSessionPrice {
  border-color: rgb(var(--ink-contrast-rgb) / 16%);
  background: rgb(var(--ink-contrast-rgb) / 8%);
  color: rgb(var(--ink-contrast-rgb) / 66%);
}

.watchlistRow.active .watchlistSessionPrice.current {
  border-color: rgb(var(--ink-contrast-rgb) / 36%);
  color: var(--ink-contrast);
}

.watchlistRow.active .watchlistSessionPrice.up {
  color: var(--buy-active);
}

.watchlistRow.active .watchlistSessionPrice.down {
  color: var(--sell-active);
}

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

.watchlistPrice strong {
  font-size: .9rem;
  font-weight: 950;
  line-height: 1.15;
}

.watchlistPrice small {
  color: var(--muted);
  margin-top: 3px;
  font-size: .71rem;
  font-weight: 900;
  line-height: 1.15;
}

.watchlistPrice small.up {
  color: var(--buy);
}

.watchlistPrice small.down {
  color: var(--sell);
}

.watchlistLoadingLabel {
  color: var(--watch);
  white-space: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  display: inline-flex !important;
}

.watchlistRow.active .watchlistLoadingLabel {
  color: var(--ink-contrast);
}

.watchlistRow.active .watchlistPrice small.flat {
  color: rgb(var(--ink-contrast-rgb) / 62%);
}

.watchlistRow.active .watchlistPrice small.up {
  color: var(--buy-active);
}

.watchlistRow.active .watchlistPrice small.down {
  color: var(--sell-active);
}

.watchlistActions {
  grid-template-columns: repeat(3, 26px);
  gap: 2px;
  display: grid;
}

.watchlistActionButton {
  border: 1px solid rgb(var(--ink-rgb) / 10%);
  background: var(--panel);
  width: 26px;
  height: 30px;
  color: var(--muted);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.watchlistRow.active .watchlistActionButton {
  border-color: rgb(var(--ink-contrast-rgb) / 16%);
  background: rgb(var(--ink-contrast-rgb) / 8%);
  color: var(--ink-contrast);
}

.watchlistActionButton:hover {
  color: var(--ink);
}

.watchlistActionButton.remove:hover {
  border-color: rgb(var(--sell-rgb) / 32%);
  background: var(--sell-soft);
  color: var(--sell);
}

.watchlistEmpty {
  min-height: 34px;
  color: var(--muted);
  align-items: center;
  font-size: .86rem;
  font-weight: 800;
  display: flex;
}

.authPanel {
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
}

.authPanel.signedIn {
  border: 1px solid rgb(var(--buy-rgb) / 28%);
  background: var(--panel-glass);
  border-radius: 999px;
  max-width: 240px;
  padding: 3px;
}

.authStatus {
  min-width: 0;
  color: var(--buy);
  align-items: center;
  gap: 5px;
  padding: 0 4px 0 8px;
  display: flex;
}

.authStatus span {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 148px;
  font-size: .74rem;
  font-weight: 800;
  overflow: hidden;
}

.membershipTierBadge {
  background: rgb(var(--ink-rgb) / 8%);
  color: var(--ink);
  text-transform: uppercase;
  border-radius: 999px;
  flex: none;
  padding: 3px 6px;
  font-size: .64rem;
  font-weight: 900;
  line-height: 1;
}

.membershipTierBadge.pro {
  background: var(--watch-soft);
  color: var(--watch);
}

.authActionButton, .authIconButton {
  border: 1px solid var(--ink);
  background: var(--ink);
  height: 42px;
  color: var(--ink-contrast);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
}

.authActionButton {
  gap: 6px;
  min-width: 86px;
  padding: 0 12px;
}

.authIconButton {
  border-color: rgb(var(--buy-rgb) / 22%);
  background: var(--buy-soft);
  width: 34px;
  height: 34px;
  color: var(--buy);
  border-radius: 999px;
  flex: none;
}

.panelHeader {
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 12px;
  display: flex;
}

.panelHeader h2 {
  font-size: 1rem;
}

.panelHeader span {
  color: var(--muted);
  text-align: right;
  margin-left: auto;
  font-size: .82rem;
  font-weight: 800;
}

.chartPanel, .thresholdPanel, .panel {
  padding: 18px;
}

.decisionIntegrityPanel {
  margin-bottom: 10px;
}

.decisionIntegrityMain {
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 8px;
  grid-template-columns: minmax(150px, .7fr) minmax(260px, 1.6fr) minmax(150px, .7fr);
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.decisionIntegrityMain > div, .decisionProvenanceGrid > div {
  background: var(--panel-soft);
  min-width: 0;
  padding: 12px;
}

.decisionIntegritySignal {
  border-left: 4px solid var(--muted);
  align-content: center;
  gap: 6px;
  display: grid;
}

.decisionIntegrityPanel.buy .decisionIntegritySignal {
  border-left-color: var(--buy);
  background: var(--buy-soft);
}

.decisionIntegrityPanel.watch .decisionIntegritySignal {
  border-left-color: var(--watch);
  background: var(--watch-soft);
}

.decisionIntegrityPanel.sell .decisionIntegritySignal, .decisionIntegrityPanel.sellWatch .decisionIntegritySignal, .decisionIntegrityPanel.suppressed .decisionIntegritySignal {
  border-left-color: var(--sell);
  background: var(--sell-soft);
}

.decisionIntegritySignal span, .decisionIntegrityThesis span, .decisionCompleteness span, .decisionProvenanceGrid span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 900;
  display: block;
}

.decisionIntegritySignal strong, .decisionCompleteness strong {
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1.15;
}

.decisionIntegrityThesis {
  align-content: center;
  gap: 6px;
  display: grid;
}

.decisionIntegrityThesis strong {
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.3;
}

.decisionIntegritySignal small, .decisionIntegrityThesis small, .decisionCompleteness small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.45;
}

.decisionCompleteness {
  align-content: center;
  gap: 6px;
  display: grid;
}

.decisionProvenanceGrid {
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 10px;
  display: grid;
  overflow: hidden;
}

.decisionProvenanceGrid strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: .84rem;
  font-weight: 900;
  display: block;
  overflow: hidden;
}

.decisionProvenanceGrid small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: .7rem;
  font-weight: 850;
  display: block;
  overflow: hidden;
}

.extendedSessionProvenance.up strong {
  color: var(--buy);
}

.extendedSessionProvenance.down strong {
  color: var(--sell);
}

.chartPanel {
  margin-bottom: 8px;
}

.tradingPanel {
  border-color: var(--chart-line);
  background: var(--chart-panel);
  color: var(--chart-text);
}

.tradingPanel .panelHeader {
  color: var(--chart-text);
}

.tradingPanel .panelHeader span {
  color: var(--chart-muted);
}

.tradingPanel .panelHeader .sessionQuoteSummary {
  color: #ffe0a4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: #f6b85d1a;
  border: 1px solid #f6b85d5c;
  border-radius: 5px;
  margin-left: 0;
  padding: 3px 6px;
  font-size: .72rem;
}

.tradingPanel .panelHeader .sessionQuoteSummary.pre {
  color: #bdf7ff;
  background: #78dce81a;
  border-color: #78dce857;
}

.analysisLoadingState {
  border: 1px solid rgb(var(--watch-rgb) / 32%);
  background: var(--watch-soft);
  min-height: 30px;
  color: var(--chart-text);
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  margin: -2px 0 10px;
  padding: 6px 9px;
  font-size: .82rem;
  font-weight: 850;
  display: inline-flex;
}

.analysisLoadingState strong {
  font-weight: 950;
}

.analysisLoadingState svg {
  color: var(--watch);
}

.chartLegendToggleButton {
  border: 1px solid var(--chart-border);
  background: var(--chart-soft-panel);
  height: 26px;
  color: var(--chart-muted);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: .72rem;
  font-weight: 950;
  transition: all .15s;
  display: inline-flex;
}

.chartLegendToggleButton:hover {
  border-color: var(--chart-border-strong);
  background: var(--chart-panel-hover);
  color: var(--chart-text);
}

.chartLegendToggleButton.active {
  border-color: var(--chart-accent);
  background: var(--chart-accent-soft);
  color: var(--chart-accent-text);
}

.signalGuide {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.signalGuide div {
  border: 1px solid var(--chart-border);
  background: var(--chart-soft-panel);
  min-height: 30px;
  color: var(--chart-muted);
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  font-size: .8rem;
  line-height: 1.3;
  display: flex;
}

.signalGuide strong {
  color: #eef5f3;
  white-space: nowrap;
}

.legendDot {
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 4px #ffffff12;
}

.legendDot.buy {
  background: #21c784;
}

.legendDot.watch {
  background: #f0b23d;
}

.legendDot.sell {
  background: #f0524f;
}

.legendDot.sellWatch {
  background: #f17f2c;
}

.legendTag {
  background: #21c7842e;
  border: 1px solid #21c784;
  border-radius: 4px;
  flex: none;
  width: 22px;
  height: 12px;
}

.legendBand {
  background: linear-gradient(90deg, #f2b84b 0 33%, #4aa0d8 33% 66%, #b18cff 66% 100%);
  border: 1px solid #ffffff29;
  flex: none;
  width: 22px;
  height: 10px;
}

.legendLine {
  background: linear-gradient(90deg, #74d69b 0 28%, #0000 28% 38%, #5cc8ff 38% 66%, #0000 66% 76%, #f2b84b 76% 100%);
  flex: none;
  width: 24px;
  height: 2px;
}

.legendProjection {
  border-top: 2px dashed #bdeaff;
  flex: none;
  width: 24px;
  height: 2px;
}

.legendRates {
  flex: none;
  gap: 4px;
  width: 24px;
  display: grid;
}

.legendRates i {
  border-radius: 999px;
  height: 2px;
  display: block;
}

.legendRates i:first-child {
  background: #78d7ff;
}

.legendRates i:nth-child(2) {
  background: #f6b85d;
}

.legendOil {
  flex: none;
  gap: 4px;
  width: 24px;
  display: grid;
}

.legendOil i {
  background: #74d69b;
  border-radius: 999px;
  height: 2px;
  display: block;
}

.legendContext {
  flex: none;
  place-items: center;
  width: 24px;
  height: 14px;
  display: grid;
}

.legendContext i {
  border-radius: 999px;
  width: 24px;
  height: 2px;
  display: block;
}

.legendContext.sentiment i {
  background: #d7f36a;
}

.legendContext.relative i {
  background: #b18cff;
}

.legendNews {
  color: #ffd1ef;
  background: #ff76c82e;
  border: 1px solid #ff76c8;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: .58rem;
  font-weight: 950;
  display: inline-flex;
}

.legendEvent {
  color: #d8f6ff;
  background: #78d7ff24;
  border: 1px solid #78d7ff;
  border-radius: 4px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: .58rem;
  font-weight: 950;
  display: inline-flex;
}

.chartOverlayBar {
  z-index: 4;
  pointer-events: none;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  display: flex;
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
}

.chartTimeframeControls {
  pointer-events: auto;
  scrollbar-width: none;
  background: #111820e0;
  border: 1px solid #26313a;
  border-radius: 6px;
  min-width: 0;
  max-width: min(100%, 520px);
  display: inline-flex;
  overflow-x: auto;
}

.chartTimeframeControls::-webkit-scrollbar {
  display: none;
}

.chartTimeframeButton {
  color: #9aa8ad;
  background: none;
  border: 0;
  border-right: 1px solid #26313a;
  min-width: 38px;
  height: 30px;
  padding: 0 9px;
  font-size: .72rem;
  font-weight: 950;
}

.chartTimeframeButton:last-child {
  border-right: 0;
}

.chartTimeframeButton.buy {
  color: #8df0bc;
}

.chartTimeframeButton.watch {
  color: #ffd88d;
}

.chartTimeframeButton.sell, .chartTimeframeButton.sellWatch {
  color: #ffaaa7;
}

.chartTimeframeButton:hover:not(:disabled) {
  color: #edf7f5;
  background: #17212a;
}

.chartTimeframeButton.active {
  color: #111820;
  background: #d7e1df;
}

.chartTimeframeButton:disabled {
  opacity: .36;
}

.chartToolBar {
  pointer-events: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0;
  display: flex;
}

.chartToolButton {
  color: #d7e1df;
  background: #151c23;
  border: 1px solid #26313a;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
}

.chartToolButton:hover:not(:disabled) {
  background: #1a232b;
  border-color: #3c4a54;
}

.chartZoomValue {
  color: #9aa8ad;
  text-align: center;
  min-width: 48px;
  font-size: .78rem;
  font-weight: 900;
}

.chartControlLeft {
  pointer-events: auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.chartSymbolBadge {
  color: #111820;
  white-space: nowrap;
  background: #d7e1df;
  border: 1px solid #3c4a54;
  border-radius: 6px;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  font-size: .72rem;
  font-weight: 950;
  display: inline-flex;
}

.chartSymbolBadge span {
  color: #52606a;
  text-transform: uppercase;
  font-size: .62rem;
}

.chartSymbolBadge strong {
  color: #111820;
  font-size: .84rem;
}

.chartLayerToggles {
  pointer-events: auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  margin-left: 0;
  display: inline-flex;
}

.chartLayerButton {
  color: #87949b;
  background: #111820;
  border: 1px solid #26313a;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  height: 30px;
  padding: 0 8px;
  font-size: .7rem;
  font-weight: 950;
  display: inline-flex;
}

.chartLayerButton:hover:not(:disabled) {
  color: #d7e1df;
  background: #17212a;
  border-color: #3c4a54;
}

.chartLayerButton.active {
  color: #d8f1ff;
  background: #4aa0d829;
  border-color: #4aa0d8;
}

.chartLayerButton:disabled {
  opacity: .36;
}

.chartRelativeBenchmarkForm {
  align-items: center;
  gap: 4px;
  height: 30px;
  display: inline-flex;
}

.chartRelativeBenchmarkField {
  color: #d8f1ff;
  background: #4aa0d829;
  border: 1px solid #4aa0d8;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 7px;
  font-size: .7rem;
  font-weight: 950;
  display: inline-flex;
}

.chartRelativeBenchmarkField input {
  color: #f2fbff;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-left: 1px solid #d8f1ff3d;
  outline: none;
  width: 66px;
  height: 22px;
  padding: 0 0 0 6px;
  font-size: .72rem;
  font-weight: 950;
}

.chartRelativeBenchmarkField input::selection {
  background: #4aa0d86b;
}

.chartRelativeBenchmarkAction {
  color: #87949b;
  background: #111820;
  border: 1px solid #26313a;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
}

.chartRelativeBenchmarkAction:hover:not(:disabled) {
  color: #d7e1df;
  background: #17212a;
  border-color: #3c4a54;
}

.chartRelativeBenchmarkAction:disabled {
  opacity: .36;
}

.priceChartFrame {
  position: relative;
}

.priceChartBody {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  display: grid;
}

.priceChartBody.withLevelEdgeLabels {
  grid-template-columns: minmax(112px, 136px) minmax(0, 1fr);
}

.priceChartLevelEdgeLabels {
  z-index: 2;
  pointer-events: none;
  min-width: 0;
  height: 642px;
  position: sticky;
  top: 12px;
}

.priceChartLevelEdgeItem {
  color: #aebcc5;
  pointer-events: auto;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.priceChartLevelEdgeText {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  max-width: calc(100% - 17px);
  text-shadow: 0 1px 0 var(--chart-bg),
    1px 0 0 var(--chart-bg),
    0 -1px 0 var(--chart-bg),
    -1px 0 0 var(--chart-bg);
  background: #0d1117bd;
  border-radius: 4px;
  flex-direction: column;
  align-items: flex-end;
  padding: 2px 3px;
  font-size: .64rem;
  font-weight: 950;
  line-height: 1.05;
  display: inline-flex;
}

.priceChartLevelEdgeName {
  overflow-wrap: anywhere;
  text-align: right;
  max-width: 100%;
}

.priceChartLevelEdgePrice {
  white-space: nowrap;
}

.priceChartLevelEdgeConnector {
  opacity: .72;
  border-top: 1px dashed;
  width: 12px;
}

.priceChartLevelEdgeItem.volumeZone.rank1 {
  color: #ffd38a;
}

.priceChartLevelEdgeItem.volumeZone.rank2 {
  color: #8ed8ff;
}

.priceChartLevelEdgeItem.volumeZone.rank3 {
  color: #ceb7ff;
}

.priceChartLevelEdgeItem.volumeZone.rank4 {
  color: #ffb199;
}

.priceChartLevelEdgeItem.support.rank1 {
  color: #9ff0bb;
}

.priceChartLevelEdgeItem.support.rank2 {
  color: #98e0ff;
}

.priceChartLevelEdgeItem.support.rank3 {
  color: #ffd38a;
}

.priceChartLevelEdgeItem.support.rank4 {
  color: #ffb199;
}

.priceChartLevelEdgeItem.snapped .priceChartLevelEdgeText {
  color: #d8ffe5;
  background: #74d69b24;
}

.priceChartLevelEdgeItem.snapped .priceChartLevelEdgeConnector {
  opacity: 1;
  border-top-style: solid;
}

.priceChartCanvas {
  min-width: 0;
  position: relative;
}

.priceChartScroll {
  background: var(--chart-bg);
  cursor: grab;
  scrollbar-color: #3a4650 #121922;
  scrollbar-width: thin;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid #222b32;
  border-radius: 7px;
  width: 100%;
  min-height: 642px;
  overflow: auto hidden;
}

.priceChartScroll.dragging {
  cursor: grabbing;
}

.priceChartScroll::-webkit-scrollbar {
  height: 10px;
}

.priceChartScroll::-webkit-scrollbar-track {
  background: #121922;
}

.priceChartScroll::-webkit-scrollbar-thumb {
  background: #3a4650;
  border: 2px solid #121922;
  border-radius: 999px;
}

.priceChart {
  background: var(--chart-bg);
  border: 0;
  border-radius: 0;
  height: 640px;
  min-height: 640px;
  display: block;
}

.priceChartAxisOverlay {
  z-index: 1;
  pointer-events: none;
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  overflow: visible;
}

.priceAxisOverlayBg {
  fill: #0d1117eb;
}

.priceAxisOverlayBorder {
  stroke: #222b32;
  stroke-width: 1px;
}

.detailDisclosure {
  margin-top: 10px;
}

.detailDisclosureSummary {
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 54px;
  box-shadow: var(--shadow);
  cursor: pointer;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  list-style: none;
  display: flex;
}

.detailDisclosureSummary::-webkit-details-marker {
  display: none;
}

.detailSummaryMain, .detailSummaryMeta {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: inline-flex;
}

.detailSummaryMain > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.detailSummaryMain strong {
  font-size: .98rem;
}

.detailSummaryMain small, .detailSummaryMeta {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 850;
}

.detailSummaryMain small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.detailSummaryMeta {
  flex: none;
  font-weight: 900;
}

.detailChevron {
  color: var(--ink);
}

.detailChevronOpen, .detailDisclosure[open] .detailChevronClosed {
  display: none;
}

.detailDisclosure[open] .detailChevronOpen {
  display: block;
}

.detailDisclosureBody {
  padding-top: 12px;
}

.detailOverviewGrid {
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.detailOverviewGrid > div {
  background: var(--panel-soft);
  min-width: 0;
  padding: 11px 12px;
}

.detailOverviewGrid span, .detailSectionSummary small {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 900;
  display: block;
}

.detailOverviewGrid strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: .95rem;
  font-weight: 950;
  line-height: 1.25;
  display: block;
  overflow: hidden;
}

.detailOverviewGrid small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 850;
  display: block;
  overflow: hidden;
}

.detailSectionNav {
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
  display: flex;
}

.detailSectionNav a {
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 34px;
  color: var(--ink);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: .78rem;
  font-weight: 950;
  text-decoration: none;
  display: inline-flex;
}

.detailSectionNav a:hover, .detailSectionNav a:focus {
  border-color: var(--cyan);
  color: var(--cyan);
}

.detailSectionDisclosure {
  scroll-margin-top: 12px;
}

.detailSectionDisclosure + .detailSectionDisclosure {
  margin-top: 10px;
}

.detailSectionSummary {
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 48px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  list-style: none;
  display: flex;
}

.detailSectionSummary::-webkit-details-marker {
  display: none;
}

.detailSectionSummary > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.detailSectionSummary strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .94rem;
  font-weight: 950;
  overflow: hidden;
}

.detailSectionChevronClosed, .detailSectionChevronOpen {
  color: var(--muted);
  flex: none;
}

.detailSectionChevronOpen, .detailSectionDisclosure[open] .detailSectionChevronClosed {
  display: none;
}

.detailSectionDisclosure[open] .detailSectionChevronOpen {
  display: block;
}

.detailSectionContent {
  padding-top: 10px;
}

.detailSectionContent .projectionExplanationPanel, .detailSectionContent .thresholdPanel, .detailSectionContent .marketContextPanel, .detailSectionContent .analystInsightPanel, .detailSectionContent .valuationCard, .detailSectionContent .analystGuidancePanel, .detailSectionContent .lowerGrid {
  margin-top: 0;
}

.detailSectionContent .marketContextPanel {
  margin-bottom: 0;
}

.chartSelectionSummary {
  background: #f2c14e38;
  border: 1px solid #f2c14e57;
  border-radius: 8px;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, .5fr)) auto;
  gap: 1px;
  margin-top: 10px;
  display: grid;
  overflow: hidden;
}

.chartSelectionSummary > div, .chartSelectionReset {
  background: var(--panel);
  min-width: 0;
  padding: 10px 12px;
}

.chartSelectionMain span, .chartSelectionMetric span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 950;
  display: block;
}

.chartSelectionMain strong, .chartSelectionMetric strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: .9rem;
  font-weight: 950;
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.chartSelectionReset {
  color: var(--text);
  cursor: pointer;
  border: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 950;
  display: inline-flex;
}

.chartSelectionReset:hover {
  color: #9b6b00;
}

.tvChartBg {
  fill: var(--chart-bg);
}

.tvGrid line {
  stroke: var(--chart-line);
  stroke-width: 1px;
}

.chartLevels .volumeZone.rank1 {
  fill: #f2b84b33;
  stroke: #f2b84b94;
  stroke-width: 1px;
}

.chartLevels .volumeZone.rank2 {
  fill: #4aa0d82e;
  stroke: #4aa0d86b;
  stroke-width: 1px;
}

.chartLevels .volumeZone.rank3 {
  fill: #b18cff2b;
  stroke: #b18cff70;
  stroke-width: 1px;
}

.chartLevels .volumeZone.rank4 {
  fill: #ff8f7026;
  stroke: #ff8f7066;
  stroke-width: 1px;
}

.chartLevels .supportLine.rank1 {
  stroke: #74d69b;
  stroke-dasharray: 8 6;
  stroke-width: 1.2px;
}

.chartLevels .supportLine.rank2 {
  stroke: #5cc8ff;
  stroke-dasharray: 8 6;
  stroke-width: 1.2px;
}

.chartLevels .supportLine.rank3 {
  stroke: #f2b84b;
  stroke-dasharray: 8 6;
  stroke-width: 1.2px;
}

.chartLevels .supportLine.rank4 {
  stroke: #ff9f70;
  stroke-dasharray: 8 6;
  stroke-width: 1.2px;
}

.chartLevels .supportLine.snapped {
  stroke-dasharray: none;
  stroke-width: 2.4px !important;
  opacity: 1 !important;
}

.breakoutOverlay, .breakoutAxisMarkers, .projectionOverlay {
  pointer-events: none;
}

.projectionWindow {
  fill: #8dc9e80f;
  stroke: #8dc9e829;
  stroke-width: 1px;
}

.projectionOverlay.conflict .projectionWindow {
  fill: #f2b84b14;
  stroke: #f2b84b3d;
}

.projectionStartLine {
  stroke: #bdeaff5c;
  stroke-dasharray: 2 6;
  stroke-width: 1px;
}

.projectionSummary {
  fill: #b8c9d1;
  paint-order: stroke;
  stroke: var(--chart-bg);
  stroke-width: 3px;
  font-size: .62rem;
  font-weight: 950;
}

.projectionSummary.conflict {
  fill: #ffd38a;
}

.projectionScenario path {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
}

.projectionScenario.expected path {
  stroke: #bdeaff;
}

.projectionScenario.favorable path {
  stroke: #21c784;
}

.projectionScenario.risk path {
  stroke: #f0524f;
}

.projectionScenario circle {
  fill: var(--chart-bg);
  stroke-width: 2px;
}

.projectionScenario.expected circle {
  stroke: #bdeaff;
}

.projectionScenario.favorable circle {
  stroke: #21c784;
}

.projectionScenario.risk circle {
  stroke: #f0524f;
}

.projectionScenario text {
  paint-order: stroke;
  stroke: var(--chart-bg);
  stroke-width: 3px;
  font-size: .64rem;
  font-weight: 950;
}

.projectionScenario.expected text {
  fill: #d8f1ff;
}

.projectionScenario.favorable text {
  fill: #baffd5;
}

.projectionScenario.risk text {
  fill: #ffc4c1;
}

.projectionLabelConnector {
  stroke: #bdeaff6b;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  stroke-width: 1px;
}

.projectionExplanationPanel {
  color: #d7e1df;
  background: linear-gradient(#4aa0d812, #0000 70%), #101720;
  border: 1px solid #26313a;
  border-radius: 7px;
  grid-template-columns: minmax(260px, 1.15fr) minmax(280px, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.projectionExplanationPanel.conflict {
  background: linear-gradient(#f2b84b1a, #0000 74%), #101720;
  border-color: #f2b84b6b;
}

.projectionExplanationPanel.score {
  border-color: #4aa0d857;
}

.projectionExplanationLead {
  align-content: start;
  gap: 5px;
  display: grid;
}

.projectionExplanationLead span, .projectionExplanationStats span {
  color: #8f9ca3;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 950;
}

.projectionExplanationLead strong {
  color: #edf7f5;
  font-size: .95rem;
}

.projectionExplanationPanel.conflict .projectionExplanationLead strong {
  color: #ffd38a;
}

.projectionExplanationLead small, .projectionExplanationStats small, .projectionEvidenceItem small, .projectionEvidenceItem span {
  color: #a7b4ba;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.45;
}

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

.projectionExplanationStats div {
  background: #0d1117b8;
  border: 1px solid #222b32;
  border-radius: 6px;
  min-width: 0;
  padding: 9px;
}

.projectionExplanationStats strong {
  color: #d8f1ff;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 4px 0;
  font-size: .9rem;
  display: block;
  overflow: hidden;
}

.projectionEvidenceList {
  grid-column: 1 / -1;
  gap: 7px;
  display: grid;
}

.projectionEvidenceItem {
  border-top: 1px solid #222b32;
  grid-template-columns: minmax(180px, .42fr) minmax(260px, 1fr);
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  display: grid;
}

.projectionEvidenceItem div {
  gap: 2px;
  display: grid;
}

.projectionEvidenceItem strong {
  color: #edf7f5;
  font-size: .82rem;
}

.breakoutPullbackZone {
  fill: #21c78421;
  stroke: #21c78447;
  stroke-width: 1px;
}

.breakoutLevelLine {
  stroke: #f7c84b;
  stroke-dasharray: 7 5;
  stroke-width: 1.2px;
}

.breakoutLevelLabel {
  fill: #ffe09a;
  paint-order: stroke;
  stroke: var(--chart-bg);
  stroke-width: 3px;
  font-size: .68rem;
  font-weight: 950;
}

.breakoutAxisMarkers text {
  paint-order: stroke;
  stroke: var(--chart-bg);
  stroke-width: 3px;
  font-size: .62rem;
  font-weight: 950;
}

.breakoutEntryMarker path, .breakoutEntryMarker rect {
  fill: #f7c84b38;
  stroke: #f7c84b;
  stroke-width: 1px;
}

.breakoutEntryMarker text {
  fill: #ffe09a;
}

.breakoutTargetMarker line {
  stroke: #8ed8ff;
  stroke-width: 1px;
}

.breakoutAxisMarkers .breakoutLabelConnector {
  stroke: #bdeaff7a;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

.breakoutTargetMarker circle {
  fill: #8ed8ff;
  stroke: var(--chart-bg);
  stroke-width: 2px;
}

.breakoutTargetMarker text {
  fill: #bdeaff;
}

.breakoutStopMarker path {
  fill: #f0524f;
  stroke: var(--chart-bg);
  stroke-width: 1.5px;
}

.breakoutStopMarker text {
  fill: #ffb3b1;
}

.hoverGuide, .selectedGuide {
  pointer-events: none;
}

.selectedGuide line {
  stroke: #f2c14e;
  stroke-dasharray: 7 4;
  stroke-width: 1.2px;
}

.selectedGuide rect {
  fill: #f2c14e1a;
  stroke: #f2c14e;
  stroke-width: 1.4px;
}

.hoverGuide line {
  stroke: #8b98a3;
  stroke-dasharray: 4 5;
  stroke-width: 1px;
}

.hoverGuide rect {
  fill: none;
  stroke: #d7e1df;
  stroke-width: 1px;
  opacity: .78;
}

.candles line {
  stroke-width: 1.3px;
}

.candles rect {
  stroke-width: 1px;
}

.candles .up line, .candles .up rect {
  stroke: #21c784;
}

.candles .up rect {
  fill: #21c784;
}

.candles .down line, .candles .down rect {
  stroke: #f0524f;
}

.candles .down rect {
  fill: #f0524f;
}

.candles .extendedSessionCandle {
  opacity: .92;
}

.candles .extendedSessionCandle line, .candles .extendedSessionCandle rect {
  stroke: #f6b85d;
}

.candles .extendedSessionCandle rect {
  fill: #f6b85dad;
}

.candles .extendedSessionCandle.pre line, .candles .extendedSessionCandle.pre rect {
  stroke: #78dce8;
}

.candles .extendedSessionCandle.pre rect {
  fill: #78dce8a8;
}

.volumeBars rect {
  opacity: .26;
}

.volumeBars .up {
  fill: #21c784;
}

.volumeBars .down {
  fill: #f0524f;
}

.volumeBars .extendedSessionVolume {
  fill: #f6b85d;
  opacity: .32;
}

.volumeBars .extendedSessionVolume.pre {
  fill: #78dce8;
}

.lastPrice line {
  stroke: #6b7780;
  stroke-dasharray: 4 5;
  stroke-width: 1px;
}

.lastPrice rect {
  fill: #d7e1df;
}

.lastPrice text {
  fill: #11161c;
  font-size: .72rem;
  font-weight: 900;
}

.extendedSessionPrice line {
  stroke: #f6b85d;
  stroke-dasharray: 2 5;
  stroke-width: 1.4px;
}

.extendedSessionPrice circle {
  fill: #f6b85d;
  stroke: var(--chart-bg);
  stroke-width: 1.5px;
}

.extendedSessionPrice.pre line {
  stroke: #78dce8;
}

.extendedSessionPrice.pre circle {
  fill: #78dce8;
}

.extendedSessionAxisMarker rect {
  fill: #f6b85d;
}

.extendedSessionAxisMarker.pre rect {
  fill: #78dce8;
}

.extendedSessionAxisMarker text {
  fill: #11161c;
  font-size: .64rem;
  font-weight: 950;
}

.extendedSessionAxisConnector {
  stroke: #f6b85d;
  stroke-dasharray: 2 4;
  stroke-width: 1px;
}

.extendedSessionAxisMarker.pre .extendedSessionAxisConnector {
  stroke: #78dce8;
}

.cursorPriceGuide {
  pointer-events: none;
}

.cursorPriceGuide line {
  stroke: #c7d8df;
  stroke-dasharray: 3 5;
  stroke-width: 1px;
}

.cursorPriceGuide.supportSnap line {
  stroke: #74d69b;
  stroke-dasharray: none;
  stroke-width: 1.5px;
}

.cursorPriceGuide rect {
  fill: #151c23;
  stroke: #c7d8df;
  stroke-width: 1px;
}

.cursorPriceGuide.supportSnap rect {
  fill: #10251b;
  stroke: #74d69b;
}

.cursorPriceGuide text {
  fill: #edf7f5;
  font-size: .72rem;
  font-weight: 950;
}

.priceChartReadout {
  z-index: 2;
  pointer-events: auto;
  background: #0d1117db;
  border: 1px solid #2c3942;
  border-radius: 4px;
  gap: 5px;
  max-width: min(560px, 100% - 20px);
  padding: 7px 10px;
  font-size: .68rem;
  font-weight: 950;
  display: grid;
  position: absolute;
  top: 50px;
  left: 10px;
}

.priceChartReadout .readoutMain {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  display: flex;
}

.priceChartReadout.up {
  color: #8df0bc;
}

.priceChartReadout.down {
  color: #ffb3b1;
}

.priceChartReadout.event {
  color: #d8f6ff;
}

.priceChartReadout .readoutDate {
  color: #a7b4ba;
}

.priceChartReadout .readoutSessionBadge {
  color: #ffe0a4;
  background: #f6b85d1f;
  border: 1px solid #f6b85d61;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: .58rem;
  line-height: 1;
}

.priceChartReadout .readoutSessionBadge.pre {
  color: #bdf7ff;
  background: #78dce81f;
  border-color: #78dce861;
}

.priceChartReadout .readoutSignal {
  color: #d7e1df;
  font-size: .63rem;
  font-weight: 900;
}

.priceChartReadout .readoutSession {
  color: #ffe0a4;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: .62rem;
  font-weight: 900;
  display: flex;
}

.priceChartReadout .readoutSession.pre {
  color: #bdf7ff;
}

.priceChartReadout .readoutSession span:first-child {
  color: #f6b85d;
  font-weight: 950;
}

.priceChartReadout .readoutSession.pre span:first-child {
  color: #78dce8;
}

.priceChartReadout .readoutRates {
  color: #bdeaff;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: .62rem;
  font-weight: 900;
  display: flex;
}

.priceChartReadout .readoutRates span:first-child {
  color: #f6b85d;
  font-weight: 950;
}

.priceChartReadout .readoutContext {
  color: #e7f8a1;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: .62rem;
  font-weight: 900;
  display: flex;
}

.priceChartReadout .readoutContext span:first-child {
  color: #b18cff;
  font-weight: 950;
}

.priceChartReadout .readoutNews {
  color: #ffd1ef;
  gap: 3px;
  font-size: .62rem;
  font-weight: 850;
  display: grid;
}

.priceChartReadout .readoutNews span:first-child {
  color: #ff76c8;
  font-weight: 950;
}

.priceChartReadout .readoutNews a {
  color: #ffd1ef;
  text-decoration: none;
}

.priceChartReadout .readoutNews a:hover, .priceChartReadout .readoutNews a:focus {
  color: #fff;
  text-underline-offset: 2px;
  -webkit-text-decoration: underline #ff76c8;
  text-decoration: underline #ff76c8;
}

.priceChartReadout .readoutEvents {
  color: #d8f6ff;
  gap: 3px;
  font-size: .62rem;
  font-weight: 850;
  display: grid;
}

.priceChartReadout .readoutEvents span:first-child {
  color: #78d7ff;
  font-weight: 950;
}

.priceChartReadout .readoutEvents a {
  color: #d8f6ff;
  text-decoration: none;
}

.priceChartReadout .readoutEvents a:hover, .priceChartReadout .readoutEvents a:focus {
  color: #fff;
  text-underline-offset: 2px;
  -webkit-text-decoration: underline #78d7ff;
  text-decoration: underline #78d7ff;
}

.recommendationTag line {
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}

.recommendationTag rect {
  stroke-width: 1px;
}

.recommendationTag text {
  font-size: .66rem;
  font-weight: 950;
}

.recommendationTag .secondary {
  opacity: .78;
  font-size: .58rem;
  font-weight: 850;
}

.recommendationTag.buy line, .recommendationTag.buy rect {
  stroke: #21c784;
}

.recommendationTag.buy rect {
  fill: #21c7842e;
}

.recommendationTag.buy text {
  fill: #c8ffdf;
}

.recommendationTag.sell line, .recommendationTag.sell rect {
  stroke: #f0524f;
}

.recommendationTag.sell rect {
  fill: #f0524f2e;
}

.recommendationTag.sell text {
  fill: #ffd4d2;
}

.axisLabels text {
  fill: #83919a;
  font-size: .72rem;
  font-weight: 800;
}

.priceAxisLabels text {
  paint-order: stroke;
  stroke: #0d1117e0;
  stroke-width: 3px;
}

.signalMarker circle:first-of-type {
  stroke: var(--chart-bg);
  stroke-width: 3px;
}

.signalMarker circle:last-of-type {
  fill: var(--chart-bg);
  opacity: .9;
}

.signalMarker.buy circle:first-of-type {
  fill: #21c784;
}

.signalMarker.watch circle:first-of-type {
  fill: #f0b23d;
}

.signalMarker.sell circle:first-of-type {
  fill: #f0524f;
}

.signalMarker.sellWatch circle:first-of-type {
  fill: #f17f2c;
}

.macroRatesOverlay {
  pointer-events: none;
}

.macroRateLine {
  fill: none;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

.macroRateDot {
  stroke: var(--chart-bg);
  stroke-width: 2px;
}

.macroRateLabelBg {
  stroke-width: 1px;
}

.macroRateLabel {
  paint-order: stroke;
  stroke: #0d1117c2;
  stroke-width: 2px;
  font-size: .58rem;
  font-weight: 950;
}

.macroRateSeries.us10 .macroRateLine, .macroRateSeries.us10 .macroRateDot {
  stroke: #78d7ff;
}

.macroRateSeries.us10 .macroRateDot, .macroRateSeries.us10 .macroRateLabelBg {
  fill: #78d7ff;
}

.macroRateSeries.us10 .macroRateLabelBg {
  fill: #78d7ff29;
  stroke: #78d7ffbd;
}

.macroRateSeries.us10 .macroRateLabel {
  fill: #d8f6ff;
}

.macroRateSeries.us30 .macroRateLine, .macroRateSeries.us30 .macroRateDot {
  stroke: #f6b85d;
}

.macroRateSeries.us30 .macroRateDot, .macroRateSeries.us30 .macroRateLabelBg {
  fill: #f6b85d;
}

.macroRateSeries.us30 .macroRateLabelBg {
  fill: #f6b85d29;
  stroke: #f6b85db8;
}

.macroRateSeries.us30 .macroRateLabel {
  fill: #ffe3b0;
}

.macroRateSeries.wti .macroRateLine, .macroRateSeries.wti .macroRateDot {
  stroke: #74d69b;
}

.macroRateSeries.wti .macroRateDot, .macroRateSeries.wti .macroRateLabelBg {
  fill: #74d69b;
}

.macroRateSeries.wti .macroRateLabelBg {
  fill: #74d69b29;
  stroke: #74d69bb8;
}

.macroRateSeries.wti .macroRateLabel {
  fill: #d9f8e5;
}

.contextSeriesOverlay {
  pointer-events: none;
}

.contextSeriesLabelButton {
  cursor: text;
  pointer-events: auto;
  outline: none;
}

.contextSeriesLabelButton:focus-visible .contextSeriesLabelBg {
  stroke-width: 1.6px;
}

.contextSeriesLine {
  fill: none;
  stroke-width: 1.55px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}

.contextSeriesDot {
  stroke: var(--chart-bg);
  stroke-width: 2px;
}

.contextSeriesLabelBg {
  stroke-width: 1px;
}

.contextSeriesLabel {
  paint-order: stroke;
  stroke: #0d1117c7;
  stroke-width: 2px;
  font-size: .56rem;
  font-weight: 950;
}

.contextSeries.sentiment .contextSeriesLine, .contextSeries.sentiment .contextSeriesDot {
  stroke: #d7f36a;
}

.contextSeries.sentiment .contextSeriesDot {
  fill: #d7f36a;
}

.contextSeries.sentiment .contextSeriesLabelBg {
  fill: #d7f36a24;
  stroke: #d7f36aad;
}

.contextSeries.sentiment .contextSeriesLabel {
  fill: #f3ffc2;
}

.contextSeries.relative.rel-sector .contextSeriesLine, .contextSeries.relative.rel-sector .contextSeriesDot {
  stroke: #b18cff;
}

.contextSeries.relative.rel-sector .contextSeriesDot {
  fill: #b18cff;
}

.contextSeries.relative.rel-sector .contextSeriesLabelBg {
  fill: #b18cff24;
  stroke: #b18cffad;
}

.contextSeries.relative.rel-sector .contextSeriesLabel {
  fill: #e6dcff;
}

.contextSeries.relative.rel-market .contextSeriesLine, .contextSeries.relative.rel-market .contextSeriesDot {
  stroke: #7ed6a2;
}

.contextSeries.relative.rel-market .contextSeriesDot {
  fill: #7ed6a2;
}

.contextSeries.relative.rel-market .contextSeriesLabelBg {
  fill: #7ed6a224;
  stroke: #7ed6a2ad;
}

.contextSeries.relative.rel-market .contextSeriesLabel {
  fill: #d8ffe7;
}

.newsMarker line {
  stroke: #ff76c87a;
  stroke-dasharray: 2 6;
  stroke-width: 1px;
}

.newsMarker circle {
  cursor: help;
  fill: #ff76c8;
  stroke: #ffd1ef;
  stroke-width: 2px;
}

.newsMarkerLink circle {
  cursor: pointer;
}

.newsMarker text {
  fill: #170914;
  pointer-events: none;
  font-size: .58rem;
  font-weight: 950;
}

.newsMarker:focus {
  outline: none;
}

.newsMarker:focus circle {
  stroke: #fff;
}

.contextEventMarker {
  cursor: help;
}

.contextEventMarker line {
  stroke-dasharray: 2 5;
  stroke-width: 1px;
  pointer-events: none;
}

.contextEventMarker rect {
  stroke-width: 1.5px;
}

.contextEventMarker text {
  pointer-events: none;
  font-size: .55rem;
  font-weight: 950;
}

.contextEventMarker:focus {
  outline: none;
}

.contextEventMarker.eventMarkerHigh line {
  stroke: #f6b85d85;
}

.contextEventMarker.eventMarkerHigh rect {
  fill: #f6b85d33;
  stroke: #f6b85d;
}

.contextEventMarker.eventMarkerHigh text {
  fill: #ffe3b0;
}

.contextEventMarker.eventMarkerHigh:focus rect, .contextEventMarker.eventMarkerHigh:hover rect {
  fill: #f6b85d5c;
}

.contextEventMarker.eventMarkerMedium line {
  stroke: #78d7ff70;
}

.contextEventMarker.eventMarkerMedium rect {
  fill: #78d7ff24;
  stroke: #78d7ff;
}

.contextEventMarker.eventMarkerMedium text {
  fill: #d8f6ff;
}

.contextEventMarker.eventMarkerMedium:focus rect, .contextEventMarker.eventMarkerMedium:hover rect {
  fill: #78d7ff47;
}

.contextEventMarker.eventMarkerLow line {
  stroke: #a7b0ba5c;
}

.contextEventMarker.eventMarkerLow rect {
  fill: #a7b0ba1a;
  stroke: #a7b0ba;
}

.contextEventMarker.eventMarkerLow text {
  fill: #c8d4de;
}

.hoverTargets rect {
  fill: #0000;
  cursor: crosshair;
  outline: none;
}

.priceChartScroll.dragging .hoverTargets rect {
  cursor: grabbing;
}

.hoverTargets rect:focus {
  fill: #ffffff03;
  stroke: #d7e1df52;
  stroke-width: 1px;
}

.thresholdPanel {
  margin-top: 12px;
}

.technicalReportPanel {
  margin-top: 10px;
}

.technicalReportTop {
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 8px;
  grid-template-columns: minmax(150px, .6fr) minmax(180px, .9fr) minmax(220px, 1.1fr) minmax(260px, 1.5fr);
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.technicalReportTop > div {
  background: var(--panel-soft);
  min-width: 0;
  padding: 12px;
}

.technicalVerdict {
  border-left: 4px solid var(--muted);
  align-content: center;
  gap: 6px;
  display: grid;
}

.technicalVerdict.bullish {
  border-left-color: var(--buy);
  background: var(--buy-soft);
}

.technicalVerdict.bearish {
  border-left-color: var(--sell);
  background: var(--sell-soft);
}

.technicalVerdict.neutral {
  border-left-color: var(--muted);
}

.technicalVerdict strong {
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.2;
}

.technicalVerdict span, .technicalConfidence span, .technicalKeyLevels span, .technicalAction span, .scenarioCard span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  display: block;
}

.technicalConfidence {
  align-content: center;
  gap: 9px;
  display: grid;
}

.technicalConfidence > div:first-child {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.technicalConfidence strong {
  font-size: 1rem;
  font-weight: 950;
}

.confidenceBar {
  background: var(--grid);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.confidenceBar span {
  width: var(--confidence);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--buy));
  height: 100%;
  display: block;
}

.technicalKeyLevels, .technicalAction {
  align-content: center;
  gap: 7px;
  display: grid;
}

.technicalKeyLevels strong, .technicalAction strong {
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.35;
}

.technicalReportDetails {
  margin-top: 12px;
}

.technicalReportDetails summary {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 9px 12px;
  list-style: none;
  display: flex;
}

.technicalReportDetails summary::-webkit-details-marker {
  display: none;
}

.technicalReportDetails summary span {
  font-size: .9rem;
  font-weight: 950;
}

.technicalReportDetails[open] .detailChevronClosed {
  display: none;
}

.technicalReportDetails[open] .detailChevronOpen {
  display: block;
}

.technicalReportBody {
  gap: 12px;
  padding-top: 12px;
  display: grid;
}

.reportSection {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 12px;
}

.reportSection h3 {
  margin-bottom: 7px;
  font-size: .92rem;
}

.reportSection p {
  color: var(--text);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.55;
}

.technicalPatternList {
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
}

.technicalPatternList li {
  border-bottom: 1px solid var(--line);
  gap: 4px;
  padding-bottom: 8px;
  display: grid;
}

.technicalPatternList li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.technicalPatternList strong {
  font-size: .9rem;
  font-weight: 950;
}

.technicalPatternList span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

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

.scenarioCard {
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  background: var(--panel);
  border-radius: 8px;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  display: grid;
}

.scenarioCard.bullish {
  border-left-color: var(--buy);
}

.scenarioCard.bearish {
  border-left-color: var(--sell);
}

.scenarioCard.neutral {
  border-left-color: var(--muted);
}

.scenarioCard h4 {
  font-size: .92rem;
}

.scenarioCard p {
  min-height: 44px;
  color: var(--text);
  font-size: .86rem;
  line-height: 1.45;
}

.scenarioCard strong {
  margin-top: 4px;
  font-size: .98rem;
  font-weight: 950;
  display: block;
}

.analystInsightPanel, .valuationCard, .analystGuidancePanel {
  margin-top: 12px;
}

.analystInsightGrid {
  border: 1px solid var(--line);
  background: var(--line);
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(132px, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.analystInsightGrid > div {
  background: var(--panel-soft);
  min-width: 0;
  min-height: 92px;
  padding: 12px;
}

.analystIdentity, .analystMetric {
  align-content: space-between;
  gap: 6px;
  display: grid;
}

.analystInsightGrid span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  display: block;
}

.analystInsightGrid strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.2;
  display: block;
}

.analystInsightGrid small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.25;
}

.analystInsightGrid small.up {
  color: var(--buy);
}

.analystInsightGrid small.down {
  color: var(--sell);
}

.analystDescription {
  -webkit-line-clamp: 3;
  color: var(--text);
  -webkit-box-orient: vertical;
  margin-top: 12px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.valuationEmpty {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  border-radius: 8px;
  padding: 14px 12px;
  font-size: .86rem;
  font-weight: 850;
}

.valuationRange {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  display: grid;
}

.valuationRange > div:not(.valuationProgress) {
  min-width: 0;
}

.valuationRange span, .valuationGrid span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  display: block;
}

.valuationRange strong, .valuationGrid strong {
  margin-top: 6px;
  font-size: 1.06rem;
  font-weight: 950;
  line-height: 1.2;
  display: block;
}

.valuationProgress {
  background: var(--grid);
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
}

.valuationProgress span {
  width: var(--valuation-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--buy), var(--cyan));
  height: 100%;
  display: block;
}

.valuationRange small {
  color: var(--muted);
  grid-column: 1 / -1;
  font-size: .76rem;
  font-weight: 800;
}

.valuationGrid {
  border: 1px solid var(--line);
  background: var(--line);
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.valuationGrid > div {
  background: var(--panel-soft);
  min-width: 0;
  min-height: 78px;
  padding: 12px;
}

.valuationSummaryBox {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  display: flex;
}

.valuationStatusBadge {
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  font-size: .84rem;
  font-weight: 950;
  display: inline-flex;
}

.valuationStatusBadge.undervalued {
  background: var(--buy-soft);
  color: var(--buy);
  border: 1px solid rgb(var(--buy-rgb) / 30%);
}

.valuationStatusBadge.overvalued {
  background: var(--sell-soft);
  color: var(--sell);
  border: 1px solid rgb(var(--sell-rgb) / 30%);
}

.valuationStatusBadge.fair {
  background: var(--grid);
  color: var(--text);
  border: 1px solid var(--line);
}

.valuationSummaryText {
  color: var(--text);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.4;
}

.valuationMetricItem {
  background: var(--panel-soft);
  border-left: 3px solid #0000;
  flex-direction: column;
  justify-content: space-between;
  min-height: 82px;
  padding: 12px;
  display: flex;
}

.valuationMetricItem.undervalued {
  border-left-color: var(--buy);
}

.valuationMetricItem.overvalued {
  border-left-color: var(--sell);
}

.valuationMetricItem.fair {
  border-left-color: var(--cyan);
}

.valuationMetricItem.neutral {
  border-left-color: #0000;
}

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

.metricDiffBadge {
  white-space: nowrap;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .68rem;
  font-weight: 900;
  display: inline-block;
}

.metricDiffBadge.undervalued {
  background: var(--buy-soft);
  color: var(--buy);
}

.metricDiffBadge.overvalued {
  background: var(--sell-soft);
  color: var(--sell);
}

.metricDiffBadge.fair {
  background: rgb(var(--accent-rgb) / 15%);
  color: var(--cyan);
}

.metricBody {
  margin-top: 6px;
}

.metricPeerAvg {
  color: var(--muted);
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 800;
  display: block;
}

.valuationPeerDetail {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}

.valuationPeerDetailHeader {
  border-bottom: 1px solid var(--line);
  background: var(--line);
  grid-template-columns: minmax(0, 1fr) minmax(116px, .22fr);
  gap: 1px;
  display: grid;
}

.valuationPeerDetailHeader > div {
  background: var(--panel-soft);
  min-width: 0;
  padding: 12px;
}

.valuationPeerDetailHeader span, .valuationPeerDetailHeader small {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  display: block;
}

.valuationPeerDetailHeader strong {
  overflow-wrap: anywhere;
  color: var(--text);
  margin-top: 5px;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.2;
  display: block;
}

.valuationPeerDetailHeader small {
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  margin-top: 5px;
  overflow: hidden;
}

.valuationPeerTableWrap table {
  font-variant-numeric: tabular-nums;
  min-width: 940px;
}

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

.valuationPeerDetailTable th:first-child, .valuationPeerDetailTable td:first-child {
  width: 136px;
}

.valuationPeerDetailTable td strong, .valuationPeerDetailTable td small {
  display: block;
}

.valuationPeerDetailTable td strong {
  font-weight: 950;
}

.valuationPeerDetailTable td small {
  color: var(--muted);
  white-space: normal;
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 850;
}

.valuationPeerAverageRow {
  background: var(--table-muted-bg);
}

.valuationPeerAverageRow td {
  font-weight: 900;
}

.emptyPromptArea {
  flex-direction: column;
  gap: 8px;
  width: 100%;
  display: flex;
}

.valuationCustomPeerForm {
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  display: flex;
}

.valuationCustomPeerForm span {
  color: var(--muted);
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 850;
}

.valuationCustomPeerForm input {
  background: var(--grid);
  border: 1px solid var(--line);
  min-width: 120px;
  color: var(--text);
  border-radius: 6px;
  flex: 1;
  padding: 6px 10px;
  font-size: .8rem;
  font-weight: 750;
}

.valuationCustomPeerForm input:focus {
  border-color: var(--cyan);
  outline: none;
}

.valuationCustomPeerForm button {
  background: var(--cyan);
  color: var(--accent-contrast);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 900;
}

.valuationCustomPeerForm button:hover {
  opacity: .9;
}

.valuationCustomPeerForm button:disabled {
  background: var(--grid);
  color: var(--muted);
  cursor: not-allowed;
}

.valuationCustomPeerForm .resetCustomPeerBtn {
  color: var(--muted);
  border: 1px solid var(--line);
  background: none;
  margin-left: 4px;
}

.valuationCustomPeerForm .resetCustomPeerBtn:hover {
  border-color: var(--text);
  color: var(--text);
  background: none;
}

.valuationCustomPeerError {
  color: var(--sell);
  margin: 6px 0 0;
  font-size: .76rem;
  font-weight: 800;
}

.valuationCustomPeerInline {
  border-top: 1px dashed var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.peerHighlightRow {
  background: rgb(var(--accent-rgb) / 8%);
}

.analystTargetGrid {
  border: 1px solid var(--line);
  background: var(--line);
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.analystTargetMetric {
  background: var(--panel-soft);
  min-width: 0;
  min-height: 96px;
  padding: 12px;
}

.analystTargetMetric span, .analystSubheader span, .analystTrendPeriod, .analystTrendCounts {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
}

.analystTargetMetric strong {
  margin-top: 8px;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.2;
  display: block;
}

.analystTargetMetric small {
  color: var(--muted);
  margin-top: 7px;
  font-size: .74rem;
  font-weight: 850;
  display: block;
}

.analystTargetMetric small.up {
  color: var(--buy);
}

.analystTargetMetric small.down {
  color: var(--sell);
}

.analystScoreScale {
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.analystScoreScale li {
  border: 1px solid var(--line);
  max-width: 100%;
  color: var(--muted);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  font-size: .62rem;
  font-weight: 850;
  line-height: 1.1;
  display: inline-flex;
}

.analystScoreScale b {
  color: var(--text);
  font-size: .66rem;
  font-weight: 950;
}

.analystScoreScale em {
  text-overflow: ellipsis;
  font-style: normal;
  overflow: hidden;
}

.analystScoreScale li.positive {
  border-color: rgb(var(--buy-rgb) / 18%);
  background: var(--buy-soft);
  color: var(--buy);
}

.analystScoreScale li.negative {
  border-color: rgb(var(--sell-rgb) / 18%);
  background: var(--sell-soft);
  color: var(--sell);
}

.analystScoreScale li.neutral {
  border-color: rgb(var(--accent-rgb) / 18%);
  background: var(--accent-soft);
  color: var(--accent);
}

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

.analystPerspectiveCard {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.analystPerspectiveCard.positive {
  border-color: rgb(var(--buy-rgb) / 35%);
}

.analystPerspectiveCard.neutral {
  border-color: rgb(var(--accent-rgb) / 32%);
}

.analystPerspectiveCard.negative {
  border-color: rgb(var(--sell-rgb) / 38%);
}

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

.analystPerspectiveHeader span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
}

.analystPerspectiveHeader strong {
  font-size: .98rem;
  font-weight: 950;
  line-height: 1.25;
}

.analystPerspectiveCard.positive .analystPerspectiveHeader strong {
  color: var(--buy);
}

.analystPerspectiveCard.neutral .analystPerspectiveHeader strong {
  color: var(--cyan);
}

.analystPerspectiveCard.negative .analystPerspectiveHeader strong {
  color: var(--sell);
}

.analystPerspectiveCard p {
  color: var(--text);
  margin-top: 9px;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.45;
}

.analystPerspectiveCard ul {
  color: var(--muted);
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 16px;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.35;
  display: grid;
}

.analystRecommendationBadge {
  border-radius: 6px;
  width: fit-content;
  padding: 5px 8px;
  font-size: .9rem;
}

.analystRecommendationBadge.positive {
  background: var(--buy-soft);
  color: var(--buy);
}

.analystRecommendationBadge.neutral {
  background: rgb(var(--accent-rgb) / 15%);
  color: var(--cyan);
}

.analystRecommendationBadge.negative {
  background: var(--sell-soft);
  color: var(--sell);
}

.analystTrendBlock, .analystActionsBlock {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px;
}

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

.analystSubheader strong {
  font-size: .88rem;
  font-weight: 950;
}

.analystTrendList {
  gap: 8px;
  display: grid;
}

.analystTrendRow {
  grid-template-columns: 72px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.analystTrendStack {
  background: var(--grid);
  border-radius: 999px;
  height: 12px;
  display: flex;
  overflow: hidden;
}

.analystTrendSegment.strongBuy {
  background: var(--buy);
}

.analystTrendSegment.buy {
  background: rgb(var(--buy-rgb) / 72%);
}

.analystTrendSegment.hold {
  background: rgb(var(--muted-rgb) / 72%);
}

.analystTrendSegment.sell {
  background: rgb(var(--sell-rgb) / 72%);
}

.analystTrendSegment.strongSell {
  background: var(--sell);
}

.analystActionsTable table {
  font-variant-numeric: tabular-nums;
  min-width: 760px;
}

.analystActionsTable td strong {
  font-weight: 950;
}

.peerHighlightRow td:first-child {
  border-left: 3px solid var(--cyan);
}

.thresholdTableBlock h3 {
  min-height: 24px;
  margin-bottom: 7px;
  font-size: .92rem;
  line-height: 1.3;
}

.thresholdScenarioPanel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(var(--panel-rgb) / 3%), rgb(var(--panel-rgb) / 0%));
  border-radius: 8px;
  margin-bottom: 13px;
  padding: 12px;
}

.thresholdScenarioHeader, .thresholdScenarioStats, .thresholdScenarioGrid {
  gap: 10px;
  display: grid;
}

.thresholdScenarioHeader {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin-bottom: 10px;
}

.thresholdScenarioHeader span, .thresholdScenarioStats span, .thresholdScenarioSide h4, .thresholdScenarioTarget span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 950;
}

.thresholdScenarioHeader strong {
  margin-top: 3px;
  font-size: .96rem;
  line-height: 1.3;
  display: block;
}

.thresholdScenarioReset {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: .76rem;
  font-weight: 900;
  display: inline-flex;
}

.thresholdScenarioReset:hover {
  border-color: rgb(var(--watch-rgb) / 50%);
}

.thresholdScenarioStats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 11px;
}

.thresholdScenarioStats > div {
  border-left: 1px solid var(--line);
  min-width: 0;
  padding-left: 9px;
}

.thresholdScenarioStats strong, .thresholdScenarioStats small {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: .84rem;
  font-weight: 950;
  line-height: 1.35;
  display: block;
  overflow: hidden;
}

.thresholdScenarioStats small {
  color: var(--muted);
  font-size: .72rem;
}

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

.thresholdScenarioSide {
  min-width: 0;
}

.thresholdScenarioSide h4 {
  margin-bottom: 6px;
}

.thresholdScenarioSide.buy h4 {
  color: var(--buy);
}

.thresholdScenarioSide.sell h4 {
  color: var(--sell);
}

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

.thresholdScenarioTarget {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-left-width: 3px;
  border-radius: 7px;
  min-width: 0;
  padding: 8px 9px;
}

.thresholdScenarioSide.buy .thresholdScenarioTarget.projected, .thresholdScenarioSide.buy .thresholdScenarioTarget.already-triggered {
  border-left-color: var(--buy);
}

.thresholdScenarioSide.sell .thresholdScenarioTarget.projected, .thresholdScenarioSide.sell .thresholdScenarioTarget.already-triggered {
  border-left-color: var(--sell);
}

.thresholdScenarioTarget strong, .thresholdScenarioTarget small {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  display: block;
  overflow: hidden;
}

.thresholdScenarioTarget strong {
  margin-top: 3px;
  font-size: .94rem;
}

.thresholdScenarioTarget small {
  color: var(--muted);
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 800;
}

.thresholdTableSummary {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 9px;
  padding: 7px 0;
  display: flex;
}

.thresholdTableSummary div {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: inline-flex;
}

.thresholdTableSummary span {
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 900;
}

.thresholdTableSummary strong {
  border-left: 1px solid var(--line);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-left: 6px;
  font-size: .76rem;
  font-weight: 900;
  overflow: hidden;
}

.thresholdTableWrap, .tradeTableWrap {
  overflow-x: auto;
}

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

.thresholdTable {
  --threshold-header-height: 40px;
  --threshold-row-height: 86px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  min-width: 960px;
}

.thresholdIndicatorCol {
  width: 15%;
}

.thresholdBuyCol, .thresholdSellCol {
  width: 22%;
}

.thresholdPositionCol {
  width: 41%;
}

.thresholdTable th, .thresholdTable td, .tradeTableWrap th, .tradeTableWrap td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 10px 8px;
  font-size: .88rem;
}

.thresholdTable th, .thresholdTable td {
  vertical-align: middle;
}

.tradeTableWrap th, .tradeTableWrap td {
  vertical-align: top;
}

.thresholdTable thead tr {
  height: var(--threshold-header-height);
}

.thresholdTable th, .tradeTableWrap th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
}

.thresholdTable th.thresholdPositionColHeader {
  text-align: center;
}

.thresholdTable tbody tr {
  height: var(--threshold-row-height);
}

.thresholdTable tr.buy .thresholdPositionCell {
  background: linear-gradient(90deg, var(--buy-soft), #fff0);
}

.thresholdTable tr.sell .thresholdPositionCell {
  background: linear-gradient(90deg, var(--sell-soft), #fff0);
}

.thresholdIndicatorCell, .thresholdSideCell strong, .thresholdPositionValue strong {
  white-space: nowrap;
}

.thresholdLabelShort {
  display: none;
}

.thresholdSideCell {
  border-left: 3px solid #0000;
  line-height: 1.25;
}

.thresholdSideCell.buy.hit {
  border-left-color: var(--buy);
  background: var(--buy-soft);
}

.thresholdSideCell.sell.hit {
  border-left-color: var(--sell);
  background: var(--sell-soft);
}

.thresholdSideCell small span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.thresholdSideCell.buy small span:first-child, .thresholdSideCell.buy strong {
  color: var(--buy);
}

.thresholdSideCell.sell small span:first-child, .thresholdSideCell.sell strong {
  color: var(--sell);
}

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

.thresholdPositionCell {
  min-width: 0;
}

.thresholdPositionValue {
  justify-content: center;
  align-items: center;
  display: flex;
}

.thresholdRangeBar {
  height: 28px;
  margin-top: 9px;
  position: relative;
}

.thresholdRangeZone {
  height: 8px;
  position: absolute;
  top: 9px;
}

.thresholdRangeZone.buy {
  background: rgb(var(--buy-rgb) / 20%);
  border-radius: 999px 0 0 999px;
  width: 27%;
  left: 0;
}

.thresholdRangeZone.neutral {
  background: rgb(var(--muted-rgb) / 18%);
  left: 27%;
  right: 27%;
}

.thresholdRangeZone.sell {
  background: rgb(var(--sell-rgb) / 20%);
  border-radius: 0 999px 999px 0;
  width: 27%;
  right: 0;
}

.thresholdRangeMarker {
  border: 3px solid var(--panel);
  background: var(--range-marker);
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 16%);
  border-radius: 999px;
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
}

.thresholdRangeMarker.buy {
  background: var(--buy);
}

.thresholdRangeMarker.sell {
  background: var(--sell);
}

.thresholdRangeMarker span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.thresholdTable td strong {
  display: block;
}

.thresholdTable td small {
  color: var(--muted);
  margin-top: 3px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
}

.thresholdTable .thresholdSideCell small {
  grid-template-columns: minmax(0, 85px) minmax(0, 75px) minmax(0, 60px);
  gap: 4px 12px;
  margin-top: 6px;
  display: grid;
}

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

.lowerGrid > * {
  min-width: 0;
}

.marketContextPanel {
  margin-bottom: 12px;
}

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

.marketContextCard {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.marketContextCard.sentiment.fear, .marketContextCard.valuation.fear {
  background: linear-gradient(135deg, rgb(var(--sell-rgb) / 11%), var(--panel-soft) 68%);
}

.marketContextCard.sentiment.heat, .marketContextCard.valuation.heat {
  background: linear-gradient(135deg, rgb(var(--watch-rgb) / 14%), var(--panel-soft) 68%);
}

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

.marketContextCardHeader span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
}

.marketContextCardHeader strong {
  font-size: .95rem;
}

.marketContextMetrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.marketContextMetrics div {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding-top: 8px;
}

.marketContextMetrics span, .relativeStrengthRow span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  display: block;
}

.marketContextMetrics strong {
  margin-top: 3px;
  font-size: .92rem;
  display: block;
}

.marketContextReasons {
  color: var(--muted);
  gap: 4px;
  margin: 12px 0 0;
  padding-left: 16px;
  font-size: .78rem;
  font-weight: 780;
  line-height: 1.35;
  display: grid;
}

.relativeStrengthRows {
  gap: 7px;
  margin-top: 12px;
  display: grid;
}

.relativeStrengthRow {
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(58px, .9fr) repeat(4, minmax(52px, 1fr));
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-top: 7px;
  display: grid;
}

.relativeStrengthRow strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: .84rem;
  overflow: hidden;
}

.backtestPanel {
  min-height: 220px;
}

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

.backtestDisclosure {
  border-left: 3px solid var(--watch);
  background: var(--watch-soft);
  color: var(--muted);
  margin: -2px 0 12px;
  padding: 8px 10px;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.45;
}

.matrixRunButton {
  border: 1px solid var(--ink);
  background: var(--ink);
  height: 32px;
  color: var(--ink-contrast);
  white-space: nowrap;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: .78rem;
  font-weight: 900;
  display: inline-flex;
}

.paidFeatureLock {
  border-top: 1px solid var(--line);
  background: linear-gradient(135deg, rgb(var(--ink-rgb) / 5%), transparent 62%),
    var(--panel-soft);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 94px;
  padding: 16px;
  display: grid;
}

.paidFeatureLockIcon {
  background: rgb(var(--ink-rgb) / 8%);
  width: 38px;
  height: 38px;
  color: var(--ink);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.paidFeatureLock strong, .paidFeatureLock span {
  display: block;
}

.paidFeatureLock strong {
  font-size: .96rem;
}

.paidFeatureLock span {
  color: var(--muted);
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 800;
}

.paidFeatureAction {
  border: 1px solid var(--ink);
  background: var(--ink);
  min-width: 86px;
  height: 34px;
  color: var(--ink-contrast);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
}

.strategyLeaderGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  display: grid;
}

.strategyLeader {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 7%), transparent 72%),
    var(--panel-soft);
  border-radius: 7px;
  align-content: start;
  gap: 3px;
  min-height: 112px;
  padding: 10px 12px;
  display: grid;
}

.strategyLeader span, .strategyLeader small, .matrixCell span, .matrixCell small, .matrixEmpty {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.strategyLeader strong {
  color: var(--cyan);
  margin: 4px 0 1px;
  font-size: 1.55rem;
  display: block;
}

.strategyReturnSummary, .matrixReturnSummary {
  color: var(--text) !important;
}

.mutedLeader {
  grid-column: 1 / -1;
  min-height: auto;
}

.matrixScroll {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 7px;
  overflow-x: auto;
}

.matrixTable {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 900px;
}

.matrixRangeCol {
  width: 58px;
}

.matrixTable th, .matrixTable td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.matrixTable th:last-child, .matrixTable td:last-child {
  border-right: 0;
}

.matrixTable tbody tr:last-child th, .matrixTable tbody tr:last-child td {
  border-bottom: 0;
}

.matrixTable th {
  background: var(--table-header-bg);
  color: var(--ink);
  padding: 8px 10px;
  font-size: .78rem;
  font-weight: 900;
}

.matrixTable thead th {
  border-top: 0;
}

.matrixTable thead th:first-child, .matrixTable tbody th {
  text-align: center;
  vertical-align: middle;
}

.matrixCell {
  background: var(--panel-soft);
  height: 96px;
  padding: 8px 10px;
}

.matrixCell strong, .matrixCell span, .matrixCell small {
  display: block;
}

.matrixCell strong {
  margin-bottom: 3px;
  font-size: 1.08rem;
  line-height: 1;
}

.matrixReturnSummary {
  margin-top: 2px;
  line-height: 1.25;
  font-size: .72rem !important;
}

.matrixCell.ready {
  background: linear-gradient(180deg, var(--matrix-heat-bg), transparent 76%),
    var(--panel);
  box-shadow: inset 0 3px 0 var(--matrix-heat-line);
}

.matrixCell.ready strong {
  color: var(--buy);
}

.matrixCell.quiet {
  background: linear-gradient(180deg, var(--matrix-heat-bg), transparent 76%),
    var(--panel-soft);
  box-shadow: inset 0 3px 0 var(--matrix-heat-line);
}

.matrixCell.quiet strong {
  color: var(--muted);
}

.matrixCell.blocked {
  background: var(--table-muted-bg);
}

.matrixCell.blocked strong {
  color: var(--muted);
}

.matrixCell.blocked span {
  margin-top: 3px;
}

.matrixEmpty {
  border-top: 1px solid var(--line);
  padding: 14px 0 2px;
}

.backtestStats {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.backtestStats div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  min-height: 72px;
  padding: 12px;
}

.backtestStats span, .patternRow small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.backtestStats strong {
  margin-top: 8px;
  font-size: 1.28rem;
  display: block;
}

.patternRows {
  gap: 8px;
  display: grid;
}

.patternRow {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 52px minmax(68px, auto) 1fr;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  display: grid;
}

.patternRow:last-child {
  border-bottom: 0;
}

.patternRow span {
  color: var(--cyan);
  font-weight: 900;
}

.patternRow strong {
  font-size: 1.1rem;
}

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

.tradeTableWrap table {
  min-width: 100%;
}

.positive {
  color: var(--buy);
  font-weight: 900;
}

.negative {
  color: var(--sell);
  font-weight: 900;
}

.spin {
  animation: .8s linear infinite spin;
}

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

@media (max-width: 1040px) {
  .topbar, .projectionExplanationPanel, .marketContextGrid, .technicalReportTop, .analystInsightGrid, .valuationGrid, .lowerGrid {
    grid-template-columns: 1fr;
  }

  .topbarActions {
    flex-wrap: wrap;
  }

  .controls {
    flex-wrap: wrap;
    flex: 100%;
  }

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

  .priceChartBody, .priceChartBody.withLevelEdgeLabels {
    grid-template-columns: 1fr;
  }

  .priceChartLevelEdgeLabels {
    flex-wrap: wrap;
    gap: 6px;
    height: auto;
    padding-bottom: 8px;
    display: flex;
    position: static;
  }

  .priceChartLevelEdgeItem {
    max-width: calc(50% - 3px);
    position: static;
    transform: none;
  }

  .priceChartLevelEdgeText {
    text-align: left;
    align-items: flex-start;
  }

  .priceChartLevelEdgeName {
    text-align: left;
  }

  .priceChartLevelEdgeConnector {
    display: none;
  }
}

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

  .matrixTable {
    min-width: 860px;
  }

  .shell {
    width: min(100% - 20px, 1480px);
    padding-top: 14px;
  }

  h1 {
    font-size: 1.75rem;
  }

  .controls {
    grid-template-columns: 1fr repeat(3, 42px);
    width: 100%;
    display: grid;
  }

  .tickerInput, .tickerInput input, .segmented, .primaryButton {
    width: 100%;
  }

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

  .segmented {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    height: 84px;
  }

  .primaryButton {
    min-width: 0;
  }

  .chartPanel, .thresholdPanel, .watchlistPanel, .panel {
    padding: 14px;
  }

  .tradingPanel .panelHeader {
    grid-template-columns: 18px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    display: grid;
  }

  .tradingPanel .panelHeader h2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: .96rem;
    overflow: hidden;
  }

  .tradingPanel .panelHeader > span {
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 1 / -1;
    margin-left: 0;
    overflow: hidden;
  }

  .tradingPanel .panelHeader .sessionQuoteSummary {
    justify-self: start;
    max-width: 100%;
  }

  .chartLegendToggleButton {
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
  }

  .chartLegendToggleButton span {
    display: none;
  }

  .decisionIntegrityMain, .decisionProvenanceGrid, .detailOverviewGrid, .projectionExplanationStats, .projectionEvidenceItem, .marketContextMetrics, .analystPerspectiveGrid, .analystTargetGrid, .scenarioGrid, .valuationRange, .valuationPeerDetailHeader, .backtestStats {
    grid-template-columns: 1fr;
  }

  .analystTrendRow {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .analystTrendCounts {
    grid-column: 2;
  }

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

  .authPanel {
    margin-left: auto;
  }

  .authActionButton {
    width: auto;
  }

  .membershipBanner {
    flex-direction: column;
    align-items: stretch;
  }

  .paidFeatureLock {
    grid-template-columns: 1fr;
    display: grid;
  }

  .paidFeatureAction {
    width: 100%;
  }

  .watchlistRow {
    grid-template-columns: 18px minmax(0, 1fr) 84px;
  }

  .watchlistDrawer.open .watchlistDismissLayer {
    background: rgb(var(--ink-rgb) / 14%);
    opacity: 1;
  }

  .watchlistDrawerTab {
    border: 1px solid rgb(var(--ink-rgb) / 16%);
    border-radius: 999px;
    grid-template-columns: auto auto auto;
    width: auto;
    min-height: 42px;
    padding: 8px 11px;
    top: auto;
    bottom: 18px;
    right: 10px;
  }

  .watchlistDrawerTab span {
    writing-mode: horizontal-tb;
  }

  .watchlistDrawerPanel {
    width: auto;
    height: min(70vh, 560px);
    max-height: calc(100vh - 20px);
    inset: auto 10px 10px;
    transform: translateY(calc(100% + 24px));
  }

  .watchlistDrawer.open .watchlistDrawerPanel {
    transform: translateY(0);
  }

  .chartOverlayBar {
    border: 1px solid var(--chart-border);
    pointer-events: auto;
    background: #0d1117f0;
    border-radius: 7px;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .chartControlLeft {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    display: grid;
  }

  .chartSymbolBadge {
    height: 38px;
  }

  .chartTimeframeControls {
    width: 100%;
    max-width: 100%;
  }

  .chartTimeframeButton {
    flex: 1 0 42px;
    min-width: 42px;
    height: 40px;
    padding: 0 7px;
  }

  .chartToolBar {
    grid-template-columns: 44px minmax(52px, 1fr) 44px 44px;
    justify-content: stretch;
    width: 100%;
    display: grid;
  }

  .chartToolButton {
    width: 44px;
    height: 40px;
  }

  .chartZoomValue {
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .chartLayerToggles {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    width: 100%;
    margin-left: 0;
    display: grid;
  }

  .chartLayerButton {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
  }

  .chartLayerButton span {
    display: none;
  }

  .chartRelativeBenchmarkField {
    padding: 0 6px;
  }

  .chartRelativeBenchmarkField span {
    display: none;
  }

  .chartRelativeBenchmarkField input {
    width: 58px;
  }

  .priceChartReadout {
    max-width: 100%;
    margin-bottom: 8px;
    position: static;
  }

  .priceChartLevelEdgeItem {
    max-width: 100%;
  }

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

  .chartSelectionSummary > div, .chartSelectionReset {
    padding: 9px 10px;
  }

  .signalGuide div {
    width: 100%;
  }

  .detailDisclosureSummary {
    align-items: flex-start;
  }

  .detailSummaryMeta {
    align-self: center;
  }

  .detailSectionNav {
    z-index: 3;
    border-block: 1px solid var(--line);
    background: var(--panel-glass);
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 8px;
    position: sticky;
    top: 0;
    overflow-x: auto;
  }

  .detailSectionNav::-webkit-scrollbar {
    display: none;
  }

  .detailSectionNav a {
    min-width: max-content;
    min-height: 38px;
  }

  .detailSectionSummary {
    min-height: 52px;
  }

  .detailSectionSummary small {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .thresholdPanel .panelHeader {
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
  }

  .thresholdPanel .panelHeader span {
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-basis: 100%;
    margin-left: 0;
    font-size: .68rem;
    overflow: hidden;
  }

  .thresholdScenarioPanel {
    padding: 10px;
  }

  .thresholdScenarioHeader, .thresholdScenarioStats, .thresholdScenarioGrid {
    grid-template-columns: 1fr;
  }

  .thresholdScenarioStats > div {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px;
    display: grid;
  }

  .thresholdScenarioStats small {
    grid-column: 2;
  }

  .thresholdTableBlock h3, .thresholdTableSummary, .thresholdLabelFull, .thresholdTable .thresholdSideCell small, .thresholdRangeMarker span {
    display: none;
  }

  .thresholdLabelShort {
    display: inline;
  }

  .thresholdTableWrap {
    overflow-x: visible;
  }

  .thresholdTable {
    --threshold-header-height: 26px;
    --threshold-row-height: 48px;
    min-width: 0;
  }

  .thresholdIndicatorCol {
    width: 16%;
  }

  .thresholdBuyCol, .thresholdSellCol {
    width: 21%;
  }

  .thresholdPositionCol {
    width: 42%;
  }

  .thresholdTable th, .thresholdTable td {
    padding: 5px 3px;
    font-size: .7rem;
    line-height: 1.15;
  }

  .thresholdTable th {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0;
    overflow: hidden;
  }

  .thresholdTable th:after {
    content: attr(data-mobile-label);
    font-size: .62rem;
  }

  .thresholdSideCell {
    border-left-width: 2px;
  }

  .thresholdSideCell strong, .thresholdPositionValue strong {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
  }

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

  .thresholdRangeBar {
    height: 16px;
    margin-top: 3px;
  }

  .thresholdRangeZone {
    height: 5px;
    top: 6px;
  }

  .thresholdRangeMarker {
    border-width: 2px;
    width: 11px;
    height: 11px;
    top: 2px;
  }
}

.alertRulesPanel {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  box-shadow: var(--shadow-soft);
  border-radius: 8px;
  margin-top: 10px;
  padding: 12px;
  animation: .2s ease-out fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alertRulesHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  display: flex;
}

.alertRulesHeader h4 {
  color: var(--ink);
  margin: 0;
  font-size: .88rem;
  font-weight: 800;
}

.alertRulesClose {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 2px;
}

.alertRulesClose:hover {
  background: rgb(var(--ink-rgb) / 5%);
  color: var(--ink);
}

.alertRulesTabs {
  border-bottom: 1px solid var(--line);
  gap: 4px;
  margin-bottom: 12px;
  display: flex;
}

.alertRulesTab {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: .76rem;
  font-weight: 700;
  transition: all .15s;
  display: inline-flex;
}

.alertRulesTab:hover {
  color: var(--ink);
}

.alertRulesTab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.alertRulesContent {
  font-size: .8rem;
}

.alertPresetsSection h5, .alertCustomSection h5, .alertRulesListSection h5, .alertEventsSection h5, .alertChannelsSection h5 {
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 800;
}

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

.alertPresetButton {
  border: 1px dashed var(--line);
  background: var(--panel);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: .74rem;
  font-weight: 700;
  transition: all .15s;
  display: flex;
}

.alertPresetButton:hover {
  border-color: var(--cyan);
  background: rgb(var(--accent-rgb) / 5%);
  color: var(--cyan);
}

.alertPresetButton span {
  color: var(--cyan);
  font-weight: 900;
}

.alertToggleFormButton {
  border: 1px solid var(--line);
  background: var(--panel);
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 14px;
  padding: 8px;
  font-size: .76rem;
  font-weight: 800;
  transition: all .15s;
  display: block;
}

.alertToggleFormButton:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.alertForm {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 14px;
  padding: 10px;
  animation: .15s ease-out fadeIn;
}

.alertFormGroup {
  margin-bottom: 10px;
}

.alertFormGroup.inline {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.alertFormGroup label {
  color: var(--muted);
  margin-bottom: 4px;
  font-size: .72rem;
  font-weight: 800;
  display: block;
}

.alertFormGroup select, .alertFormGroup input[type="text"], .alertFormGroup input[type="number"] {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  width: 100%;
  height: 32px;
  color: var(--ink);
  border-radius: 5px;
  padding: 0 8px;
  font-size: .76rem;
  font-weight: 700;
}

.alertFormGroup select:focus, .alertFormGroup input:focus {
  border-color: var(--cyan);
  outline: 0;
}

.alertFormGroup.checkGroup {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.checkboxLabel {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  display: flex;
}

.checkboxLabel input, .checkboxOnly input {
  cursor: pointer;
}

.checkboxOnly {
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  display: flex;
}

.checkboxOnly span {
  font-size: .76rem;
  font-weight: 700;
}

.alertFormGroup input[type="range"] {
  cursor: pointer;
  width: 100%;
}

.alertSubmitButton {
  background: var(--cyan);
  width: 100%;
  height: 32px;
  color: var(--accent-contrast);
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  font-size: .76rem;
  font-weight: 900;
  transition: opacity .15s;
}

.alertSubmitButton:hover {
  opacity: .9;
}

.alertRulesList {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.alertRuleItem {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.alertRuleInfo {
  flex: 1;
  min-width: 0;
}

.alertRuleInfo strong {
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 800;
  display: block;
  overflow: hidden;
}

.alertRuleTypeLabel {
  text-transform: uppercase;
  color: var(--muted);
  background: rgb(var(--ink-rgb) / 4%);
  border-radius: 3px;
  margin-right: 6px;
  padding: 1px 4px;
  font-size: .64rem;
  font-weight: 900;
  display: inline-block;
}

.alertRuleDesc {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
}

.alertRuleActions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.alertRuleDelete {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 4px;
}

.alertRuleDelete:hover {
  background: rgb(var(--sell-rgb) / 8%);
  color: var(--sell);
}

.switchToggle {
  width: 32px;
  height: 18px;
  display: inline-block;
  position: relative;
}

.switchToggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderRound {
  cursor: pointer;
  background-color: var(--line);
  border-radius: 18px;
  transition: all .2s;
  position: absolute;
  inset: 0;
}

.sliderRound:before {
  content: "";
  background-color: var(--panel);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: all .2s;
  position: absolute;
  bottom: 2px;
  left: 2px;
}

input:checked + .sliderRound {
  background-color: var(--cyan);
}

input:checked + .sliderRound:before {
  transform: translateX(14px);
}

.alertRulesEmpty, .alertEventsEmpty {
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: 14px;
  font-size: .76rem;
  font-weight: 700;
}

.alertRulesLoading {
  color: var(--muted);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 20px;
  font-weight: 700;
  display: flex;
}

.alertRulesError {
  background: rgb(var(--sell-rgb) / 8%);
  border: 1px solid rgb(var(--sell-rgb) / 16%);
  color: var(--sell);
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 8px;
  font-size: .74rem;
  font-weight: 700;
}

.alertEventsList {
  flex-direction: column;
  gap: 6px;
  max-height: 250px;
  display: flex;
  overflow-y: auto;
}

.alertEventItem {
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  border-radius: 6px;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  transition: all .15s;
  display: flex;
}

.alertEventItem:hover {
  border-color: var(--cyan);
}

.alertEventItem.unread {
  background: rgb(var(--accent-rgb) / 3%);
}

.alertEventDot {
  background: none;
  border-radius: 99px;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 5px;
}

.alertEventItem.unread .alertEventDot {
  background: var(--cyan);
}

.alertEventBody {
  flex: 1;
  min-width: 0;
}

.alertEventBody strong {
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  display: block;
}

.alertEventBody p {
  color: var(--muted);
  margin: 3px 0;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
}

.alertEventBody small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 700;
  display: block;
}

.alertChannelsSection p.alertChannelHelp {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.4;
}

.alertChannelForm {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}

.watchlistRow {
  grid-template-columns: 18px minmax(0, 1fr) 112px !important;
}

.alertRulesButton.active {
  color: var(--cyan) !important;
  background: rgb(var(--accent-rgb) / 8%) !important;
}

/*# sourceMappingURL=app_globals_0jn8.0u.css.map*/