html.theme-dark,
[data-theme="dark"],
body {
  --tv-color-platform-background: #05070a;
  --tv-color-pane-background: #05070a;
  --tv-color-toolbar-button-background-hover: rgba(34, 211, 238, 0.1);
  --tv-color-toolbar-button-background-expanded: rgba(34, 211, 238, 0.14);
  --tv-color-toolbar-button-background-active: rgba(34, 211, 238, 0.18);
  --tv-color-toolbar-button-text: rgba(244, 247, 251, 0.74);
  --tv-color-toolbar-button-text-hover: #ecfeff;
  --tv-color-toolbar-button-text-active: #67e8f9;
  --tv-color-popup-background: #090b0f;
  --tv-color-popup-element-text: rgba(244, 247, 251, 0.74);
  --tv-color-popup-element-text-hover: #ecfeff;
  --tv-color-popup-element-text-active: #ecfeff;
  --tv-color-popup-element-background-hover: rgba(34, 211, 238, 0.1);
  --tv-color-popup-element-background-active: rgba(34, 211, 238, 0.16);
  --tv-color-popup-element-divider-background: rgba(255, 255, 255, 0.08);
  --tv-color-list-item-button-background: rgba(255, 255, 255, 0.04);
  --tv-color-selected-list-item-button-background: rgba(34, 211, 238, 0.16);
  --tv-color-selected-list-item-button-text: #cffafe;
  --color-list-item-bg-selected: rgba(34, 211, 238, 0.16);
  --color-list-item-bg-selected-hover: rgba(34, 211, 238, 0.22);
  --tv-color-scrollbar-thumb-background: rgba(34, 211, 238, 0.35);
  --color-brand: #22d3ee;
  --color-brand-active: #0891b2;
  --color-brand-hover: #67e8f9;
  --color-tv-blue-50: #ecfeff;
  --color-tv-blue-100: #cffafe;
  --color-tv-blue-200: #a5f3fc;
  --color-tv-blue-300: #67e8f9;
  --color-tv-blue-400: #22d3ee;
  --color-tv-blue-500: #06b6d4;
  --color-tv-blue-600: #0891b2;
  --color-tv-blue-700: #0e7490;
  --color-tv-blue-800: #155e75;
  --color-tv-blue-900: #164e63;
  --color-tv-blue-a100: #a5f3fc;
  --color-tv-blue-a200: #67e8f9;
  --color-tv-blue-a400: #22d3ee;
  --color-tv-blue-a600: #06b6d4;
  --color-tv-blue-a700: #0e7490;
  --color-primary-symbol: #22d3ee;
  --color-focus-outline-color-blue: rgba(103, 232, 249, 0.78);

  /* Dialog surfaces (Indicators, Symbol Search, Settings…) use --color-bg-primary,
     which defaults to a neutral #1f1f1f. Pull it onto the app's deep-black panel. */
  --color-bg-primary: #090b0f;
  /* Favorite (★) stars resolve through these gold tokens — rebrand them to cyan
     so favorited indicators match the rest of the theme instead of TradingView gold. */
  --color-banana-yellow-700: #22d3ee;
  --color-banana-yellow-800: #22d3ee;
  --color-attention: #22d3ee;
  /* Hairline dividers + control borders tuned to the app's translucent white. */
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-border-primary-neutral-light: rgba(255, 255, 255, 0.1);
}

body {
  background: #05070a !important;
}

[data-name="legend-source-item"],
[data-name="legend-series-item"] {
  letter-spacing: 0;
}

[data-name="header-toolbar-symbol-search"],
[data-name="header-toolbar-intervals"] {
  border-radius: 8px !important;
}

/* Our custom font (Inter) renders wider than TradingView's default, which was
   clipping the last glyph of the ticker in the header symbol button
   ("BTCUSDT" → "BTCUSD…"). Let the button and its text size to their content. */
