.symbol-token-icon,
.symbol-token-fallback {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.symbol-token-icon {
  display: block;
  border-radius: 50%;
  object-fit: contain;
}

.symbol-token-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.symbol-token-fallback svg {
  width: 18px;
  height: 18px;
  display: block;
}

.symbol-token-fallback circle {
  fill: var(--bg-hover);
  stroke: var(--border-strong);
  stroke-width: 1.25;
}

.symbol-token-fallback path {
  fill: currentColor;
}
.loading-indicator {
  --loading-accent: var(--amber, #f5a623);
  --loading-track: var(--border, #27303d);
  --loading-text: var(--text-dim, #9aa7b8);
  align-items: center;
  color: var(--loading-text);
  display: inline-flex;
  gap: 11px;
}

.loading-indicator__spinner {
  animation: loading-indicator-spin 800ms linear infinite;
  border: 2px solid var(--loading-track);
  border-radius: 50%;
  border-top-color: var(--loading-accent);
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}

.loading-indicator__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.loading-indicator__label {
  color: var(--text, #edf0f6);
  font-family: var(--font-ui, "Manrope Variable", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.loading-indicator__detail {
  color: var(--loading-text);
  font-size: 13px;
  line-height: 1.45;
}

.loading-indicator__track {
  display: none;
}

.loading-indicator--panel {
  display: grid;
  gap: 6px 14px;
  grid-template-columns: 26px minmax(0, 1fr);
  margin-top: 28px;
  width: 100%;
}

.loading-indicator--panel .loading-indicator__spinner {
  height: 24px;
  width: 24px;
}

.loading-indicator--panel .loading-indicator__track {
  background: var(--loading-track);
  display: block;
  grid-column: 1 / -1;
  height: 2px;
  margin-top: 14px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.loading-indicator--panel .loading-indicator__track > span {
  animation: loading-indicator-progress 1.45s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, var(--loading-accent), transparent);
  height: 100%;
  left: -42%;
  position: absolute;
  top: 0;
  width: 42%;
}

.loading-indicator--compact .loading-indicator__spinner {
  height: 18px;
  width: 18px;
}

.loading-indicator--inline {
  gap: 7px;
}

.loading-indicator--inline .loading-indicator__spinner {
  border-width: 1.5px;
  height: 14px;
  width: 14px;
}

.loading-indicator--inline .loading-indicator__label {
  color: var(--loading-text);
  font-size: 10px;
  letter-spacing: 0.04em;
}

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

@keyframes loading-indicator-progress {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(340%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-indicator__spinner,
  .loading-indicator--panel .loading-indicator__track > span {
    animation-duration: 2.5s;
  }
}
.symbol-switcher {
  position: relative;
  flex-shrink: 0;
}

.symbol-switcher-trigger {
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--bg-surface-raised);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition:
    background 100ms ease,
    border-color 100ms ease,
    color 100ms ease;
}

.symbol-switcher-trigger:hover,
.symbol-switcher-trigger.open {
  border-color: rgba(245, 166, 35, 0.45);
  background: var(--amber-soft);
  color: var(--amber);
}

.symbol-switcher-symbol-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  flex: 0 0 18px;
}

.symbol-switcher-caret {
  font-size: 10px;
  color: var(--text-faint);
  transition:
    transform 120ms ease,
    color 120ms ease;
}

.symbol-switcher-trigger.open .symbol-switcher-symbol-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  flex: 0 0 18px;
}

.symbol-switcher-trigger.open .symbol-switcher-caret {
  color: var(--amber);
  transform: rotate(180deg);
}

.symbol-switcher-menu {
  position: fixed;
  z-index: 20000;
  width: 360px;
  overflow: hidden;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
}

.symbol-switcher-option {
  width: 100%;
  min-height: 38px;
  display: grid;
  /* Reserve enough room for icon + at least seven ticker characters. */
  grid-template-columns: 98px minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    background 100ms ease,
    border-color 100ms ease;
}

.symbol-switcher-option:hover {
  background: var(--bg-hover);
}

/* arrow-key navigation needs a persistent visual target even while
 * the pointer remains elsewhere in the menu. */
.symbol-switcher-option.keyboard-highlighted {
  border-color: rgba(245, 166, 35, 0.55);
  background: var(--bg-hover);
}

.symbol-switcher-option.active {
  border-color: rgba(245, 166, 35, 0.4);
  background: var(--amber-soft);
}

.symbol-switcher-option-symbol {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.symbol-switcher-option-symbol img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  object-fit: contain;
}

.symbol-switcher-option-label {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-switcher-option.active .symbol-switcher-option-symbol {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.symbol-switcher-option-symbol img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  object-fit: contain;
}

.symbol-switcher-option-label {
  color: var(--amber);
}

.symbol-switcher-option-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-exchange-logo {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  flex: 0 0 20px;
  border-radius: 5px;
  cursor: help;
}

.symbol-exchange-logo svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.symbol-exchange-logo.binance {
  color: #f0b90b;
  background: rgba(240, 185, 11, 0.09);
}

.symbol-exchange-logo.mexc {
  color: #1463ff;
  background: rgba(20, 99, 255, 0.09);
}

@media (max-width: 720px) {
  .symbol-switcher-trigger {
    height: 28px;
    padding: 0 8px;
    font-size: 13.5px;
  }

  .symbol-switcher-menu {
    width: min(340px, calc(100vw - 16px));
  }

  .symbol-switcher-option {
    grid-template-columns: 92px minmax(0, 1fr) 22px;
    column-gap: 8px;
  }
}

.symbol-switcher-list {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 3px;

  /* Compact terminal-style scrollbar: visible enough to hint at more symbols. */
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 166, 35, 0.5) rgba(255, 255, 255, 0.035);
}

.symbol-switcher-list::-webkit-scrollbar {
  width: 6px;
}

.symbol-switcher-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.symbol-switcher-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.48);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.12);
}

.symbol-switcher-list::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.78);
}

.symbol-search-empty {
  padding: 22px 10px;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

.symbol-switcher-option {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0;
}

.symbol-pin-button {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-left: 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition:
    color 100ms ease,
    background 100ms ease;
}

.symbol-pin-button:hover:not(.locked) {
  color: var(--amber);
  background: var(--bg-hover);
}

.symbol-pin-button.locked {
  cursor: default;
}

.symbol-pin-icon {
  width: 15px;
  height: 15px;
  display: block;
}

.symbol-pin-icon.filled {
  color: var(--amber);
}

.symbol-category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 7px;
}

.symbol-category-toolbar > span {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.symbol-category-toolbar button {
  -webkit-appearance: none;
  appearance: none;
  height: 27px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  outline: none;
  background: var(--bg-surface-raised);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

.symbol-category-toolbar button:hover,
.symbol-category-toolbar button.active,
.symbol-category-toolbar button:focus-visible {
  border-color: rgba(245, 166, 35, 0.55);
  color: var(--amber);
}

/* category headings provide the requested visual delimiter while the
   flexible rule remains readable at any selector width. */
.symbol-category-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.symbol-category-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 6px 3px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.symbol-category-group:first-child .symbol-category-heading {
  margin-top: 3px;
}

.symbol-category-heading > span:last-child {
  height: 1px;
  flex: 1 1 auto;
  background: var(--border);
}

.symbol-switcher-select {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 7px 0 7px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.symbol-switcher-option-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-right: 10px;
}

.symbol-category-select {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  width: 116px;
  height: 26px;
  padding: 0 23px 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  outline: none;
  background: var(--bg-surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238991a3' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  cursor: pointer;
}

.symbol-category-select:focus {
  border-color: rgba(245, 166, 35, 0.55);
}

.symbol-category-select {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.symbol-category-options {
  position: fixed;
  z-index: 20001;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--bg-surface-raised);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.symbol-category-options button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.symbol-category-options button:hover,
.symbol-category-options button:focus-visible,
.symbol-category-options button[aria-selected="true"] {
  outline: none;
  background: var(--amber-soft);
  color: var(--amber);
}

.symbol-delete-button {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  transition:
    color 100ms ease,
    background 100ms ease;
}

.symbol-delete-button span {
  display: block;
  transform: translateY(-0.5px);
}

.symbol-delete-button:hover:not(:disabled),
.symbol-delete-button:focus-visible:not(:disabled) {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.symbol-delete-button:disabled {
  cursor: default;
  opacity: 0.25;
}

.symbol-generic-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.symbol-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 6px;
  margin-top: 5px;
  padding: 7px 4px 1px;
  border-top: 1px solid var(--border);
}

.symbol-add-progress {
  padding: 10px 0 4px;
}

.symbol-add-row input {
  min-width: 0;
  height: 31px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  outline: none;
  background: var(--bg-surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.symbol-add-row input:focus {
  border-color: rgba(245, 166, 35, 0.55);
}

.symbol-add-row input::placeholder {
  color: var(--text-faint);
}

.symbol-add-button {
  height: 31px;
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--amber);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.symbol-add-button:hover:not(:disabled) {
  border-color: var(--amber);
}

.symbol-add-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.symbol-switcher-error {
  padding: 5px 5px 2px;
  overflow: hidden;
  color: #f87171;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .symbol-switcher-select {
    min-height: 48px;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 8px;
    touch-action: manipulation;
  }

  .symbol-pin-button,
  .symbol-delete-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    touch-action: manipulation;
  }

  .symbol-switcher-option-actions {
    gap: 0;
    padding-right: 0;
  }
}
.topbar {
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.symbol {
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--text);
}
.buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.buttons button {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
}
.buttons button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.buttons button.active {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(245, 166, 35, 0.35);
}

.topbar-spacer {
  flex: 1;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 4px;
  background: var(--border-strong);
}

.topbar-network-badge {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.7px;
}

.topbar-network-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.topbar-network-badge.demo {
  border-color: rgba(245, 166, 35, 0.42);
  background: rgba(245, 166, 35, 0.08);
  color: var(--amber);
}

.topbar-network-badge.demo > span {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
}

.topbar-network-badge.live {
  border-color: rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.12);
  color: var(--red);
}

.topbar-network-badge.live > span {
  background: var(--red);
  box-shadow: 0 0 7px var(--red-glow);
}

.topbar-network-badge.unavailable {
  border-color: var(--border);
  background: rgba(13, 16, 23, 0.6);
  color: var(--text-faint);
}

.topbar-network-badge.unavailable > span {
  background: var(--text-faint);
}

/*
 * Always-visible connection status pills. Previously this lived only
 * inside DrawingToolbar's connection-status-stack, which is tucked behind
 * the "show toolbar" button when the drawing toolbar is collapsed (its
 * default state) - easy to miss and required opening the toolbar to
 * check. Moved into the topbar, which is never collapsed, so backend/
 * websocket health is visible at a glance at all times.
 */
.topbar-connection-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: rgba(13, 16, 23, 0.6);
}

.topbar-connection-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
}

button.topbar-connection-item:disabled {
  opacity: 1;
}

button.topbar-connection-item:not(:disabled) {
  cursor: pointer;
}

.topbar-connection-item + .topbar-connection-item {
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.topbar-connection-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 1px rgba(84, 93, 110, 0.25);
}

.topbar-connection-item.connected {
  color: var(--green);
}

.topbar-connection-item.connected .topbar-connection-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green-glow);
}

.topbar-connection-item.disconnected {
  color: var(--red);
}

.topbar-connection-item.disconnected .topbar-connection-dot {
  background: var(--red);
  box-shadow: 0 0 6px var(--red-glow);
}

.topbar-connection-item.connecting {
  color: var(--amber);
}

.topbar-connection-item.connecting .topbar-connection-dot {
  background: var(--amber);
  animation: topbar-connection-pulse 850ms ease-in-out infinite alternate;
}

.topbar-connection-item.disabled {
  color: var(--text-faint);
}
.topbar-connection-item.disabled .topbar-connection-dot {
  background: var(--text-faint);
  box-shadow: none;
}

@keyframes topbar-connection-pulse {
  from {
    opacity: 0.35;
    box-shadow: 0 0 0 rgba(245, 166, 35, 0);
  }

  to {
    opacity: 1;
    box-shadow: 0 0 7px var(--amber-glow);
  }
}

.orders-button,
.options-button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.orders-button:hover,
.options-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.orders-button.active,
.options-button.active {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(245, 166, 35, 0.35);
}
.orders-icon,
.options-icon {
  font-size: 14.5px;
  line-height: 1;
}

@media (max-width: 720px) {
  .topbar {
    height: 50px;
    gap: 8px;
    padding: 0 8px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .topbar::-webkit-scrollbar {
    height: 4px;
  }

  .topbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .topbar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border-strong);
  }

  .symbol {
    font-size: 13.5px;
  }
  .buttons {
    overflow-x: auto;
  }

  /*
   * Not enough horizontal room for the full "BACKEND"/"STREAM" labels
   * alongside the interval buttons and Orders/Options - collapse to just
   * the colored dots, still always visible (never hidden behind the
   * toolbar), just more compact.
   */
  .topbar-connection-group {
    gap: 8px;
    padding: 5px 7px;
  }

  .topbar-network-badge {
    min-height: 25px;
    padding: 0 7px;
  }

  .topbar-connection-item span:last-child {
    display: none;
  }

  .topbar-connection-item + .topbar-connection-item {
    padding-left: 8px;
  }

  .orders-button,
  .options-button {
    padding: 6px 8px;
  }
  .orders-button .orders-icon {
    font-size: 14.5px;
  }
  .options-button .options-icon + * {
    display: none;
  }
}

/* Mobile-only compact timeframe picker. Desktop keeps the original row. */
.mobile-timeframe-control {
  display: none;
  position: relative;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .desktop-timeframe-buttons {
    display: none;
  }

  .mobile-timeframe-control {
    display: block;
  }

  .orders-button {
    font-size: 12.5px;
    gap: 5px;
  }
}

.topbar-network-badge:hover {
  filter: brightness(1.15);
}

.topbar-network-badge:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* The compact picker also serves each desktop split pane. */
.mobile-timeframe-trigger {
  height: 30px;
  min-width: 50px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-timeframe-caret {
  font-size: 9px;
  transition: transform 120ms ease;
}

.mobile-timeframe-trigger.open .mobile-timeframe-caret {
  transform: rotate(180deg);
}

.mobile-timeframe-menu {
  position: fixed;
  z-index: 20000;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
}

.mobile-timeframe-group + .mobile-timeframe-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.mobile-timeframe-group-label {
  margin-bottom: 7px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

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

.mobile-timeframe-grid button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg-surface-raised);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-timeframe-grid button.active {
  border-color: rgba(245, 166, 35, 0.45);
  background: var(--amber-soft);
  color: var(--amber);
}

/* The same dark scrollbar in desktop split panes and narrow mobile toolbars. */
.topbar {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 166, 35, 0.5) var(--bg-panel);
}

.topbar::-webkit-scrollbar {
  height: 4px;
}

.topbar::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

.topbar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.5);
}

.topbar::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.75);
}

