.status-button {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.049);
  border: 1px solid transparent;
  padding: 4px 8px;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
}

.socket-status-container {
  position: relative;
  display: inline-block;
  user-select: none;
}

.socket-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  width: 130px;
  background-color: rgba(46, 46, 46, 0.95);
  border: 1px solid var(--border-light);
  z-index: 1;
  padding: 3px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 100;
  margin-top: 5px;
}

.socket-dropdown-item {
  padding: 5px;
  background-color: var(--bg-button);
  margin: 2px 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.socket-dropdown-item:hover {
  background-color: var(--bg-hover);
}

.status-bar {
  min-width: 5px;
  height: 100%;
  border-radius: 2px;
}

.green {
  background-color: var(--profit);
}

.red {
  background-color: var(--loss);
}

.status-menu-divider {
  height: 1px;
  background-color: var(--border);
  margin: 8px 0px;
}

.button-status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.exchange-socket-status-container {
  display: flex;
  gap: 5px;
  font-size: 13px;
}

.exchange-socket-status {
  color: var(--text);
  text-align: left;
  display: flex;
  gap: 5px;
  align-items: center;
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.news-source-settings-button {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  margin-left: 4px;
  background-color: var(--bg-button);
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
}

.news-source-settings-button:hover {
  background-color: var(--bg-button-hover);
}

/* Icon-only variant — square button with the settings icon centered. */
.news-source-settings-button.is-icon {
  position: relative;
  padding: 0;
  width: 28px;
  height: 28px;
  justify-content: center;
  background-color: transparent;
  border-color: transparent;
}

.news-source-settings-button.is-icon:hover {
  background-color: var(--bg-button);
  border-color: var(--border-light);
}

.news-source-settings-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  pointer-events: none;
}

.news-source-settings-button.is-icon:hover .news-source-settings-icon {
  opacity: 1;
}

/* Badge moves to a corner pip when the button is icon-only. */
.news-source-settings-button.is-icon .source-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  margin: 0;
  min-width: 14px;
  padding: 0 3px;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  border-radius: 7px;
  pointer-events: none;
}

.news-source-settings-popover {
  font-family: 'Fira Code', monospace;
  background-color: var(--bg-alt);
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  box-shadow: 0 6px 24px var(--shadow);
}