[data-name="header-toolbar-symbol-search"],
[data-name="header-toolbar-symbol-search"] * {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Some Advanced Charts builds render the visible symbol search without
   data-name attributes and hard-cap `.js-button-text` around 56px. That trims
   BTCUSDT when the button is active/focused, so give the text real breathing room. */
button[class*="smallLeftPadding-"][class*="button-"] {
  min-width: 112px !important;
}

button[class*="smallLeftPadding-"][class*="button-"] .js-button-text {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

button,
input,
textarea,
select {
  border-radius: 8px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.025);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.5), rgba(20, 184, 166, 0.32));
  border: 2px solid #090b0f;
  border-radius: 999px;
}

/* Dialog search field (Indicators, Symbol Search…). The `searchInput-` prefix
   uniquely matches the bordered box — its siblings are `searchInputIcon`/
   `searchInputWrapper`, which don't contain the literal `searchInput-`. */
[class*="searchInput-"] {
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 8px !important;
}

[class*="searchInput-"]:focus-within {
  border-color: rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25);
}

/* Expanded drawing-tool menus mark the current tool with hashed active classes.
   Match class tokens only: `interactive-` also contains `active-`, and that
   would make every native context-menu row look selected. */
[class*="menuWrap-"] [class*="item-"][class*=" isActive-"],
[class*="menuWrap-"] [class*="item-"][class^="isActive-"],
[class*="menuWrap-"] [class*="item-"][class*=" active-"],
[class*="menuWrap-"] [class*="item-"][class^="active-"] {
  background-color: rgba(34, 211, 238, 0.16) !important;
  box-shadow:
    inset 3px 0 0 #22d3ee,
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  color: #ecfeff !important;
}