.topbar::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Prefer the compact, arrow-free scrollbar where pseudo-elements are supported. */
@supports selector(::-webkit-scrollbar) {
  .topbar {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
.chart-tabs-bar {
  position: relative;
  /* Keep the tabs (and especially the + menu) above chart overlays.
   * Chart overlays top out around z-index 240, while topbar popovers use
   * z-index 400+, so 260 puts this layer in the correct middle ground. */
  z-index: 260;
  min-height: 35px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px 8px 1px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.chart-tabs-scroll {
  min-width: 0;
  width: max-content;
  max-width: calc(100% - 36px);
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 29px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 166, 35, 0.5) rgba(255, 255, 255, 0.035);
}

.chart-tabs-scroll::-webkit-scrollbar {
  height: 6px;
}

.chart-tabs-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.chart-tabs-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.48);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.12);
}

.chart-tabs-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.78);
}

.chart-tab {
  /* Enough room for an icon + at least seven ticker characters + close.
   * Longer symbols can still ellipsize, and the tab strip scrolls instead
   * of crushing labels as more markets are opened. */
  min-width: 124px;
  max-width: 168px;
  height: 29px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: transparent;
  color: var(--text-dim);
}

.chart-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.chart-tab[draggable="true"] {
  cursor: grab;
}

.chart-tab[draggable="true"]:active {
  cursor: grabbing;
}

.chart-tab.dragging {
  opacity: 0.52;
  border-color: var(--accent);
}

.chart-tab.dragging .chart-tab-select,
.chart-tab.dragging .chart-tab-close {
  cursor: grabbing;
}

.chart-tab.active {
  border-color: var(--border-strong);
  background: var(--bg-app);
  color: var(--text);
}

.chart-tab-select {
  min-width: 0;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 9px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 650;
}

.chart-tab-select > span:last-child {
  min-width: 7ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-tab-symbol-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  object-fit: contain;
}

.chart-tab-source {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--text-faint);
}

.chart-tab-source.binance {
  background: #f0b90b;
}

.chart-tab-source.mexc {
  border-radius: 50%;
  transform: none;
  background: #1463ff;
}

.chart-tab-close {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  margin-right: 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.chart-tab-close:hover:not(:disabled) {
  background: rgba(224, 82, 82, 0.14);
  color: var(--red);
}

.chart-tab-close:disabled {
  opacity: 0;
  cursor: default;
}

.chart-tab-add-wrap {
  position: relative;
  flex-shrink: 0;
  height: 29px;
}

.chart-tab-add {
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-ui);
  width: 29px;
  height: 29px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.chart-tab-add:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--bg-hover);
  color: var(--text);
}

.chart-tab-add:disabled {
  opacity: 0.35;
  cursor: default;
}

.chart-tab-add-menu {
  position: fixed;
  z-index: 20000;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg-panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);

  /* Matches .symbol-switcher-list / .settings-body's scrollbar styling. */
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 166, 35, 0.5) rgba(255, 255, 255, 0.035);
}

.chart-tab-add-menu::-webkit-scrollbar {
  width: 6px;
}

.chart-tab-add-menu::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.chart-tab-add-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.48);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.12);
}

.chart-tab-add-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.78);
}

/* keep symbol search visible while the categorized list scrolls so a
 * large registry never forces the user to hunt manually through every group. */
.chart-tab-add-search-wrap {
  position: sticky;
  z-index: 2;
  top: -5px;
  padding: 7px 5px 8px;
  background: var(--bg-panel);
}

.chart-tab-add-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  outline: none;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.chart-tab-add-search::placeholder {
  color: var(--text-faint);
}

.chart-tab-add-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.16);
}

.chart-tab-add-empty {
  padding: 18px 10px 20px;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

/* category separators match the primary symbol switcher so the tab
 * picker stays scannable even after many dynamic markets have been registered. */
.chart-tab-add-category + .chart-tab-add-category {
  margin-top: 5px;
}

.chart-tab-add-category-heading {
  height: 25px;
  margin: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.chart-tab-add-category-heading > span:last-child {
  height: 1px;
  flex: 1;
  background: var(--border);
}

.chart-tab-add-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 78px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.chart-tab-add-menu button:hover {
  background: var(--bg-hover);
}

/* arrow-key navigation needs a persistent visual target while the
 * search input keeps focus, so keyboard selection is as clear as mouse hover. */
.chart-tab-add-menu button.keyboard-highlighted {
  outline: 1px solid rgba(245, 166, 35, 0.55);
  outline-offset: -1px;
  background: var(--bg-hover);
}

.chart-tab-add-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.chart-tab-add-label {
  font-family: var(--font-mono);
  font-weight: 700;
}

.chart-tab-add-name {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .chart-tabs-bar {
    padding-inline: 5px;
  }

  .chart-tab {
    min-width: 116px;
  }
}

/* keep the tab context menu visually inside the chart-tab design
 * system instead of looking like a separate browser/native popup. Reusing the
 * same surface, border, text and hover tokens makes it match active tabs. */
.chart-tab-context-menu {
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg-app);
  position: fixed;
  z-index: 1200;
  min-width: 112px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--bg-app);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

.chart-tab-context-menu button {
  width: 100%;
  height: 27px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

/* UX: use the exact tab hover treatment so context actions feel like part of
 * the same control family; the dangerous action stays red only as text. */
.chart-tab-context-menu button:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}

.chart-tab-context-menu button.danger {
  color: #ff6b6b;
}

.chart-tab-context-menu button:disabled {
  opacity: 0.42;
  cursor: default;
}

/* destructive tab deletion is confirmed inline so an accidental
 * right-click action cannot stop backend tracking without a deliberate Yes. */
.chart-tab-delete-confirm {
  padding: 4px 4px 3px;
  border-top: 1px solid var(--border);
}

.chart-tab-delete-confirm-label {
  padding: 3px 4px 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}

.chart-tab-delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.chart-tab-delete-confirm-actions button {
  text-align: center;
}

.chart-tab-context-error {
  max-width: 220px;
  padding: 5px 8px 3px;
  color: #ff8f8f;
  font-size: 10.5px;
  line-height: 1.35;
}

.chart-pane-status {
  flex-shrink: 0;
  align-self: flex-start;
  height: 29px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 4px 0 8px;
  color: var(--text-faint);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}
.chart-pane-status.is-active {
  color: #e5c995;
  text-shadow: 0 0 8px rgba(229, 201, 149, 0.22);
}
.chart-pane-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.35;
  transition:
    background 160ms ease,
    opacity 160ms ease,
    box-shadow 160ms ease;
}
.chart-pane-status.is-active .chart-pane-status-dot {
  background: #dfbd7b;
  opacity: 1;
  box-shadow: 0 0 7px rgba(223, 189, 123, 0.4);
}
.drawing-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 205;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 5px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transition:
    width 180ms ease,
    padding 180ms ease,
    border-right-width 180ms ease,
    opacity 140ms ease;
}

/*
 * The toolbar floats ABOVE the chart (position: absolute, taken out of
 * the workspace flex flow - see .workspace in App.css) rather than
 * sitting beside it as a flex sibling. That's deliberate: a flex sibling
 * whose width changes - even animated - still forces the chart-wrap
 * next to it to resize on every toggle, which is what caused the chart
 * to visibly shift. As an overlay, showing/hiding the toolbar never
 * changes the chart's box size at all; it only slides on top of it.
 */

/*
 * The toolbar stays mounted at all times (see isCollapsed in
 * DrawingToolbar.tsx) - only its width/padding animate down to 0 here.
 * Mounting/unmounting the whole component made its 44px width
 * appear/disappear in a single instant layout pass, which the chart's
 * ResizeObserver picked up as one abrupt jump instead of a smooth
 * resize. Animating the width on an always-mounted element instead
 * means ResizeObserver fires continuously across the transition, so the
 * chart glides to its new size in step with the toolbar collapsing.
 */
.drawing-panel.collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-width: 0;
  opacity: 0;
  pointer-events: none;
}

.tool-button {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 19.5px;
  line-height: 1;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}
.tool-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.tool-button.active {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(245, 166, 35, 0.35);
}

.tool-separator {
  width: 22px;
  flex-shrink: 0;
  height: 1px;
  margin: 3px 0;
  background: var(--border);
}

.tool-spacer {
  flex: 1;
}
.hotkeys-button {
  flex-shrink: 0;
  font-size: 17.5px;
  font-weight: 700;
}

.ruler-tool {
  font-size: 17px;
  gap: 1px;
}

.ruler-percent {
  font-size: 10px;
  font-weight: 800;
  transform: translateY(-4px);
}

/* custom dashed rectangle icon for the Alt+G marquee tool. Using CSS
 * rather than a text glyph keeps the icon visually consistent across OS fonts. */
.group-select-tool > span {
  width: 19px;
  height: 14px;
  border: 1.5px dashed currentColor;
  border-radius: 2px;
}
.chart-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 13px;
  transform: translate(-50%, -50%);
  color: rgba(98, 103, 109, 0.34);
  pointer-events: none;
  user-select: none;
}

.watermark-mark {
  width: 58px;
  height: 70px;
  flex: 0 0 58px;
  background-color: rgb(148 163 184 / 35%);
  -webkit-mask-image: url("./fyxtez-f-mark-alpha-D2hBryH4.png");
  mask-image: url("./fyxtez-f-mark-alpha-D2hBryH4.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.watermark-text {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
}

@media (max-width: 720px) {
  .watermark-text {
    font-size: 28px;
  }

  .watermark-mark {
    width: 43px;
    height: 52px;
    flex-basis: 43px;
  }
}
.trade-toast {
  /* unified with the canvas-centered notifications (AutoMarketOverlay's
   * .auto-market-error / .auto-market-instruction) instead of living as a
   * separate viewport-fixed toast pinned to the app's bottom-right corner -
   * having both meant two different notification systems could be visible
   * at once. This now renders inside .chart-wrap (position: relative), so
   * it's centered under the canvas rather than the whole window. */
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 240;
  max-width: min(420px, calc(100% - 24px));
  padding: 13px 18px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-family: var(--font-mono);
  /* bumped from 13.5px per request ("make font bigger size"). */
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  /*
   * this used to be `nowrap`, which was fine for the app's own
   * short, predictable success/pending messages ("Stop loss set @ X")
   * but broke the moment a longer message showed up - a raw passed-
   * through Binance error string (e.g. "Binance API error -2022:
   * ReduceOnly Order is rejected.") is wider than max-width: 420px, and
   * with nowrap there's nothing clipping or wrapping it, so it just
   * visibly spilled out past the box's right border instead of staying
   * contained. Wrapping keeps every message - short or long - inside
   * the box's actual visual bounds.
   */
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.trade-toast.success {
  border-left-color: var(--green);
}
.trade-toast.pending {
  border-left-color: var(--green);
  color: var(--green);
}
.trade-toast.error {
  border-left-color: var(--red);
  color: #ffc9d3;
}
.chart-timezone {
  position: absolute;
  right: calc(var(--pane-inset-right, 0px) + 8px);
  bottom: calc(var(--pane-inset-bottom, 0px) + 8px);
  z-index: 220;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 94%);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/*
 * Sits immediately right of .toolbar-reveal-button (top: 10px, left: 10px,
 * width: 30px in ChartPanel.css) - 10 + 30 + 10px gap = 50px. Positioned
 * independently of whether that button happens to be rendered (it only
 * shows up while the drawing toolbar is collapsed): the toolbar itself
 * lives in its own column outside the chart pane, so this corner of the
 * chart is always the same spot regardless of the toolbar's state.
 */
.candle-countdown {
  position: relative;
  z-index: 210;
  flex: 0 0 auto;
}

.candle-countdown-badge {
  height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 92%);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.candle-countdown-badge:hover,
.candle-countdown-badge.open {
  border-color: rgba(245, 166, 35, 0.4);
  background: var(--amber-soft);
  color: var(--amber);
}

.candle-countdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 400;
  min-width: 178px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
}

.candle-countdown-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  color: var(--text);
}

.candle-countdown-option.active {
  border-color: rgba(245, 166, 35, 0.4);
  background: var(--amber-soft);
}

.candle-countdown-option-interval {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.candle-countdown-option.active .candle-countdown-option-interval {
  color: var(--amber);
}

.candle-countdown-option-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  /*
   * the 1w row's value ("3d 09:47:42") has a space in it, which
   * without this wrapped onto its own line below "1w" the moment the row
   * got the least bit tight - looked like the row had broken layout.
   * This keeps the whole value glued together on one line no matter how
   * narrow the menu gets.
   */
  white-space: nowrap;
}

/*
 * the compact move control explicitly unlocks timer placement.
 * Keeping it separate from the countdown button preserves the existing
 * timeframe dropdown interaction during normal chart use.
 */
.candle-countdown-move-button {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 92%);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.62;
  transition:
    opacity 100ms ease,
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.candle-countdown:hover .candle-countdown-move-button,
.candle-countdown-move-button:focus-visible,
.candle-countdown-move-button.active {
  opacity: 1;
}

.candle-countdown-move-button.active {
  border-color: rgba(245, 166, 35, 0.55);
  background: var(--amber-soft);
  color: var(--amber);
}

/* cursor feedback makes the click → move → click placement state
 * obvious without changing the timer's compact visual footprint. */
.candle-countdown.move-armed .candle-countdown-badge {
  cursor: grab;
  border-color: rgba(245, 166, 35, 0.55);
}

.candle-countdown.moving .candle-countdown-badge {
  cursor: crosshair;
  color: var(--amber);
  background: var(--amber-soft);
}
.chart-context-badges {
  z-index: 209;
  min-width: 0;
  max-width: calc(100vw - 150px);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.current-day-badge,
.active-drawing-set-badge {
  height: 30px;
  max-width: 180px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex: 0 1 auto;
  border: 1px solid rgba(245, 166, 35, 0.34);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 92%);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawing-set-badge-wrap {
  position: relative;
  flex: 0 1 auto;
}

/* only the unsaved badge is interactive; saved-set badges remain the
 * same passive status label while the quick-save state is visually explicit.
 */
.active-drawing-set-badge-action {
  max-width: 240px;
  cursor: pointer;
}

.active-drawing-set-badge-action:hover,
.active-drawing-set-badge-action:focus-visible {
  border-color: rgba(245, 166, 35, 0.7);
  background: var(--amber-soft);
  outline: none;
}

.drawing-set-quick-save {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 220;
  width: 280px;
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 98%);
  box-shadow: var(--shadow-pop);
}