.news-source-settings-popover input[type='text'] {
  background-color: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.news-source-settings-popover input[type='text']:focus {
  border-color: var(--accent);
}

.news-source-settings-popover input[type='checkbox'] {
  accent-color: #3498db;
  cursor: pointer;
}

.news-source-settings-popover select {
  background-color: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.news-source-settings-popover button {
  font-family: inherit;
}

.news-source-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row-gap: 4px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.news-source-row:last-child {
  border-bottom: none;
}

.news-source-row.is-hidden {
  opacity: 0.55;
}

.news-source-row .source-name {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-source-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
}

.news-source-row .alert-controls {
  grid-column: 1 / span 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.news-source-row .alert-controls .grow,
.panel-toggle .grow {
  margin-left: auto;
}

.news-source-row .source-name .other-tag {
  margin-left: 6px;
  font-size: 9px;
  padding: 1px 4px;
  background-color: var(--bg-button);
  color: var(--text-dim);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}

.panel-settings-block {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-settings-block .block-title {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 0;
}

.panel-toggle input[type='checkbox'] {
  accent-color: #3498db;
  cursor: pointer;
}

.panel-toggle .other-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.group-header {
  padding: 6px 10px 4px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background-color: var(--bg-deep);
  border-top: 1px solid var(--border);
}

.news-source-row button.test-sound {
  background-color: var(--bg-button);
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
}

.news-source-row button.test-sound:hover:not(:disabled) {
  background-color: var(--bg-button-hover);
}

.news-source-row button.test-sound:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.news-source-settings-popover .empty-state {
  padding: 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.news-source-settings-popover .header-bar {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-source-settings-popover .header-count {
  color: var(--text-muted);
  font-size: 11px;
}

.news-source-settings-popover .list-scroll {
  max-height: 360px;
  overflow-y: auto;
}

.news-source-settings-popover .source-badge {
  margin-left: 6px;
  background: #3498db;
  color: #fff;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 14px;
}
/* Orderbook panel — dense L2 ladder. Colors track the app's dark trade theme
   (greens for bids, reds for asks). */
.ob-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: inter, sans-serif;
}

/* Row 1: symbol selector on its own line. */
.ob-symbol-row {
  flex: 0 0 auto;
  min-width: 0;
  margin-bottom: 4px;
}

/* Row 2: book controls (grouping / size unit / depth), right-aligned. */
.ob-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin-bottom: 4px;
}

.ob-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.ob-select {
  height: 22px;
  max-width: 64px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 11px;
  padding: 0 4px;
}

.ob-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 2px 4px;
  color: var(--text-muted);
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}

.ob-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ob-rows {
  display: flex;
  flex-direction: column;
}

.ob-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 1px 4px;
  line-height: 16px;
}

.ob-depth {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
}

.ob-depth-bid {
  background: var(--profit);
}

.ob-depth-ask {
  background: var(--loss);
}

.ob-row span {
  position: relative;
  z-index: 1;
}

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

.ob-px-bid {
  color: var(--profit);
}

.ob-px-ask {
  color: var(--loss);
}

.ob-hit {
  cursor: pointer;
}

.ob-hit:hover {
  text-decoration: underline;
}

.ob-spread {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 3px 4px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.ob-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--text-muted);
}

.ob-empty-warn {
  color: #e0a23a;
  font-size: 11px;
  line-height: 1.4;
}
/* Order ticket panel — compact form on the app's dark trade theme. */
.of-root {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 6px 8px;
  color: var(--text-dim);
  font-size: 12px;
  font-family: inter, sans-serif;
}

.of-head {
  display: flex;
  gap: 6px;
  align-items: center;
}

.of-symbol {
  flex: 1;
  min-width: 0;
}

.of-account {
  height: 32px;
  max-width: 120px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 12px;
  padding: 0 4px;
}

.of-seg {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.of-seg button {
  flex: 1;
  background: var(--bg-input);
  color: var(--text-dim);
  border: none;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.of-tabs button.active {
  background: var(--bg-alt);
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 #f0b90b;
}

.of-side-buy.active {
  background: var(--profit);
  color: #06281c;
}

.of-side-sell.active {
  background: var(--loss);
  color: #2a0d0c;
}

.of-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.of-field-label {
  color: var(--text-muted);
  font-size: 11px;
}

.of-field-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-input);
}

.of-field-input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0 8px;
  height: 32px;
  font-size: 13px;
  outline: none;
}

.of-unit,
.of-mid {
  background: var(--bg-alt);
  color: var(--text-dim);
  border: none;
  border-left: 1px solid var(--border-light);
  padding: 0 8px;
  font-size: 11px;
  cursor: pointer;
}

.of-mid:disabled {
  opacity: 0.4;
  cursor: default;
}

.of-readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.of-readout-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-dim);
}