[class*="menuWrap-"] [class*="item-"][class*=" isActive-"] *,
[class*="menuWrap-"] [class*="item-"][class^="isActive-"] *,
[class*="menuWrap-"] [class*="item-"][class*=" active-"] *,
[class*="menuWrap-"] [class*="item-"][class^="active-"] * {
  color: #ecfeff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

@media (any-hover: hover) {
  [class*="menuWrap-"] [class*="item-"][class*=" isActive-"]:hover,
  [class*="menuWrap-"] [class*="item-"][class^="isActive-"]:hover,
  [class*="menuWrap-"] [class*="item-"][class*=" active-"]:hover,
  [class*="menuWrap-"] [class*="item-"][class^="active-"]:hover {
    background-color: rgba(34, 211, 238, 0.22) !important;
  }
}

/* Native chart context menu. TradingView renders this as a compact table, so
   the polish has to live on cells rather than normal flex menu rows. */
.context-menu[class*="menuWrap-"] {
  min-width: 292px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(7, 10, 15, 0.98) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(34, 211, 238, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.context-menu[class*="menuWrap-"] [class*="menuBox-"] {
  padding: 6px !important;
}

.context-menu[class*="menuWrap-"] table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}

.context-menu[class*="menuWrap-"] [class*="item-"] {
  height: 32px !important;
  background: transparent !important;
  color: rgba(244, 247, 251, 0.82) !important;
  box-shadow: none !important;
}

.context-menu[class*="menuWrap-"] [class*="item-"] > td {
  height: 32px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
  background: rgba(255, 255, 255, 0.026) !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease !important;
}

.context-menu[class*="menuWrap-"] [class*="item-"] > td:first-child {
  width: 40px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-radius: 7px 0 0 7px !important;
  box-shadow: inset 0 0 0 rgba(34, 211, 238, 0) !important;
}

.context-menu[class*="menuWrap-"] [class*="item-"] > td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-radius: 0 7px 7px 0 !important;
}

.context-menu[class*="menuWrap-"] [class*="content-"] {
  min-height: 18px !important;
  height: auto !important;
  padding: 0 14px 0 2px !important;
  gap: 10px !important;
}

.context-menu[class*="menuWrap-"] [class*="label-"] {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  color: rgba(244, 247, 251, 0.84) !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.context-menu[class*="menuWrap-"] [class*="shortcut-"] {
  margin-left: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  padding: 1px 6px 0 !important;
  color: rgba(236, 254, 255, 0.62) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.context-menu[class*="menuWrap-"] [class*="icon-"] {
  color: rgba(165, 243, 252, 0.78) !important;
}

.context-menu[class*="menuWrap-"] [class*="icon-"] svg {
  width: 28px !important;
  height: 28px !important;
  transform: scale(0.78) !important;
  transform-origin: center !important;
}

.context-menu[class*="menuWrap-"] [class*="line-"] {
  display: none !important;
}

.context-menu[class*="menuWrap-"] tr[class*="row-"] {
  display: none !important;
}

@media (any-hover: hover) {
  .context-menu[class*="menuWrap-"] [class*="item-"]:hover > td,
  .context-menu[class*="menuWrap-"] [class*="item-"]:focus-visible > td {
    border-color: rgba(34, 211, 238, 0.18) !important;
    background: rgba(34, 211, 238, 0.085) !important;
    color: #ecfeff !important;
  }

  .context-menu[class*="menuWrap-"] [class*="item-"]:hover > td:first-child,
  .context-menu[class*="menuWrap-"] [class*="item-"]:focus-visible > td:first-child {
    box-shadow: inset 2px 0 0 rgba(34, 211, 238, 0.88) !important;
  }

  .context-menu[class*="menuWrap-"] [class*="item-"]:hover [class*="label-"],
  .context-menu[class*="menuWrap-"] [class*="item-"]:focus-visible [class*="label-"] {
    color: #ecfeff !important;
  }

  .context-menu[class*="menuWrap-"] [class*="item-"]:hover [class*="shortcut-"],
  .context-menu[class*="menuWrap-"] [class*="item-"]:focus-visible [class*="shortcut-"] {
    border-color: rgba(103, 232, 249, 0.22) !important;
    background: rgba(34, 211, 238, 0.09) !important;
    color: rgba(236, 254, 255, 0.84) !important;
  }
}

/* Vertical drawing-toolbar toggles (favorite toolbar, magnet, lock, visibility)
   use a pressed state that bypasses the normal toolbar active tokens and falls
   back to a white pill. Match those active buttons to the cyan toolbar state. */
button[class*="button-KTgbfaP5"][class*="pressed-"],
button[class*="button-KTgbfaP5"][class*="pressed-"][class*="isActive-"] {
  color: #67e8f9 !important;
}

button[class*="button-KTgbfaP5"][class*="pressed-"]::before,
button[class*="button-KTgbfaP5"][class*="pressed-"][class*="isActive-"]::before {
  background-color: rgba(34, 211, 238, 0.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(103, 232, 249, 0.28),
    0 0 16px rgba(34, 211, 238, 0.08);
}

button[class*="button-KTgbfaP5"][class*="pressed-"] *,
button[class*="button-KTgbfaP5"][class*="pressed-"][class*="isActive-"] * {
  color: #67e8f9 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* The collapsed "Show Drawings Toolbar" side tab is an SVG-based control that
   uses separate background/arrow parts and otherwise reverts to a white pill. */
button[class*="toggleButton-"] [class*="background-"] {
  fill: rgba(34, 211, 238, 0.16) !important;
  stroke: rgba(103, 232, 249, 0.34) !important;
}

button[class*="toggleButton-"] [class*="arrow-"] {
  stroke: #67e8f9 !important;
}

@media (any-hover: hover) {
  button[class*="toggleButton-"]:hover [class*="background-"] {
    fill: rgba(34, 211, 238, 0.24) !important;
    stroke: rgba(103, 232, 249, 0.52) !important;
  }

  button[class*="toggleButton-"]:hover [class*="arrow-"] {
    stroke: #ecfeff !important;
  }
}

/* Dialog footer / hint bar (e.g. Symbol Search) defaults to a lighter #2e2e2e
   surface — fold it onto the deep-black panel with a real hairline top divider
   and a softer, on-brand hint color. */
[class*="footer-"] {
  background-color: #090b0f !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(236, 254, 255, 0.55) !important;
}