.drawing-set-quick-save input {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  outline: none;
  background: var(--bg-surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
}

.drawing-set-quick-save input:focus {
  border-color: rgba(245, 166, 35, 0.6);
}

.drawing-set-quick-save button {
  height: 30px;
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--amber);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.drawing-set-quick-save button:disabled {
  cursor: default;
  opacity: 0.4;
}

.drawing-set-quick-save > span {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.3;
}

.current-day-badge {
  flex: 0 0 auto;
  color: var(--text-dim);
  border-color: var(--border-strong);
}

@media (max-width: 720px) {
  .chart-context-badges {
    max-width: calc(100vw - 140px);
  }

  .current-day-badge,
  .active-drawing-set-badge {
    max-width: 110px;
  }
}
.chart-loader {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-app);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.chart-loader-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.chart-position-pnl-stack {
  position: absolute;
  top: 14px;
  right: calc(var(--pane-inset-right, 0px) + 14px);
  z-index: 225;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.chart-position-pnl {
  position: relative;
  min-width: 104px;
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 92%);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(4px);
}

.chart-position-pnl > span {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.chart-position-pnl > strong {
  font-size: 13.5px;
  font-weight: 700;
}

.chart-position-pnl.positive {
  border-color: rgb(52 211 153 / 42%);
  box-shadow: inset 2px 0 0 var(--green);
}

.chart-position-pnl.positive > strong {
  color: var(--green);
}

.chart-position-pnl.negative {
  border-color: rgb(240 69 98 / 42%);
  box-shadow: inset 2px 0 0 var(--red);
}

.chart-position-pnl.negative > strong {
  color: var(--red);
}

.chart-position-pnl.neutral > strong {
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .chart-position-pnl-stack {
    top: auto;
    right: auto;
    bottom: 34px;
    left: 46px;
    align-items: flex-start;
    gap: 4px;
  }

  .chart-position-pnl {
    min-width: 78px;
    height: 24px;
    padding: 0 6px;
    gap: 6px;
    background: rgb(13 16 23 / 82%);
    backdrop-filter: blur(2px);
  }

  .chart-position-pnl > span {
    font-size: 9px;
  }

  .chart-position-pnl > strong {
    font-size: 11.5px;
  }
}
.position-bracket-overlay {
  position: absolute;
  inset: 0;
  /* Share the chart's stacking context: bracket geometry belongs below the
   * drawing canvas (100), while individual controls belong above it. A single
   * overlay stacking context made TP/SL borders strike through order badges. */
  z-index: auto;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* TP/SL placement uses a window-level click-move-click handler. Capture the
 * intervening touch movement here so Lightweight Charts cannot pan at the
 * same time; the window handler still receives the bubbling pointer stream. */
.position-bracket-interaction-shield {
  position: absolute;
  inset: 0;
  z-index: 1000;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

.position-entry-line,
.position-stop-line {
  position: absolute;
  height: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.82);
  pointer-events: none;
}

/*
 * liquidation is a non-draggable danger boundary, so it spans the
 * entire chart instead of inheriting the user-resizable TP/SL zone width.
 * The saturated two-pixel red line plus glow separates it from the thinner
 * movable stop line; pointer-events stays disabled so it cannot intercept
 * chart gestures. React removes it together with the closed position.
 */
.position-liquidation-line {
  position: absolute;
  left: 0;
  height: 0;
  border-top: 2px solid #ff1744;
  box-shadow:
    0 0 5px rgba(255, 23, 68, 0.95),
    0 0 12px rgba(255, 23, 68, 0.58);
  color: #ff1744;
  pointer-events: none;
  z-index: 158;
}

.position-liquidation-line > span {
  position: absolute;
  right: 10px;
  /* center the 22px badge directly on the liquidation line. The old
     -25px offset floated it above the line and made it look attached to the
     neighbouring native price marker instead of to its own risk boundary. */
  top: -11px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #ff1744;
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.42);
  color: #ff4569;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.35px;
  white-space: nowrap;
}

/*
 * this is position:absolute inside .position-entry-line, whose own
 * width is now entryLineWidth (see PositionBracketOverlay.tsx) - the gap
 * from the entry candle to the LATEST candle, which can be only a few
 * pixels wide right after a position first opens. With only `left: 0`
 * set (no `right`), an absolutely positioned box with an auto width
 * shrink-to-fits *within the available space of its containing box* -
 * so a narrow entry-line container was squeezing this button group down
 * to a few pixels too, wrapping "TP FULL" onto two lines and making the
 * whole control visually spill outside the (separately, always
 * reasonably wide) TP/SL zone rectangles. `width: max-content` makes it
 * size off its own content instead, regardless of how narrow the entry
 * line it's anchored to currently is.
 */
.position-entry-controls {
  position: absolute;
  z-index: 159;
  left: 0;
  top: -11px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  will-change: transform;
}

/* A compact move arrow now travels with the complete entry action
 * row. Its interaction mirrors the candle-close timer arrow: one click picks
 * the row up immediately, pointer movement repositions it, and the next click
 * drops it. */
.position-entry-controls-move-button {
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  color: var(--text-faint);
  cursor: move;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.position-entry-controls-move-button:hover:not(:disabled),
.position-entry-controls-move-button.active {
  background: rgba(255, 255, 255, 0.075);
  color: var(--text);
}

.position-entry-controls-move-button:disabled {
  cursor: default;
  opacity: 0.5;
}

/* While picked up, make the row clearly feel movable without
 * changing the styling of the actual trading actions. */
.position-entry-controls.moving {
  cursor: move;
}

.position-entry-label {
  position: static;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 94%);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.35px;
  white-space: nowrap;
}

.position-bracket-handles {
  display: flex;
  gap: 4px;
}

.position-bracket-handle {
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  /* belt-and-suspenders alongside width: max-content above - keeps
     the button's own label from ever wrapping even if something else
     upstream constrains available width again in the future. */
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
}

.position-bracket-handle.take-profit {
  border: 1px solid rgba(52, 211, 153, 0.6);
  color: var(--green);
}

.position-bracket-handle.take-profit:hover:not(:disabled) {
  background: rgba(52, 211, 153, 0.12);
}

.position-bracket-handle.stop-loss {
  border: 1px solid rgba(240, 69, 98, 0.62);
  color: var(--red);
}

.position-bracket-handle.stop-loss:hover:not(:disabled) {
  background: rgba(240, 69, 98, 0.12);
}

.position-bracket-handle:disabled {
  cursor: pointer;
  opacity: 0.5;
}

.position-bracket-close {
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  border: 1px solid rgba(240, 69, 98, 0.62);
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  color: var(--red);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.position-bracket-close:hover:not(:disabled) {
  background: rgba(240, 69, 98, 0.16);
}

.position-bracket-close:disabled {
  cursor: pointer;
  opacity: 0.5;
}

/* Replace the destructive quick-close X with an inline YES / NO
 * decision after the first click. Matching the existing 22px controls keeps
 * confirmation beside the trade and avoids a modal obscuring the chart. */
.position-bracket-close-confirmation {
  display: inline-flex;
  gap: 4px;
}

.position-bracket-close-choice {
  height: 22px;
  padding: 0 6px;
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.position-bracket-close-choice.confirm {
  border: 1px solid rgba(240, 69, 98, 0.62);
  color: var(--red);
}

.position-bracket-close-choice.confirm:hover:not(:disabled) {
  background: rgba(240, 69, 98, 0.16);
}

.position-bracket-close-choice.cancel {
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}

.position-bracket-close-choice.cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.position-bracket-close-choice:disabled {
  cursor: pointer;
  opacity: 0.5;
}

.position-bracket-zone {
  position: absolute;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  pointer-events: none;
}

.position-bracket-zone.profit {
  background: rgba(52, 211, 153, 0.12);
  color: var(--green);
}

.position-bracket-zone.loss {
  background: rgba(240, 69, 98, 0.12);
  color: var(--red);
}

/* once a stop crosses entry and locks in profit, use an amber
 * red/green midpoint instead of danger-red. It is still an SL mechanically,
 * but the rectangle now communicates that the stop would close profitably. */
.position-bracket-zone.loss.profit-protected {
  background: rgba(245, 166, 35, 0.12);
  color: #f5a623;
}

/*
 * The persistent zone is the actual placed TP/SL range (confirmed or
 * optimistic), always visible - as opposed to the plain (non-persistent)
 * .position-bracket-zone above, which is only the live drag preview shown
 * while dragging a new placement. Slightly more transparent so an active
 * drag preview drawn on top of it is still easy to distinguish.
 */
.position-bracket-zone.persistent {
  background-color: rgba(52, 211, 153, 0.07);
}

.position-bracket-zone.loss.persistent {
  background-color: rgba(240, 69, 98, 0.07);
}

/* keep the locked-profit SL distinction on the quieter persistent
 * rectangle too; this rule follows the loss.persistent rule so it can override it. */
.position-bracket-zone.loss.persistent.profit-protected {
  background-color: rgba(245, 166, 35, 0.08);
}

/* Optimistic placement: submitted, not yet confirmed by the backend. */
.position-bracket-zone.pending {
  border-top-style: dashed;
  border-bottom-style: dashed;
  opacity: 0.8;
}

/* R labels sit inside both the persistent bracket and the live move
 * preview. They intentionally have no pill/background so they read as part of
 * the risk area rather than as another executable chart control. */
.position-bracket-r-multiple {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.35px;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

.position-bracket-zone > span {
  position: absolute;
  /* The selected SL/TP preview must also cover the liquidation boundary. */
  z-index: 159;
  right: 6px;
  top: 5px;
  min-height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgb(13 16 23);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  width: max-content;
}

.position-stop-line {
  border-top-color: rgba(240, 69, 98, 0.9);
  pointer-events: none;
}

/* Before a real reduce LIMIT exists, TP is a green planning line at
 * +1R/-1R's profit boundary. It has the same generous invisible grab strip as
 * SL; the first confirmed move submits the real order, at which point this
 * draft line disappears and the existing yellow open-order drawing takes over. */
.position-take-profit-line {
  position: absolute;
  height: 0;
  border-top: 1px solid rgba(52, 211, 153, 0.92);
  pointer-events: none;
  z-index: auto;
}

.position-take-profit-grab {
  position: absolute;
  z-index: 155;
  left: 0;
  right: 0;
  top: -5px;
  height: 10px;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

.position-take-profit-line > span {
  position: absolute;
  z-index: 159;
  right: 10px;
  top: -11px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid rgba(52, 211, 153, 0.62);
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  color: var(--green);
  cursor: ns-resize;
  font-size: 11.5px;
  font-weight: 800;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  white-space: nowrap;
}

.position-take-profit-line > span:hover {
  /* keep an opaque dark base under the hover tint. A translucent-only
   * hover background let the TP boundary line show through the middle of the
   * badge, making the control look visually sliced when hovered. */
  background: linear-gradient(rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.14)), rgb(13 16 23);
  border-color: rgba(52, 211, 153, 0.9);
}

.position-take-profit-draft-actions {
  position: absolute;
  z-index: 159;
  right: 10px;
  top: -33px;
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.position-take-profit-draft-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 3px;
  background: rgb(13 16 23);
  color: var(--green);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

.position-take-profit-draft-actions > button:hover {
  border-color: rgba(52, 211, 153, 0.7);
  background: linear-gradient(rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.1)), rgb(13 16 23);
}

.position-take-profit-line.controls-above .position-take-profit-draft-actions {
  top: -57px;
}

.position-take-profit-line.controls-below .position-take-profit-draft-actions {
  top: -9px;
}

/*
 * Invisible grab strip spanning the full width of the stop-loss line, a
 * few pixels above/below it, so the line itself can be dragged to a new
 * price the same way the TP limit-order line already can be. Only
 * rendered once the stop loss is confirmed (has a real algoId to
 * cancel-then-replace) - see the `savedStop &&` guard in the component.
 */
.position-stop-grab {
  position: absolute;
  z-index: 155;
  left: 0;
  right: 0;
  top: -5px;
  height: 10px;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

.position-stop-line.draggable:hover {
  border-top-color: rgba(240, 69, 98, 1);
}

/*
 * bumped from 9.5px per request ("id like this text a little
 * bigger") - this is the "SL FULL · <price>" label on the stop-loss
 * line. Height/padding grown to match so the larger text doesn't
 * overflow the pill vertically.
 */
.position-stop-line > span {
  position: absolute;
  /* Keep the badge above the liquidation boundary (158) when prices overlap. */
  z-index: 159;
  right: 10px;
  top: -11px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  /*
   * Absolutely-positioned flex elements with only `right` set (no
   * explicit width) don't reliably shrink-to-content across browsers -
   * some end up wrapping the text onto a second line instead, which then
   * overflowed past this box's fixed height. white-space + width force
   * single-line, shrink-to-content sizing regardless.
   */
  white-space: nowrap;
  width: max-content;
  border: 1px solid rgba(240, 69, 98, 0.62);
  border-radius: 3px;
  background: rgb(13 16 23);
  color: var(--red);
  font-size: 11.5px;
  font-weight: 800;
}

/* advertise and enable the visible SL FULL badge as a proper move
 * handle. The thin line grab-strip still works for experienced users, while
 * the bordered badge now provides the obvious clickable target it visually
 * appears to be. */
.position-stop-line > span.move-handle {
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

.position-stop-line > span.move-handle:hover {
  /* SL uses the same opaque-backed hover treatment as TP so the red
   * boundary line cannot bleed through the draggable label on hover. */
  background: linear-gradient(rgba(240, 69, 98, 0.14), rgba(240, 69, 98, 0.14)), rgb(13 16 23);
  border-color: rgba(240, 69, 98, 0.9);
}

.position-stop-line > button {
  position: absolute;
  z-index: 159;
  right: 10px;
  top: -11px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(240, 69, 98, 0.62);
  border-radius: 3px;
  background: rgb(13 16 23);
  color: var(--red);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.position-stop-line > button:hover:not(:disabled) {
  background: linear-gradient(rgba(240, 69, 98, 0.14), rgba(240, 69, 98, 0.14)), rgb(13 16 23);
}

.position-stop-line > button:disabled {
  cursor: pointer;
  color: var(--text-faint);
}

/*
 * when SL is close to entry, move its badge/X AWAY from the entry row.
 * The previous rule always moved the SL controls below the stop line. That
 * worked for a stop below entry, but a profitable LONG stop is above entry,
 * so moving it down placed `SL FULL · price` directly over HIDE / TP FULL / X
 * at certain Y-axis zoom levels. Directional classes now keep both rows apart.
 */
.position-stop-line.controls-above > span,
.position-stop-line.controls-above > button {
  top: -35px;
}

.position-stop-line.controls-below > span,
.position-stop-line.controls-below > button {
  top: 13px;
}

.position-stop-line.controls-above .position-stop-grab,
.position-stop-line.controls-below .position-stop-grab {
  top: -5px;
}

/* The old stop's cancel button remains visible during a replacement request.
 * Reserve its space whenever it exists, including the pending state. */
.position-stop-line.has-cancel-control > span {
  right: 34px;
}

.position-stop-line.pending > span {
  border-style: dashed;
}

.position-bracket-message {
  position: absolute;
  z-index: 159;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - 40px));
  padding: 6px 9px;
  border: 1px solid rgba(52, 211, 153, 0.38);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 96%);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}

.position-bracket-message.error {
  border-color: rgba(240, 69, 98, 0.45);
  color: var(--red);
}

/*
 * Triggered when the stop-loss row in PositionsPanel's Open Orders tab is
 * clicked (see coordinates.isStopHighlighted in PositionBracketOverlay.tsx,
 * driven by the same highlightedOrderIdRef/highlightedOrderUntilRef refs
 * that chart drawings already use for their own click-to-blink). Runs for
 * as long as that ref window is active, then stops on its own once the
 * "highlighted" class is removed - no fixed iteration count to keep in
 * sync with a duration elsewhere.
 */
@keyframes bracket-zone-highlight-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.position-bracket-zone.highlighted {
  animation: bracket-zone-highlight-pulse 300ms ease-in-out infinite;
}

/*
 * Color the pulse to match each zone's own theme (green for the profit/TP
 * zone, red for the loss/SL zone) rather than a single hardcoded color -
 * a red glow flashing over the green TP zone read as a danger signal on
 * what's actually a take-profit.
 */
.position-bracket-zone.loss.highlighted {
  box-shadow: 0 0 20px rgba(240, 69, 98, 0.6);
}

/* highlighting a profit-protecting SL must preserve its amber meaning
 * instead of temporarily turning the rectangle back into a red danger zone. */
.position-bracket-zone.loss.profit-protected.highlighted {
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.6);
}

.position-bracket-zone.profit.highlighted {
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.6);
}

@keyframes stop-line-highlight-pulse {
  0%,
  100% {
    border-top-color: rgba(240, 69, 98, 0.9);
  }

  50% {
    border-top-color: #fff3b0;
  }
}

.position-stop-line.highlighted {
  animation: stop-line-highlight-pulse 300ms ease-in-out infinite;
}

/*
 * Same idea as stop-line-highlight-pulse above, but for the plain (white
 * dashed) entry line, which never had a "highlighted" state before -
 * triggered when a row in the Positions tab is clicked (see
 * isPositionHighlighted in PositionBracketOverlay.tsx).
 */
@keyframes entry-line-highlight-pulse {
  0%,
  100% {
    border-top-color: rgba(148, 163, 184, 0.82);
  }

  50% {
    border-top-color: #fff3b0;
  }
}

.position-entry-line.highlighted {
  animation: entry-line-highlight-pulse 300ms ease-in-out infinite;
}

/*
 * Draggable strip along the right edge of the persistent TP/SL zone,
 * used to widen or narrow the zone horizontally (see beginEdgeDrag /
 * ZONE_RIGHT in PositionBracketOverlay.tsx). Purely a width control -
 * dragging this never changes entryY, stopY, or takeProfitY, only
 * paneLeft/paneWidth, so the TP/SL price lines themselves never move
 * vertically because of this interaction.
 *
 * this used to have `top: 0; bottom: 0`, stretching the clickable
 * strip across the ENTIRE chart height regardless of where the TP/SL
 * zones actually sit - so clicking anywhere along that vertical line, far
 * above or below the actual red/green rectangles, would arm the resize.
 * `top` and `height` are now set inline per-render (see
 * edgeHandleBounds in PositionBracketOverlay.tsx) to exactly the
 * vertical span the combined zones occupy, so the handle only lives
 * where the rectangles are actually visible.
 */
.position-bracket-edge-handle {
  position: absolute;
  width: 6px;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
  border-radius: 3px;
  transition: background 100ms ease;
  z-index: 156;
}

.position-bracket-edge-handle:hover,
.position-bracket-edge-handle.active {
  background: rgba(245, 166, 35, 0.3);
}

/* Compact control immediately left of TP FULL. When the user hides
 * long-term position controls it becomes the only remaining entry-row button,
 * so TP FULL / STOP LOSS / quick-close stay out of the way without making the
 * action irreversible from the chart. */
.position-bracket-visibility-toggle {
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  color: var(--text-faint);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.position-bracket-visibility-toggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.position-bracket-visibility-toggle:disabled {
  cursor: pointer;
  opacity: 0.5;
}

.position-take-profit-line.controls-above > span {
  top: -35px;
}

.position-take-profit-line.controls-below > span {
  top: 13px;
}
.auto-market-overlay {
  position: absolute;
  inset: 0;
  z-index: 218;
  pointer-events: none;
  font-family: var(--font-mono);
  user-select: none;
}

.auto-market-risk-zone {
  position: absolute;
  min-height: 2px;
  border-top: 1px solid rgba(240, 69, 98, 0.82);
  border-bottom: 1px solid rgba(240, 69, 98, 0.82);
  background: rgba(240, 69, 98, 0.12);
  color: var(--red);
  pointer-events: none;
}

.auto-market-risk-zone.invalid {
  border-color: rgba(245, 166, 35, 0.9);
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber);
}

.auto-market-risk-zone > span {
  position: absolute;
  left: 8px;
  right: auto;
  top: 9px;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgb(13 16 23 / 94%);
  /* bumped from 11.5px per request ("font size should be little higher"). */
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  /* AUTO LONG/SHORT describes the draft; it is not clickable.
   * Lower visual weight keeps attention on the enlarged SL handle and the
   * EXECUTE/CANCEL actions in both compact and full-height layouts. */
  opacity: 0.62;
}

.auto-market-entry-line,
.auto-market-stop-line {
  position: absolute;
  height: 0;
}

.auto-market-entry-line {
  border-top: 1px dashed rgba(226, 232, 240, 0.82);
  color: rgb(226 232 240);
}

.auto-market-entry-line > span,
.auto-market-stop-line > span {
  position: absolute;
  right: 6px;
  top: -10px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgb(13 16 23 / 96%);
  /* bumped from 11.5px per request ("font size should be little higher"). */
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* the initial Auto Market SL badge is the control that arms SL
 * placement, so give it a larger red-tinted click target than the passive
 * MARKET label. This improves discoverability without making the price zone
 * itself taller and therefore visually misrepresenting the actual risk. */
.auto-market-stop-line > span {
  top: -14px;
  min-height: 28px;
  padding-inline: 10px;
  background: rgba(47, 16, 25, 0.98);
  box-shadow: 0 0 0 1px rgba(240, 69, 98, 0.12);
  cursor: ns-resize;
}

.auto-market-stop-line:hover > span,
.auto-market-stop-line.armed > span {
  background: rgba(77, 20, 34, 0.98);
  box-shadow: 0 0 8px rgba(240, 69, 98, 0.24);
}

.auto-market-stop-line {
  z-index: 3;
  border-top: 2px solid var(--red);
  color: var(--red);
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

/*
 * Shown for the duration of a click-move-click stop-loss placement (see
 * isPlacingStop in AutoMarketOverlay.tsx) - the click that arms it has
 * already happened and the line is now tracking the mouse with nothing
 * held down, waiting for the confirming click. The brighter glow is the
 * same visual language the TP/SL zone's edge-resize handle already uses
 * for its own "armed" state (.position-bracket-edge-handle.active).
 */
.auto-market-stop-line.armed {
  filter: drop-shadow(0 0 4px currentColor);
}

.auto-market-stop-grab {
  position: absolute;
  left: 0;
  right: 0;
  /* match the larger visible SL badge with a forgiving 28px-high
   * line target, so the user does not need pixel-perfect pointer placement. */
  top: -14px;
  height: 28px;
  cursor: ns-resize;
}

.auto-market-controls {
  position: absolute;
  z-index: 5;
  width: 96px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: auto;
}

.auto-market-controls button {
  height: 29px;
  border-radius: 4px;
  font-family: var(--font-mono);
  /* bumped from 10.5px per request ("font size should be little higher"). */
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.auto-market-confirm {
  border: 1px solid rgba(52, 211, 153, 0.58);
  background: rgb(13 16 23 / 96%);
  color: var(--green);
}

.auto-market-confirm:hover:not(:disabled) {
  background: rgba(52, 211, 153, 0.12);
}

.auto-market-cancel {
  border: 1px solid rgba(240, 69, 98, 0.52);
  background: rgb(13 16 23 / 96%);
  color: var(--red);
}

.auto-market-cancel:hover:not(:disabled) {
  background: rgba(240, 69, 98, 0.12);
}

.auto-market-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.auto-market-error {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  /* bumped from 6px 9px / 10.5px per request ("make sure that this is larger"). */
  padding: 8px 12px;
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 96%);
  color: var(--amber);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/*
 * When the chart is zoomed far out, a 0.2% stop can occupy only a few
 * vertical pixels. In that state there is no honest way to fit every label
 * and both buttons inside the zone. The compact layout keeps the two price
 * labels on opposite horizontal edges and moves the action row directly
 * beside the trade, preserving readability without covering candles.
 */
.auto-market-risk-zone.compact {
  background: rgba(240, 69, 98, 0.09);
}

.auto-market-entry-line.compact > span {
  right: 5px;
}

.auto-market-stop-line.compact > span {
  left: 5px;
  right: auto;
}

.auto-market-controls.compact {
  height: 28px;
  transform: translateY(-50%);
  display: grid;
  /*
   * was `minmax(0, 1fr) 58px 50px`. Even after widening the overall
   * zone (see AUTO_MARKET_ZONE_WIDTH_PX in the .tsx), the summary chip's
   * "%" was still occasionally the first thing ellipsized whenever the
   * button font size grew alongside it (see .auto-market-controls button
   * above). Narrowing the two button columns slightly further (58/50 ->
   * 54/46) hands that width straight to the summary column via
   * minmax(0, 1fr), on top of the wider zone - between the two, the full
   * "AUTO LONG/SHORT X.XX%" string now has comfortable room at the
   * larger font size instead of just barely fitting.
   */
  grid-template-columns: minmax(0, 1fr) 54px 46px;
  align-items: stretch;
  gap: 3px;
  pointer-events: auto;
}

.auto-market-controls.compact button {
  height: 28px;
  min-width: 0;
  padding: 0 5px;
  /* bumped from 9.5px per request ("font size should be little higher"). */
  font-size: 10.5px;
  /*
   * "EXECUTE" fits this 54px-wide grid column fine, but its own
   * submitting-state label ("EXECUTING…") is longer and, with nothing
   * clipping overflow, just visibly spilled out past the button's right
   * edge into the CANCEL button sitting right next to it. Clipping with
   * an ellipsis here is a backstop for any future label change; the
   * label itself is also shortened specifically for this compact layout
   * (see the .tsx) so it isn't relying on the ellipsis to do all the work.
   */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auto-market-compact-summary {
  min-width: 0;
  height: 28px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(240, 69, 98, 0.58);
  border-radius: 4px;
  background: rgb(13 16 23 / 96%);
  color: var(--red);
  /* bumped from 9.5px per request ("font size should be little higher"). */
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* AUTO LONG/SHORT is descriptive state, not an action. Dimming it
   * makes the adjacent SL/EXECUTE/CANCEL controls read as the interactive
   * elements instead of presenting every red box with equal visual weight. */
  opacity: 0.62;
}

.auto-market-risk-zone.invalid
  + .auto-market-entry-line
  + .auto-market-stop-line
  + .auto-market-controls.compact
  .auto-market-compact-summary {
  border-color: rgba(245, 166, 35, 0.58);
  color: var(--amber);
}

/*
 * in non-compact mode the EXECUTE/CANCEL controls live in
 * the RIGHT half of the zone (see the .auto-market-controls left offset,
 * computed as coordinates.width - 88 in the .tsx). Anchoring this label
 * to the right (as the first-pass centering fix did) puts it in exactly
 * the same space as those controls - the controls render later in the
 * DOM/paint order, so they visibly cut through the label text, which is
 * the "AUTO LONG 0.20%" chopped up behind the buttons you saw.
 *
 * Anchoring the label to the LEFT instead keeps it in the half of the
 * zone the controls never occupy, so the two can never collide
 * regardless of zoom level, timeframe, or window size. The max-width
 * caps it a bit before the controls' left edge (roughly
 * 100% - (width - 88), with a small safety margin) so a long label
 * (double-digit %) ellipsizes instead of ever reaching under a button.
 */
.auto-market-risk-zone:not(.compact) > span {
  top: 50%;
  left: 8px;
  right: auto;
  max-width: calc(100% - 102px);
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-market-controls:not(.compact) {
  /*
   * "EXECUTE"/"CANCEL" only need modest width at this font-size, so
   * this stays narrow to leave the label on the other side of the zone
   * (see .auto-market-risk-zone:not(.compact) > span above) as much room
   * as possible before it needs to ellipsize.
   */
  width: 80px;
}

/* `stable` replaces the former zoom-dependent compact/full switch.
 * Summary and actions always occupy the same horizontal row with explicit
 * columns, so button text cannot crop and zooming cannot rearrange the UI. */
.auto-market-controls.stable {
  height: 30px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 64px;
  align-items: stretch;
  gap: 5px;
  pointer-events: auto;
}

.auto-market-controls.stable button {
  width: auto;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auto-market-controls.stable .auto-market-compact-summary {
  height: 30px;
  padding-inline: 8px;
}

/* keep the two price badges on opposite horizontal edges in the single
 * stable layout. Their vertical separation from the action row is calculated
 * in AutoMarketOverlay.tsx, so SL and AUTO LONG/SHORT never overlap. */
.auto-market-entry-line.stable > span {
  right: 5px;
}

.auto-market-stop-line.stable > span {
  left: 5px;
  right: auto;
}

.auto-market-risk-zone.stable {
  background: rgba(240, 69, 98, 0.09);
}

/*
 * this used to be its own one-off pill (rgba(13,16,23,96%) background,
 * border-radius: var(--radius-s), amber border all the way around) that
 * didn't match the shared toast look used everywhere else in the app (see
 * .trade-toast) - same amber-on-dark family, but a visibly different
 * container. Now uses the same chrome as .trade-toast (opaque
 * --bg-surface, --border-strong outline, --radius-m, --shadow-pop,
 * font-mono) with just a left accent border for the amber "heads up"
 * meaning, instead of a whole separate visual language.
 */
.auto-market-instruction {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-m);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25px;
  white-space: nowrap;
  pointer-events: none;
}

.auto-market-leverage {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border-strong);
}
/*
 * Sits above the raw candlestick chart (which has no z-index of its own,
 * so any positioned sibling renders above it regardless of z-index
 * value) but below the drawing canvas (z-index: 100) and every
 * trade-related overlay, so user drawings and TP/SL brackets always
 * stay visually on top of these session lines.
 */
.session-zones-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
}

.session-line {
  position: absolute;
  top: 0;
  width: 0;
  border-left-width: 1px;
  border-left-style: dashed;
  pointer-events: none;
}

.session-line-label {
  position: absolute;
  top: 6px;
  left: 5px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgb(13 16 23 / 82%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* shaded chart-time 13:00-16:00 New York kill-zone window. */
.session-kill-zone {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  border-left: 1px dashed;
  border-right: 1px dashed;
  pointer-events: none;
}

.session-kill-zone > span {
  position: absolute;
  top: 30px;
  left: 6px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgb(13 16 23 / 82%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
/*
 * Same stacking spot as .session-zones-overlay (see the comment there) -
 * above the raw candlestick chart, below the drawing canvas (z-index:
 * 100) and every trade-related overlay, so user drawings and TP/SL
 * brackets always stay visually on top of these marker lines.
 */
.time-markers-overlay {
  position: absolute;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
}

.time-marker-line {
  position: absolute;
  top: 0;
  width: 0;
  pointer-events: none;
}

.time-marker-line::before {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100%;
  border-left: 1px dashed var(--amber, #f5a623);
  content: "";
  opacity: 0.55;
}

.time-marker-label {
  position: absolute;
  top: 6px;
  left: 5px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgb(13 16 23 / 82%);
  color: var(--amber, #f5a623);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
/*
 * Sits above the candles (which have no z-index of their own) but below
 * the drawing canvas (z-index: 100) - same layering reasoning as
 * SessionZonesOverlay - so real user drawings and trade brackets always
 * stay on top of these. Non-clickable everywhere except the label's
 * buttons and the (invisible, thicker) reposition hit-area on each
 * line, so alert lines never intercept chart panning/zooming or the
 * right-click menu anywhere else.
 */
.alert-lines-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
}

.alert-line {
  position: absolute;
  left: 0;
  height: 0;
  border-top: 1px dashed rgb(148 163 184 / 55%);
  pointer-events: none;
}

.alert-line.repositioning {
  border-top-color: rgb(96 165 250 / 85%);
}

.alert-line-hidden {
  opacity: 0.25;
}

.alert-line-locked .alert-line-hit-area {
  pointer-events: none;
}

/*
 * An invisible, thicker strip centered on the line itself - a bare 0px
 * -tall border isn't grabbable with a mouse/finger, so this widens the
 * actual hit target to a comfortable band (same idea as the `threshold`
 * used for hit-testing regular drawings in useCoordinateMapping.ts's
 * findDrawingAt) without changing how the line looks. Click-move-click,
 * not press-and-hold - see AlertLinesOverlay.tsx.
 */
.alert-line-hit-area {
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

.alert-line-label {
  position: absolute;
  top: -13px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 8px;
  border: 1px solid rgb(148 163 184 / 45%);
  border-radius: 3px;
  background: rgb(30 34 45 / 55%);
  color: rgb(203 213 225 / 92%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  backdrop-filter: blur(1px);
}

.alert-line-control {
  height: 19px;
  padding: 0 6px;
  border: 1px solid rgb(148 163 184 / 35%);
  border-radius: 3px;
  background: transparent;
  color: rgb(148 163 184 / 78%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  pointer-events: auto;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.alert-line-control:hover,
.alert-line-control.active {
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.12);
  color: var(--amber, #f5a623);
}

/* DIM and RESTORE share a fixed width so toggling opacity cannot resize
 * the button or shift the rest of the alert-line label horizontally.
 */
.alert-line-opacity-control {
  width: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.alert-line-control:disabled,
.alert-line-side:disabled,
.alert-line-pattern:disabled,
.alert-line-info:disabled,
.alert-line-remove:disabled {
  cursor: default;
  opacity: 0.4;
  pointer-events: none;
}

/* the INFO control opens a compact textbox directly on its alert
   line, keeping optional notification context attached to the price level. */
.alert-line-info-wrap {
  position: relative;
  pointer-events: auto;
}

.alert-line-info {
  position: relative;
  height: 19px;
  padding: 0 6px;
  border: 1px solid rgb(148 163 184 / 35%);
  border-radius: 3px;
  background: transparent;
  color: rgb(148 163 184 / 75%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.alert-line-info:hover,
.alert-line-info-set {
  border-color: rgba(96, 165, 250, 0.55);
  color: rgb(147 197 253);
}

/* show a tiny persistent dot whenever INFO contains saved text, so
 * optional alert context is visible at a glance without opening the editor. */
.alert-line-info-set::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5a623;
  box-shadow: 0 0 0 1px rgb(10 10 10 / 90%);
}

.alert-line-info-input {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  width: 220px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 4px;
  outline: none;
  background: rgb(13 16 23 / 98%);
  color: rgb(226 232 240);
  box-shadow: 0 4px 16px rgb(0 0 0 / 45%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.alert-line-info-input::placeholder {
  color: rgb(148 163 184 / 65%);
}

.alert-line-side {
  height: 19px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  pointer-events: auto;
  transition: background 100ms ease;
}

.alert-line-side-long {
  border-color: rgba(52, 211, 153, 0.4);
  color: rgba(52, 211, 153, 0.75);
}

.alert-line-side-long:hover {
  background: rgba(52, 211, 153, 0.15);
}

.alert-line-side-short {
  border-color: rgba(240, 69, 98, 0.42);
  color: rgba(240, 69, 98, 0.78);
}

.alert-line-side-short:hover {
  background: rgba(240, 69, 98, 0.15);
}

/*
 * Wraps the pattern button + its popover so the popover can anchor to
 * it with `position: absolute` regardless of where this label sits on
 * the line. pointer-events: auto so clicks inside (including empty
 * padding, not just the buttons) are treated as "inside" for the
 * outside-click-closes-the-popover listener in AlertLinesOverlay.tsx.
 */
.alert-line-pattern-wrap {
  position: relative;
  pointer-events: auto;
}

.alert-line-pattern {
  height: 19px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(148 163 184 / 35%);
  border-radius: 3px;
  background: transparent;
  color: rgb(148 163 184 / 75%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.alert-line-pattern:hover {
  background: rgb(148 163 184 / 12%);
}

.alert-line-pattern-set {
  border-color: rgba(245, 166, 35, 0.55);
  color: var(--amber, #f5a623);
}

.alert-line-pattern-set:hover {
  background: rgba(245, 166, 35, 0.15);
}

.alert-line-pattern-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border-strong, rgb(148 163 184 / 45%));
  border-radius: 4px;
  background: rgb(13 16 23 / 97%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 45%);
}

.alert-line-pattern-option {
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: rgb(203 213 225 / 92%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  transition:
    background 100ms ease,
    color 100ms ease;
}

.alert-line-pattern-option:hover {
  background: rgb(148 163 184 / 12%);
}

.alert-line-pattern-option.active {
  color: var(--amber, #f5a623);
}

.alert-line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: rgb(203 213 225 / 85%);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background 100ms ease,
    color 100ms ease;
}

.alert-line-remove:hover {
  background: rgb(240 69 98 / 25%);
  color: var(--red, #f04562);
}

.alert-line-price {
  min-width: 0;
}

@media (max-width: 600px) {
  .alert-line-label {
    top: -31px;
    right: 6px;
    display: grid;
    grid-template-columns: 58px 58px minmax(82px, 1fr) 28px;
    grid-template-rows: 26px 26px;
    gap: 4px;
    width: calc(100% - 12px);
    max-width: 322px;
    padding: 4px 5px;
    white-space: nowrap;
  }

  .alert-line-label > .alert-line-control:first-of-type {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  .alert-line-label > .alert-line-opacity-control {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .alert-line-label > .alert-line-pattern-wrap {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }

  .alert-line-pattern-wrap .alert-line-pattern {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .alert-line-label > .alert-line-info-wrap {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .alert-line-info-wrap .alert-line-info {
    width: 100%;
  }

  .alert-line-label > .alert-line-side {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .alert-line-label > .alert-line-price {
    align-self: center;
    grid-column: 3 / 5;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    padding: 0 4px;
    text-align: center;
    text-overflow: ellipsis;
  }

  .alert-line-label > .alert-line-remove {
    grid-column: 4;
    grid-row: 1;
    width: 28px;
    height: 26px;
  }

  .alert-line-opacity-control {
    width: 100%;
  }

  .alert-line-control,
  .alert-line-info,
  .alert-line-pattern,
  .alert-line-side {
    height: 26px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .alert-line-info-input {
    right: auto;
    left: 0;
    width: min(220px, calc(100vw - 32px));
  }
}
/*
 * Anchored to the mouse position it's given (see useDrawingCanvas.ts's
 * hoveredDrawingInfo) and pushed up-and-left of it via the transform
 * below, so the card sits "top-left, slightly offset" of the cursor
 * instead of covering it. z-index sits above .pending-order-tooltip
 * (230) since both could plausibly be visible near the same drawing.
 */
.drawing-info-tooltip {
  position: absolute;
  z-index: 240;
  transform: translate(calc(-100% - 10px), calc(-100% - 10px));
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 96%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.drawing-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawing-info-row + .drawing-info-row {
  margin-top: 4px;
}

.drawing-info-label {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.drawing-info-value {
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 700;
}
/*
 * keep drawing notifications inside the actual candle plotting area.
 * Lightweight Charts renders the right price scale and bottom time scale
 * inside .chart-wrap, so anchoring at 16px covered both axes. These insets
 * deliberately reserve room for those scales while keeping the stack pinned
 * to the chart's lower-right candle area.
 */
.drawing-move-toast-stack {
  position: absolute;
  right: 82px;
  bottom: 38px;
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  width: min(340px, calc(100% - 112px));
  pointer-events: none;
}

.drawing-move-toast {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 10px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  pointer-events: auto;
}

/*
 * compact glyphs identify drawing moves and triggered alerts while
 * using almost no horizontal space, allowing the shared popup to stay short.
 */
.drawing-move-toast-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

/*
 * triggered alerts use the same toast chrome as drawing moves, but
 * slightly emphasize the icon so navigation-worthy events scan immediately.
 */
.drawing-move-toast.alert-triggered .drawing-move-toast-icon {
  color: var(--amber);
  font-weight: 800;
}

/*
 * price-alert navigation belongs to the full popup rather than a small
 * action button. Pointer/focus treatment makes that larger hit target obvious
 * while preserving keyboard access for the same action.
 */
.drawing-move-toast.alert-triggered {
  grid-template-columns: 26px minmax(0, 1fr);
  cursor: pointer;
}

.drawing-move-toast.alert-triggered:hover {
  border-color: rgba(245, 166, 35, 0.42);
  background: color-mix(in srgb, var(--bg-panel) 92%, var(--amber) 8%);
}

.drawing-move-toast.alert-triggered:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.drawing-move-toast-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.drawing-move-toast-copy strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawing-move-toast-copy span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawing-move-toast button {
  flex: 0 0 auto;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 6px;
  padding: 7px 10px;
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.drawing-move-toast button:hover {
  background: rgba(245, 166, 35, 0.18);
}

/*
 * the muted track makes the remaining lifetime readable at a glance,
 * while the amber fill drains right-to-left for each independent 3s timer.
 */
.drawing-move-toast-progress-track {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.drawing-move-toast-progress {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--amber);
  transform-origin: right center;
  animation: drawing-move-toast-countdown 3s linear forwards;
}

/*
 * price alerts intentionally stay on screen for 10 seconds so a user
 * watching another symbol has more time to notice the alert and open its chart.
 * match the new 10-second alert lifetime so the progress bar remains an
 * accurate visual countdown instead of disappearing halfway through the toast.
 */
.drawing-move-toast-progress.alert-progress {
  animation-duration: 10s;
}

@keyframes drawing-move-toast-countdown {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/*
 * on very narrow chart panes there may not be enough room to reserve the
 * full desktop price-scale inset. Keep the toast usable without letting it
 * overflow the chart or cover most of the candle area.
 */
@media (max-width: 700px) {
  .drawing-move-toast-stack {
    right: 64px;
    bottom: 34px;
    width: min(310px, calc(100% - 80px));
  }

  .drawing-move-toast {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    column-gap: 8px;
    padding-inline: 8px;
  }

  /* keep the full-toast alert hit target layout on narrow chart panes too. */
  .drawing-move-toast.alert-triggered {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .drawing-move-toast-icon {
    width: 22px;
    height: 22px;
    font-size: 17px;
  }
}
.chart-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.chart-wrap.drawing-interaction-active {
  overscroll-behavior: contain;
  touch-action: none;
}
.chart {
  /* Contain Lightweight Charts' internal canvas z-indices below our bracket
   * geometry. Order drawings (100) and individual bracket controls (155+)
   * can then stack independently above the base chart. */
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  transition: opacity 120ms ease;
}

.drawing-canvas {
  position: absolute;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Drawing editors may listen on chart-wrap or window depending on their
 * gesture. This transparent layer gives every active drawing interaction sole
 * ownership of touch input instead of also panning/zooming the chart below. */
.chart-interaction-shield {
  position: absolute;
  inset: 0;
  /* Stay above the canvas, but below the drawing toolbar and chart buttons so
   * an active mobile tool can always be cancelled. */
  z-index: 190;
  cursor: inherit;
  pointer-events: auto;
  touch-action: none;
}

.drawing-canvas.drawings-hidden {
  visibility: hidden;
}

.chart-wrap.tool-pen,
.chart-wrap.tool-text,
.chart-wrap.tool-box,
.chart-wrap.tool-group-select,
.chart-wrap.tool-vertical,
.chart-wrap.tool-horizontal,
.chart-wrap.tool-ruler {
  cursor: crosshair;
}
.chart-wrap.tool-trend,
.chart-wrap.tool-cursor.hovering-drawing {
  cursor: pointer;
}

/*
 * Horizontal (price) lines - order lines (limit/reduce/TP) and plain
 * horizontal drawings - only ever move vertically when dragged, exactly
 * like the stop-loss line (a separate DOM element in
 * PositionBracketOverlay that already hardcodes cursor: ns-resize on its
 * own grab strip). This rule is declared after .hovering-drawing above so
 * it wins the tie on specificity, giving these the same ns-resize cursor
 * instead of the generic pointer other drawing types (trend/box/pen/
 * vertical) keep.
 */
.chart-wrap.tool-cursor.hovering-horizontal-drawing {
  cursor: ns-resize;
}

/*
 * a lightweight active-tool hint follows the pointer while a drawing
 * tool is armed. JavaScript updates only transform/opacity through a ref (see
 * ChartPanel.tsx), keeping pointer moves out of React's render path.
 */
.tool-cursor-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 240;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(245 166 35 / 55%);
  border-radius: 6px;
  background: rgb(13 16 23 / 88%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 45%);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.tool-cursor-indicator--ruler {
  font-size: 10px;
}

.tool-cursor-indicator--group-select {
  border-style: dashed;
  font-size: 15px;
}

.chart-loading {
  opacity: 0;
}
.chart-ready {
  opacity: 1;
}

.pending-order-tooltip {
  position: absolute;
  z-index: 230;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 96%);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/*
 * Shown in the canvas's top-left corner when the drawing toolbar has
 * been collapsed (see DrawingToolbar's "«" button / App.tsx's
 * isToolbarCollapsed state). Brings the toolbar back.
 */
.toolbar-reveal-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 210;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 92%);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15.5px;
  transition:
    background 100ms ease,
    color 100ms ease,
    border-color 100ms ease;
}

.toolbar-reveal-button:hover {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(245, 166, 35, 0.4);
}

.temporary-trade-price-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 215;
  height: 0;
  border-top: 2px dashed rgb(184 192 207 / 90%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 70%));
}

.temporary-trade-price-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  min-width: 82px;
  padding: 3px 9px;
  border: 1px solid rgb(184 192 207 / 58%);
  border-radius: var(--radius-s);
  background: rgb(13 16 23 / 96%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
  color: rgb(226 232 240);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
/*
 * the candle countdown now follows the latest candle, so this
 * absolute wrapper owns its chart-relative position while the badge keeps
 * its existing dropdown/hover behavior unchanged.
 */
.candle-countdown-anchor {
  position: absolute;
  z-index: 210;
  pointer-events: auto;
}

/* Chart context badges stay in the top-left after the candle timer moved
 * beside the latest candle, preserving their stable non-price-dependent UI. */
.chart-top-context-row {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 210;
  max-width: calc(100% - 60px);
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.chart-top-context-row > * {
  pointer-events: auto;
}

.chart-text-editor {
  position: absolute;
  z-index: 240;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid var(--amber);
  outline: none;
  background: rgb(11 14 20 / 72%);
  box-shadow: 0 0 0 1px rgb(245 166 35 / 18%);
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1;
  text-align: left;
}

/*
 * existing reduce-only TP lines can be resized from a dedicated EDIT
 * button. The popover remains attached to the TP line while the chart moves.
 * UX: sizing uses one clean slider plus a live percentage readout so this stays
 * a lightweight chart control instead of looking like a full order form.
 */
.chart-reduce-order-editor {
  position: absolute;
  z-index: 245;
  width: 220px;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid rgb(245 166 35 / 36%);
  border-radius: 7px;
  background: rgb(12 15 21 / 98%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 42%);
  color: var(--text);
  font-family: var(--font-ui);
  user-select: none;
}

.chart-reduce-order-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.chart-reduce-order-editor-title {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.chart-reduce-order-editor button {
  border: 1px solid var(--border-strong);
  outline: none;
  background: rgb(20 24 32 / 96%);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.chart-reduce-order-editor-close {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  padding: 0;
  border-radius: 4px;
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  line-height: 1;
}

.chart-reduce-order-editor-close:hover:not(:disabled) {
  border-color: rgb(245 166 35 / 48%);
  color: var(--amber) !important;
}

.chart-reduce-order-editor-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* UX: custom range styling keeps the control visually quiet while preserving
 * native keyboard/drag behavior and the full 1-100% sizing range. */
.chart-reduce-order-editor-slider {
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--amber);
  cursor: pointer;
}

.chart-reduce-order-editor-value {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chart-reduce-order-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.chart-reduce-order-editor-actions button {
  height: 29px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}

.chart-reduce-order-editor-actions .secondary:hover:not(:disabled) {
  border-color: rgb(184 192 207 / 40%);
  background: rgb(184 192 207 / 7%);
}

.chart-reduce-order-editor-actions .primary {
  border-color: rgb(245 166 35 / 58%);
  background: rgb(245 166 35 / 10%);
  color: var(--amber);
}

.chart-reduce-order-editor-actions .primary:hover:not(:disabled) {
  border-color: var(--amber);
  background: rgb(245 166 35 / 16%);
}

.chart-reduce-order-editor button:disabled,
.chart-reduce-order-editor-slider:disabled {
  cursor: default;
  opacity: 0.5;
}
.chart-market-degraded {
  position: absolute;
  z-index: 190;
  top: 14px;
  left: 50%;
  width: min(560px, calc(100% - 28px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 11px 10px 14px;
  border: 1px solid rgba(240, 69, 98, 0.5);
  border-radius: var(--radius-s);
  background: rgba(29, 17, 21, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.chart-market-degraded > div {
  min-width: 0;
}
.chart-market-degraded strong {
  display: block;
  color: var(--red);
  font: 800 10px/1.2 var(--font-mono);
  letter-spacing: 0.8px;
}
.chart-market-degraded span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-market-degraded button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(240, 69, 98, 0.48);
  border-radius: var(--radius-s);
  background: rgba(240, 69, 98, 0.08);
  color: var(--red);
  font: 800 10.5px/1 var(--font-mono);
  cursor: pointer;
}
/* ============================================================
   Shared floating-panel shell — context menu, hotkeys popup,
   trade menu. Every one gets the same body, the same thin
   amber "power" bar across the top, and the same faint
   scanline texture. This trio is the signature move: it's
   what makes the three menus read as one instrument instead
   of three different apps stapled together.

   Imported by: ContextMenu.css, HotkeysPopup.css, TradeMenu.css
   (via each component importing this file directly).
   ============================================================ */

.context-menu,
.hotkeys-popup,
.trade-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.context-menu::before,
.hotkeys-popup::before,
.trade-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.012) 0px,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 3px
  );
}

.context-menu::after,
.hotkeys-popup::after,
.trade-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 20%, var(--amber) 80%, transparent);
  opacity: 0.75;
}

.context-menu > *,
.hotkeys-popup > *,
.trade-menu > * {
  position: relative;
  z-index: 1;
}

/* Shared close-button look (settings / hotkeys / trade menu) */
.settings-close,
.hotkeys-close,
.trade-menu-close {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition:
    background 100ms ease,
    color 100ms ease;
}
.settings-close:hover,
.hotkeys-close:hover,
.trade-menu-close:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}
.trade-menu-close:disabled {
  cursor: pointer;
  opacity: 0.45;
}
.context-menu {
  z-index: 10000;
  width: 204px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg-surface);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.context-menu-drawing {
  width: 228px;
}

.context-menu button {
  cursor: pointer;
}

.context-delete,
.context-action {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition:
    background 100ms ease,
    border-color 100ms ease,
    color 100ms ease;
}

.context-delete:hover,
.context-action:hover:not(:disabled) {
  background: var(--bg-hover);
  border-left-color: var(--amber);
  color: var(--amber);
}

.context-danger {
  color: var(--red);
}

.context-danger:hover:not(:disabled) {
  border-left-color: var(--red);
  color: var(--red);
}

.context-delete:disabled,
.context-action:disabled {
  cursor: pointer;
  opacity: 0.4;
}

.context-separator {
  width: calc(100% - 8px);
  height: 1px;
  margin: 3px 4px;
  background: var(--border);
}

.context-label {
  padding: 2px 10px 0;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.color-row {
  display: grid;
  grid-template-columns: repeat(7, 18px);
  align-items: center;
  gap: 8px;
  padding: 3px 10px 5px;
}

.color-button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 100ms ease,
    box-shadow 100ms ease;
}

.color-button:hover {
  transform: scale(1.2);
  box-shadow:
    0 0 0 2px var(--bg-surface),
    0 0 0 3px var(--border-strong);
}

.context-tf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 3px 4px 5px;
}

.context-align-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 3px 4px 5px;
}

.context-align-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition:
    background 100ms ease,
    border-color 100ms ease,
    color 100ms ease;
}

.context-align-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.context-align-active {
  border-color: var(--amber);
  color: var(--amber);
}

.context-align-active:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.context-tf-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background 100ms ease,
    border-color 100ms ease,
    color 100ms ease;
}

.context-tf-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

.context-tf-count {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

.context-tf-button:hover:not(:disabled) .context-tf-count {
  color: inherit;
}

.context-tf-button:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--red);
  color: var(--red);
}

.context-tf-button:disabled {
  cursor: pointer;
  opacity: 0.35;
}

.context-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 6px 6px;
}

.context-confirm-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.context-confirm-actions {
  display: flex;
  gap: 8px;
}

.context-confirm-yes,
.context-confirm-no {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 100ms ease,
    border-color 100ms ease;
}

.context-confirm-yes {
  border-color: var(--red);
  color: var(--red);
}

.context-confirm-yes:hover {
  background: var(--bg-hover);
}

.context-confirm-no {
  color: var(--text);
}

.context-confirm-no:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Right-click menus are pointer-anchored on desktop. On a phone the same
 * coordinates can put most of the menu below/alongside the narrow chart, so
 * present every chart/drawing context menu as a centered, safe-area modal. */
@media (max-width: 720px) and (pointer: coarse) {
  .context-menu,
  .context-menu-drawing {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right));
    top: calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2) !important;
    width: auto;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    overflow-y: auto;
    transform: translateY(-50%);
    overscroll-behavior: contain;
    box-shadow:
      0 0 0 100vmax rgb(4 6 10 / 68%),
      var(--shadow-pop);
  }

  .context-delete,
  .context-action,
  .context-align-button,
  .context-tf-button,
  .context-confirm-yes,
  .context-confirm-no {
    min-height: 44px;
    touch-action: manipulation;
  }
}
.trade-menu {
  z-index: 12000;
  width: 372px;
  padding: 16px;
}

.trade-menu-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  margin-bottom: 12px;
}

.trade-menu-heading {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}

.trade-menu-symbol {
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.trade-menu-subtitle {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.trade-menu-close {
  grid-column: 3;
  width: 28px;
  height: 28px;
  justify-self: end;
}

.trade-balance {
  min-height: 42px;
  margin-bottom: 14px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.018);
}

.trade-balance span {
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.trade-balance strong {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-balance-error strong {
  color: var(--red);
}

/*
 * Shown whenever the backend REST connection is down (see
 * backendConnection prop in TradeMenu.tsx). Every order-submitting
 * control in this menu is disabled at the same time, so this banner is
 * the explanation for why - placed right under the balance card, above
 * whichever step is currently showing.
 */
.trade-backend-warning {
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(240, 69, 98, 0.4);
  border-radius: var(--radius-s);
  background: var(--red-soft);
  color: #ffc9d3;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

/*
 * Leverage slider shown on the "Choose order type" step, before LIMIT/
 * MARKET/AUTO MARKET is picked - see TradeMenu.tsx. Applies to a plain
 * LIMIT or MARKET entry; AUTO MARKET derives its own leverage from the
 * chosen stop distance instead and ignores this value.
 */
.trade-leverage-card {
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-surface-raised);
}

.trade-leverage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trade-leverage-header span {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.trade-leverage-header strong {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 16.5px;
  font-weight: 700;
}

.trade-leverage-slider {
  width: 100%;
  margin: 12px 0 4px;
  accent-color: var(--amber);
}

.trade-leverage-slider:disabled {
  opacity: 0.5;
}

.trade-leverage-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.trade-leverage-status {
  margin-top: 8px;
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.trade-leverage-status.error {
  color: var(--red);
}

.trade-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.trade-section-label {
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-align: center;
  text-transform: uppercase;
}

.trade-price-card {
  min-height: 78px;
  margin-bottom: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-surface-raised);
  text-align: center;
}

.trade-price-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.trade-price-title i {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green-glow);
  animation: livePulse 1.8s ease-in-out infinite;
}

.selected-card .trade-price-title i {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
  animation: none;
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

.trade-price-card > strong {
  display: block;
  margin-top: 7px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 22.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.selected-card > strong {
  color: var(--amber);
}

.trade-price-card small {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 11.5px;
}

.trade-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trade-action {
  min-height: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  color: #071410;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition:
    filter 100ms ease,
    opacity 100ms ease,
    transform 80ms ease;
}

.trade-action:hover:not(:disabled) {
  filter: brightness(1.08);
}

.trade-action:active:not(:disabled) {
  transform: translateY(1px);
}

.trade-action:disabled {
  cursor: pointer;
  opacity: 0.5;
}

.trade-arrow {
  font-size: 18.5px;
  font-weight: 400;
  line-height: 1;
}

.trade-long {
  background: var(--green);
}

.trade-short {
  background: var(--red);
  color: #200a10;
}

.trade-market-action {
  min-height: 40px;
  background: transparent;
}

.trade-market-action.trade-long {
  color: var(--green);
  border-color: rgba(52, 211, 153, 0.4);
}

.trade-market-action.trade-short {
  color: var(--red);
  border-color: rgba(240, 69, 98, 0.4);
}

.trade-order-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.trade-order-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-strong) 25%,
    var(--border-strong) 75%,
    transparent
  );
}

.trade-order-divider b {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

@media (max-width: 720px) {
  .trade-menu {
    width: min(372px, calc(100vw - 20px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
}

/* A touch-screen trade ticket must behave like a modal, not like the
 * pointer-anchored desktop popover. The inline left/top coordinates still
 * describe the double-tap location, so override both only on coarse mobile
 * pointers and keep the complete ticket inside the device safe area. */
@media (max-width: 720px) and (pointer: coarse) {
  .trade-menu {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right));
    top: calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2) !important;
    width: auto;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    transform: translateY(-50%);
    overscroll-behavior: contain;
    box-shadow:
      0 0 0 100vmax rgb(4 6 10 / 68%),
      var(--shadow-pop);
  }
}

.trade-action:disabled:not(.submitting) {
  opacity: 0.32;
}

.trade-action.submitting:disabled {
  opacity: 0.78;
}

.trade-secondary {
  background: transparent;
  color: var(--amber);
  border-color: rgba(245, 166, 35, 0.4);
}

.trade-manage-card {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-surface-raised);
}

.trade-manage-header,
.trade-slider-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trade-manage-header span {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
}

.trade-manage-header strong {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 14.5px;
}

.trade-reduce-slider {
  width: 100%;
  margin: 14px 0 4px;
  accent-color: var(--amber);
}

.trade-slider-labels {
  margin-bottom: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.trade-reduce-button {
  width: 100%;
  color: var(--amber);
  background: transparent;
  border-color: rgba(245, 166, 35, 0.45);
}

.trade-position-badge {
  grid-column: 1 / -1;
  margin-top: 9px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.45px;
}

.trade-position-badge.long {
  border-color: rgba(52, 211, 153, 0.52);
  background: rgba(52, 211, 153, 0.12);
  color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}

.trade-position-badge.short {
  border-color: rgba(240, 69, 98, 0.52);
  background: rgba(240, 69, 98, 0.12);
  color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}

.trade-position-badge.flat,
.trade-position-badge.loading {
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
}

.trade-position-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.trade-position-breakdown {
  margin-top: 12px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg-app);
}

.trade-position-breakdown > div {
  min-width: 0;
  text-align: center;
}

.trade-position-breakdown span,
.trade-position-breakdown strong {
  display: block;
}

.trade-position-breakdown span {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.trade-position-breakdown strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-position-breakdown strong.reduce-quantity {
  color: var(--amber);
}

.trade-reduce-reserved-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.4;
}

.trade-menu-loading-body {
  min-height: 236px;
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}

.trade-menu-loading-line,
.trade-menu-loading-actions > div,
.trade-menu-loading-divider {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}

.trade-menu-loading-line::after,
.trade-menu-loading-actions > div::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  animation: tradeMenuSkeleton 1.15s ease-in-out infinite;
}

.trade-menu-loading-line {
  width: 48%;
  height: 11px;
  margin: 0 auto;
  border-radius: 999px;
}

.trade-menu-loading-line.wide {
  width: 66%;
}

.trade-menu-loading-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trade-menu-loading-actions > div {
  height: 44px;
  border-radius: var(--radius-m);
}

.trade-menu-loading-actions.compact > div {
  height: 40px;
}

.trade-menu-loading-divider {
  height: 1px;
  border: 0;
  background: var(--border);
}

@keyframes tradeMenuSkeleton {
  to {
    transform: translateX(100%);
  }
}

.trade-menu-header {
  position: relative;
  grid-template-columns: 1fr;
  padding-right: 18px;
}

.trade-menu-heading {
  grid-column: 1;
}

.trade-menu-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
}

.trade-reduce-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.trade-limit-reduce {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.025);
}

.trade-limit-reduce:hover:not(:disabled) {
  border-color: rgba(245, 166, 35, 0.5);
  background: var(--amber-soft);
  color: var(--amber);
}

.trade-step {
  padding-top: 4px;
}

.trade-step-copy {
  margin-bottom: 14px;
  text-align: center;
}

.trade-step-copy strong,
.trade-step-copy span {
  display: block;
}

.trade-step-copy strong {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.trade-step-copy span {
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.4;
}

.trade-step-copy.compact {
  min-width: 0;
  margin: 0;
  flex: 1;
  text-align: center;
}

.trade-order-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trade-order-type-button {
  min-height: 96px;
  padding: 13px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 80ms ease;
}

.trade-order-type-button:hover:not(:disabled) {
  border-color: rgba(245, 166, 35, 0.58);
  background: var(--amber-soft);
}

.trade-order-type-button:active:not(:disabled) {
  transform: translateY(1px);
}

.trade-order-type-button:disabled {
  cursor: pointer;
  opacity: 0.5;
}

.trade-order-type-button strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.trade-order-type-button small {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}

.trade-order-type-icon {
  min-width: 38px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 4px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.trade-direction-header {
  min-height: 42px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trade-step-back {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg-surface-raised);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.trade-step-back:hover:not(:disabled) {
  border-color: rgba(245, 166, 35, 0.45);
  color: var(--amber);
}

.trade-step-back:disabled {
  cursor: pointer;
  opacity: 0.5;
}

.trade-direction-actions .trade-action {
  min-height: 58px;
  font-size: 14.5px;
  letter-spacing: 0.7px;
}

@media (max-width: 420px) {
  .trade-order-type-grid {
    grid-template-columns: 1fr;
  }

  .trade-order-type-button {
    min-height: 76px;
  }
}

.trade-auto-market-button {
  grid-column: 1 / -1;
  min-height: 76px;
}

.trade-auto-market-button .trade-order-type-icon {
  min-width: 48px;
  border-color: rgba(240, 69, 98, 0.42);
  color: var(--red);
}

.trade-auto-market-button:hover:not(:disabled) {
  border-color: rgba(240, 69, 98, 0.55);
  background: rgba(240, 69, 98, 0.07);
}
.unregistered-symbol-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(245, 166, 35, 0.3);
  background: var(--amber-soft);
}

.unregistered-symbol-banner-text {
  min-width: 0;
  overflow: hidden;
  color: var(--amber);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unregistered-symbol-banner-text strong {
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

.unregistered-symbol-banner-action {
  flex-shrink: 0;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--amber);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
}

.unregistered-symbol-banner-action:hover:not(:disabled) {
  border-color: var(--amber);
  background: var(--amber-glow);
}

.unregistered-symbol-banner-action:disabled {
  cursor: default;
  opacity: 0.6;
}
.system-notice {
  position: fixed;
  z-index: 1200;
  top: calc(58px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  width: min(430px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(245, 166, 35, 0.52);
  border-radius: var(--radius-m);
  background: rgba(28, 24, 17, 0.98);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  color: var(--text-primary);
  overflow-x: hidden;
  overflow-y: auto;
}

.system-notice > div {
  min-width: 0;
}

.system-notice.error {
  border-color: rgba(240, 69, 98, 0.55);
  background: rgba(31, 18, 22, 0.98);
}

.system-notice.success {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 9%, rgba(12, 19, 18, 0.98));
}

.system-notice strong {
  display: block;
  color: var(--amber);
  font-size: 13px;
}

.system-notice.error strong {
  color: var(--red);
}

.system-notice.success strong {
  color: var(--green);
}

.system-notice p {
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.system-notice button {
  flex: 0 0 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 520px) {
  .system-notice {
    top: calc(52px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    left: calc(10px + env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    gap: 10px;
    padding: 12px 8px 12px 13px;
  }
}
.app {
  --settings-panel-width: 440px;
  --positions-panel-height: 280px;

  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  color: var(--text);
}

.app-main {
  min-height: 0;
  flex: 1;
  display: grid;
  /*
   * Column 2 is the settings panel's own column (0 when closed, its full
   * width when open - see .app-main.settings-open below), spanning BOTH
   * rows via .settings-panel's own grid-row (see SettingsPanel.css). This
   * replaces the old setup where the settings panel only lived inside
   * .workspace's row and .bottom-dock separately reserved a matching but
   * empty "corner" column for its own row - which visually looked like
   * one continuous panel but left the corner's height completely unused
   * dead space instead of being available to the settings panel's own
   * scrollable content.
   */
  grid-template-columns: minmax(0, 1fr) 0;
  grid-template-rows: minmax(0, 1fr) auto;
  transition: grid-template-columns 200ms ease;
}

.app-main.settings-open {
  grid-template-columns: minmax(0, 1fr) var(--settings-panel-width);
}

.workspace {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-height: 0;
  display: flex;
}

.bottom-dock {
  grid-column: 1;
  grid-row: 2;
  height: 0;
  min-height: 0;
  /*
   * Grid, not flex: a flex row item doesn't stretch to fill remaining
   * width on its own (that's a cross-axis-only default), so
   * PositionsPanel - which sets no explicit width of its own, relying on
   * the parent to hand it one - was left sized to its content instead of
   * spanning the full row. A single-column grid track gives it that
   * width for free via the default grid stretch, the same way it always
   * worked before this row had a second (now-removed) corner column.
   */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg-panel);
  border-top: 0 solid var(--border);
  transition:
    height 180ms ease,
    border-top-width 180ms ease;
}

.bottom-dock.open {
  height: var(--positions-panel-height);
  border-top-width: 1px;
}

/* Small first-open placeholders for panels that live in separate production
 * chunks. They use only App-level styles so they render before the deferred
 * component's own CSS has arrived. */
.lazy-panel-loading {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--bg-panel);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}

.settings-panel-loading {
  grid-column: 2;
  grid-row: 1 / -1;
  border-left: 1px solid var(--border);
}

.positions-panel-loading {
  width: 100%;
  height: var(--positions-panel-height);
}

.lazy-hotkeys-loading {
  position: fixed;
  left: 62px;
  bottom: 18px;
  z-index: 11000;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Pointer-resizing should track the mouse exactly, not trail behind the
 * 180ms open/close animation. :has() is supported by the Chromium runtime
 * this frontend targets (Brave/Tauri WebView). */
.bottom-dock:has(.positions-panel.resizing) {
  transition: none;
}

@media (max-width: 720px) {
  .app {
    --settings-panel-width: min(390px, 88vw);
  }

  /*
   * On mobile the orders/positions dock needs all the width it can get -
   * there's no room to also carve out a side column for settings. Give
   * it noticeably more vertical space than desktop (closer to a bottom
   * sheet) instead.
   */
  .bottom-dock.open {
    height: min(62vh, 480px);
  }

  /* Continuously resizing the chart throughout a height transition is costly
   * on Android WebView and made the positions sheet visibly trail the tap. */
  .bottom-dock,
  .bottom-dock.open {
    transition: none;
  }

  /*
   * SettingsPanel becomes a fixed, full-height overlay on mobile (see
   * SettingsPanel.css) instead of a real grid column, so reserving
   * var(--settings-panel-width) here would just waste horizontal space
   * on the content behind it for nothing. Keep the single full-width
   * column regardless of whether settings happens to be open.
   */
  .app-main.settings-open {
    grid-template-columns: minmax(0, 1fr) 0;
  }

  .settings-panel-loading {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10000;
    width: min(390px, 88vw);
  }

  .lazy-hotkeys-loading {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }
}

@media (max-width: 420px) {
  .bottom-dock.open {
    height: min(72vh, 560px);
  }
}

.chart-workspaces {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.chart-workspace-pane {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  position: relative;
}

.chart-workspaces.split {
  display: grid;
}
.chart-divider {
  position: relative;
  cursor: col-resize;
  touch-action: none;
  background: var(--bg-app);
  outline: none;
}
.chart-divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--border-strong);
}
.chart-divider:hover::after,
.chart-divider:focus-visible::after,
.resizing-charts > .chart-divider::after {
  background: #71809a;
}
.resizing-charts {
  cursor: col-resize;
  user-select: none;
}
.resizing-charts > .chart-workspace-pane {
  pointer-events: none;
}

.chart-workspaces.split .chart-workspace-pane.active .chart-tab.active {
  background: var(--bg-surface-raised);
  border-color: #526078;
}

.chart-workspaces.split .app-main.settings-open {
  grid-template-columns: minmax(0, 1fr) 0;
}
.chart-workspaces.split .settings-panel,
.chart-workspaces.split .settings-panel-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--settings-panel-width), 100%);
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 100;
}
.chart-workspaces.split .settings-panel:not(.open) {
  display: none;
}
.chart-workspaces.split .app-main {
  position: relative;
}

.terminal-workspace {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.terminal-workspace > .chart-workspaces {
  flex: 1;
  min-height: 0;
  height: auto;
}
.shared-positions-dock {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* Chart overlays stay within their workspace stacking layer, below Settings. */
.workspace {
  isolation: isolate;
  z-index: 0;
}

.terminal-topbar {
  flex-shrink: 0;
  min-height: 46px;
}

/* Keep charts and account synchronization mounted while changing only the view. */
.terminal-workspace:has(.chart-only) > .terminal-topbar,
.terminal-workspace:has(.chart-only) > .shared-positions-dock,
.chart-workspaces:has(.chart-only) > .chart-divider,
.chart-workspaces:has(.chart-only) > .chart-workspace-pane:not(:has(.chart-only)),
.chart-only > :not(.app-main),
.chart-only > .app-main > :not(.workspace),
.chart-only .workspace > :not(.chart-wrap),
.chart-only .chart-wrap > :not(.chart) {
  display: none !important;
}

.chart-workspaces:has(.chart-only) {
  display: flex;
}

.chart-only > .app-main {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr);
  transition: none;
}

@media (max-width: 720px) {
  .terminal-topbar {
    min-height: 50px;
  }
}
.hotkeys-popup {
  left: 62px;
  bottom: 18px;
  z-index: 11000;
  /* group-selection shortcuts include mouse gestures as well as keys;
   * the old 320px panel forced their descriptions into cramped line breaks. */
  width: min(390px, calc(100vw - 78px));
  max-height: calc(100dvh - 36px);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.hotkeys-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.hotkeys-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}
.hotkeys-list > div {
  display: grid;
  /*
   * auto (not a fixed px) for every kbd column: each row here is its OWN
   * independent grid (this selector applies `display: grid` per-row, not
   * to one shared parent grid), so there's no cross-row alignment being
   * lost by doing this - but a fixed px width previously meant any label
   * wider than that number (e.g. "Wheel", "Drag") just overflowed its
   * column's box instead of the column growing to fit it.
   */
  grid-template-columns: auto 12px auto 1fr;
  align-items: center;
  min-height: 26px;
  color: var(--text-dim);
  font-size: 13.5px;
}
/* the close-tab shortcut has three keys, so it needs two extra
 * grid tracks while retaining the same alignment as the two-key rows.
 */
.hotkeys-list > div.hotkeys-triple {
  grid-template-columns: auto 12px auto 12px auto 1fr;
}

/* keep the new group-selection block visually consistent with the
 * ordinary two-key rows while giving its concise descriptions enough room. */
.hotkeys-list > div.hotkeys-group-row {
  grid-template-columns: auto 12px auto minmax(130px, 1fr);
}

.hotkeys-list > div.hotkeys-gesture-row {
  /* 154px plus the keycap's horizontal padding was not enough for the
   * full gesture, so the final Click wrapped onto a second line. Reserve the
   * actual rendered width and keep the description in its own flexible track. */
  grid-template-columns: 174px minmax(0, 1fr);
  column-gap: 10px;
}

.hotkeys-list > div.hotkeys-gesture-row kbd {
  box-sizing: border-box;
  width: 174px;
  padding-inline: 8px;
  letter-spacing: 0.1px;
  white-space: nowrap;
  justify-content: flex-start;
  text-align: left;
}

.hotkeys-list > div.hotkeys-gesture-row span {
  margin-left: 0;
}
.hotkeys-list > div:nth-last-child(-n + 2) {
  grid-template-columns: auto 1fr;
}
.hotkeys-list span {
  margin-left: 8px;
  color: var(--text);
  /*
   * Grid items default to a min-width of "auto" (their content's natural,
   * unwrapped width), which overrides the 1fr track and lets long text
   * push the whole row - and the fixed-width popup - wider than intended
   * instead of wrapping. min-width: 0 lets the column actually shrink to
   * its 1fr share and wrap normally within it.
   */
  min-width: 0;
}
.hotkeys-list kbd {
  display: inline-flex;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-s);
  background: var(--bg-surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 720px) {
  .hotkeys-popup {
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 16px);
    padding: 12px;
  }

  .hotkeys-header {
    margin-bottom: 10px;
  }

  .hotkeys-list {
    gap: 6px;
  }

  .hotkeys-list > div {
    font-size: 12.5px;
  }

  .hotkeys-list > div.hotkeys-group-row {
    grid-template-columns: auto 12px auto minmax(0, 1fr);
  }

  .hotkeys-list > div.hotkeys-gesture-row {
    grid-template-columns: minmax(146px, auto) minmax(0, 1fr);
    column-gap: 8px;
  }

  .hotkeys-list > div.hotkeys-gesture-row kbd {
    width: auto;
    min-width: 146px;
    padding-inline: 6px;
  }

  .hotkeys-list span {
    overflow-wrap: anywhere;
  }
}
/* ============================================================
   FYXTEZ TERMINAL — design system
   ------------------------------------------------------------
   Point of view: this is an instrument panel for a live BTC
   perpetual, not a generic SaaS dashboard. Two deliberate
   choices carry that:

   1. Amber is the single accent color (a Bloomberg/exchange-
      terminal cue) instead of the default app-blue. It marks
      anything the user is actively pointing at or editing.
   2. Manrope is shared by labels, controls and chart annotations.
      Tabular figures keep changing prices and PNL values aligned.

   Buy/sell keep the standard green/red vocabulary traders
   already know — that's not a place to be original.
   ============================================================ */

:root {
  /* surfaces — near-black, slightly cool, never blue-grey */
  --bg-app: #0b0e14;
  --bg-panel: #0d1017;
  --bg-surface: #10141b;
  --bg-surface-raised: #151a22;
  --bg-hover: #1c222c;
  --bg-input: #0c0f15;

  /* borders */
  --border: #1e2530;
  --border-strong: #2c3543;

  /* text */
  --text: #edf0f6;
  --text-dim: #8991a3;
  --text-muted: var(--text-dim);
  --text-faint: #545d6e;

  /* the one accent */
  --amber: #f5a623;
  --amber-dim: #b8791c;
  --amber-glow: rgba(245, 166, 35, 0.35);
  --amber-soft: rgba(245, 166, 35, 0.1);

  /* trading semantics — do not repurpose these for UI chrome */
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --green-glow: rgba(52, 211, 153, 0.45);
  --red: #f04562;
  --red-soft: rgba(240, 69, 98, 0.12);
  --red-glow: rgba(240, 69, 98, 0.4);

  /* type */
  --font-ui: "Manrope Variable", sans-serif;
  --font-mono: var(--font-ui);

  /* shape — sharper, "panel" corners, not bubbly consumer-app ones */
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-app);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

* {
  box-sizing: border-box;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
.desktop-setup {
  align-items: center;
  background: radial-gradient(circle at 75% 5%, rgb(230 165 48/10%), transparent 42%), #07090d;
  color: #edf0f5;
  display: flex;
  font-family: var(--font-ui);
  inset: 0;
  justify-content: center;
  min-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  padding: clamp(32px, 5vw, 84px);
  position: fixed;
  width: 100%;
  z-index: 10000;
}
.desktop-setup-card {
  background: #101319;
  border: 1px solid #2b303a;
  border-radius: 10px;
  box-shadow: 0 32px 110px rgb(0 0 0/55%);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: min(820px, calc(100dvh - 96px));
  max-width: 1280px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
.desktop-setup-card.single-step {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.desktop-setup-header > div,
.desktop-setup-body > *,
.desktop-setup-fields,
.desktop-setup-actions,
.desktop-setup-actions > div {
  min-width: 0;
}
.desktop-setup-header {
  align-items: center;
  border-bottom: 1px solid #252a32;
  display: flex;
  gap: 24px;
  padding: 36px 48px;
}
.desktop-setup-header img {
  height: 64px;
  object-fit: contain;
  width: 48px;
}
.desktop-setup-header small,
.desktop-setup-step-copy > span {
  color: #dca33b;
  font: 700 11px var(--font-ui);
  letter-spacing: 0.17em;
}
.desktop-setup-header h1 {
  font-size: clamp(36px, 3vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 8px 0;
}
.desktop-setup-header p {
  color: #828a98;
  font-size: 15px;
  margin: 0;
}
.desktop-setup-steps {
  background: #0c0f14;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 48px;
}
.desktop-setup-steps div {
  align-items: center;
  border-bottom: 2px solid #272c35;
  color: #626a78;
  display: flex;
  font: 700 11px var(--font-ui);
  gap: 12px;
  letter-spacing: 0.12em;
  padding: 23px 0;
}
.desktop-setup-steps div.active {
  border-color: #e5a736;
  color: #e7ebf2;
}
.desktop-setup-steps div.done {
  border-color: #547b68;
  color: #8ebca5;
}
.desktop-setup-steps b {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  font-size: 9px;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.desktop-setup-body {
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(300px, 0.75fr) minmax(420px, 1.25fr);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 56px 64px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.desktop-setup-step-copy h2 {
  font-size: clamp(34px, 3vw, 50px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 18px 0;
}
.desktop-setup-step-copy p {
  color: #929aa8;
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  max-width: 470px;
}
.desktop-setup-step-copy em {
  color: #8ebca5;
  display: block;
  font-size: 13px;
  font-style: normal;
  margin-top: 24px;
}
.desktop-setup-fields {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.desktop-setup-fields aside {
  background: rgb(229 167 54/5%);
  border: 1px solid rgb(229 167 54/25%);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 7px;
  padding: 18px 20px;
}
.desktop-setup-fields aside strong {
  color: #e3aa40;
}
.desktop-setup-fields aside span {
  color: #8e96a4;
  line-height: 1.55;
}
.desktop-setup-fields label {
  color: #bbc1ca;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
}
.desktop-setup-fields input {
  background: #080a0e;
  border: 1px solid #343a46;
  border-radius: 5px;
  color: #f1f3f7;
  font: 15px var(--font-ui);
  outline: 0;
  padding: 16px;
  min-width: 0;
  width: 100%;
}
.desktop-setup-fields input:focus {
  border-color: #dda139;
  box-shadow: 0 0 0 3px rgb(221 161 57/10%);
}
.desktop-setup-actions {
  align-items: center;
  background: #0c0f14;
  border-top: 1px solid #252a32;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 86px;
  padding: 18px 48px;
}
.desktop-setup-actions > span {
  color: #646c79;
  font: 10px var(--font-ui);
}
.desktop-setup-actions > div {
  display: flex;
  gap: 12px;
  justify-self: end;
}
.desktop-setup-actions button {
  border-radius: 4px;
  cursor: pointer;
  font: 700 11px var(--font-ui);
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 0 22px;
}
.desktop-setup-actions button:disabled {
  cursor: wait;
  opacity: 0.5;
}
.desktop-setup-actions .primary {
  background: #e8aa37;
  border: 1px solid #e8aa37;
  color: #15110a;
}
.desktop-setup-actions .secondary,
.desktop-setup-actions .skip {
  background: transparent;
  border: 1px solid #353b46;
  color: #8f97a5;
}
.desktop-setup-actions .skip {
  border-color: transparent;
}
.desktop-setup-error {
  background: rgb(228 72 93/8%);
  border: 1px solid rgb(228 72 93/30%);
  color: #ef8796;
  font: 12px var(--font-ui);
  padding: 14px;
}
.desktop-setup-loading {
  color: #929aa8;
  font: 14px var(--font-ui);
}
@media (max-width: 900px) {
  .desktop-setup {
    height: 100dvh;
    padding: 12px;
    position: fixed;
  }
  .desktop-setup-card {
    height: calc(100dvh - 24px);
    min-height: 0;
  }
  .desktop-setup-header {
    gap: 16px;
    padding: 18px 20px;
  }
  .desktop-setup-header img {
    height: 44px;
    width: 34px;
  }
  .desktop-setup-header h1 {
    font-size: clamp(28px, 7vw, 38px);
    margin: 6px 0;
  }
  .desktop-setup-header p {
    font-size: 14px;
  }
  .desktop-setup-steps {
    padding: 0 20px;
  }
  .desktop-setup-steps div {
    gap: 8px;
    padding: 14px 0;
  }
  .desktop-setup-steps b {
    height: 24px;
    width: 24px;
  }
  .desktop-setup-body {
    gap: 22px;
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
  .desktop-setup-step-copy h2 {
    font-size: clamp(28px, 8vw, 38px);
    margin: 10px 0;
  }
  .desktop-setup-step-copy p {
    font-size: 15px;
    line-height: 1.5;
  }
  .desktop-setup-step-copy em {
    margin-top: 14px;
  }
  .desktop-setup-fields {
    gap: 15px;
  }
  .desktop-setup-fields aside {
    font-size: 13px;
    padding: 14px 16px;
  }
  .desktop-setup-fields label {
    gap: 7px;
  }
  .desktop-setup-fields input {
    min-height: 46px;
    padding: 12px 14px;
  }
  .desktop-setup-actions {
    grid-template-columns: auto 1fr;
    min-height: 68px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .desktop-setup-actions > span {
    display: none;
  }
  .desktop-setup-actions > div {
    justify-self: end;
  }
}

@media (max-width: 520px) {
  .desktop-setup {
    padding: 0 max(env(safe-area-inset-right), 0px) 0 max(env(safe-area-inset-left), 0px);
  }
  .desktop-setup-card {
    border: 0;
    border-radius: 0;
    height: 100dvh;
  }
  .desktop-setup-header {
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  }
  .desktop-setup-header img {
    display: none;
  }
  .desktop-setup-header h1 {
    font-size: 24px;
  }
  .desktop-setup-header p {
    display: none;
  }
  .desktop-setup-steps {
    padding: 0 14px;
  }
  .desktop-setup-steps div {
    font-size: 9px;
    gap: 6px;
    letter-spacing: 0.08em;
    padding: 11px 0;
  }
  .desktop-setup-steps b {
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
  }
  .desktop-setup-body {
    align-content: start;
    gap: 12px;
    padding: 14px 16px 28px;
    scrollbar-gutter: auto;
  }
  .desktop-setup-step-copy h2 {
    font-size: 24px;
    margin: 4px 0 6px;
  }
  .desktop-setup-step-copy p {
    font-size: 13px;
    line-height: 1.4;
  }
  .desktop-setup-fields {
    gap: 12px;
  }
  .desktop-setup-fields aside {
    gap: 4px;
    padding: 10px 12px;
  }
  .desktop-setup-fields aside span {
    line-height: 1.35;
  }
  .desktop-network-picker > div {
    gap: 8px;
  }
  .desktop-network-picker button {
    min-width: 0;
    padding: 12px;
  }
  .desktop-mainnet-confirmation {
    padding: 10px 12px;
  }
  .desktop-setup-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    max-width: 100%;
    overflow: hidden;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .desktop-setup-actions > i {
    display: none;
  }
  .desktop-setup-actions > .secondary {
    flex: 0 0 auto;
    min-width: 68px;
  }
  .desktop-setup-actions > div {
    display: grid;
    flex: 1 1 auto;
    gap: 6px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    min-width: 0;
    width: 100%;
  }
  .desktop-setup-actions button {
    min-height: 48px;
    font-size: 10px;
    letter-spacing: 0.05em;
    min-width: 0;
    padding: 0 8px;
    white-space: nowrap;
  }
  .desktop-setup-actions .skip,
  .desktop-setup-actions .primary {
    width: 100%;
  }
  .desktop-setup-actions .skip {
    background: #11151b;
    border-color: #353b46;
  }
}

@media (max-height: 560px) {
  .desktop-setup {
    padding: 0;
  }
  .desktop-setup-card {
    border-radius: 0;
    height: 100dvh;
  }
  .desktop-setup-header {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .desktop-setup-header img,
  .desktop-setup-header p {
    display: none;
  }
  .desktop-setup-header h1 {
    font-size: 25px;
    margin: 4px 0 0;
  }
  .desktop-setup-steps div {
    padding-bottom: 8px;
    padding-top: 8px;
  }
  .desktop-setup-body {
    padding-bottom: 18px;
    padding-top: 16px;
  }
}

/* Save feedback must stay visible even when the credential fields are scrolled. */
.desktop-setup-actions > .desktop-setup-error {
  display: block;
  grid-column: 1 / -1;
  justify-self: stretch;
  margin-bottom: 12px;
  max-height: 20dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
/* Navigation layout overrides kept separate from the generated compact theme. */
.desktop-setup-actions {
  gap: 24px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.desktop-setup-actions > span {
  justify-self: center;
  white-space: nowrap;
}

.desktop-setup-actions button {
  width: auto;
}

.desktop-setup-actions > .secondary {
  justify-self: start;
  min-width: 104px;
}

.desktop-network-picker {
  border: 0;
  margin: 0;
  padding: 0;
}

.desktop-network-picker legend {
  color: #bbc1ca;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.desktop-network-picker > div {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.desktop-network-picker button {
  background: #080a0e;
  border: 1px solid #343a46;
  border-radius: 5px;
  color: #8e96a4;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  text-align: left;
}

.desktop-network-picker button strong {
  color: #d5dae2;
  font: 700 12px var(--font-ui);
  letter-spacing: 0.08em;
}

.desktop-network-picker button span {
  font-size: 12px;
}

.desktop-network-picker button.selected {
  background: rgb(84 123 104 / 10%);
  border-color: #547b68;
}

.desktop-network-picker button.selected strong {
  color: #8ebca5;
}

.desktop-network-picker button.selected.danger {
  background: rgb(228 72 93 / 8%);
  border-color: #b94c5e;
}

.desktop-network-picker button.selected.danger strong {
  color: #ef8796;
}

.desktop-mainnet-confirmation {
  align-items: center;
  background: rgb(228 72 93 / 7%);
  border: 1px solid rgb(228 72 93 / 28%);
  display: flex !important;
  flex-direction: row !important;
  padding: 14px 16px;
}

.desktop-mainnet-confirmation input[type="checkbox"] {
  appearance: auto;
  accent-color: #e4485d;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 16px;
  height: 16px;
  min-height: 16px;
  min-width: 16px;
  margin: 0;
  outline: 0;
  padding: 0;
  width: 16px;
}

.desktop-mainnet-confirmation input[type="checkbox"]:focus {
  border: 0;
  box-shadow: none;
}

.desktop-mainnet-confirmation span {
  color: #ef9daa;
  font-size: 12px;
}

.desktop-setup-loading {
  background: #101319;
  border: 1px solid #2b303a;
  border-radius: 8px;
  padding: 34px 38px;
  width: min(520px, calc(100vw - 48px));
}

.desktop-setup-loading .loading-indicator--panel {
  margin-top: 0;
}

@media (max-width: 900px) {
  .desktop-setup-actions {
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .desktop-setup-actions {
    gap: 8px;
  }

  .desktop-setup-actions > .secondary {
    min-width: 68px;
  }

  .desktop-network-picker button {
    padding: 12px;
  }
}
.android-back-exit-hint {
  position: fixed;
  z-index: 3000;
  right: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(50%);
  max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  padding: 10px 16px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  background: rgba(19, 23, 31, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.desktop-runtime-gate {
  height: 100dvh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px;
  color: #f3f4f6;
  background: #080b10;
  overflow: hidden;
}

.desktop-runtime-gate section {
  width: min(680px, 100%);
  padding: 56px;
  border: 1px solid #27303d;
  background: #10151d;
  max-height: 100%;
  overflow-y: auto;
}

@media (max-width: 520px) {
  .desktop-runtime-gate {
    min-height: 100dvh;
    padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .desktop-runtime-gate section {
    padding: 28px 24px;
    width: 100%;
  }

  .desktop-runtime-gate img {
    height: 42px;
    margin-bottom: 18px;
    width: 42px;
  }

  .desktop-runtime-gate h1 {
    font-size: 32px;
    line-height: 1.05;
    margin: 10px 0;
  }

  .desktop-runtime-gate p {
    font-size: 15px;
    line-height: 1.5;
  }

  .desktop-runtime-gate .loading-indicator--panel {
    margin-top: 22px;
  }
}

@media (max-width: 360px) {
  .desktop-runtime-gate {
    padding-left: 12px;
    padding-right: 12px;
  }

  .desktop-runtime-gate section {
    padding: 24px 20px;
  }

  .desktop-runtime-gate h1 {
    font-size: 29px;
  }
}

.desktop-runtime-gate img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 28px;
}

.desktop-runtime-gate small {
  display: block;
  color: #efad2d;
  font: 700 12px/1.2 var(--font-ui);
  letter-spacing: 0.18em;
}

.desktop-runtime-gate h1 {
  margin: 14px 0 12px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -0.04em;
}

.desktop-runtime-gate p {
  margin: 0;
  color: #9aa7b8;
  font-size: 17px;
  line-height: 1.6;
}

.desktop-runtime-gate .desktop-runtime-gate-guidance {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #27303d;
  color: #c8d0dc;
}

.desktop-runtime-gate button {
  margin-top: 28px;
  padding: 14px 22px;
  border: 1px solid #efad2d;
  color: #080b10;
  background: #efad2d;
  font: 700 12px/1 var(--font-ui);
  letter-spacing: 0.12em;
  cursor: pointer;
}

.browser-session-reconnecting {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border: 1px solid #b88620;
  border-radius: 6px;
  color: #f5c66a;
  background: #10151d;
  font-size: 12px;
  pointer-events: none;
}
.backend-connection-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.backend-connection-section label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.backend-connection-section input,
.backend-connection-section select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #303b48;
  border-radius: 6px;
  color: #e4e8ee;
  background: #141a22;
  box-sizing: border-box;
}
.backend-connection-section p {
  margin: 0;
  font-size: 12px;
  color: #9ca9b9;
  line-height: 1.5;
}
.backend-connection-section p[role="alert"] {
  color: #ff879c;
}
.backend-connection-section button {
  padding: 10px 14px;
  border: 1px solid #375e76;
  border-radius: 6px;
  color: #e4e8ee;
  background: #1b3547;
  cursor: pointer;
}
.app-error-boundary {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--bg-app);
  color: var(--text);
}

.app-error-boundary > div {
  width: min(680px, 100%);
  padding: 34px;
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--red);
  border-radius: var(--radius-m);
  background: var(--bg-panel);
}

.app-error-boundary span,
.app-error-boundary code {
  font-family: var(--font-mono);
}

.app-error-boundary span {
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.app-error-boundary h1 {
  margin: 12px 0;
  font-size: clamp(28px, 5vw, 48px);
}
.app-error-boundary p {
  color: var(--text-dim);
  line-height: 1.6;
}
.app-error-boundary code {
  display: block;
  margin: 20px 0;
  color: var(--red);
}
.app-error-boundary button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(245, 166, 35, 0.55);
  border-radius: var(--radius-s);
  background: var(--amber-soft);
  color: var(--amber);
  font-weight: 800;
  cursor: pointer;
}