.of-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.of-last-px {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.of-last-px:hover {
  color: #f0b90b;
}

.of-error {
  color: var(--loss);
  font-size: 11px;
  word-break: break-word;
}

.of-submit {
  margin-top: auto;
  border: none;
  border-radius: 4px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
}

.of-submit-buy {
  background: var(--profit);
  color: #06281c;
}

.of-submit-sell {
  background: var(--loss);
  color: #2a0d0c;
}

.of-submit:disabled {
  opacity: 0.45;
  cursor: default;
}
.position-manager-table {
  table-layout: auto;
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
  margin: 0 auto;
  color: var(--text);
}

.position-manager-table th,
.position-manager-table td {
  text-align: left;
  padding: 5px 10px;
  vertical-align: middle;
}

.position-manager-table th {
  text-align: left;
  white-space: nowrap;
  background: var(--bg-alt);
  color: var(--text);
}

.position-manager-table-normal th {
  font-weight: normal !important;
}

.position-manager-table th:nth-child(1) {
  width: 25%;
}
.position-manager-table th:nth-child(2) {
  width: 25%;
}
.position-manager-table th:nth-child(3) {
  width: 25%;
}
.position-manager-table th:nth-child(4) {
  width: 15%;
}
.position-manager-table th:nth-child(5) {
  width: 10%;
}

.position-manager-table tr:hover {
  background-color: var(--bg-hover);
  cursor: pointer;
}

.side-buy {
  width: 80px;
  color: var(--profit);
}

.side-sell {
  width: 80px;
  color: var(--loss);
}

.buy-divider,
.sell-divider {
  width: 2px;
  height: 35px;
  margin-right: 6px;
  display: inline-block;
}
.buy-divider {
  background-color: var(--profit);
}
.sell-divider {
  background-color: var(--loss);
}

.numbers {
  font-family: 'Fira Code', monospace;
  font-weight: 500;
}
.emoji-column {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.emoji-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.cex-logo {
  width: 25px;
  margin-right: 8px;
}

.price-and-size {
  color: var(--text-muted);
  font-size: 10px;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-row img {
  height: 20px;
}

.flex-row > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.button-group {
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 0;
}

.button-divider {
  width: 5px;
}

.camera-button {
  border: 1px solid transparent;
  cursor: pointer;
  padding: 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s,
    border-color 0.3s;
  font-size: 13px;
}

.camera-button:hover,
.nuke-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.pnl-close-button {
  border: 1px solid transparent;
  cursor: pointer;
  padding: 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s,
    border-color 0.3s;
  font-size: 13px;
}

.pnl-close-button:hover {
  background-color: var(--loss);
}

.camera-icon {
  height: 18px;
  width: auto;
  opacity: 0.8;
}

.close-and-nuke {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
}

.nuke-button {
  border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s,
    border-color 0.3s;
  font-family: 'Fira Code';
  font-size: 12px;
  margin-left: auto;
}

.nuke-button img {
  height: 16px;
  margin-right: 2px;
  width: auto;
  opacity: 0.8;
}

.nuke-button.clicked {
  background-color: var(--loss);
}

.funding-container {
  background-color: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 5px;
  font-size: 0.75rem;
  color: var(--text);
  font-family: 'Fira Code', monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.funding-container-chart {
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  color: var(--text);
  font-family: 'Fira Code', monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  width: 200px;
}

.funding-container:hover {
  border: 1px solid var(--text-muted);
}

.pnl-camera-button {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-left: 5px;
  margin-bottom: 3px;
  vertical-align: middle;
}

.chart-settings-button {
  cursor: pointer;
  padding: 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.total-value-bar {
  background-color: var(--bg-alt);
  color: var(--text);
  padding: 4px;
  font-size: 13px;
  text-align: center;
  border-radius: 0.1rem;
  display: flex;
  justify-content: space-evenly;
}

.total-value-bar-text {
  margin-left: 3px;
}

.total-text {
  font-weight: bold;
}

.search-input {
  padding: 5px;
  border-radius: 5px;
  border: none;
  font-size: 13.5px;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.199);
  color: white;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.search-input-button {
  margin-left: 5px;
  border-radius: 3px;
  background-color: var(--bg-button);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.1s;
  font-family: 'fira code';
  padding: 3px;
}

.search-input-button:hover {
  background-color: var(--border-light);
}

.search-input-button:active {
  transform: scale(0.95);
}

.search-input-button.active {
  background: rgba(72, 128, 224, 0.7);
}

.position-entry-symbol-container {
  display: flex;
  align-items: center;
}

.position-entry-paperclip-icon {
  width: 14px;
  height: 14px;
  margin-left: 4px;
}

.position-row {
  background-color: transparent;
  /* transition: background-color 0.1s ease; */
}

.position-row.is-following {
  background-color: rgba(255, 171, 44, 0.1);
}

.position-row:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.close-menu-container {
  position: relative;
  display: inline-block;
  font-family: 'Fira Code', monospace;
}

button {
  padding: 6px 12px;
  background-color: var(--bg-button);
  color: var(--text);
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.category-label {
  background-color: var(--bg-hover);
  padding: 5px 0;
  text-align: center;
  margin: 10px 0;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 200px;
  background-color: rgba(46, 46, 46, 0.95);
  border: 1px solid var(--border-light);
  z-index: 1;
  padding: 3px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* When portaled to document.body the dropdown is positioned via inline
   `position: fixed` + coords from React. Reset the inherited absolute
   anchors (`right: 0; top: 100%`) so they don't combine with the inline
   coords and stretch the element off-screen (top + bottom both set =
   browser computes height to fill the gap, dropdown vanishes). */
.dropdown-menu.dropdown-menu-portal {
  position: fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 9999;
}

.size-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.size-options span {
  cursor: pointer;
  padding: 5px;
  background-color: var(--bg-alt);
  flex-grow: 1;
  text-align: center;
  border-left: 1px solid var(--border);
  border-radius: 0;
}
.size-options span:hover {
  background-color: var(--bg-hover);
  color: var(--text);
}

.size-options span:first-child {
  border-left: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.size-options span:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.size-options span.selected {
  /* background: linear-gradient(to right, #335edf, #67a6af); */
  background: linear-gradient(to right, #6a3093, #a044ff);
  color: #fff;
}

.trade-options > div {
  display: flex;
}
.trade-options div div {
  cursor: pointer;
  flex: 1;
  text-align: left;
}

.close-menu-container.upwards .dropdown-menu {
  top: auto;
  bottom: 100%;
}

.limit-market {
  display: flex;
  background-color: var(--bg-deep);
}

.limit-market div {
  flex: 1;
  text-align: center;
  color: var(--text);
  pointer-events: none;
  height: 25px;
}

.limit-section,
.market-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.option {
  cursor: pointer;
  padding: 5px;
  background-color: var(--bg-button);
  margin: 2px 0;
  color: var(--text);
  text-align: left;
}

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

.tbd {
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  text-decoration: line-through;
}

.option.tbd:hover {
  background-color: var(--bg-button);
}

.limit-market div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 25px;
  color: var(--text);
  background-color: var(--bg-deep);
  pointer-events: none;
}

.custom-limit-input {
  width: 80%;
  padding: 5px;
  background-color: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  font-family: 'Fira Code', monospace;
}

.down-arrow-icon {
  max-width: 15px;
  max-height: 15px;
}
.full-size {
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.tabs-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  padding: 0;
}

/* Left column: the tab list scrolls on its own; the search box stays pinned
   at the bottom (it's flex-shrink:0). Border lives on the container so it spans
   the full height. */
.tab-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Docs link pinned just above the search box in the sidebar. */
.settings-docs-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}

.settings-docs-link:hover {
  background: var(--bg-button);
  color: var(--text);
}

.settings-docs-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Right column: only the active tab's settings scroll, independent of the menu. */
.react-tabs__tab-panel--selected {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 14px 18px;
}

.tab-list .selected-tab {
  background-color: var(--bg-button);
  color: var(--text);
  /* Left accent cap on the active tab (inset so it doesn't shift the label). */
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.react-tabs__tab {
  border: none;
  list-style: none;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.react-tabs__tab:hover {
  background-color: var(--bg-hover);
}

.filter-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
}

.scrollable-filter-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: var(--bg-alt);
  max-height: 60vh;
  &::-webkit-scrollbar {
    display: none;
  }
}

.filter-item {
  padding: 6px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: var(--text);
  font-family: 'Fira Code', monospace;
}

.filter-column {
  padding: 4px;
}

.symbol-column {
  flex: 1;
  max-width: 70px;
}

.keywords-column {
  flex: 3;
}

.actions-column {
  flex: 1;
  display: flex;
  justify-content: space-between;
  max-width: 100px;
}

.remove-icon {
  cursor: pointer;
  background-color: #ff5555;
  border: none;
  border-radius: 2px;
  padding: 3px 5px;
  color: var(--text);
  font-weight: bold;
  margin-right: 5px;
  margin-left: 10px;
}

.remove-icon:hover {
  background-color: #ff3333;
}

.input-add-group {
  display: flex;
  align-items: center;
  width: 100%;
}

.filter-param-input {
  background: var(--bg-alt);
  height: 15px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 10px;
  transition: border-color 0.2s ease;
  margin-bottom: 10px;
}

.filter-param-input:focus {
  outline: none;
  border: 1px solid var(--accent);
}

.keyword-inputs {
  display: flex;
  justify-items: center;
  align-items: center;
}

.dark-theme .scrollable-filter-list {
  background-color: var(--bg-alt);
}
.dark-theme .filter-param-input {
  background-color: black;
}

.filter-group input[type='checkbox'] {
  accent-color: var(--accent);
  opacity: 0.5;
  cursor: pointer;
}
.filter-group input[type='checkbox']:checked {
  opacity: 0.8;
}

.add-or-edit {
  cursor: pointer;
  background-color: var(--bg-button);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 3px 4px;
  color: var(--text);
  font-weight: bold;
}

.add-or-edit:hover {
  background-color: var(--bg-button-hover);
}

.filter-label-tag {
  padding: 3px 4px;
  border-radius: 2px;
  font-size: 13px;
  /* font-weight: bold; */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-sound-tag {
  background-color: #55257db1;
  color: var(--text);
}
.filter-handle-tag {
  background-color: var(--bg-alt);
  color: var(--text);
}
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

.row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
}

.row img {
  width: 25px;
  border-radius: 50%;
}

.row h2 {
  margin: 0;
  font-size: 0.8rem;
}

.toggle {
  cursor: pointer;
}

/* Fixed-width leading box shared by the category header and every account row.
   Locking it to one width means the first toggle column ("Feed") starts at the
   same x in the header and the rows, so they line up regardless of the
   expand arrow / title / sort button. */

.scraper-lead {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 150px;
  min-width: 150px;
  flex-shrink: 0;
  overflow: hidden;
}

.scraper-lead h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container {
  height: 100%;
  overflow-y: auto;
}

input[type='checkbox'].toggle {
  opacity: 0;
  position: absolute;
}

input[type='checkbox'].toggle + label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

input[type='checkbox'].toggle + label::before {
  content: '';
  width: 2em;
  height: 1em;
  background-color: #c0c0c0;
  border-radius: 1em;
  margin-right: 0.25em;
  transition: background-color 200ms ease-in-out;
}

input[type='checkbox'].toggle + label::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  content: '\2715';
  font-size: 0.5em;
  width: 1.8em;
  height: 1.8em;
  background-color: var(--loss);
  color: var(--text);
  border-radius: 1em;
  transition:
    background-color 200ms ease-in-out,
    transform 200ms ease-in-out;
}

input[type='checkbox'].toggle:checked + label::after {
  content: '\2713';
  transform: translateX(100%);
  background-color: var(--profit);
}

.category-list {
  overflow-x: hidden;
}

.category-header {
  font-size: 1em;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: var(--bg-alt);
}

.page-container {
  margin-top: 20px;
  overflow-x: hidden;
}

.page-container::-webkit-scrollbar {
  display: none;
}

.scrollable-box::-webkit-scrollbar {
  width: 7px;
}

.scrollable-box::-webkit-scrollbar-track {
  background: var(--bg-base);
}

.scrollable-box::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
}

.scrollable-box::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar);
}

.scrollable-box,
.tree-box {
  flex: 1;
  max-height: 85vh;
  overflow: auto;
  padding: 2%;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.scrollable-box {
  overflow-y: auto;
  overflow-x: auto;
}

.tree-box {
  overflow-y: auto;
  overflow-x: hidden;
}

.scraper-settings-header {
  font-size: 1em;
  font-weight: bold;
  display: flex;
  margin-bottom: 0.75em;
  margin-top: 1em;
  align-items: center;
  justify-content: center;
}

.backup-button {
  padding: 5px 10px;
  background-color: var(--profit);
  color: var(--text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 20px;
}

.backup-button:hover {
  background-color: var(--profit);
}

.restore-button {
  padding: 5px 10px;
  background-color: var(--accent);
  color: var(--text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 20px;
}

.restore-button:hover {
  background-color: var(--accent);
}
/* Panel grid baseline styles. Tweaked to match the existing pvp-terminal
   dark aesthetic — neutral grays, no flashy colors. */

.pvp-panel-grid-root {
  width: 100%;
  flex: 1;
  min-height: 0;
  /* Allow the grid to overflow vertically — when the user grows a panel
     past the visible area, this wrapper scrolls instead of forcing every
     row to compress. Paired with the floor-only Math.max in PanelGrid's
     computedRowHeight so a tall layout stays tall. */
  overflow-y: auto;
}

/* Match the existing pvp default-theme background (#131d29) with a slightly
   lighter card surface so panels stand out from the page bg. Theme-aware
   variants can be added later if dark/light themes need different shades. */
.pvp-panel-container {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pvp-panel-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pvp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  padding: 0 6px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  user-select: none;
  flex-shrink: 0;
}

.pvp-panel-drag-handle {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: move;
  padding-right: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.pvp-panel-controls {
  display: flex;
  gap: 2px;
}

.pvp-panel-close,
.pvp-panel-popout,
.pvp-panel-star {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.pvp-panel-popout {
  font-size: 13px;
}

.pvp-panel-star {
  font-size: 14px;
}

.pvp-panel-star.active {
  color: #f5c542; /* warm gold so the starred panel is obvious at a glance */
}

.pvp-panel-close:hover,
.pvp-panel-popout:hover,
.pvp-panel-star:hover {
  background: var(--bg-hover);
  color: var(--text-dim);
}

.pvp-panel-star.active:hover {
  color: #ffd96b;
}

.pvp-panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* Promote the scroll container to its own compositor layer. The panel
     sits inside react-grid-layout's `transform: translate(...)` cell; after
     a large synchronous re-render (e.g. scraper toggle-all) Chromium can
     fail to repaint the lower tiles of a tall nested scroller, leaving rows
     present in the DOM but blank on screen. Forcing a layer fixes the
     repaint. */
  transform: translateZ(0);
}

/* react-grid-layout placeholder (the ghost rectangle shown while dragging) */
.react-grid-item.react-grid-placeholder {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--border-light);
  border-radius: 4px;
  opacity: 0.5;
}

/* Resize handle in the bottom-right corner of each panel. Match
   stock-terminal: a small 5px corner "L", not the package's oversized grip
   glyph — and NOT chart.css's big white triangle (that ::after rule is
   global and leaks onto the grid handles, so we fully reset it here). */
.react-grid-item > .react-resizable-handle {
  background: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-se::after {
  content: '';
  display: block;
  position: absolute;
  top: auto;
  left: auto;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  /* reset the triangle borders/rotation chart.css applies, then draw the L */
  border: none;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: none;
  opacity: 0.25;
}

.react-grid-item:hover
  > .react-resizable-handle.react-resizable-handle-se::after {
  opacity: 0.7;
}

/* News panel scroll-to-top button. Anchored bottom-right inside the news
   list. Standalone class so the legacy `.news-scroll-up` styles (sticky +
   float: right + 32px img margin) don't interfere. */
.pvp-news-scroll-top {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.7;
  transition:
    opacity 120ms ease,
    background 120ms ease;
  z-index: 10;
}

.pvp-news-scroll-top:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

.pvp-news-scroll-top img {
  width: 25px;
  height: 25px;
  pointer-events: none;
}

/* Pop-out window chrome — frameless BrowserWindow, so we render our own
   draggable title bar + close button. Mirrors the in-grid panel header. */
.pvp-popout-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--bg-base);
  color: var(--text);
  font-family: Inter, sans-serif;
  overflow: hidden;
}

.pvp-popout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 8px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  user-select: none;
  flex-shrink: 0;
  -webkit-app-region: drag;
}

.pvp-popout-title {
  flex: 1;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.pvp-popout-close {
  -webkit-app-region: no-drag;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.pvp-popout-close:hover {
  background: var(--bg-hover);
  color: var(--text-dim);
}

.pvp-popout-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* Safety net: provides a positioned ancestor for any panel that
     accidentally relies on react-grid-layout's positioned cell as its
     containing block. */
  position: relative;
}

.pvp-popout-loading,
.pvp-popout-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 12px;
  padding: 16px;
  text-align: center;
}

.pvp-popout-error {
  color: var(--loss);
}
body,
html,
#root {
  color: var(--text);
  font-family: 'Inter';
  font-style: normal;
  overflow: hidden;
}

/* Background + text follow the active theme's CSS variables, which
   useTheme() injects onto :root. The theme id is also set as body.className
   for any legacy theme-scoped rules. */
body {
  background-color: var(--bg-base);
  color: var(--text);
}

/* Settings window only: UI chrome (labels, headers, tabs) isn't text-selectable
   so click-dragging through settings doesn't highlight everything. Form fields
   stay selectable so values like API keys can be copied, as does anything that
   opts in with the .selectable class. The news feed is intentionally left
   selectable. */
.tabs-wrapper {
  user-select: none;
  -webkit-user-select: none;
}

.tabs-wrapper input,
.tabs-wrapper textarea,
.tabs-wrapper select,
.tabs-wrapper [contenteditable='true'],
.tabs-wrapper .selectable,
.tabs-wrapper .selectable * {
  user-select: text;
  -webkit-user-select: text;
}