.flow-container {
  padding: 5px;
  height: calc(100% - 30px);
  overflow-y: auto;
  border-radius: 5px;
  white-space: pre-wrap;
}

.flow-item {
  padding: 5px 0;
  margin-bottom: 3px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flow-item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text);
}

.flow-item-left {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  cursor: pointer;
}

.flow-item-left-color {
  width: 5px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.flow-item-content {
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.flow-item-time,
.flow-item-stock-price,
.flow-item-strike,
.flow-item-expiration,
.flow-item-stock {
  flex: 0.75;
}

.flow-item-stock {
  font-weight: bold;
}

.flow-item-tag {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flow-item-tag span {
  margin-right: 8px;
  font-weight: bold;
  font-size: 12px;
  font-family: "Fira Code", monospace;
  display: inline-block;
  text-align: right;
}

.flow-item-tag span:last-child {
  margin-left: 8px;
  width: 40px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}
/* Options Flow -- scanner/positions chrome language: 28px bar, Quantico 11px,
   dense 20px rows with a sticky header, theme tokens only (Paper safe). */

.fl-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  user-select: none;
  overflow: hidden;
  position: relative;
}

.fl-muted {
  color: var(--text-muted);
}
.fl-spacer {
  flex: 1;
}

/* ---- Top bar ---- */

.fl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
  min-height: 28px;
  padding: 2px 6px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.fl-picker-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.fl-picker-btn:hover {
  border-color: var(--text-muted);
}
.fl-picker-dots {
  display: inline-flex;
  gap: 2px;
}
.fl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fl-caret {
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
}

.fl-search {
  width: 124px;
  height: 22px;
  padding: 0 7px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  outline: none;
  box-sizing: border-box;
  flex-shrink: 0;
}
.fl-search:focus {
  border-color: var(--accent);
}

.fl-seg {
  display: inline-flex;
  height: 22px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.fl-seg button {
  padding: 0 7px;
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.fl-seg button + button {
  border-left: 1px solid var(--border);
}
.fl-seg button:hover {
  color: var(--text);
}
.fl-seg button.on {
  background: var(--bg-hover);
  color: var(--text);
}

.fl-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.fl-bar-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.fl-bar-btn.on {
  color: var(--text);
  border-color: var(--border-light);
}
.fl-bar-btn img {
  width: 13px;
  height: 13px;
}

.fl-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.fl-live .fl-dot {
  width: 7px;
  height: 7px;
}
.fl-live.ok .fl-dot {
  background: var(--profit);
  box-shadow: 0 0 6px color-mix(in srgb, var(--profit) 70%, transparent);
}
.fl-live.warn .fl-dot {
  background: #e8b931;
}
.fl-live.down .fl-dot {
  background: var(--loss);
}

.fl-pause-icon {
  display: inline-block;
  width: 7px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  box-sizing: border-box;
}
.fl-play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--profit);
}
.fl-new-pill {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 10.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ---- Notices ---- */

.fl-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 10.5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-base));
}
.fl-notice b {
  color: var(--text);
}
.fl-progress {
  height: 2px;
  min-height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: fl-progress 1.1s linear infinite;
}
@keyframes fl-progress {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}

/* ---- Body: optional editor sidebar + table ---- */

.fl-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.fl-table-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fl-empty {
  padding: 18px 12px;
  color: var(--text-muted);
  text-align: center;
}

.fl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.fl-table th,
.fl-table td {
  height: 20px;
  padding: 1px 6px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.08);
  white-space: nowrap;
  text-align: left;
}
.fl-table th {
  background: var(--bg-base);
  box-shadow: 0 1px 0 var(--border);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.fl-table td {
  color: var(--text-dim);
}
.fl-table .num {
  text-align: right;
}
.fl-table tbody tr {
  cursor: pointer;
}
.fl-table tbody tr:hover td {
  background: var(--bg-alt);
}
.fl-table tr.big td {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.fl-table tr.flash td {
  animation: fl-flash 1.2s ease-out;
}
@keyframes fl-flash {
  from {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.fl-table td.cap {
  width: 2px;
  min-width: 2px;
  padding: 0;
}

.fl-day td {
  height: 22px;
  padding: 4px 8px 2px;
  background: var(--bg-base) !important;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.fl-time {
  color: var(--text-muted);
}
.fl-tkr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fl-tkr b {
  color: var(--text);
  font-weight: 700;
}
.fl-side {
  font-weight: 700;
  font-size: 10.5px;
}
.fl-side.ask {
  color: var(--profit);
}
.fl-side.bid {
  color: var(--loss);
}
.fl-side.mid,
.fl-side.none {
  color: var(--text-muted);
}
.fl-cp.c {
  color: var(--profit);
}
.fl-cp.p {
  color: var(--loss);
}
.fl-strike {
  color: var(--text);
  font-weight: 600;
}
.fl-prem {
  font-weight: 700;
  color: var(--text);
}
.fl-prem.t1 {
  color: #e8b931;
}
[data-theme='light'] .fl-prem.t1 {
  color: #a16207;
}
.fl-prem.t2 {
  color: var(--accent);
}

/* fill vs spread: a track from bid to ask with a tick where it printed */
.fl-fvs {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 10px;
  vertical-align: middle;
}
.fl-fvs-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
  border-radius: 1px;
}
.fl-fvs-tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  border-radius: 1px;
}

/* chain bid/ask: the contract's day volume split by side */
/* chain bid/ask: the dominant side's share as text, the full split as a
   thin line under it (labels on the bright fills were unreadable) */
.fl-chain {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
  height: 18px;
  line-height: 16px;
  font-size: 10.5px;
}
.fl-chain-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fl-chain-pct.a {
  color: var(--profit);
}
.fl-chain-pct.b {
  color: var(--loss);
}
.fl-chain-bar {
  position: absolute;
  left: 0;
  right: 4px;
  bottom: 1px;
  display: flex;
  height: 2px;
  opacity: 0.55;
  background: var(--bg-hover);
}
.fl-chain-bar span {
  height: 100%;
}
.fl-chain-bar .b {
  background: var(--loss);
}
.fl-chain-bar .m {
  background: var(--text-muted);
}
.fl-chain-bar .a {
  background: var(--profit);
}

.fl-pill {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  margin-right: 3px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  vertical-align: middle;
}
.fl-pill.bull {
  background: color-mix(in srgb, var(--profit) 20%, transparent);
  color: var(--profit);
}
.fl-pill.bear {
  background: color-mix(in srgb, var(--loss) 20%, transparent);
  color: var(--loss);
}
.fl-pill.sweep {
  background: color-mix(in srgb, #8b5cf6 26%, transparent);
  color: #a78bfa;
}
.fl-pill.mute {
  background: var(--bg-hover);
  color: var(--text-dim);
}

/* ---- Popovers (signal picker, columns, row menu) ---- */

.fl-pop {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 4px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  color: var(--text);
  user-select: none;
  box-sizing: border-box;
}
.fl-pop-group {
  padding: 6px 8px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fl-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.fl-pop-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.fl-pop-item.off {
  color: var(--text-muted);
}
.fl-pop-item.off .fl-dot {
  opacity: 0.3;
}
.fl-count {
  margin-left: auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fl-pop-edit {
  padding: 0 4px;
  color: var(--text-muted);
  border-radius: 3px;
}
.fl-pop-edit:hover {
  color: var(--accent);
}
.fl-pop-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--border);
}
.fl-pop-action {
  color: var(--accent);
}
.fl-check {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  box-sizing: border-box;
}
.fl-check.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg-deep);
}

.fl-menu-head {
  padding: 4px 8px 6px;
  font-weight: 700;
  font-size: 12px;
}
.fl-menu-grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 16px;
  row-gap: 2px;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.fl-menu-grid > span:nth-child(odd) {
  color: var(--text-muted);
}
.fl-menu-grid > span:nth-child(even) {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---- Signal editor sidebar ---- */

.fl-ed {
  width: 284px;
  min-width: 284px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-deep);
}
.fl-ed-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--border);
}
.fl-ed-name {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
}
.fl-ed-name:focus {
  border-color: var(--accent);
}
.fl-ed-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.fl-ed-select {
  height: 22px;
  padding: 0 4px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  outline: none;
}
.fl-ed-note {
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.fl-ed-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}
.fl-ed-scroll.locked {
  opacity: 0.55;
  pointer-events: none;
}
.fl-ed-sec {
  border-bottom: 1px solid var(--border);
}
.fl-ed-sec-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.fl-ed-sec-head:hover {
  color: var(--text);
}
.fl-ed-sec-head .fl-caret {
  transition: transform 0.12s;
}
.fl-ed-sec-head.closed .fl-caret {
  transform: rotate(-90deg);
}
.fl-ed-set {
  margin-left: auto;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.fl-ed-sec-body {
  padding: 0 8px 6px;
}
.fl-tri.set,
.fl-range.set label {
  color: var(--accent);
}
.fl-range {
  display: grid;
  grid-template-columns: 1fr 58px 16px 58px;
  align-items: center;
  height: 22px;
}
.fl-range label {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-range > span {
  text-align: center;
  font-size: 9.5px;
  color: var(--text-muted);
}
.fl-num {
  width: 100%;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  text-align: right;
  outline: none;
  box-sizing: border-box;
}
.fl-num:hover {
  border-color: var(--border);
}
.fl-num::placeholder {
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}
.fl-num:focus {
  border-color: var(--accent);
}
.fl-num.bad {
  border-color: var(--loss);
}
.fl-tri {
  display: flex;
  align-items: center;
  height: 22px;
  color: var(--text-dim);
}
.fl-tri .fl-seg {
  margin-left: auto;
  height: 18px;
}
.fl-tri .fl-seg button {
  padding: 0 5px;
  font-size: 10px;
}
.fl-ed-text {
  width: 100%;
  height: 20px;
  margin: 2px 0;
  padding: 0 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  outline: none;
  box-sizing: border-box;
}
.fl-ed-text:focus {
  border-color: var(--accent);
}
.fl-ed-sublabel {
  padding: 4px 0 1px;
  font-size: 10px;
  color: var(--text-muted);
}
.fl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 0;
}
.fl-chip {
  height: 18px;
  padding: 0 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.fl-chip:hover {
  color: var(--text);
}
.fl-chip.on {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.fl-ed-any {
  padding: 2px 0;
  color: var(--text-dim);
  font-size: 10.5px;
}
.fl-ed-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--border);
}
.fl-btn {
  height: 22px;
  padding: 0 9px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.fl-btn:hover {
  color: var(--text);
}
.fl-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fl-btn.danger:hover {
  color: var(--loss);
  border-color: var(--loss);
}

.fl-pos {
  color: var(--profit);
}
.fl-neg {
  color: var(--loss);
}

/* ---- Contract drill-down drawer ---- */

.fl-drawer {
  position: absolute;
  top: 28px;
  right: 0;
  bottom: 0;
  width: min(600px, 92%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  border-left: 1px solid var(--border-light);
  box-shadow: -10px 0 24px rgba(0, 0, 0, 0.35);
}
.fl-drawer-head {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.fl-drawer-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.fl-cstats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.fl-cstat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}
.fl-cstat span {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fl-cstat b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fl-tabs {
  display: flex;
  gap: 2px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
}
.fl-tabs button {
  height: 26px;
  padding: 0 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.fl-tabs button:hover {
  color: var(--text);
}
.fl-tabs button.on {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.fl-legend {
  display: flex;
  gap: 12px;
  padding-bottom: 6px;
  color: var(--text-muted);
  font-size: 10px;
}
.fl-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: -1px;
}
.fl-spread {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.08);
  white-space: nowrap;
}
.fl-spread b {
  color: var(--text);
}
.fl-lean {
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--loss) 70%, transparent);
  overflow: hidden;
}
.fl-pos-bg {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--profit) 80%, transparent);
}

/* clickable cells inside rows */
.fl-link {
  cursor: pointer;
}
.fl-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fl-row-acts {
  display: inline-flex;
  gap: 2px;
  opacity: 0.35;
}
.fl-table tbody tr:hover .fl-row-acts {
  opacity: 1;
}
.fl-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
}
.fl-act:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.fl-act svg {
  width: 11px;
  height: 11px;
}

.fl-table-scroll {
  flex: 1;
  min-height: 0;
}

.fl-table {
  table-layout: fixed;
}
.fl-table th,
.fl-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-pop-item.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.fl-bell {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.fl-bell:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.fl-bell.on {
  color: #e8b931;
  border-color: color-mix(in srgb, #e8b931 60%, transparent);
  background: color-mix(in srgb, #e8b931 14%, transparent);
}
.fl-alerts {
  display: inline-flex;
  gap: 3px;
  padding: 0 4px;
}
.fl-search-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.fl-search-x {
  position: absolute;
  right: 6px;
  top: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 16px;
}
.fl-search-x:hover {
  color: var(--text);
}
.fl-search-note {
  align-self: center;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  user-select: none;
}
.fl-icon-btn {
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.fl-icon-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.fl-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.fl-foot {
  height: 26px;
  text-align: center !important;
  color: var(--text-muted);
}

.fl-ed-title {
  font-weight: 700;
  color: var(--text);
}
.fl-ed-of {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-ed-naming {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-deep));
}
.fl-ed-naming-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fl-pkg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.fl-pkg-toggle:hover {
  color: var(--text);
}
.fl-caret.right {
  transform: rotate(-90deg);
}
/* drawer tables size to their content; only the main feed is fixed */
.fl-table.fl-auto {
  table-layout: auto;
}
.fl-pad {
  padding: 8px 10px;
}
.fl-small {
  font-size: 10.5px;
  line-height: 1.45;
}
.fl-flat {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
}
.fl-legbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.fl-legbar .fl-seg button.fl-pos {
  color: var(--profit);
}
.fl-legbar .fl-seg button.fl-neg {
  color: var(--loss);
}
.fl-legbar .fl-seg button.on {
  background: var(--bg-hover);
}
.fl-chart {
  position: relative;
  margin-bottom: 10px;
}
.fl-chart-title {
  padding: 6px 0 2px;
  font-weight: 700;
  color: var(--text);
}
.fl-chart-controls {
  display: flex;
  gap: 6px;
  padding-bottom: 4px;
}
.fl-chart-controls .fl-seg {
  height: 20px;
}
.fl-chart-tip {
  position: absolute;
  top: 24px;
  z-index: 3;
  min-width: 170px;
  padding: 6px 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  font-size: 10.5px;
}
.fl-chart-tip-head {
  padding-bottom: 4px;
  font-weight: 700;
  color: var(--text);
}
.fl-chart-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
}
.fl-chart-tip-row b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fl-chart-tip-hint {
  padding-top: 4px;
  color: var(--accent);
}
.fl-drawer .fl-table tbody tr {
  cursor: default;
}

.fl-side-multi {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.fl-side-multi.debit {
  color: color-mix(in srgb, var(--profit) 75%, var(--text-muted));
}
.fl-side-multi.credit {
  color: color-mix(in srgb, var(--loss) 75%, var(--text-muted));
}
.fl-pkg-strikes {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  letter-spacing: -0.2px;
}
.fl-chain-pct.m {
  color: var(--text-dim);
}

.fl-legend b {
  color: var(--text);
  font-weight: 700;
}
.fl-legend-line {
  height: 2px !important;
  vertical-align: 3px !important;
}
.fl-chart-tip-row span i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
}
.fl-chart-tip-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

/* portaled to the body: carries the panel font itself */
.fl-chart-tip {
  z-index: 10001;
  font-family: var(--app-font), sans-serif;
  color: var(--text);
}

/* styled hover tips (flowTips.ts) */
.fl-dte {
  text-align: right;
}
.fl-dte {
  color: var(--text-muted);
  font-size: 10px;
}
.fl-table th.sortable {
  cursor: pointer;
}
.fl-table th.sortable:hover {
  color: var(--text);
}
.fl-sort {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.fl-sort.desc {
  border-top: 4px solid currentColor;
}
.fl-sort.asc {
  border-bottom: 4px solid currentColor;
}
.fl-pop-item.fixed {
  cursor: default;
  opacity: 0.6;
}
.fl-trade-btn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* drawer stats as a tidy grid instead of a wrapping row */
.fl-cstats {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px 10px !important;
}

/* ---- Following (exit watch) ---- */
.fl-follow {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.fl-follow-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fl-follow-head .fl-tkr {
  gap: 6px;
}
.fl-follow-line {
  padding: 3px 0 6px;
  color: var(--text-dim);
}
.fl-follow-line b {
  color: var(--text);
}
.fl-follow-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fl-follow-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fl-follow-stats > div > span:first-child {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.fl-follow-stats b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fl-follow-stats b.fl-pos {
  color: var(--profit);
}
.fl-follow-stats b.fl-neg {
  color: var(--loss);
}
.fl-follow-pl b {
  font-size: 15px;
  line-height: 18px;
}
.fl-follow-oi {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  padding-top: 6px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.fl-follow-sub {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  color: var(--text-dim);
}
.fl-table.fl-follow-exits {
  width: auto;
  margin-top: 4px;
}
.fl-table.fl-follow-exits td {
  padding-right: 14px;
}
.fl-new-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.fl-toasts {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}
.fl-toast {
  padding: 7px 10px;
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-light));
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 10.5px;
  line-height: 1.4;
  cursor: pointer;
}

.fl-pill.opened {
  color: #2dd4bf;
  background: color-mix(in srgb, #2dd4bf 14%, transparent);
}
.fl-pill.closed {
  color: #fb923c;
  background: color-mix(in srgb, #fb923c 14%, transparent);
}
.fl-pill.uw {
  color: #a3a3a3;
  background: color-mix(in srgb, #a3a3a3 14%, transparent);
}

/* Time and Ticker stay put while a narrow panel scrolls sideways; pinned
   cells need an opaque fill, with the row's tint layered over it */
.fl-table th.pin,
.fl-table td.pin {
  position: sticky;
  z-index: 1;
  background-color: var(--bg-base);
}
.fl-table th.pin {
  z-index: 3;
}
.fl-table th.pin-end,
.fl-table td.pin-end {
  box-shadow: 1px 0 0 var(--border);
}
.fl-table tbody tr:hover td.pin {
  background: var(--bg-alt);
}
.fl-table tr.big td.pin {
  background: linear-gradient(
      color-mix(in srgb, var(--accent) 7%, transparent),
      color-mix(in srgb, var(--accent) 7%, transparent)
    ),
    var(--bg-base);
}
.fl-table tr.flash td.pin {
  animation: fl-flash-pin 1.2s ease-out;
}
@keyframes fl-flash-pin {
  from {
    background: linear-gradient(
        color-mix(in srgb, var(--accent) 22%, transparent),
        color-mix(in srgb, var(--accent) 22%, transparent)
      ),
      var(--bg-base);
  }
}
/* an overflow-hidden cell would stop the label from sticking */
.fl-table tr.fl-day td {
  overflow: visible;
}
.fl-day-label {
  display: inline-block;
  position: sticky;
  left: 8px;
}

/* empty / loading note over the (empty) table, below its header */
.fl-empty.fl-over {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  pointer-events: none;
}
.fl-empty.fl-over .fl-link {
  pointer-events: auto;
}

/* Columns menu: drag list (ColumnOrderList) */
.fl-cols-hint {
  padding: 0 8px 4px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.fl-cols-hint + .col-order-wrap {
  margin: 0 6px 6px;
}

/* ---- One-ticker summary above the tape ---- */

.fl-tk {
  flex: none;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-deep);
  font-size: 11px;
  user-select: none;
}
.fl-tk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  min-height: 38px;
  padding: 4px 6px 4px 10px;
  border-bottom: 1px solid var(--border);
}
.fl-tk-id {
  display: inline-flex;
  flex-direction: column;
  margin-left: -10px;
  white-space: nowrap;
}
.fl-tk-sym {
  font-size: 13px;
  line-height: 1.1;
}
.fl-tk-id .fl-muted {
  font-size: 10px;
}
.fl-tk-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}
.fl-tk-stat > span {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fl-tk-stat > b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fl-tk-hot {
  color: var(--warning, #f0b429);
}
.fl-tk-lean {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fl-tk-split {
  display: inline-flex;
  width: 56px;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--loss);
}
.fl-tk-split .bull {
  background: var(--profit);
}
.fl-tk-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 6px 0 7px;
}
.fl-tk-col {
  min-width: 0;
  padding: 0 10px;
}
.fl-tk-col + .fl-tk-col {
  border-left: 1px solid var(--border);
}
.fl-tk-title {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.fl-tk-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 18px;
  padding: 0 3px;
  margin: 0 -3px;
  border-radius: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fl-tk-row:hover {
  background: var(--bg-hover);
}
.fl-tk-row .fl-cp {
  width: 92px;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-tk-row .fl-side {
  width: 26px;
  flex: none;
}
.fl-tk-n {
  width: 24px;
  flex: none;
  text-align: right;
}
.fl-tk-track {
  display: flex;
  flex: 1;
  min-width: 20px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.fl-tk-fill {
  height: 100%;
  flex: none;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}
.fl-tk-fill.bull {
  background: color-mix(in srgb, var(--profit) 70%, transparent);
}
.fl-tk-fill.bear {
  background: color-mix(in srgb, var(--loss) 70%, transparent);
}
.fl-tk-row > b {
  width: 50px;
  flex: none;
  text-align: right;
}
/* Watchlist Panel Styles */
.watchlist-panel {
  padding: 0;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-family: var(--app-font), monospace;
  user-select: none;
}

.watchlist-panel * {
  font-family: inherit;
}

/* Title Bar */
.watchlist-title-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  min-width: 0;
}

.watchlist-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
}

.watchlist-icon-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}

.watchlist-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.watchlist-dropdown-container {
  position: relative;
}

.watchlist-dropdown-button {
  height: 22px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.watchlist-dropdown-button:hover {
  border-color: var(--text-muted);
}

/* Scanner Dropdown Styles */
.scanner-dropdown-container {
  position: relative;
}

/* Consolidated Button Styles */
.watchlist-button {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.watchlist-button:hover {
  background: var(--bg-hover);
}

/* Special button variants */
.watchlist-button--sort {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  min-width: 32px;
  transition: all 0.2s ease;
}

.watchlist-button--sort:hover {
  color: var(--text);
}

.watchlist-button--sort.active {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--text-muted);
}

.watchlist-button--action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
}

.watchlist-button--action:hover {
  background: var(--bg-alt);
}

.watchlist-button--edit:hover {
  color: var(--text);
}

.watchlist-button--delete:hover {
  color: var(--loss);
}

.watchlist-button--remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 3px;
  opacity: 0;
}

.watchlist-table tbody tr:hover .watchlist-button--remove {
  opacity: 1;
}

.watchlist-button--remove:hover {
  color: var(--loss);
  background: var(--bg-hover);
}

.scanner-dropdown {
  position: absolute;
  user-select: none;
  top: 100%;
  left: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 4px;
  z-index: 1000;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scanner-dropdown-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  padding: 4px 8px;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

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

.watchlist-dropdown {
  position: absolute;
  user-select: none;
  top: calc(100% + 3px);
  left: 0;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 4px;
  z-index: 1000;
  width: 290px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.watchlist-dropdown-header {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.watchlist-search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}

.watchlist-search-wrap:focus-within {
  border-color: var(--border-light);
  color: var(--text-dim);
}

.watchlist-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--text);
  font-size: 11px;
}

.watchlist-search-input:focus,
.watchlist-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.watchlist-sort-seg {
  display: inline-flex;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.watchlist-sort-seg button {
  padding: 0 7px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.watchlist-sort-seg button + button {
  border-left: 1px solid var(--border);
}

.watchlist-sort-seg button:hover {
  color: var(--text);
}

.watchlist-sort-seg button.on {
  background: var(--bg-hover);
  color: var(--text);
}

.watchlist-section-label {
  padding: 6px 6px 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.watchlist-overview-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.watchlist-item--overview .watchlist-item-count {
  margin-right: 60px;
}

.watchlist-item-count {
  flex-shrink: 0;
  min-width: 22px;
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.watchlist-items-container {
  max-height: 60vh;
  overflow-y: auto;
}

.watchlist-no-results {
  padding: 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.watchlist-item {
  position: relative;
  height: 24px;
  padding: 0 6px 0 8px;
  cursor: pointer;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}

.watchlist-item.active {
  box-shadow: inset 2px 0 0 var(--accent);
}

.watchlist-item:hover,
.watchlist-item.active {
  background-color: var(--bg-hover);
  color: var(--text);
}

.watchlist-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.watchlist-basket-change {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The dropdown shows change as colored text; the title-bar badge keeps
   its tinted pill */
.watchlist-item .watchlist-basket-change {
  background: none !important;
  padding: 0;
}

.watchlist-dropdown-button .watchlist-basket-change {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  min-width: 0;
}

.watchlist-name-text {
  font-weight: 400;
}

.watchlist-matching-symbols {
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watchlist-basket-change.positive {
  color: var(--profit);
  background-color: color-mix(in srgb, var(--profit) 12%, transparent);
}

.watchlist-basket-change.negative {
  color: var(--loss);
  background-color: color-mix(in srgb, var(--loss) 10%, transparent);
}

.watchlist-basket-change.neutral {
  color: var(--text-muted);
  background-color: var(--bg-hover);
}

/* Rename/delete float over the count + change on hover */
.watchlist-item-actions {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 2px;
  padding-left: 12px;
  background: linear-gradient(to right, transparent, var(--bg-hover) 12px);
}

.watchlist-item:hover .watchlist-item-actions {
  display: flex;
}

.watchlist-name-input {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border-light);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  width: 100px;
  min-width: 0;
}

/* Watchlist Table */
.watchlist-table-container {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.watchlist-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  table-layout: fixed;
}

.watchlist-table th,
.watchlist-table td {
  height: 20px;
  padding: 2px 6px;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(127, 127, 127, 0.08);
}

.watchlist-table td {
  color: var(--text-dim);
}

.watchlist-table th {
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-base);
  box-shadow: 0 1px 0 var(--border);
}

.watchlist-table th:hover {
  color: var(--accent);
}

/* Numbers right-aligned so digits stack (these beat the generic th/td
   left-align above on specificity) */
.watchlist-table th.num,
.watchlist-table td.watchlist-price-cell,
.watchlist-table td.watchlist-change-cell,
.watchlist-table td.watchlist-volume-cell,
.watchlist-table td.watchlist-volumenotional-cell,
.watchlist-table td.watchlist-marketcap-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cell semantics beat the generic dim td rule above */
.watchlist-table td.watchlist-symbol-cell {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}

.watchlist-table td.watchlist-change-positive {
  color: var(--profit);
}

.watchlist-table td.watchlist-change-negative {
  color: var(--loss);
}

.watchlist-table td.watchlist-change-neutral {
  color: var(--text-muted);
}

/* Sort arrow only on the active column */
.watchlist-table .sort-neutral {
  display: none;
}

.watchlist-table .sort-icon {
  width: 8px;
  height: 8px;
  margin-left: 3px;
  vertical-align: middle;
}

.watchlist-table .sort-asc::before,
.watchlist-table .sort-desc::before {
  border-left-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 4px;
  border-top-width: 4px;
  border-bottom-color: currentColor;
  border-top-color: currentColor;
}

.watchlist-table .sort-asc::before {
  border-top-width: 0;
}

.watchlist-table .sort-desc::before {
  border-bottom-width: 0;
}

/* Sort Icon Styles */
.sort-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
}

.sort-neutral::before,
.sort-neutral::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.sort-neutral::before {
  top: 1px;
  border-bottom: 3px solid var(--text);
}

.sort-neutral::after {
  bottom: 1px;
  border-top: 3px solid var(--text);
}

.sort-asc::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--text);
}

.sort-desc::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--text);
}

.watchlist-table th.sortable {
  min-width: 80px;
}

.watchlist-table tbody tr {
  cursor: pointer;
}

.watchlist-table tbody tr:hover {
  background-color: var(--bg-alt);
}

.watchlist-row-selected,
.watchlist-row-selected:hover {
  background-color: var(--bg-hover) !important;
  position: relative;
}

.watchlist-row-selected td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

.watchlist-symbol-cell {
  font-weight: 700;
  color: var(--text) !important;
  cursor: pointer;
  transition: color 0.2s ease;
  text-align: left;
}

.watchlist-symbol-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.watchlist-symbol-cell:hover {
  color: var(--text-dim);
}

.watchlist-price-cell,
.watchlist-volume-cell,
.watchlist-volumenotional-cell,
.watchlist-change-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.watchlist-change-positive {
  color: var(--profit);
}

.watchlist-change-negative {
  color: var(--loss);
}

.watchlist-change-neutral {
  color: var(--text);
}

/* Add specific width for the remove button column */
.watchlist-table th:last-child,
.watchlist-table td:last-child {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  padding: 4px 2px;
  text-align: center;
}

.watchlist-edit-input {
  width: 80px;
  font-weight: 600;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border-light);
  padding: 2px 4px;
  border-radius: 2px;
}

/* ── View toggle (List / Scanner) ── */
.watchlist-view-toggle {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.watchlist-view-tab {
  background: var(--bg-alt);
  color: var(--text-muted);
  border: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.watchlist-view-tab.active {
  background: var(--accent);
  color: var(--text);
}

/* ── Scanner view ── */
.scanner-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.scanner-mode-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.scanner-mode-tab {
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.scanner-mode-tab:hover {
  background: var(--bg-hover);
}

.scanner-mode-tab.active {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Scanner movers table ── */
.scanner-movers-table {
  width: 100%;
  /* separate, not collapse: collapsed borders break sticky thead painting
     in Chromium (rows draw over the stuck header) */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.scanner-movers-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 2px 6px;
  position: sticky;
  top: 0;
  z-index: 2;
  /* --bg does not exist in the theme palette (bg-base/bg-alt/bg-deep do) --
     it resolved transparent and rows showed through the stuck header */
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}

.scanner-movers-table th.num,
.scanner-movers-table td.num {
  text-align: right;
}

.scanner-movers-table td {
  padding: 2px 6px;
  border-bottom: 1px solid var(--bg-alt);
}

.scanner-movers-table tbody tr {
  cursor: pointer;
}

.scanner-movers-table tbody tr:hover {
  background: var(--bg-hover);
}

.scanner-movers-table tbody tr.selected {
  background: var(--bg-alt);
}

.scanner-movers-symbol {
  font-weight: 700;
  color: var(--text);
}

.scanner-view-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

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

.scanner-min-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.scanner-min-input {
  width: 44px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 11px;
}

.scanner-loading {
  color: var(--text-muted);
  font-size: 11px;
}

.scanner-picker {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  background: var(--bg-alt);
  margin-bottom: 6px;
  padding: 2px 0;
}

.scanner-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.scanner-picker-item:hover {
  background: var(--bg-hover);
}

.scanner-picker-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-picker-count {
  color: var(--text-muted);
  font-size: 11px;
}

.scanner-picker-empty,
.scanner-section-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 8px;
}

.scanner-sections {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.scanner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 8px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.scanner-section {
  margin-bottom: 10px;
}

.scanner-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.scanner-section-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-section-change {
  font-size: 11px;
  font-weight: 600;
}

.scanner-section-hits {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.scanner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.scanner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px 2px 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.1s ease,
    background 0.1s ease;
}

.scanner-chip:hover {
  filter: brightness(1.12);
}

/* Direction-tinted chips: the whole pill leans green (uptrend) or red
   (downtrend) so the two views read at a glance and never look alike. */
.scanner-chip-strong {
  border-color: color-mix(in srgb, var(--profit) 45%, transparent);
  background: color-mix(in srgb, var(--profit) 12%, var(--bg-alt));
}

.scanner-chip-weak {
  border-color: color-mix(in srgb, var(--loss) 45%, transparent);
  background: color-mix(in srgb, var(--loss) 12%, var(--bg-alt));
}

.scanner-chip.selected {
  border-color: var(--text);
}

/* The count sits in a small solid badge in the direction's color. */
.scanner-chip-hits {
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
}

.scanner-chip-strong .scanner-chip-hits {
  background: var(--profit);
  /* --profit is a bright green; white washes out on it, so use dark text
     (kept in-hue rather than flat black). --loss is darker, so weak keeps #fff. */
  color: color-mix(in srgb, var(--profit) 24%, #000);
}

.scanner-chip-weak .scanner-chip-hits {
  background: var(--loss);
}

.watchlist-add-row {
  color: var(--text-muted);
}

.watchlist-add-label {
  white-space: nowrap;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-muted);
}

.watchlist-add-row:hover .watchlist-add-label {
  color: var(--text);
}

/* Empty State Styles */
.watchlist-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-muted);
}

.watchlist-empty-message {
  text-align: center;
  max-width: 300px;
}

.watchlist-empty-message h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.watchlist-empty-message p {
  margin: 0 0 16px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Ticker Description Tooltip */
.ticker-description-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  max-width: 300px;
  min-width: 200px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-family: var(--app-body-font), sans-serif;
  font-weight: 400;
  white-space: normal;
  word-wrap: break-word;
  margin-top: 4px;
  opacity: 0;
  animation: fadeInTooltip 0.2s ease-in-out forwards;
}

.ticker-description-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--bg-alt);
}

@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Watchlist Settings Modal Styles */

/* ---- Display options (Settings > Display) ---- */

/* Tick flash: brief tint on the price after it moves */
.watchlist-flash-up {
  background-color: color-mix(in srgb, var(--profit) 28%, transparent) !important;
  transition: background-color 0.45s ease-out;
}

.watchlist-flash-down {
  background-color: color-mix(in srgb, var(--loss) 28%, transparent) !important;
  transition: background-color 0.45s ease-out;
}

.watchlist-rvol-bar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.watchlist-rvol-bar {
  position: relative;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hover);
  overflow: hidden;
}

.watchlist-rvol-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 2px;
}

/* Basket summary strip */
.wl-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}

.wl-summary-breadth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wl-breadth-bar {
  position: relative;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--loss) 55%, transparent);
  overflow: hidden;
}

.wl-breadth-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--profit);
}

.wl-summary-pick {
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.wl-summary-pick b {
  color: var(--text);
}

.wl-summary-pick:hover b {
  color: var(--accent);
}

/* Tape view: two-line rows -- ticker/quote on top, name/day range below */
.wl-tape {
  display: flex;
  flex-direction: column;
}

.wl-tape-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 18px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  padding: 5px 6px 5px 8px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.08);
  cursor: pointer;
}

/* Every cell pinned: grid places column-locked items before auto ones,
   so partial placement let the name take the ticker's slot */
.wl-tape-row > :first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.wl-tape-row:hover {
  background: var(--bg-alt);
}

.wl-tape-row.selected {
  background: var(--bg-hover);
  box-shadow: inset 2px 0 0 var(--accent);
}

.wl-tape-row:hover .watchlist-button--remove {
  opacity: 1;
}

.wl-tape-row .watchlist-button--remove {
  grid-column: 4;
  grid-row: 1 / span 2;
}

.wl-tape-sym {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.wl-tape-quote {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.wl-tape-last {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 0 2px;
  border-radius: 2px;
}

.wl-tape-pct {
  min-width: 58px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
}

.wl-tape-name {
  grid-column: 2;
  grid-row: 2;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-tape-range-wrap {
  grid-column: 3;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 9.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Where the price sits in the day's range */
.wl-tape-range {
  position: relative;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--bg-hover);
}

.wl-tape-range > span {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 7px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text-dim);
}

/* Tiles view: heatmap grid */
.wl-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px;
  padding: 6px;
}

.wl-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.wl-tile:hover {
  border-color: var(--text-muted);
}

.wl-tile.selected {
  outline: 1px solid var(--accent);
}

.wl-tile-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wl-tile-sym {
  font-size: 12px;
  font-weight: 700;
}

.wl-tile-pct {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Title bar chart button: which chart opens */
.wl-chart-menu-wrap {
  position: relative;
}
.wl-chart-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  user-select: none;
}
.wl-chart-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.wl-chart-menu button:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.wl-chart-menu button span {
  color: var(--text-dim);
  font-size: 11px;
}
.calendar-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
  font-family: var(--app-font), monospace;
  user-select: none;
  -webkit-user-select: none;
}

/* Top bar */
.calendar-panel .cal-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.calendar-panel .cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-panel .cal-nav-btn {
  padding: 2px 6px;
  font-size: 10px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--app-font), monospace;
}

.calendar-panel .cal-nav-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.calendar-panel .cal-month-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--text);
  min-width: 120px;
  text-align: center;
}

.calendar-panel .cal-today-btn {
  padding: 2px 8px;
  font-size: 10px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--app-font), monospace;
  margin-left: 4px;
}

.calendar-panel .cal-today-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.calendar-panel .cal-search {
  flex: 0 0 auto;
}

.calendar-panel .cal-search-input {
  width: 110px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--app-font), monospace;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 2px;
  color: var(--text);
  outline: none;
}

.calendar-panel .cal-search-input:focus {
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
}

.calendar-panel .cal-search-input::placeholder {
  color: color-mix(in srgb, var(--text) 25%, transparent);
}

.calendar-panel .cal-filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-panel .cal-select {
  padding: 2px 4px;
  font-size: 10px;
  font-family: var(--app-font), monospace;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 2px;
  color: var(--text);
  outline: none;
  cursor: pointer;
}

.calendar-panel .cal-select option {
  background: var(--bg-input);
  color: var(--text);
}

.calendar-panel .cal-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.calendar-panel .cal-filter-checkbox input {
  margin: 0;
  cursor: pointer;
}

.calendar-panel .cal-count {
  font-size: 10px;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  margin-left: auto;
  padding-right: 4px;
  white-space: nowrap;
}

/* Event type filter chips */
.calendar-panel .cal-type-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 22px;
}

.calendar-panel .cal-type-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 9px;
  font-family: var(--app-font), monospace;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.calendar-panel .cal-type-chip:hover {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  border-color: color-mix(in srgb, var(--text) 15%, transparent);
}

.calendar-panel .cal-type-chip--active {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.calendar-panel .cal-type-chip--excluded {
  background: rgba(255, 92, 92, 0.06);
  opacity: 0.7;
}

.calendar-panel .cal-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar-panel .cal-type-clear {
  padding: 1px 6px;
  font-size: 9px;
  font-family: var(--app-font), monospace;
  background: rgba(255, 92, 92, 0.08);
  border: 1px solid rgba(255, 92, 92, 0.15);
  border-radius: 10px;
  color: var(--tc-ff5c5c);
  cursor: pointer;
  transition: all 0.15s;
}

.calendar-panel .cal-type-clear:hover {
  background: rgba(255, 92, 92, 0.15);
}

/* Body: grid + sidebar */
.calendar-panel .cal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.calendar-panel .cal-grid-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Day of week header */
.calendar-panel .cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex-shrink: 0;
}

.calendar-panel .cal-dow {
  padding: 3px 4px;
  font-size: 9px;
  text-align: center;
  color: color-mix(in srgb, var(--text) 35%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

/* Calendar grid */
.calendar-panel .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  flex: 1;
  overflow: hidden;
}

.calendar-panel .cal-cell {
  border-right: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
  padding: 1px 3px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
  min-height: 0;
}

/* pnl.css styles the same .cal-* class names (its grid is 7 days + a
   weekly P&L column = 8 columns) and stylesheet load order is
   bundler-dependent -- EVERY selector in this file is scoped under
   .calendar-panel so the events calendar always wins its own cascade. */
.calendar-panel .cal-grid-container .cal-cell {
  align-items: stretch;
}

.calendar-panel .cal-cell:hover {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

.calendar-panel .cal-cell--dim {
  opacity: 0.3;
}

.calendar-panel .cal-cell--today {
  background: rgba(0, 255, 136, 0.04);
}

.calendar-panel .cal-cell--today .cal-cell-day {
  color: var(--profit);
  font-weight: bold;
}

.calendar-panel .cal-cell--selected {
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}

.calendar-panel .cal-cell-day {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.1;
  flex-shrink: 0;
}

.calendar-panel .cal-cell-events {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.calendar-panel .cal-cell-event {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

.calendar-panel .cal-event-logo {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: contain;
}

.calendar-panel .cal-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar-panel .cal-event-ticker {
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.calendar-panel .cal-cell-more {
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  text-align: center;
  flex-shrink: 0;
  height: 13px;
  line-height: 13px;
}

.calendar-panel .cal-cell-count {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 20%, transparent);
}

/* Sidebar */
.calendar-panel .cal-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-left: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.calendar-panel .cal-sidebar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  flex-shrink: 0;
}

.calendar-panel .cal-sidebar-date {
  font-size: 11px;
  color: var(--text);
  font-weight: bold;
}

.calendar-panel .cal-sidebar-count {
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  margin-left: auto;
}

.calendar-panel .cal-sidebar-close {
  padding: 0 4px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  cursor: pointer;
  transition: color 0.15s;
}

.calendar-panel .cal-sidebar-close:hover {
  color: var(--text);
}

.calendar-panel .cal-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0;
}

.calendar-panel .cal-sidebar-item {
  padding: 3px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
  transition: background 0.1s;
}

.calendar-panel .cal-sidebar-item:hover {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.calendar-panel .cal-sidebar-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.calendar-panel .cal-sidebar-company {
  font-size: 9px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 24px;
}

.calendar-panel .cal-sidebar-name {
  font-size: 9px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 24px;
}

.calendar-panel .cal-sidebar-logo {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: contain;
}

.calendar-panel .cal-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar-panel .cal-sidebar-ticker {
  font-size: 12px;
  font-weight: bold;
  color: var(--text);
  min-width: 40px;
}

.calendar-panel .cal-sidebar-type {
  font-size: 9px;
}

.calendar-panel .cal-sidebar-status {
  font-size: 8px;
  padding: 0 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-muted);
}

.calendar-panel .cal-sidebar-status--confirmed {
  background: rgba(0, 255, 136, 0.1);
  color: rgba(0, 255, 136, 0.7);
}

.calendar-panel .cal-sidebar-mcap {
  font-size: 9px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Loading / Error */
.calendar-panel .cal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  font-size: 12px;
}

.calendar-panel .cal-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--tc-ff5c5c);
  font-size: 12px;
}

/* View toggle button */
.calendar-panel .cal-view-toggle {
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--app-font), monospace;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.calendar-panel .cal-view-toggle:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.calendar-panel .cal-view-toggle--active {
  color: #ffb347;
  border-color: rgba(255, 179, 71, 0.3);
  background: rgba(255, 179, 71, 0.08);
}

.calendar-panel .cal-view-toggle--active:hover {
  background: rgba(255, 179, 71, 0.12);
}

/* Weekly Earnings Grid */
.calendar-panel .cal-week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.calendar-panel .cal-week-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  overflow: hidden;
}

.calendar-panel .cal-week-col:last-child {
  border-right: none;
}

.calendar-panel .cal-week-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  flex-shrink: 0;
}

.calendar-panel .cal-week-day-header--today {
  background: rgba(0, 255, 136, 0.04);
}

.calendar-panel .cal-week-day-name {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-panel .cal-week-day-header--today .cal-week-day-name {
  color: var(--profit);
}

.calendar-panel .cal-week-day-date {
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 35%, transparent);
}

.calendar-panel .cal-week-day-header--today .cal-week-day-date {
  color: rgba(0, 255, 136, 0.5);
}

.calendar-panel .cal-week-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.calendar-panel .cal-week-half + .cal-week-half {
  border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

.calendar-panel .cal-week-half-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 2px;
  display: grid;
  grid-template-columns: 16px max-content minmax(0, 1fr) auto;
  column-gap: 4px;
  align-content: start;
}

.calendar-panel {
  --tc-cal-before: rgba(100, 200, 255, 0.6);
  --tc-cal-after: rgba(255, 179, 71, 0.6);
}

[data-theme='light'] .calendar-panel {
  --tc-cal-before: #1d6fa5;
  --tc-cal-after: #a85d0b;
}

.calendar-panel .cal-week-section {
  padding: 3px 4px 2px;
  font-size: 8px;
  font-weight: bold;
  color: var(--tc-cal-before);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(100, 200, 255, 0.08);
  flex-shrink: 0;
}

.calendar-panel .cal-week-section--after {
  color: var(--tc-cal-after);
  border-bottom-color: rgba(255, 179, 71, 0.08);
}

.calendar-panel .cal-week-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 2%, transparent);
  transition: background 0.1s;
}

.calendar-panel .cal-week-item:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* Unverified rows: unknown report time, tentative date, or a date the
   backend corrected after its sources disagreed (tooltip carries why) */
.calendar-panel .cal-week-item--uncertain {
  box-shadow: inset 2px 0 0 rgba(230, 180, 60, 0.55);
  background: rgba(230, 180, 60, 0.05);
}

.calendar-panel .cal-week-item--uncertain:hover {
  background: rgba(230, 180, 60, 0.1);
}

.calendar-panel .cal-week-logo {
  grid-column: 1;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: contain;
}

.calendar-panel .cal-week-dot {
  grid-column: 1;
  justify-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 20%, transparent);
}

.calendar-panel .cal-week-ticker {
  grid-column: 2;
  font-size: 11px;
  font-weight: bold;
  color: var(--text);
  white-space: nowrap;
}

.calendar-panel .cal-week-name {
  grid-column: 3;
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 40%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.calendar-panel .cal-week-mcap {
  grid-column: 4;
  justify-self: end;
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 35%, transparent);
  white-space: nowrap;
}

.calendar-panel .cal-week-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 10px;
  color: color-mix(in srgb, var(--text) 15%, transparent);
}

/* -- Fable pass: motion, depth, econ/dividend lanes -------------------- */

.calendar-panel .cal-body {
  animation: cal-fade-in 0.25s ease both;
}

@keyframes cal-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calendar-panel .cal-cell {
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.calendar-panel .cal-cell:hover {
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);
}

.calendar-panel .cal-cell--today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--profit, #00ff88) 35%, transparent);
}

.calendar-panel .cal-cell--selected {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #4d8dff) 55%, transparent);
}

.calendar-panel .cal-cell-count {
  top: 2px;
  right: 3px;
  padding: 0 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: color-mix(in srgb, var(--text) 40%, transparent);
  line-height: 13px;
}

.calendar-panel .cal-cell-event {
  border-radius: 3px;
  padding: 0 2px;
  transition: background 0.1s ease;
}

.calendar-panel .cal-cell-event:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Economic events: ticker-less macro rows, impact-colored dot, softer text */
.calendar-panel .cal-cell-event--econ .cal-event-ticker {
  font-weight: normal;
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 65%, transparent);
  font-style: italic;
}

.calendar-panel .cal-type-chip {
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.calendar-panel .cal-type-chip:hover {
  transform: translateY(-1px);
}

.calendar-panel .cal-nav-btn:hover,
.calendar-panel .cal-today-btn:hover {
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
}

.calendar-panel .cal-search-input {
  border-radius: 4px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.calendar-panel .cal-search-input:focus {
  border-color: color-mix(in srgb, var(--accent, #4d8dff) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4d8dff) 12%, transparent);
}

.calendar-panel .cal-sidebar {
  animation: cal-slide-in 0.18s ease both;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text) 1.5%, transparent),
    transparent
  );
}

@keyframes cal-slide-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.calendar-panel .cal-sidebar-item {
  transition: background 0.1s ease;
  border-radius: 4px;
}

.calendar-panel .cal-sidebar-item:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* Econ estimate/actual + dividend pay-date detail rows */
.calendar-panel .cal-sidebar-detail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 9px;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  padding: 1px 0 2px 14px;
}

.calendar-panel .cal-sidebar-detail--time {
  color: var(--text);
  font-weight: 600;
}

.calendar-panel .cal-sidebar-detail--actual {
  color: var(--profit, #00ff88);
}

.calendar-panel .cal-sidebar-detail--impact {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 176, 32, 0.8);
}

.calendar-panel .cal-sidebar-list::-webkit-scrollbar,
.calendar-panel .cal-week-half-list::-webkit-scrollbar {
  width: 6px;
}

.calendar-panel .cal-sidebar-list::-webkit-scrollbar-thumb,
.calendar-panel .cal-week-half-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 3px;
}

.calendar-panel .cal-week-item {
  border-radius: 3px;
  transition: background 0.1s ease;
}

.calendar-panel .cal-week-item:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .calendar-panel * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* Preset quick-filters + impact levels */
.calendar-panel .cal-preset {
  padding: 1px 9px;
  font-size: 9px;
  font-family: var(--app-font), monospace;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 10px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.calendar-panel .cal-preset:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 25%, transparent);
}

.calendar-panel .cal-preset--active {
  color: var(--accent, #4d8dff);
  border-color: color-mix(in srgb, var(--accent, #4d8dff) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #4d8dff) 10%, transparent);
}

.calendar-panel .cal-preset-sep {
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  margin: 0 2px;
}

.calendar-panel .cal-sidebar-detail--impact-high {
  color: var(--tc-ff5c5c);
}

/* Day cells scroll in place -- wheel works, no visible scrollbar chrome */
.calendar-panel .cal-cell-events {
  overflow-y: auto;
  scrollbar-width: none;
}

.calendar-panel .cal-cell-events::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.calendar-panel .cal-sidebar-econ-name {
  font-size: 11px;
  color: color-mix(in srgb, var(--text) 85%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.calendar-panel .cal-sidebar-detail {
  padding-left: 24px;
}

.calendar-panel .cal-sidebar-detail--econ {
  padding-left: 13px;
}

.calendar-panel .cal-sidebar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.calendar-panel .cal-sidebar-link {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 3px;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-size: 10px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease;
}

.calendar-panel .cal-sidebar-link:hover {
  color: var(--accent, #4d8dff);
  border-color: color-mix(in srgb, var(--accent, #4d8dff) 55%, transparent);
}

.calendar-panel .cal-sidebar-div-amt {
  color: var(--profit, #00ff88);
}
/* Chart grid panel: toolbar, cells, floating symbol search, layout picker */
.chart-grid-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--chart-bg);
  font-family: var(--app-font), sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* Inputs inside the grid still need to be selectable/typeable. */
.chart-grid-panel input,
.chart-grid-panel textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* ── Toolbar ── */
.chart-grid-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 11px;
}

/* Fullscreen: the charts only */
.chart-grid-panel.is-fullscreen .chart-grid-toolbar {
  display: none;
}

.chart-grid-tb-sep {
  width: 1px;
  height: 14px;
  margin: 0 6px;
  background: var(--border);
}

.chart-grid-tb-label {
  margin-right: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chart-grid-tb-btn {
  height: 22px;
  padding: 0 7px;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.chart-grid-tb-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.chart-grid-tb-btn.active {
  color: var(--tc-45b5ff);
}

.chart-grid-tb-select {
  height: 22px;
  max-width: 180px;
  padding: 0 4px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
}

.chart-grid-tb-count {
  min-width: 44px;
  text-align: center;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ── Cells ── */
.chart-grid-cells {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
}

.chart-grid-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--chart-bg);
}
/* Maximized grid: the others stay mounted (no reload on restore) */
.chart-grid-cell.hidden {
  display: none;
}
/* Focus ring drawn inside the cell so it never shifts the layout */
.chart-grid-cell.focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(69, 181, 255, 0.3);
  pointer-events: none;
  z-index: 5;
}
/* One chart on screen: nothing to tell apart */
.chart-grid-cells.maximized .chart-grid-cell.focused::after {
  display: none;
}

.chart-grid-cell-chart {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chart-grid-cell-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 16px;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  cursor: text;
}

.chart-grid-cell-empty-hint {
  font-size: 10px;
  color: var(--text-muted);
}

/* Symbol search sits where the ticker is (over the title), so typing reads
   as editing the ticker in place. One rounded field, suggestions as a card */
.chart-grid-search {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 20;
  width: min(320px, calc(100% - 12px));
  height: 30px;
}
.chart-grid-search .symbol-search-input {
  height: 30px;
  padding: 0 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-family: var(--app-font), sans-serif;
  font-size: 12px;
}
.chart-grid-search .symbol-search-input:focus {
  border-color: #45b5ff;
  box-shadow:
    0 0 0 2px rgba(69, 181, 255, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.45);
}
.chart-grid-search .suggestions-dropdown {
  top: calc(100% + 4px);
  width: min(460px, calc(100vw - 24px));
  border-top: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* Keyboard highlight: the base style uses --bg-alt, the card's own color */
.chart-grid-search .suggestions-table tr.highlighted {
  background: var(--bg-hover);
}
/* The chart dims behind an open search */
.chart-grid-cell.searching .chart-grid-cell-chart::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 19;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Mounted but invisible until the first keystroke focuses it */
.chart-grid-search.idle {
  opacity: 0;
  pointer-events: none;
}

/* ── Layout picker ── */
.chart-grid-layout-picker {
  position: relative;
}

.chart-grid-layout-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.chart-grid-layout-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.chart-grid-layout-caret {
  font-size: 8px;
  opacity: 0.6;
}

.chart-grid-layout-menu {
  position: absolute;
  top: calc(100% + 4px);
  /* sits at the toolbar's right end */
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  min-width: 340px;
  padding: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 0, 0, 0.5));
  user-select: none;
}

.chart-grid-layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.chart-grid-layout-option:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.chart-grid-layout-option.selected {
  border-color: #45b5ff;
  color: var(--text);
}

.chart-grid-preset-glyph {
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── Dividers: invisible drag strips on the track boundaries ── */
.chart-grid-divider {
  position: absolute;
  z-index: 15;
}
.chart-grid-divider.vertical {
  top: 0;
  bottom: 0;
  width: 7px;
  transform: translateX(-3.5px);
  cursor: col-resize;
}
.chart-grid-divider.horizontal {
  left: 0;
  right: 0;
  height: 7px;
  transform: translateY(-3.5px);
  cursor: row-resize;
}
.chart-grid-divider:hover,
.chart-grid-divider:active {
  background: rgba(69, 181, 255, 0.35);
}

/* ── Settings popover ── */
.chart-grid-settings {
  position: relative;
}
.chart-grid-settings-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 200px;
}

/* ── Saved layouts menu ── */
.chart-grid-layouts {
  position: relative;
}
.chart-grid-layouts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.chart-grid-layouts-menu {
  position: absolute;
  top: calc(100% + 4px);
  /* sits at the toolbar's right end */
  right: 0;
  z-index: 30;
  min-width: 210px;
  max-height: 60vh;
  overflow-y: auto;
}
.chart-grid-layouts-menu .chart-popup-row.active {
  color: var(--tc-45b5ff);
}
.chart-grid-layouts-name {
  display: flex;
  gap: 4px;
  padding: 2px 4px 4px;
}
.chart-grid-layouts-name .indicator-input {
  flex: 1;
  width: auto;
  margin-left: 0;
  text-align: left;
  padding: 0 6px;
  height: 22px;
}

/* ── Focused chart's interval / tools bar, portaled in by that chart ── */
.chart-grid-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chart-grid-tools:empty {
  display: none;
}
.symbol-search-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.symbol-search-input {
  padding: 6px 8px;
  border-radius: 4px;
  background-color: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  transition: border-color 0.2s ease;
}

.symbol-search-input:focus {
  border-color: #4a9eff;
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
}

.symbol-search-input::placeholder {
  color: var(--text-muted);
}

.suggestions-dropdown {
  position: absolute;
  user-select: none;
  top: 100%;
  left: 0;
  width: 400px;
  max-height: 400px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.suggestions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--app-font), monospace;
}

.suggestions-table th,
.suggestions-table td {
  padding: 2px 6px;
  text-align: left;
  border-bottom: 1px solid var(--bg-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestions-table th {
  background: var(--bg-alt);
  color: var(--text);
  position: sticky;
  top: 0;
  font-weight: 600;
  font-size: 10px;
  font-family: var(--app-font), monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 22px;
  cursor: pointer;
}

.suggestions-table tr {
  height: 28px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.suggestions-table tr:hover,
.suggestions-table tr.highlighted {
  background: var(--bg-alt);
}

.suggestions-table td:first-child {
  font-weight: 600;
  color: var(--text);
  font-family: var(--app-font), monospace;
  font-size: 12px;
}

.suggestions-table td:nth-child(2) {
  max-width: 140px;
  font-size: 11px;
  font-family: var(--app-font), monospace;
}

.suggestions-table td:nth-child(3) {
  text-align: right;
  font-family: var(--app-font), monospace;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 12px;
}

.no-suggestions {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--app-font), monospace;
  padding: 8px;
}

/* Scrollbar */
.suggestions-dropdown::-webkit-scrollbar {
  width: 8px;
}

.suggestions-dropdown::-webkit-scrollbar-track {
  background: var(--bg-base);
}

.suggestions-dropdown::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 4px;
}

.suggestions-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* Sort indicators */
.suggestions-table th::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.3;
}

.suggestions-table th:hover::after {
  opacity: 0.6;
}

/* Loading state */
.suggestions-dropdown.loading {
  opacity: 0.7;
}

.suggestions-dropdown.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top: 2px solid #4a9eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .suggestions-dropdown {
    width: 100vw;
    left: 0;
    right: 0;
  }
}

@media (max-width: 900px) {
  .suggestions-dropdown {
    width: 98vw;
  }
}
.fundamentals-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
  font-family: var(--app-font), monospace;
  user-select: none;
  -webkit-user-select: none;
}

/* Top bar */
.fund-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  flex-shrink: 0;
}

.fund-tabs {
  display: flex;
  gap: 2px;
}

.fund-tab {
  padding: 3px 10px;
  font-size: 11px;
  font-family: var(--app-font), monospace;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.fund-tab:hover {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.fund-tab--active {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: color-mix(in srgb, var(--text) 15%, transparent);
}

.fund-search-wrapper {
  flex: 1;
  max-width: 220px;
}

.fund-back-btn {
  padding: 3px 8px;
  font-size: 11px;
  font-family: var(--app-font), monospace;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.fund-back-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Screener */
.fund-screener {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.fund-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.fund-filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fund-filter-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

.fund-filter-input {
  width: 50px;
  padding: 2px 4px;
  font-size: 10px;
  font-family: var(--app-font), monospace;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 2px;
  color: var(--text);
  outline: none;
}

.fund-filter-input:focus {
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
}

.fund-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.fund-filter-checkbox input {
  margin: 0;
  cursor: pointer;
}

.fund-table-wrapper {
  flex: 1;
  overflow: auto;
}

.fund-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.fund-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-input);
  padding: 4px 6px;
  text-align: right;
  font-weight: normal;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 10px;
}

.fund-table th:first-child {
  text-align: left;
}

.fund-table th:hover {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  text-decoration: dotted underline color-mix(in srgb, var(--text) 30%, transparent);
}

.fund-table th.fund-sort-active {
  color: var(--text);
}

.fund-sort-arrow {
  font-size: 9px;
  margin-left: 2px;
}

.fund-table td {
  padding: 3px 6px;
  text-align: right;
  color: var(--text-dim);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 2%, transparent);
  white-space: nowrap;
}

.fund-table td:first-child {
  text-align: left;
  color: var(--text);
  font-weight: bold;
}

.fund-table tr {
  cursor: pointer;
  transition: background 0.1s;
}

.fund-table tbody tr:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.fund-metric-strong {
  color: var(--profit) !important;
}

.fund-metric-positive {
  color: var(--tc-88cc88) !important;
}

.fund-metric-negative {
  color: var(--tc-ff5c5c) !important;
}

.fund-metric-warn {
  color: var(--tc-ffc832) !important;
}

.fund-score-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
}

.fund-score-high {
  background: rgba(0, 255, 136, 0.15);
  color: var(--profit);
}

.fund-score-mid {
  background: rgba(255, 200, 50, 0.15);
  color: var(--tc-ffc832);
}

.fund-score-low {
  background: rgba(255, 92, 92, 0.1);
  color: var(--text-muted);
}

/* Stock detail */
.fund-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 12px;
}

.fund-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
}

.fund-detail-symbol {
  font-size: 18px;
  font-weight: bold;
  color: var(--text);
}

.fund-detail-name {
  font-size: 12px;
  color: var(--text-muted);
}

.fund-detail-badges {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.fund-badge {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text-dim);
}

.fund-badge--good {
  background: rgba(0, 255, 136, 0.1);
  color: var(--profit);
}

.fund-badge--bad {
  background: rgba(255, 92, 92, 0.1);
  color: var(--tc-ff5c5c);
}

.fund-badge--warn {
  background: rgba(255, 200, 50, 0.1);
  color: var(--tc-ffc832);
}

.fund-chart-section {
  height: 280px;
  margin: 6px 0;
  flex-shrink: 0;
}

.fund-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
  padding: 4px 0;
}

.fund-card {
  background: var(--bg-alt);
  border: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 4px;
  padding: 8px 10px;
}

.fund-card-title {
  font-size: 10px;
  color: color-mix(in srgb, var(--text) 35%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}

.fund-card-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fund-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.fund-card-row-label {
  color: var(--text-muted);
}

.fund-card-row-value {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-family: var(--app-font), monospace;
}

.fund-quarters-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 6px;
}

.fund-quarters-table th {
  padding: 2px 4px;
  text-align: right;
  font-weight: normal;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}

.fund-quarters-table th:first-child {
  text-align: left;
}

.fund-quarters-table td {
  padding: 2px 4px;
  text-align: right;
  color: var(--text-dim);
}

.fund-quarters-table td:first-child {
  text-align: left;
  color: var(--text-muted);
}

.fund-yoy-row td {
  font-size: 9px !important;
  color: color-mix(in srgb, var(--text) 35%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent) !important;
}

.fund-yoy-row td:first-child {
  color: color-mix(in srgb, var(--text) 25%, transparent) !important;
  padding-left: 8px;
}

.fund-yoy-row td.fund-metric-strong {
  color: var(--profit) !important;
}

.fund-yoy-row td.fund-metric-positive {
  color: var(--tc-88cc88) !important;
}

.fund-yoy-row td.fund-metric-negative {
  color: var(--tc-ff5c5c) !important;
}

.fund-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  font-size: 12px;
}

.fund-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--tc-ff5c5c);
  font-size: 12px;
}

.fund-count {
  font-size: 10px;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  margin-left: auto;
  padding-right: 4px;
}

/* AI Analysis section */
.fund-ai-section {
  margin-top: 6px;
}

.fund-ai-content {
  margin-top: 4px;
}

.fund-ai-result {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  padding: 4px 0;
}

.fund-ai-result h1,
.fund-ai-result h2,
.fund-ai-result h3 {
  color: var(--text);
  margin: 8px 0 4px;
  font-family: var(--app-font), monospace;
}

.fund-ai-result h1 {
  font-size: 13px;
}
.fund-ai-result h2 {
  font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  padding-bottom: 2px;
}
.fund-ai-result h3 {
  font-size: 11px;
}

.fund-ai-result p {
  margin: 3px 0;
}

.fund-ai-result ul {
  margin: 3px 0;
  padding-left: 14px;
}

.fund-ai-result li {
  margin: 1px 0;
}

.fund-ai-result strong {
  color: var(--text);
}

.fund-ai-result code {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}

.fund-ai-result pre {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  padding: 6px;
  border-radius: 3px;
  overflow-x: auto;
  font-size: 10px;
}

/* Strengths / Concerns side-by-side */
.fund-ai-verdicts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.fund-ai-verdict {
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}

.fund-ai-verdict--good {
  background: rgba(0, 255, 136, 0.03);
  border-color: rgba(0, 255, 136, 0.08);
}

.fund-ai-verdict--bad {
  background: rgba(255, 92, 92, 0.03);
  border-color: rgba(255, 92, 92, 0.08);
}

.fund-ai-verdict-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.fund-ai-verdict--good .fund-ai-verdict-title {
  color: var(--profit);
}

.fund-ai-verdict--bad .fund-ai-verdict-title {
  color: var(--tc-ff5c5c);
}

/* Inline insight under tables */
.fund-ai-inline {
  margin-top: 6px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 0 0 3px 3px;
}

/* --- FMP expansion sections --- */
.fund-eps-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--app-font), monospace;
  font-size: 12px;
}
.fund-eps-table th {
  text-align: right;
  color: var(--text-muted);
  font-weight: 600;
  padding: 3px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.fund-eps-table th:first-child,
.fund-eps-table td:first-child {
  text-align: left;
}
.fund-eps-table td {
  text-align: right;
  padding: 3px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}
.fund-eps-est-row td {
  color: var(--text-muted);
  font-style: italic;
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.fund-seg-period {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
}
.fund-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fund-seg-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fund-seg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.fund-seg-name {
  flex: 0 0 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.fund-seg-bar-track {
  flex: 1 1 auto;
  height: 8px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.fund-seg-bar {
  display: block;
  height: 100%;
  background: #4f8cc9;
  border-radius: 2px;
}
.fund-seg-value {
  flex: 0 0 58px;
  text-align: right;
  font-family: var(--app-font), monospace;
}
.fund-seg-share {
  flex: 0 0 34px;
  text-align: right;
  color: var(--text-muted);
  font-family: var(--app-font), monospace;
}
.fund-seg-yoy {
  flex: 0 0 44px;
  text-align: right;
  font-family: var(--app-font), monospace;
}
.fund-ratings-strip {
  display: flex;
  gap: 2px;
  margin: 6px 0 2px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.fund-ratings-strip > span {
  padding: 2px 4px;
  border-radius: 2px;
  overflow: hidden;
}
.fund-ratings-buy {
  background: rgba(76, 175, 80, 0.25);
  color: #7fd18a;
}
.fund-ratings-hold {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted);
}
.fund-ratings-sell {
  background: rgba(239, 83, 80, 0.25);
  color: #ef8a88;
}
.fund-grades-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}
.fund-grades-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.fund-grades-date {
  flex: 0 0 38px;
  color: var(--text-muted);
  font-family: var(--app-font), monospace;
}
.fund-grades-firm {
  flex: 0 0 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fund-peers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fund-peer-chip {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--app-font), monospace;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}
.fund-peer-chip:hover {
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.fund-peer-mcap {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 10px;
}

.fund-ai-charts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.fund-ai-chart {
  flex: 1 1 280px;
  max-width: 380px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 4px;
  padding: 6px 8px;
}
.fund-ai-chart-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.fund-ai-result img {
  max-width: 100%;
  border-radius: 4px;
}
/* ── Journal Panel ─────────────────────────────────────────────── */
.journal-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: inherit;
  overflow: hidden;
}

.journal-btn {
  background: var(--bg-button);
  color: var(--text);
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.15s;
  white-space: nowrap;
}
.journal-btn:hover {
  background: var(--bg-button-hover);
}
.journal-btn.primary {
  background: var(--bg-alt);
  color: var(--profit);
}
.journal-btn.primary:hover {
  background: var(--bg-hover);
}
.journal-btn.danger {
  color: var(--loss);
}
.journal-btn.danger:hover {
  background: var(--bg-hover);
}

/* ── Master-Detail layout ──────────────────────────────────────── */
.journal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── List (left pane) ──────────────────────────────────────────── */
.journal-list-pane {
  width: 240px;
  min-width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Draggable divider ───────────────────────────────────────── */
.journal-divider {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--border);
  transition: background 0.15s;
}
.journal-divider:hover {
  background: var(--border-light);
}

.journal-filter-bar {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.journal-search-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.journal-time-filter-row {
  display: flex;
  gap: 3px;
}

.journal-time-filter-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 0;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.journal-time-filter-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.journal-time-filter-btn.active {
  background: var(--bg-alt);
  border-color: var(--border-light);
  color: var(--text);
}

/* ── Smart Search ─────────────────────────────────────────────── */
.journal-smart-search {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.journal-smart-search:focus-within {
  border-color: var(--border-light);
}

.journal-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 5px 0;
}

.journal-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
}

.chip-remove {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  margin-left: 1px;
}
.chip-remove:hover {
  color: var(--loss);
}

.journal-search-input {
  background: none;
  border: none;
  color: var(--text);
  font-size: 11px;
  padding: 4px 7px;
  flex: 1;
  min-width: 0;
  outline: none;
}
.journal-search-input::placeholder {
  color: var(--text-muted);
}

.journal-search-dropdown {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 100;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 3px 3px;
  max-height: 180px;
  overflow-y: auto;
}
.journal-search-dropdown::-webkit-scrollbar {
  width: 3px;
}
.journal-search-dropdown::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-search-suggestion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.08s;
}
.journal-search-suggestion:hover,
.journal-search-suggestion.highlighted {
  background: var(--bg-hover);
}

.suggestion-prefix {
  color: var(--text-dim);
  font-weight: 600;
}

.suggestion-value {
  color: var(--text);
}

.journal-new-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border-radius: 3px;
  flex-shrink: 0;
}

.journal-list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.journal-list-scroll::-webkit-scrollbar {
  width: 4px;
}
.journal-list-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}

/* ── Entry Card ────────────────────────────────────────────────── */
.journal-card {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.journal-card:hover {
  background: var(--bg-hover);
}
.journal-card.selected {
  background: var(--bg-hover);
  border-left: 2px solid var(--border-light);
}
.journal-card.multi-selected {
  background: var(--bg-hover);
  border-left: 2px solid var(--accent);
}

.journal-card-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.journal-card-symbol {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.journal-card-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.journal-card-badge.buy {
  background: var(--bg-alt);
  color: var(--profit);
}
.journal-card-badge.sell {
  background: var(--bg-alt);
  color: var(--loss);
}
.journal-card-badge.open {
  background: var(--bg-alt);
  color: var(--accent);
}

.journal-card-bottom {
  display: flex;
  align-items: center;
  gap: 5px;
}

.journal-card-pnl {
  font-size: 11px;
  font-weight: 600;
  flex: 1;
}
.journal-card-pnl.positive {
  color: var(--profit);
}
.journal-card-pnl.negative {
  color: var(--loss);
}
.journal-card-pnl.neutral {
  color: var(--text-dim);
}

.journal-card-stars {
  font-size: 9px;
  color: var(--tc-f5a623);
  letter-spacing: -1px;
}

.journal-card-time {
  font-size: 10px;
  color: var(--text-muted);
}

.journal-card-icons {
  display: flex;
  gap: 3px;
  font-size: 10px;
}

.journal-card-badge-news {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--profit);
  letter-spacing: 0.5px;
}

/* ── Detail pane (right) ───────────────────────────────────────── */
.journal-detail-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.journal-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.journal-detail-scroll::-webkit-scrollbar {
  width: 4px;
}
.journal-detail-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 12px;
}

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

.journal-detail-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.journal-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-detail-title-input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 3px 0;
  flex: 1;
  min-width: 0;
  outline: none;
  cursor: text;
  transition: border-bottom-color 0.15s;
}
.journal-detail-title-input:hover {
  border-bottom-color: var(--border-light);
}
.journal-detail-title-input:focus {
  border-bottom-color: var(--text-muted);
}

.journal-detail-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  margin-top: 4px;
  max-height: 52px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.journal-detail-tags-row::-webkit-scrollbar {
  width: 3px;
}
.journal-detail-tags-row::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-detail-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.journal-status-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.journal-status-badge.open {
  background: var(--bg-alt);
  color: var(--accent);
}
.journal-status-badge.closed {
  background: var(--bg-alt);
  color: var(--profit);
}

.journal-section {
  margin-bottom: 14px;
  flex-shrink: 0;
}

.journal-section.journal-section-grow {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.journal-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Chart collapse toggle ───────────────────────────────────── */
.journal-chart-toggle {
  cursor: pointer;
  transition: color 0.1s;
}
.journal-chart-toggle:hover {
  color: var(--text-dim);
}

/* ── Trade info table ──────────────────────────────────────────── */
.journal-trade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
}

.journal-trade-cell {
  background: var(--bg-alt);
  border-radius: 3px;
  padding: 5px 7px;
}

.journal-trade-cell-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.journal-trade-cell-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.journal-trade-cell-value.positive {
  color: var(--profit);
}
.journal-trade-cell-value.negative {
  color: var(--loss);
}

/* ── Chart ─────────────────────────────────────────────────────── */
.journal-chart-wrapper {
  height: 450px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

/* ── News section ──────────────────────────────────────────────── */
.journal-news-box {
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 8px 10px;
  border-left: 2px solid var(--border);
}

.journal-news-headline {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.4;
}

.journal-news-analysis {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.journal-news-analysis p {
  margin: 2px 0;
}

.journal-news-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Notes ─────────────────────────────────────────────────────── */
.journal-notes-display {
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  min-height: 40px;
  white-space: pre-wrap;
}

.journal-notes-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Tags ──────────────────────────────────────────────────────── */
.journal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.journal-tag {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: default;
}

.journal-tag-add {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.journal-tag-add:hover {
  border-color: var(--border-light);
  color: var(--text-dim);
}

.journal-tag-input {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--text);
  outline: none;
  width: 80px;
}

/* ── Stars ─────────────────────────────────────────────────────── */
.journal-stars {
  display: flex;
  gap: 4px;
}

.journal-star {
  font-size: 14px;
  cursor: pointer;
  color: var(--border);
  transition: color 0.1s;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}
.journal-star.filled {
  color: var(--tc-f5a623);
}
.journal-star:hover {
  color: var(--tc-f5a623);
}

/* ── Overflow Menu (⋯) ───────────────────────────────────────── */
.journal-overflow-menu {
  position: relative;
  display: inline-block;
}

.journal-overflow-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: all 0.1s;
}
.journal-overflow-btn:hover {
  color: var(--text-dim);
  border-color: var(--border);
}

.journal-overflow-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-top: 2px;
  min-width: 120px;
  overflow: hidden;
}

.journal-overflow-item {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.journal-overflow-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.journal-overflow-item.danger {
  color: var(--loss);
}
.journal-overflow-item.danger:hover {
  background: var(--bg-hover);
}
.journal-overflow-label {
  padding: 4px 10px 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--border-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.journal-overflow-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Manual Trade Form ───────────────────────────────────────── */
.journal-manual-trade-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--bg-alt);
  border-radius: 3px;
}

.journal-manual-trade-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-manual-trade-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 50px;
  font-weight: 600;
}

.journal-manual-trade-input,
.journal-manual-trade-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 11px;
  padding: 4px 7px;
  flex: 1;
  min-width: 0;
  outline: none;
}
.journal-manual-trade-input:focus,
.journal-manual-trade-select:focus {
  border-color: var(--border-light);
}

.journal-manual-trade-select {
  cursor: pointer;
}

/* ── Editor ────────────────────────────────────────────────────── */
.journal-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.journal-editor-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.journal-editor-scroll::-webkit-scrollbar {
  width: 4px;
}
.journal-editor-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-editor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.journal-editor-title-input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 3px 0;
  width: 100%;
  outline: none;
}
.journal-editor-title-input:focus {
  border-bottom-color: var(--border-light);
}

.journal-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.journal-textarea {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  line-height: 1.6;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
}
.journal-textarea:focus {
  border-color: var(--border-light);
}

.journal-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Orders expand ─────────────────────────────────────────────── */
.journal-orders-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.journal-orders-toggle:hover {
  color: var(--text-dim);
}

.journal-orders-list {
  background: var(--bg-alt);
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}

.journal-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.journal-order-row:last-child {
  border-bottom: none;
}
.journal-order-row.buy {
  color: var(--profit);
}
.journal-order-row.sell {
  color: var(--loss);
}

/* ── Tag Autocomplete ─────────────────────────────────────────── */
.journal-tag-autocomplete {
  position: relative;
  display: inline-block;
}

.journal-tag-dropdown {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-width: 120px;
  max-height: 160px;
  overflow-y: auto;
}

.journal-tag-dropdown-item {
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
}
.journal-tag-dropdown-item:hover,
.journal-tag-dropdown-item.highlighted {
  background: var(--bg-hover);
  color: var(--text);
}

/* ── TipTap Editor ────────────────────────────────────────────── */
.journal-tiptap-wrapper {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 120px;
}
.journal-tiptap-wrapper:focus-within {
  border-color: var(--border-light);
}

.journal-tiptap-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.journal-tiptap-toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.1s;
}
.journal-tiptap-toolbar button:hover {
  color: var(--text-dim);
  border-color: var(--border);
}
.journal-tiptap-toolbar button.is-active {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.journal-tiptap-content {
  padding: 8px 10px;
  min-height: 80px;
  flex: 1;
  overflow-y: auto;
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
}
.journal-tiptap-content::-webkit-scrollbar {
  width: 4px;
}
.journal-tiptap-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-tiptap-content .ProseMirror {
  outline: none;
}
.journal-tiptap-content .ProseMirror p {
  margin: 0 0 4px;
}
.journal-tiptap-content .ProseMirror ul,
.journal-tiptap-content .ProseMirror ol {
  margin: 4px 0;
  padding-left: 20px;
}
.journal-tiptap-content .ProseMirror li {
  margin-bottom: 2px;
}
.journal-tiptap-content .ProseMirror code {
  background: var(--bg-input);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 11px;
}
.journal-tiptap-content .ProseMirror pre {
  background: var(--bg-hover);
  padding: 8px 10px;
  border-radius: 3px;
  overflow-x: auto;
}
.journal-tiptap-content .ProseMirror pre code {
  background: none;
  padding: 0;
}
.journal-tiptap-content .ProseMirror mark {
  background: #4a3a00;
  color: #ffd700;
  border-radius: 1px;
}
.journal-tiptap-content .ProseMirror hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

/* TipTap placeholder (via Placeholder extension) */
.journal-tiptap-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  float: left;
  height: 0;
  pointer-events: none;
}

/* ── Resizable inline images in TipTap ────────────────────────── */
.journal-img-node {
  display: block;
  margin: 6px 0;
}

.journal-img-resizable {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.1s;
}
.journal-img-resizable.hovered {
  border-color: var(--border);
}
.journal-img-resizable.resizing {
  border-color: var(--accent);
}

.journal-img-resizable img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  pointer-events: none;
}

/* ── Image controls (move up/down/delete) ────────────────────── */
.journal-img-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}
.journal-img-resizable.hovered .journal-img-controls {
  opacity: 1;
}

.journal-img-move-btn {
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.1s,
    color 0.1s;
}
.journal-img-move-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  color: var(--text);
  border-color: var(--text-muted);
}
.journal-img-delete-btn:hover {
  color: var(--loss);
  border-color: rgba(255, 92, 92, 0.3);
}

.journal-img-resize-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  background: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.journal-img-resizable.hovered .journal-img-resize-handle {
  opacity: 1;
}
.journal-img-resize-handle:hover {
  background: var(--accent);
}

/* ── Notes HTML display ───────────────────────────────────────── */
.journal-notes-html ul,
.journal-notes-html ol {
  margin: 4px 0;
  padding-left: 20px;
}
.journal-notes-html li {
  margin-bottom: 2px;
}
.journal-notes-html code {
  background: var(--bg-input);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 11px;
}
.journal-notes-html pre {
  background: var(--bg-hover);
  padding: 8px 10px;
  border-radius: 3px;
  overflow-x: auto;
}
.journal-notes-html pre code {
  background: none;
  padding: 0;
}
.journal-notes-html mark {
  background: #4a3a00;
  color: #ffd700;
  border-radius: 1px;
}
.journal-notes-html hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.journal-notes-html p {
  margin: 0 0 4px;
}

/* ── Group Card ───────────────────────────────────────────────── */
.journal-group-card {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 2px solid var(--border);
}
.journal-group-card:hover {
  background: var(--bg-hover);
}
.journal-group-card.selected {
  background: var(--bg-hover);
  border-left-color: var(--accent);
}

.journal-group-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.journal-group-card-meta {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}

.journal-group-card-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.journal-group-card-pnl {
  font-weight: 600;
}
.journal-group-card-pnl.positive {
  color: var(--profit);
}
.journal-group-card-pnl.negative {
  color: var(--loss);
}

.journal-group-card-date {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10px;
}

/* ── Header dropdown ──────────────────────────────────────────── */
.journal-new-dropdown {
  position: relative;
  display: inline-block;
}

.journal-new-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-top: 2px;
  min-width: 120px;
  overflow: hidden;
}

.journal-new-dropdown-item {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.journal-new-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ── Group detail ─────────────────────────────────────────────── */
.journal-group-entries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.journal-group-entry-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-alt);
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s;
}
.journal-group-entry-row:hover {
  background: var(--bg-hover);
}

.journal-group-entry-symbol {
  font-weight: 700;
  color: var(--text);
  min-width: 70px;
}

.journal-group-entry-pnl {
  margin-left: auto;
  font-weight: 600;
}
.journal-group-entry-pnl.positive {
  color: var(--profit);
}
.journal-group-entry-pnl.negative {
  color: var(--loss);
}

.journal-group-remove-entry {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  padding: 0 2px;
}
.journal-group-remove-entry:hover {
  color: var(--loss);
}

/* ── Group editor entry selector ──────────────────────────────── */
.journal-entry-selector {
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px;
}
.journal-entry-selector::-webkit-scrollbar {
  width: 4px;
}
.journal-entry-selector::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
}

.journal-entry-selector-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 2px;
}
.journal-entry-selector-item:hover {
  background: var(--bg-hover);
}

.journal-entry-selector-item input[type='checkbox'] {
  accent-color: var(--profit);
}

/* ── Multi-select action bar ─────────────────────────────────── */
.journal-multiselect-bar {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  flex-shrink: 0;
}

/* ── Non-selectable UI chrome ────────────────────────────────── */
.journal-section-label,
.journal-detail-meta,
.journal-status-badge,
.journal-card,
.journal-btn,
.journal-field-label,
.journal-trade-cell-label,
.journal-group-card,
.journal-orders-toggle,
.journal-star,
.journal-card-badge,
.journal-overflow-btn,
.journal-search-chip {
  user-select: none;
}

/* ── News Journal annotation textareas ─────────────────────── */
.nj-annotation-textarea {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 8px;
  resize: vertical;
  outline: none;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}
.nj-annotation-textarea:focus {
  border-color: var(--border-light);
}
.nj-annotation-textarea::placeholder {
  color: var(--text-muted);
}

/* ── Confirm modal (replaces native window.confirm) ──────────── */
.journal-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.journal-confirm-modal {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  min-width: 240px;
  max-width: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.journal-confirm-msg {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.4;
}
.journal-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Entry card context menu (right-click) ─────────────────── */
.journal-context-menu {
  position: fixed;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  padding: 4px 0;
  z-index: 10000;
  min-width: 160px;
  display: flex;
  flex-direction: column;
}
.journal-context-stars-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 6px;
}
.journal-context-star {
  background: none;
  border: none;
  color: var(--border-light);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 3px;
  line-height: 1;
}
.journal-context-star:hover {
  color: var(--tc-ffd700);
}
.journal-context-star.filled {
  color: var(--tc-ffd700);
}
.journal-context-star-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  margin-left: 4px;
}
.journal-context-star-clear:hover {
  color: var(--loss);
}
body {
  margin: 0;
  font-family: var(--app-body-font), monospace;
}

.logs-container {
  gap: 4px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: var(--bg-base);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.logs-log {
  padding: 8px;
  max-width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.logs-log::after {
  content: '';
  display: block;
  height: 16px;
  flex-shrink: 0;
}

.logs-log > .out {
  color: var(--text-dim);
}

.logs-log > .error {
  color: #f44336;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  min-height: 1.2em;
  width: 100%;
}

.log-timestamp {
  color: #279e06;
  white-space: nowrap;
  font-family: 'Fira Code', monospace;
  flex-shrink: 0;
  margin-right: 8px;
}

.logs-log-message {
  color: var(--text-dim);
  word-wrap: break-word;
  white-space: pre-wrap;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.log-entry.error .logs-log-message {
  color: #f44336;
}

.log-entry.error .log-timestamp {
  color: var(--tc-ff6b6b);
}

.logs-log::-webkit-scrollbar {
  width: 8px;
  background: var(--bg-base);
}

.logs-log::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
}

.logs-log::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

.scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-deep);
  border-top: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  padding: 4px 0;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(8px);
  z-index: 10;
  pointer-events: all;
}

.scroll-to-bottom-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.scroll-to-bottom-btn:hover {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.scroll-to-bottom-btn:active {
  color: var(--text-dim);
}
.options-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 4px;
  gap: 4px;
  font-family: var(--app-font), sans-serif;
  user-select: none;
}

.options-header {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  flex-shrink: 0;
}

/* Trade Panel */
.options-trade-panel-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
  flex-shrink: 0;
}

.options-trade-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  flex: 0 0 auto;
  min-width: 210px;
  max-width: 350px;
  width: 210px;
  display: flex;
  flex-direction: column;
}

.options-trade-panel-chart {
  flex: 1 1 200px;
  min-width: 150px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-height: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.options-trade-panel-chart > * {
  flex: 1;
  min-height: 0;
}

.options-trade-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.options-trade-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.options-trade-panel-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.options-trade-panel-close:hover {
  color: var(--text);
}

.options-trade-panel-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options-trade-panel-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.options-trade-panel-contract {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Fira Code', monospace;
}

.options-trade-panel-prices {
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.options-trade-panel-price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.options-trade-panel-price-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}

.options-trade-panel-price-value {
  color: var(--text);
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
}

.options-trade-panel-price-value.clickable {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  transition: all 0.2s;
}

.options-trade-panel-price-value.clickable:hover {
  background: rgba(100, 100, 255, 0.2);
  color: var(--accent);
}

.options-trade-panel-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.options-trade-panel-control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.options-trade-panel-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
}

.options-trade-panel-select,
.options-trade-panel-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  outline: none;
  transition: all 0.2s;
}

.options-trade-panel-select {
  cursor: pointer;
}

.options-trade-panel-select option {
  background: var(--bg-input);
  color: var(--text);
}

.options-trade-panel-select:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.options-trade-panel-select:focus,
.options-trade-panel-input:focus {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.options-trade-panel-input::placeholder {
  color: var(--text-muted);
}

.options-trade-panel-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.options-trade-panel-buy,
.options-trade-panel-sell {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--app-font), sans-serif;
}

.options-trade-panel-buy {
  background: rgba(100, 200, 100, 0.2);
  color: var(--profit);
  border: 1px solid rgba(100, 200, 100, 0.4);
}

.options-trade-panel-buy:hover {
  background: rgba(100, 200, 100, 0.3);
  border-color: rgba(100, 200, 100, 0.6);
}

.options-trade-panel-sell {
  background: rgba(200, 100, 100, 0.2);
  color: var(--loss);
  border: 1px solid rgba(200, 100, 100, 0.4);
}

.options-trade-panel-sell:hover {
  background: rgba(200, 100, 100, 0.3);
  border-color: rgba(200, 100, 100, 0.6);
}

/* Expiration Tabs */
.expiration-tabs-container {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.expiration-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) var(--bg-base);
  padding-bottom: 8px;
}

.expiration-tabs::-webkit-scrollbar {
  height: 8px;
}

.expiration-tabs::-webkit-scrollbar-track {
  background: var(--bg-alt);
  border-radius: 4px;
}

.expiration-tabs::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 4px;
}

.expiration-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

.expiration-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 90px;
  user-select: none;
}

.expiration-tab:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.expiration-tab.active {
  background: rgba(100, 100, 255, 0.2);
  border-color: var(--accent);
}

.expiration-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.expiration-days {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Controls Bar */
.options-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.options-controls-left {
  display: flex;
  gap: 8px;
  align-items: center;
}

.options-dropdown {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.options-dropdown:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.options-dropdown:focus {
  border-color: var(--accent);
}

/* Options Table */
/* header + subheader stick as one block so the subheader always sits flush
   under the header whatever its rendered height */
.options-table-sticky {
  position: sticky;
  top: 0;
  z-index: 101;
  flex-shrink: 0;
}

.options-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

.options-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4px 4px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  gap: 4px;
  position: relative;
}

.atm-iv-left {
  position: absolute;
  left: 8px;
  top: 4px;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
}

.atm-iv-right {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
}

.calls-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.puts-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strikes-control-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 102;
}

/* Table Subheader */
.options-table-subheader {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, 1fr);
  gap: 2px;
  padding: 2px 4px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}

.options-table-subheader .sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.options-table-subheader .sortable:hover {
  color: var(--text);
}

.options-table-subheader .sorted {
  color: var(--accent);
}

/* Table Body — no own scrollbar: the table CONTAINER is the single scroller,
   which is what lets the sticky header/subheader actually stick */
.options-table-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.options-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, 1fr);
  gap: 2px;
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  font-size: 10px;
  text-align: center;
  align-items: center;
  min-height: 22px;
}

.options-row:hover {
  background: var(--bg-hover);
}

.options-row.selected {
  background: rgba(100, 100, 255, 0.15);
  /* inset shadow, not border — a border added 2px to the row and shifted
     the whole table on every selection */
  box-shadow: inset 0 0 0 1px rgba(100, 100, 255, 0.3);
}

/* ATM row: the spot sits between this strike and its neighbor */
.options-row.atm-row {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.options-row.atm-row .strike-price {
  color: var(--accent);
  font-weight: 700;
}

/* Strikes inside the ATM straddle's expected move — the tradeable range */
.options-row.em-range .strike-price {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 2px;
}

.chg-pos {
  color: var(--profit);
}

.chg-neg {
  color: var(--loss);
}

.strike-price {
  text-align: center;
  font-weight: 600;
  color: var(--text);
  background: rgba(100, 100, 255, 0.15);
  padding: 3px 0;
  border-radius: 2px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Column Styles - Call Columns */
.col-call-volume,
.col-call-bidSize,
.col-call-askSize,
.col-call-impliedVol,
.col-call-delta,
.col-call-theta {
  color: var(--text-dim);
  font-size: 10px;
}

.col-call-bid {
  color: rgba(150, 180, 220, 0.9);
  font-weight: 500;
  font-size: 10px;
}

.col-call-bid.clickable:hover {
  background: rgba(150, 180, 220, 0.15);
  border-radius: 2px;
}

.col-call-ask {
  color: rgba(220, 180, 130, 0.9);
  font-weight: 500;
  font-size: 10px;
}

.col-call-ask.clickable:hover {
  background: rgba(220, 180, 130, 0.15);
  border-radius: 2px;
}

/* Column Styles - Put Columns */
.col-put-volume,
.col-put-bidSize,
.col-put-askSize,
.col-put-impliedVol,
.col-put-delta,
.col-put-theta {
  color: var(--text-dim);
  font-size: 10px;
}

.col-put-bid {
  color: rgba(150, 180, 220, 0.9);
  font-weight: 500;
  font-size: 10px;
}

.col-put-bid.clickable:hover {
  background: rgba(150, 180, 220, 0.15);
  border-radius: 2px;
}

.col-put-ask {
  color: rgba(220, 180, 130, 0.9);
  font-weight: 500;
  font-size: 10px;
}

.col-put-ask.clickable:hover {
  background: rgba(220, 180, 130, 0.15);
  border-radius: 2px;
}

/* No bid/ask styling (when value is -1) */
.col-call-bid.no-bid-ask,
.col-call-ask.no-bid-ask,
.col-put-bid.no-bid-ask,
.col-put-ask.no-bid-ask {
  color: var(--loss) !important;
  font-weight: 600;
}

/* ITM (In The Money) shading */
[class^='col-call-'].itm,
[class*=' col-call-'].itm {
  background: rgba(100, 200, 100, 0.08);
  padding: 3px 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[class^='col-put-'].itm,
[class*=' col-put-'].itm {
  background: rgba(100, 200, 100, 0.08);
  padding: 3px 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .options-table-subheader,
  .options-row {
    font-size: 9px;
  }

  .strike-price {
    font-size: 10px;
  }
}

/* Scrollbar styling for table body */
.options-table-body::-webkit-scrollbar {
  width: 8px;
}

.options-table-body::-webkit-scrollbar-track {
  background: var(--bg-base);
}

.options-table-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 4px;
}

.options-table-body::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* Quantity Preset Buttons */
.quantity-preset-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.quantity-preset-button {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  line-height: 22px;
  font-family: var(--app-body-font);
  font-weight: 500;
  font-size: 10px;
  padding: 0 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.quantity-preset-button:hover {
  border-color: var(--border-light);
  color: var(--text);
}

.quantity-preset-button:active {
  background-color: var(--bg-hover);
  border-color: var(--border-light);
}

/* Strikes Dropdown */
.strikes-control-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 2px;
  cursor: pointer;
  transition: all 0.2s;
}

.strikes-control-wrapper:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.strikes-input {
  width: 30px;
  height: 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 11px;
  outline: none;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 16px;
  box-sizing: border-box;
}

.strikes-value-display {
  font-size: 11px;
  color: var(--text);
  padding: 0;
  margin: 0;
  cursor: text;
  min-width: 30px;
  width: 30px;
  height: 16px;
  text-align: center;
  display: inline-block;
  line-height: 16px;
  box-sizing: border-box;
}

.strikes-dropdown-button {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0 2px;
  display: flex;
  align-items: center;
  font-size: 9px;
  height: 16px;
  line-height: 16px;
}

.strikes-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  z-index: 1000;
  min-width: 60px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.strikes-dropdown-item {
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  border-radius: 2px;
  transition: background-color 0.2s;
}

.strikes-dropdown-item:first-child {
  padding-top: 0;
}

.strikes-dropdown-item:not(:last-child) {
  padding-bottom: 2px;
}

.strikes-dropdown-item:last-child {
  padding-bottom: 0;
}

.strikes-dropdown-item.selected {
  background-color: rgba(100, 100, 255, 0.3);
}

.strikes-dropdown-item:not(.selected):hover {
  background-color: var(--bg-hover);
}

/* Spread Mode Toggle */
.spread-mode-toggle {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--app-font), sans-serif;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.spread-mode-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text);
}

.spread-mode-toggle.active {
  background: rgba(180, 130, 255, 0.2);
  border-color: rgba(180, 130, 255, 0.5);
  color: rgb(180, 130, 255);
}

/* Spread Leg Row Indicators */
.options-row.spread-leg-1 {
  background: rgba(100, 180, 255, 0.1);
  border-left: 2px solid rgba(100, 180, 255, 0.6);
}

.options-row.spread-leg-2 {
  background: rgba(255, 170, 100, 0.1);
  border-left: 2px solid rgba(255, 170, 100, 0.6);
}

/* Spread Trade Panel */
.spread-trade-panel {
  background: var(--bg-alt);
  border: 1px solid rgba(180, 130, 255, 0.3);
  border-radius: 4px;
  padding: 6px;
  margin: 4px 0;
  flex-shrink: 0;
}

.spread-trade-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}

.spread-trade-panel-title {
  font-size: 11px;
  font-weight: 600;
  color: rgb(180, 130, 255);
}

/* Spread Legs Display */
.spread-legs-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.spread-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
}

.spread-leg-1-display {
  background: rgba(100, 180, 255, 0.1);
  border: 1px solid rgba(100, 180, 255, 0.3);
}

.spread-leg-2-display {
  background: rgba(255, 170, 100, 0.1);
  border: 1px solid rgba(255, 170, 100, 0.3);
}

.spread-leg-label {
  font-weight: 700;
  font-size: 9px;
  color: var(--text-muted);
  min-width: 16px;
}

.spread-leg-side {
  font-weight: 600;
  font-size: 10px;
  min-width: 28px;
}

.spread-leg-side[data-side='BUY'] {
  color: var(--profit);
}

.spread-leg-side[data-side='SELL'] {
  color: var(--loss);
}

.spread-leg-details {
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.spread-leg-price {
  font-family: 'Fira Code', monospace;
  font-weight: 600;
  color: var(--text);
  font-size: 10px;
}

.spread-leg-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.spread-leg-remove:hover {
  color: var(--loss);
}

/* Spread Trade Controls */
.spread-trade-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
  max-width: 320px;
}

.spread-inputs-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.spread-input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 80px;
  flex-shrink: 0;
}

.spread-input-label {
  font-size: 8px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.spread-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.spread-input:focus {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.spread-size-display {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 4px;
}

/* Spread net-price range (Low / Mid / High) */
.spread-price-range {
  display: flex;
  gap: 4px;
  max-width: 320px;
}

.spread-price-range-chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 4px;
}

.spread-price-range-chip:hover {
  border-color: var(--border-light);
  background-color: var(--bg-hover);
}

.spread-price-range-chip.is-mid {
  border-color: var(--accent);
}

.spread-price-range-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.spread-price-range-value {
  font-size: 11px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  color: var(--text);
}

/* Spread Preset Buttons (override base) */
.spread-trade-controls .quantity-preset-buttons {
  max-width: 320px;
}

/* Spread Body - two column layout */
.spread-body {
  display: flex;
  gap: 8px;
}

.spread-controls-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 320px;
}

/* Spread Payoff Chart */
.spread-payoff-chart {
  flex: 1;
  min-width: 150px;
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-base);
  position: relative;
  display: flex;
  flex-direction: column;
}

.spread-payoff-chart canvas {
  flex: 1;
  min-height: 0;
}

.spread-payoff-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 6px 8px 2px;
}

.spread-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.spread-metric-label {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 500;
}

.spread-metric-value {
  font-size: 11px;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  color: var(--text);
}

.spread-metric-value.profit {
  color: var(--profit);
}

.spread-metric-value.loss {
  color: var(--loss);
}

/* Spread Actions */
.spread-actions {
  display: flex;
  gap: 6px;
}

/* Expected move (ATM straddle) badge next to the spot price */
.expected-move-badge {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245, 178, 107, 0.12);
  color: #f5b26b;
  font-weight: 600;
  cursor: default;
}

/* Options levels: net gamma exposure bar behind the strike (green grows
   right of center, red left) and level-strike outlines */
.strike-gex {
  position: absolute;
  top: 2px;
  bottom: 2px;
  pointer-events: none;
  opacity: 0.28;
}
.strike-gex.pos {
  left: 50%;
  background: var(--profit);
}
.strike-gex.neg {
  right: 50%;
  background: var(--loss);
}
.strike-price.level-cw {
  box-shadow: inset 0 0 0 1px #3fb68b;
}
.strike-price.level-pw {
  box-shadow: inset 0 0 0 1px #e0525d;
}
.strike-price.level-mp {
  box-shadow: inset 0 0 0 1px #a78bfa;
}
.strike-price.level-flip {
  box-shadow: inset 0 0 0 1px #e8b64c;
}
.pnl-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  font-family: var(--app-font), sans-serif;
  background-color: var(--bg-base);
  color: var(--text);
  overflow: hidden;
  user-select: none;
}

.pnl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-alt);
  border-bottom: 1.5px solid var(--bg-deep);
  height: 36px;
  min-height: 36px;
}

.pnl-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

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

.timeframe-buttons {
  display: flex;
  gap: 2px;
  background: var(--bg-base);
  border-radius: 2px;
  padding: 2px;
  border: 1px solid var(--border);
}

.timeframe-btn {
  padding: 4px 10px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  height: 24px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeframe-btn:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text-muted);
}

.timeframe-btn.active {
  background: #45b5ff;
  color: #000;
  font-weight: 600;
}

.setup-button {
  padding: 4px 8px;
  background-color: var(--text-muted);
  color: var(--text);
  border: none;
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.15s;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-button:hover {
  background-color: var(--text-muted);
}

[data-theme='light'] .setup-button,
[data-theme='light'] .setup-button:hover {
  background-color: var(--bg-button);
}

.clear-button {
  padding: 4px 8px;
  background-color: var(--loss);
  color: var(--text);
  border: none;
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.15s;
  height: 24px;
}

.clear-button:hover {
  background-color: #ff6020;
}

.broker-select {
  padding: 4px 8px;
  background-color: var(--bg-base);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  cursor: pointer;
  height: 24px;
}

.broker-select:focus {
  outline: none;
  border-color: #45b5ff;
}

.load-button {
  padding: 4px 12px;
  background-color: #45b5ff;
  color: #000;
  border: none;
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
  height: 24px;
}

.load-button:hover:not(:disabled) {
  background-color: #5ac5ff;
}

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

.symbol-filter-input {
  flex: 1;
  max-width: 200px;
  padding: 4px 8px;
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  height: 22px;
}

.symbol-filter-input:focus {
  outline: none;
  border-color: #45b5ff;
}

.symbol-filter-input::placeholder {
  color: var(--text-muted);
}

.min-pnl-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.min-pnl-filter label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.min-pnl-input {
  width: 80px;
  padding: 4px 8px;
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  height: 22px;
}

.min-pnl-input:focus {
  outline: none;
  border-color: #45b5ff;
}

.pnl-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.summary-value {
  font-size: 13px;
  font-weight: 600;
}

.summary-value.profit {
  color: var(--profit);
}

.summary-value.loss {
  color: var(--loss);
}

.summary-value.commission {
  color: var(--tc-fffa9f);
}

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

.pnl-table-container {
  background-color: var(--bg-base);
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 11px;
}

.pnl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.pnl-table thead {
  position: sticky;
  top: 0;
  background-color: var(--bg-base);
  z-index: 1;
}

.pnl-table th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.2px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  height: 20px;
}

.pnl-table td {
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.pnl-table tbody tr:hover {
  background-color: var(--bg-alt);
  transition: background-color 0.1s;
}

.symbol-cell {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}

.option-details {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: normal;
  margin-left: 4px;
}

.side-badge {
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
}

.side-badge.buy,
.side-badge.bot {
  color: var(--profit);
}

.side-badge.sell {
  color: var(--tc-ff5c5c);
}

.pnl-table .commission {
  color: var(--tc-fffa9f);
  font-size: 10px;
}

.pnl-table .pnl {
  font-weight: 600;
  font-size: 11px;
}

.pnl-table .pnl.profit {
  color: var(--profit);
}

.pnl-table .pnl.loss {
  color: var(--tc-ff5c5c);
}

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

/* Setup screen styles */
.pnl-setup {
  padding: 12px;
  max-width: 700px;
  margin: 0 auto;
  overflow-y: auto;
  height: 100%;
}

.setup-instructions {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
}

.setup-instructions h3 {
  margin-top: 0;
  color: var(--tc-45b5ff);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.setup-instructions ol {
  margin-left: 16px;
  line-height: 1.6;
  font-size: 11px;
}

.setup-instructions ul {
  margin: 4px 0 4px 16px;
  font-size: 10px;
  line-height: 1.5;
}

.setup-instructions a {
  color: var(--tc-45b5ff);
  text-decoration: none;
}

.setup-instructions a:hover {
  text-decoration: underline;
}

.setup-form {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.flex-input {
  width: 100%;
  padding: 6px 8px;
  background-color: var(--bg-base);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  height: 28px;
}

.flex-input:focus {
  outline: none;
  border-color: #45b5ff;
}

.save-button {
  width: 100%;
  padding: 8px;
  background-color: #45b5ff;
  color: #000;
  border: none;
  border-radius: 2px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
  margin-top: 6px;
  height: 32px;
}

.save-button:hover:not(:disabled) {
  background-color: #5ac5ff;
}

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

.setup-form .broker-select {
  width: 100%;
  height: 28px;
}

/* Calendar */
.pnl-calendar {
  background-color: var(--bg-base);
  border-bottom: 1px solid var(--bg-deep);
  padding: 12px;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cal-nav-btn {
  width: 24px;
  height: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--app-font), sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.cal-nav-btn:hover {
  background: var(--bg-hover);
}

.cal-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 130px;
}

.cal-today-btn {
  padding: 4px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  height: 24px;
}

.cal-today-btn:hover {
  background: var(--bg-hover);
}

.cal-monthly-stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.cal-stats-pill {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
}

.cal-stats-pill.profit {
  color: var(--profit);
  background: rgba(0, 200, 100, 0.12);
  border-color: rgba(0, 200, 100, 0.3);
}

.cal-stats-pill.loss {
  color: var(--tc-ff5c5c);
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 80, 80, 0.3);
}

.cal-stats-pill.days {
  color: #b08bff;
  background: rgba(140, 100, 240, 0.12);
  border-color: rgba(140, 100, 240, 0.3);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 110px;
  /* grid-template-rows is set inline: "24px repeat(weekCount, 70px)" */
  column-gap: 4px;
  row-gap: 4px;
}

.cal-grid .cal-day-label,
.cal-grid .cal-corner {
  /* row 1 — header row */
}

.cal-corner {
  /* empty placeholder so auto-flow advances cleanly into row 2 */
}

.cal-day-label {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-cell {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.cal-cell-empty {
  background: transparent;
  border-color: transparent;
}

.cal-cell-day {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.cal-cell-pnl {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.cal-cell-pnl.profit {
  color: var(--profit);
}

.cal-cell-pnl.loss {
  color: var(--tc-ff5c5c);
}

.cal-cell-rate {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cal-cell-profit {
  background: rgba(0, 180, 90, 0.12);
  border-color: rgba(0, 180, 90, 0.35);
}

.cal-cell-loss {
  background: rgba(255, 70, 70, 0.12);
  border-color: rgba(255, 70, 70, 0.35);
}

.cal-cell.is-today {
  outline: 1px solid #45b5ff;
  outline-offset: -2px;
}

.cal-cell-today {
  background: rgba(69, 181, 255, 0.1);
}

.cal-week {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin-left: 4px;
}

.cal-week-label {
  font-size: 10px;
  color: var(--text-muted);
}

.cal-week-pnl {
  font-size: 13px;
  font-weight: 700;
}

.cal-week-pnl.profit {
  color: var(--profit);
}

.cal-week-pnl.loss {
  color: var(--tc-ff5c5c);
}

.cal-week-days {
  font-size: 10px;
  color: #b08bff;
  background: rgba(140, 100, 240, 0.12);
  border: 1px solid rgba(140, 100, 240, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  align-self: flex-start;
  margin-top: 2px;
}

.cal-cell.is-clickable {
  cursor: pointer;
}

.cal-cell.is-clickable:hover {
  filter: brightness(1.25);
}

.cal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: var(--app-font), sans-serif;
  user-select: none;
}

.cal-modal {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(720px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.cal-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.cal-modal-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-modal-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.cal-modal-stats {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-modal-stats .profit {
  color: var(--profit);
  font-weight: 700;
}

.cal-modal-stats .loss {
  color: var(--tc-ff5c5c);
  font-weight: 700;
}

.cal-modal-stat-sep {
  opacity: 0.5;
}

.cal-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  height: 24px;
}

.cal-modal-close:hover {
  color: var(--text);
}

.cal-modal-body {
  overflow-y: auto;
  padding: 0;
}

.cal-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cal-modal-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-base);
  z-index: 1;
}

.cal-modal-table th {
  padding: 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.3px;
}

.cal-modal-table td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}

.cal-modal-table tbody tr:hover {
  background: var(--bg-alt);
}

.cal-modal-table .pnl {
  font-weight: 600;
}

.cal-modal-table .pnl.profit {
  color: var(--profit);
}

.cal-modal-table .pnl.loss {
  color: var(--tc-ff5c5c);
}

.pnl-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  vertical-align: 1px;
}
.pnl-badge.expired {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 15%, transparent);
}
.pnl-fills {
  margin-left: 6px;
  font-size: 9.5px;
  color: var(--text-muted);
}
.pnl-open-fill {
  color: var(--text-muted);
}
/* Fills the Trades tab; the container owns the scroll */
.pnl-table-virtual {
  flex: 1;
  min-height: 300px;
}
.pnl-table-virtual > div {
  height: 100% !important;
}
.pnl-table-virtual table {
  width: 100%;
}
.pnl-table-virtual thead th {
  background: var(--bg-alt);
}

/* ---------------------------------------------------------------- KPI strip */
.pnl-kpis {
  padding: 10px 12px 8px;
  background-color: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.pnl-kpis .summary-value {
  font-size: 15px;
}
.summary-divider {
  align-self: stretch;
  width: 1px;
  background: var(--border);
}
.summary-item.has-pop {
  position: relative;
  cursor: default;
}
.summary-item.has-pop .summary-label {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.summary-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 20;
  width: 280px;
  padding: 10px 12px;
  background: var(--bg-deep, var(--bg-base));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.summary-item.has-pop:hover .summary-pop {
  display: block;
}
.recon-title {
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.recon-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 11px;
  color: var(--text-dim);
}
.recon-row.recon-total {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}
.recon-note {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.pnl-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.pnl-summary-meta .warn {
  color: var(--tc-fffa9f);
}
.pnl-panel .profit {
  color: var(--profit);
}
.pnl-panel .loss {
  color: var(--loss);
}
.pnl-panel .commission {
  color: var(--tc-fffa9f);
}
.pnl-panel .muted {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------- tabs */
.pnl-tabs {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.pnl-tabs button {
  position: relative;
  padding: 8px 10px 7px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pnl-tabs button:hover {
  color: var(--text);
}
.pnl-tabs button.active {
  color: var(--text);
}
.pnl-tabs button.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #45b5ff;
}

/* -------------------------------------------------------------------- cards */
.pnl-tab-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.pnl-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.pnl-card {
  min-width: 0;
  padding: 10px 12px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pnl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 8px;
}
.pnl-card-head h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pnl-card-aside {
  font-size: 10px;
  color: var(--text-muted);
}
.pnl-card-foot {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
}
.pnl-note {
  padding: 6px 10px;
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pnl-empty {
  padding: 18px 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- stat grids */
.pnl-stat-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.pnl-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  background: var(--bg-base);
}
.pnl-stat-label {
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pnl-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.pnl-stat-value.profit {
  color: var(--profit);
}
.pnl-stat-value.loss {
  color: var(--loss);
}
.pnl-stat-value.commission {
  color: var(--tc-fffa9f);
}
.pnl-stat-value small {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}
.pnl-stat-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-kv-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 2px;
  font-size: 11.5px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.pnl-kv-row:last-child {
  border-bottom: none;
}
.pnl-kv-row span:last-child {
  font-weight: 600;
}

/* --------------------------------------------------------------- bar charts */
.pnl-bars-readout {
  height: 16px;
  margin-bottom: 4px;
  font-size: 10.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-bars-plot {
  position: relative;
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.pnl-bars-plot.diverging {
  border-bottom: none;
}
.pnl-bars-plot.diverging::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--border);
}
.pnl-bar-col {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 2px;
}
.pnl-bar-col.hot {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.pnl-bar {
  position: absolute;
  left: 50%;
  width: min(76%, 40px);
  transform: translateX(-50%);
  min-height: 1px;
  border-radius: 2px;
}
.pnl-bar.up {
  background: color-mix(in srgb, var(--profit) 75%, transparent);
}
.pnl-bar.down {
  background: color-mix(in srgb, var(--loss) 75%, transparent);
}
.pnl-bar.flat {
  background: var(--text-muted);
}
.pnl-bar-col.hot .pnl-bar.up {
  background: var(--profit);
}
.pnl-bar-col.hot .pnl-bar.down {
  background: var(--loss);
}
.pnl-bars-labels {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.pnl-bars-labels span {
  flex: 1;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  font-size: 9px;
  color: var(--text-muted);
}
.pnl-bars-labels span.hot {
  color: var(--text);
}

/* ---------------------------------------------------------------- segmented */
.pnl-segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.pnl-segmented button {
  padding: 2px 8px;
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--text-muted);
  font-family: var(--app-font), sans-serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.pnl-segmented button:hover:not(:disabled) {
  color: var(--text);
}
.pnl-segmented button.active {
  background: #45b5ff;
  color: #000;
}
.pnl-segmented button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ----------------------------------------------------------- compact tables */
.pnl-table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.pnl-table-compact th {
  padding: 5px 8px;
  text-align: right;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pnl-table-compact td {
  padding: 5px 8px;
  text-align: right;
  color: var(--text-dim);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  white-space: nowrap;
}
.pnl-table-compact th:first-child,
.pnl-table-compact td:first-child {
  text-align: left;
}
.pnl-table-compact td:first-child {
  color: var(--text);
  font-weight: 600;
}
.pnl-table-compact td.profit {
  color: var(--profit);
}
.pnl-table-compact td.loss {
  color: var(--loss);
}
.pnl-table-compact td.muted {
  color: var(--text-muted);
}
.pnl-table-compact tbody tr:hover td {
  background: var(--bg-hover);
}
.pnl-table-compact.sortable th {
  cursor: pointer;
}
.pnl-table-compact.sortable th:hover,
.pnl-table-compact th.sorted {
  color: var(--text);
}
.pnl-table-compact tr.clickable {
  cursor: pointer;
}

/* ----------------------------------------------------------------- overview */
.pnl-equity-chart {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.pnl-insights {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pnl-insights li {
  position: relative;
  padding: 6px 8px 6px 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-dim);
  background: var(--bg-base);
  border-radius: 4px;
}
.pnl-insights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--text-muted);
}
.pnl-insights li.good::before {
  background: var(--profit);
}
.pnl-insights li.bad::before {
  background: var(--loss);
}
.pnl-insights li.info::before {
  background: #45b5ff;
}

/* ----------------------------------------------------------------- behavior */
.pnl-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.pnl-compare-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  background: var(--bg-base);
}
.pnl-compare-side .pnl-stat-value {
  font-size: 17px;
}

.pnl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.pnl-hold {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- benchmarks */
.pnl-bench-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.pnl-bench-label {
  margin-right: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pnl-bench-chip {
  padding: 2px 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-family: var(--app-font), sans-serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.pnl-bench-chip:hover {
  color: var(--text);
}
.pnl-bench-chip.on {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--text);
}
.pnl-bench-input {
  width: 64px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  outline: none;
  user-select: text;
}
.pnl-bench-input:focus {
  border-color: #45b5ff;
}
.pnl-bench-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-dim);
}
.pnl-bench-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 0;
  background: var(--text-muted);
}
.pnl-bench-legend .dot.profit {
  background: var(--profit);
}
.pnl-bench-legend .dot.loss {
  background: var(--loss);
}
.pnl-bench-legend b {
  font-weight: 700;
}
.pnl-bench-legend em {
  font-style: normal;
  color: var(--text-muted);
}
.pnl-badge.live {
  color: var(--tc-45b5ff);
  background: color-mix(in srgb, #45b5ff 15%, transparent);
}
.pnl-badge.open {
  margin-left: 0;
  color: var(--tc-fffa9f);
  background: color-mix(in srgb, #fffa9f 12%, transparent);
}
.pnl-trades-tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pnl-trades-toolbar {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.pnl-trips td.clickable {
  cursor: pointer;
}
.pnl-trip-caret {
  display: inline-block;
  width: 12px;
  color: var(--text-muted);
}
.pnl-trip-fill {
  padding-left: 22px !important;
  color: var(--text-muted);
}
.pnl-insights li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pnl-insights li.clickable {
  cursor: pointer;
}
.pnl-insights li.clickable:hover {
  background: var(--bg-hover);
}
.pnl-insight-detail {
  font-size: 10.5px;
  color: var(--text-muted);
}
.stock-stop-menu-container,
.stock-close-menu-container,
.option-close-menu-container {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  width: 220px;
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  z-index: 100;
  user-select: none;
  -webkit-user-select: none;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-family: var(--app-font), sans-serif;
}

/* Size options styling */
.size-options-sl,
.size-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 1px;
}

.size-options-sl span,
.size-options span {
  cursor: pointer;
  padding: 4px 2px;
  background-color: var(--bg-alt);
  flex-grow: 1;
  text-align: center;
  font-size: 0.9em;
  transition: background-color 0.15s ease;
}

.size-options-sl span:hover,
.size-options span:hover {
  background-color: var(--bg-hover);
}

.size-options-sl span:first-child,
.size-options span:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.size-options-sl span:last-child,
.size-options span:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* Selected state with gradients */
.size-options span.selected {
  background: linear-gradient(to right, #2c6b95, #3ea3e6);
  color: var(--text);
}

.size-options-sl span.selected {
  background: linear-gradient(to right, rgb(179, 118, 43), #e59024);
  color: var(--text);
}

/* Add-to-position menu — green accent to distinguish it from Close (blue)
   and Stop (orange). Scoped to .add-menu so the close menus keep their blue. */
.add-menu .size-options span.selected {
  background: linear-gradient(to right, #1f7a4d, #2fbf71);
  color: var(--text);
}

/* The size pills carry the .option class (flex, space-between) which knocks the
   label off-center */
.size-options-sl span,
.size-options span {
  justify-content: center;
}

/* Trade options styling */
.trade-options {
  display: flex;
  gap: 8px;
}

.market-option {
  cursor: pointer;
  padding: 6px;
  background-color: var(--bg-alt);
  color: var(--text);
  text-align: center;
  width: 70px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

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

.limit-section {
  flex-grow: 1;
}

/* Option rows styling */
.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 4px 6px;
  margin: 2px 0;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

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

.option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

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

.sl-entry {
  color: var(--tc-e59024);
}

.label {
  font-size: 0.9em;
  color: var(--text-dim);
}

/* Input styling */
.custom-limit-input {
  width: 65px;
  padding: 2px 4px;
  background-color: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  text-align: right;
  font-size: 0.9em;
}

.custom-limit-input:focus {
  outline: none;
  border-color: var(--border-light);
  background-color: var(--bg-hover);
}

.custom-limit-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-base);
  color: var(--text-muted);
}

/* Stop-limit inputs styling */
.stop-limit-inputs {
  display: flex;
  gap: 4px;
}

.stop-limit-inputs .custom-limit-input {
  width: 60px;
}

/* Stop-limit section styling */
.stop-limit-section {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* Button styling */
.trade-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.9em;
  transition: background-color 0.15s ease;
  font-family: var(--app-font), sans-serif;
  cursor: pointer;
}

.trade-sl-button {
  background-color: rgba(229, 144, 36, 0.15);
  color: var(--tc-e59024);
  border: 1px solid rgba(229, 144, 36, 0.3);
}

.trade-sl-button:hover {
  background-color: rgba(229, 144, 36, 0.25);
}

.trade-close-button {
  background-color: rgba(62, 163, 230, 0.15);
  color: #3ea3e6;
  border: 1px solid rgba(62, 163, 230, 0.3);
}

.trade-close-button:hover {
  background-color: rgba(62, 163, 230, 0.25);
}

.down-arrow-icon {
  width: 10px;
  height: 10px;
  opacity: 0.8;
}

/* Chart Position Menu — right-click overlay */
.chart-position-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 0, 0, 0.5));
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  color: var(--text);
  /* Menu chrome never selects (covers the cpm-sub flyouts too) */
  user-select: none;
  -webkit-user-select: none;
}

.chart-position-menu input {
  user-select: text;
  -webkit-user-select: text;
}

.chart-position-menu button {
  font-family: var(--app-font), sans-serif;
}

/* Size selector row */
.cpm-sizes {
  display: flex;
  gap: 2px;
  margin-bottom: 5px;
}

.cpm-size {
  flex: 1;
  padding: 3px 0;
  background: var(--bg-button);
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  transition:
    background 0.1s,
    color 0.1s;
}

.cpm-size:hover {
  background: var(--bg-button-hover);
  color: var(--text);
}

.cpm-size--active {
  background: rgba(62, 163, 230, 0.25);
  color: #6bb8ee;
  font-weight: 700;
}

/* Order buttons row */
.cpm-actions {
  display: flex;
  gap: 3px;
  margin-bottom: 5px;
}

.cpm-btn {
  flex: 1;
  padding: 4px 0;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: opacity 0.1s;
}

.cpm-btn:hover {
  opacity: 0.85;
}

.cpm-btn--mkt {
  background: var(--bg-button);
  color: var(--text);
}

.cpm-btn--lmt {
  background: rgba(62, 163, 230, 0.22);
  color: #5eade8;
}

.cpm-btn--sl {
  background: rgba(229, 144, 36, 0.22);
  color: var(--tc-e59024);
}

/* Terminal-native stop -- outlined variant of SL so the two read as kin */
.cpm-btn--tsl {
  background: transparent;
  border: 1px solid rgba(229, 144, 36, 0.55);
  color: var(--tc-e59024);
}

/* P&L line */
.cpm-pnl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 2px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
  font-size: 10px;
  gap: 8px;
}

.cpm-pnl-qty {
  color: var(--text-muted);
  white-space: nowrap;
}

.cpm-pnl-val {
  font-weight: 600;
  font-size: 10px;
  white-space: nowrap;
}

.cpm-pnl-val--pos {
  color: var(--profit, #00ff88);
}

.cpm-pnl-val--neg {
  color: var(--loss, #ff4800);
}

/* Menu rows (alert, AI, submenu parents, submenu items) */
.cpm-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 5px;
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition:
    background 0.1s,
    color 0.1s;
}

.cpm-row:hover,
.cpm-row--open {
  background: var(--bg-hover);
  color: var(--text);
}

.cpm-row--disabled {
  cursor: default;
  color: var(--text-muted);
}

.cpm-row--disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.cpm-row-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.cpm-row-icon--tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}

.cpm-row-chevron {
  margin-left: auto;
  opacity: 0.6;
}

.cpm-soon {
  margin-left: auto;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cpm-sep {
  border-top: 1px solid var(--border);
  margin: 5px 0;
}

/* Submenu flyouts */
.cpm-row-wrap {
  position: relative;
}

.cpm-sub {
  position: absolute;
  top: -7px;
  left: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  min-width: 130px;
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 0, 0, 0.5));
  z-index: 10001;
}

.cpm-sub--left {
  left: auto;
  right: 100%;
}

.cpm-sub--up {
  top: auto;
  bottom: -7px;
}

.cpm-sub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  min-width: 168px;
}

.cpm-tf {
  padding: 4px 0;
  background: var(--bg-button);
  color: var(--text-dim);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  transition:
    background 0.1s,
    color 0.1s;
}

.cpm-tf:hover {
  background: var(--bg-button-hover);
  color: var(--text);
}

.cpm-tf--active {
  background: rgba(62, 163, 230, 0.25);
  color: #6bb8ee;
  font-weight: 700;
}

/* Spread close section */
.spread-close-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.spread-close-header {
  font-size: 10px;
  font-weight: 600;
  color: rgb(180, 130, 255);
  padding: 4px 6px 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spread-close-legs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 6px 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.spread-close-leg {
  display: flex;
  align-items: center;
  gap: 4px;
}

.spread-close-leg-side {
  font-weight: 600;
  font-size: 10px;
  min-width: 28px;
}

.spread-close-actions {
  padding: 0 4px;
}

.spread-close-actions .market-option {
  width: 100%;
  background: rgba(180, 130, 255, 0.12);
  color: rgb(180, 130, 255);
  font-weight: 600;
  font-size: 11px;
}

.spread-close-actions .market-option:hover {
  background: rgba(180, 130, 255, 0.22);
}

.spread-close-divider-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
}

.sl-liq-note {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 4px 0 0;
}

/* Smart stop panel (position right-click menu) */
.smart-stop .size-options {
  flex-wrap: wrap;
}
.smart-stop-now {
  color: var(--text-dim);
  font-weight: 500;
  text-transform: none;
}
.smart-stop-arm {
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}
.smart-stop-note {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
.smart-stop-existing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  font-size: 11px;
  color: var(--text-dim);
}
.smart-stop-existing button {
  padding: 1px 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}
.smart-stop-existing button:hover {
  color: var(--loss);
  border-color: var(--loss);
}
.smart-stop .trade-options {
  display: block;
}
.smart-stop .smart-stop-arm {
  width: 100%;
  box-sizing: border-box;
}

/* Close menu: exact quantity + what it does at the live price */
.close-qty-row {
  display: flex;
  margin: 4px 0 2px;
}
.close-qty-row .close-qty-input {
  width: 100%;
  box-sizing: border-box;
}
.close-preview {
  margin: 2px 0 4px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.close-preview .profit {
  color: var(--profit);
}
.close-preview .loss {
  color: var(--loss);
}
.sl-preview {
  padding: 0 6px 4px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.sl-preview.bad {
  color: var(--loss);
}
.smart-stop-kinds .option {
  flex: 1 1 30%;
  text-align: center;
}

/* Chart menu: smart stop rows for positions this chart drives */
.cpm-section-label {
  padding: 6px 5px 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.cpm-muted {
  color: var(--text-muted);
}

/* Close / SL / Add / TP dropdowns never set a size and inherited the page's
   large default; same layout, at the chart menu's 11px */
.dropdown-menu,
.add-menu {
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
}
/* One size inside: chips, labels, preview and bid/ask all set their own */
.dropdown-menu *,
.add-menu * {
  font-size: inherit;
}
.dropdown-menu .custom-limit-input,
.add-menu .custom-limit-input {
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
}
.dropdown-menu .custom-limit-input:focus,
.add-menu .custom-limit-input:focus {
  border-color: #45b5ff;
  background: var(--bg-base);
}
.dropdown-menu .close-qty-input {
  width: 100%;
  text-align: left;
}
.dropdown-menu .close-preview {
  margin: 0 2px 6px;
}

/* Drawing multi-selection menu (DrawingGroupMenu) */
.drawing-group-menu-title {
  padding: 2px 5px 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.drawing-group-menu-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}
.position-panel-main {
  background-color: var(--bg-base);
  color: var(--text);
  padding: 0 0 0 0;
  font-family: var(--app-font), sans-serif;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  border: none;
  height: 100%;
  user-select: none;
  overflow: auto;
  /* z-index: 0; */
}

.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  background: var(--bg-alt);
  padding: 0 0 0 0;
  margin: 0;
  border-radius: 0;
  width: 100%;
  height: 28px;
  /* border-box so the 1.5px border doesn't push rendered height past 28px —
     the sticky column header below sits at top: 28px and any overhang is a
     see-through seam rows scroll behind */
  box-sizing: border-box;
  flex-shrink: 0;
  border-bottom: 1.5px solid var(--bg-base);
  /* Pinned while the panel content scrolls under it (opaque bg covers rows) */
  position: sticky;
  top: 0;
  z-index: 20;
}

.tab {
  padding: 0 18px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 0;
  font-size: 13px;
  /* font-family: var(--app-font), sans-serif; */
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  margin: 0;
  transition:
    color 0.15s,
    border-bottom 0.15s;
}

.tab.active {
  color: var(--text);
  border-bottom: 2px solid var(--text);
  background: none;
}

.tab:not(.active):hover {
  color: var(--text);
  background: none;
}

.broker-section {
  margin-left: 0;
  margin-top: 0;
}

.position-table {
  width: 100%;
  /* separate, NOT collapse: collapsed-table borders live on the table layer,
     so scrolling rows' borders (the 3px long/short bars) paint straight
     through the sticky header row. Separate keeps borders on the cells,
     which stick along with them. */
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0;
  table-layout: fixed;
  text-align: left;
}

.position-table th,
.position-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-base);
  height: 20px;
  letter-spacing: 0.2px;
  /* Pinned just below the 28px sticky tab bar; opaque bg covers scrolling rows.
     The shadow paints a 2px opaque band over the tabs/header seam — fractional
     zoom levels can otherwise leave a sub-pixel gap rows show through. */
  position: sticky;
  top: 28px;
  z-index: 10;
  box-shadow: 0 -2px 0 var(--bg-base);
}

.position-table td {
  color: var(--text);
  font-size: 11px;
  height: 20px;
}

.position-table tr {
  min-height: 20px;
}

.position-table tr:hover {
  background-color: var(--bg-alt);
  transition: background-color 0.1s;
}

.privacy-toggle {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  height: 28px;
}

.privacy-icon {
  width: 16px;
  height: 16px;
}

.button-container {
  display: flex;
  gap: 4px;
}

.position-table td .position-status {
  margin-top: 3px;
  font-size: 0.85em;
}

.position-table td {
  color: var(--text-dim);
  font-size: 0.95em;
}

.equity-row,
.option-row {
  /* cursor: pointer; */
  background-color: var(--bg-alt);
  /* font-weight: 600; */
}

td.combined-size {
  color: var(--text);
  font-size: 1em;
}
.arrow {
  font-size: 11px;
  padding-right: 5px;
}

td.pnl-cell .pnl-percentage {
  color: var(--text-dim);
  font-size: 0.75em;
  margin-top: 5px;
  display: block;
}

.position-status.long {
  color: var(--profit);
}

.position-status.short {
  color: var(--tc-ff5c5c);
}

.white {
  color: var(--text) !important;
}

.sub-info {
  color: var(--text-muted);
  font-size: 0.75em;
}

.broker-badge {
  margin-left: 5px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  color: var(--text);
}

.broker-badge.ibkr {
  background-color: #ff0000; /* IBKR red */
}

.pending-orders-table {
  width: 100%;
}

.pending-order-row {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

.pending-order-row:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.order-side {
  font-weight: bold;
}

.order-side.buy {
  color: #90ee90;
}

.order-status {
  color: var(--text-muted);
}

/* Placed but no broker ack yet (slow IBKR acks) — amber pulse until the
   real order state arrives */
.order-status--unacked {
  color: #f0a832;
  font-weight: 600;
  animation: unacked-pulse 1.2s ease-in-out infinite;
}

@keyframes unacked-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.cancel-button {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
  color: var(--tc-ff6b6b);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-button:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.3);
}

.order-actions {
  white-space: nowrap;
  text-align: right;
}

.order-details--editable {
  cursor: text;
}

.order-details--editable:hover {
  text-decoration: underline dotted;
}

.order-amend {
  white-space: nowrap;
}

.order-amend span {
  margin: 0 4px;
  color: var(--text-muted);
}

.order-amend-input {
  width: 52px;
  padding: 2px 4px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
}

/* History Panel */
.history-list {
  width: 100%;
  overflow: auto;
  height: 90%;
  font-family: var(--app-font), 'Fira Code', 'Consolas', monospace;
}

.history-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 4px;
  position: relative;
}

.history-wipe-btn {
  background: var(--bg-base);
  color: var(--text-dim);
  border: 1px solid var(--bg-alt);
  font-weight: 500;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  transition: color 0.15s;
}

.history-wipe-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 80, 80, 0.35);
  pointer-events: none;
}

.history-filters {
  display: flex;
  gap: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.history-filter-btn {
  background: none;
  color: var(--text-muted);
  border: none;
  font-weight: 500;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition:
    color 0.15s,
    background 0.15s;
}

.history-filter-btn.active {
  background: var(--bg-alt);
  color: var(--text);
  font-weight: 700;
}

/* Left side of the toolbar: the Day/Week/Month/All filters are centered */
.history-stats {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.history-total-pnl {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--app-font), 'Fira Code', 'Consolas', monospace;
}

.history-total-pnl.positive {
  color: var(--profit);
}

.history-total-pnl.negative {
  color: var(--tc-ff5c5c);
}

.history-header {
  display: grid;
  grid-template-columns: 2fr 0.6fr 1.2fr 1.2fr 1fr 0.3fr;
  align-items: center;
  padding: 0 8px;
  height: 22px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}

.history-entry {
  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
}

.history-row {
  display: grid;
  grid-template-columns: 2fr 0.6fr 1.2fr 1.2fr 1fr 0.3fr;
  align-items: center;
  padding: 4px 8px;
  min-height: 28px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 12px;
  color: var(--text);
}

.history-row:hover {
  background: var(--bg-alt);
}

.history-row.expanded {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

.history-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
}

.history-cell.symbol-cell {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.history-cell.dim {
  color: var(--text-muted);
}

.history-side-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.history-side-dot.buy {
  background: var(--profit);
}

.history-side-dot.sell {
  background: #ff5c5c;
}

.history-symbol {
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.history-pnl {
  font-size: 12px;
  font-weight: 600;
}

.history-pnl.positive {
  color: var(--profit);
}

.history-pnl.negative {
  color: var(--tc-ff5c5c);
}

.history-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s;
}

.history-row:hover .history-delete-btn {
  opacity: 0.5;
}

.history-delete-btn:hover {
  opacity: 1 !important;
  color: var(--tc-ff5c5c) !important;
}

/* Expanded fills */
.history-fills {
  padding: 2px 8px 6px 24px;
  background: rgba(0, 0, 0, 0.15);
}

.history-fill-row {
  display: grid;
  grid-template-columns: 40px 40px 70px 1fr;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  font-size: 11px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 2%, transparent);
}

.history-fill-row:last-child {
  border-bottom: none;
}

.fill-side {
  font-weight: 600;
  font-size: 10px;
}

.fill-side.buy {
  color: var(--profit);
}

.fill-side.sell {
  color: var(--tc-ff5c5c);
}

.fill-qty {
  color: var(--text-muted);
  font-size: 11px;
}

.fill-price {
  color: var(--text);
  font-size: 11px;
}

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

/* Compact Mode Styles */
.position-table.compact th,
.position-table.compact td {
  padding: 2px 6px;
  height: 24px;
  vertical-align: middle;
}

.position-table.compact .equity-row,
.position-table.compact .option-row {
  min-height: 24px;
}

/* Collapsible folder section header band. Styled as a compact, subtle section
   divider so it doesn't break the table rhythm (esp. in compact mode). */
.position-table .folder-header-row {
  cursor: pointer;
  user-select: none;
}
.position-table .folder-header-row td {
  background: var(--bg-alt);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  height: 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.position-table .folder-header-row:hover td {
  background: var(--bg-hover);
}
.position-table.compact .folder-header-row td {
  padding: 1px 8px;
  height: 16px;
}

.position-table.compact .position-status {
  display: inline;
  margin-left: 8px;
  font-size: 10px;
}

.position-table.compact .broker-badge {
  margin-left: 4px;
  padding: 1px 3px;
  font-size: 9px;
  vertical-align: middle;
}

.position-table.compact .sub-info {
  display: inline;
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.position-table.compact .pnl-percentage {
  display: inline;
  margin-left: 6px;
  margin-top: 0;
  font-size: 10px;
}

.position-table.compact .combined-size {
  font-size: 11px;
}

.position-table.compact .pnl-cell {
  font-size: 11px;
}

.position-table.compact .white {
  font-size: 11px;
}

.position-table.compact .button-container {
  gap: 2px;
}

.position-table.compact .trade-button {
  padding: 2px 6px;
  font-size: 10px;
  height: 20px;
  min-width: 28px;
}

.position-table.compact .down-arrow-icon {
  width: 8px;
  height: 8px;
  margin-left: 2px;
}

/* Option symbol styling */
.option-symbol {
  font-weight: normal;
  font-size: 0.85em;
}

/* Compact mode for options */

.position-table.compact td {
  font-size: 10px;
}

.position-table.compact th {
  font-size: 10px;
}

/* Make symbol text more prominent in compact mode */
.position-table.compact td:first-child {
  color: var(--text) !important;
  font-size: 12px !important;
  /* font-weight: 600; */
}

/* Compact mode: Simple left border for long/short with circle indicator for broker.
   On the first CELL, not the row — row borders don't render with
   border-collapse: separate (see .position-table). */
.position-table.compact .equity-row.long > td:first-child,
.position-table.compact .option-row.long > td:first-child {
  border-left: 3px solid var(--profit);
}

.position-table.compact .equity-row.short > td:first-child,
.position-table.compact .option-row.short > td:first-child {
  border-left: 3px solid #ff5c5c;
}

/* Broker circle indicators */
.broker-circle {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* margin-left: 0px; */
  margin-right: 4px;
}

.broker-circle.ibkr {
  background-color: #ff4444; /* Brighter red */
}

/* Hide position status text in compact mode only */
.position-table.compact .position-status {
  display: none;
}

/* Refresh button animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.refresh-prices-button:hover:not(:disabled) {
  opacity: 0.8;
}

.refresh-prices-button:active:not(:disabled) {
  transform: scale(0.95);
}

.equity-row td:first-child,
.option-row td:first-child {
  position: relative;
}

/* HL Info Tooltip */
.hl-info-icon {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: help;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.hl-info-icon:hover {
  opacity: 1;
  color: var(--text);
}

.hl-info-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 4px;
  padding: 8px 10px;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  min-width: 160px;
  pointer-events: none;
  animation: hlTooltipIn 0.12s ease-out;
}

@keyframes hlTooltipIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hl-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 11px;
}

.hl-info-label {
  color: var(--text-muted);
}

.hl-info-value {
  color: var(--text);
  font-weight: 600;
}

.hl-info-value.positive {
  color: var(--profit);
}

.hl-info-value.negative {
  color: var(--tc-ff5c5c);
}

/* Folder / total rows: the group's size and P&L sit under their columns */
.position-table .folder-header-row .group-label {
  white-space: nowrap;
}
.position-table .group-total {
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.position-table .group-total.profit {
  color: var(--profit);
}
.position-table .group-total.loss {
  color: var(--loss);
}
/* Neutral and bracketed, like the rows' percent, so it doesn't run into the $ */
.position-table .group-pct {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dim);
}
/* Whole-panel summary strip: pinned under the tab bar or to the panel bottom */
.position-summary {
  position: sticky;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 24px;
  padding: 0 10px;
  box-sizing: border-box;
  background: var(--bg-alt);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.position-summary.top {
  top: 28px;
  border-bottom: 1px solid var(--border);
}
.position-summary.bottom {
  bottom: 0;
  border-top: 1px solid var(--border);
}
.position-summary .ps-label {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.position-summary b {
  margin-left: 3px;
  font-weight: 700;
  color: var(--text);
}
.position-summary em {
  margin-left: 5px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-dim);
}
.position-summary .profit {
  color: var(--profit);
}
.position-summary .loss {
  color: var(--loss);
}
/* The column header sits below the top strip */
.position-table.summary-top th {
  top: 52px;
}

.position-empty {
  padding: 18px 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}
.orders-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px;
}
.orders-cancel-all {
  height: 20px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.orders-cancel-all:hover {
  color: var(--loss);
  border-color: var(--loss);
}
.orders-cancel-all.armed {
  color: #000;
  background: var(--loss);
  border-color: var(--loss);
}
.orders-subtitle {
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Working orders on a position (PositionPanel -> WorkingOrdersChip): next to
   Close in the Trade cell, or after the symbol when Trade is hidden */
.working-orders-chip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: 6px;
  height: 15px;
  box-sizing: border-box;
  /* Quantico sits low in its line box: 1px more room under the text centers it */
  padding: 0 4px 1px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.button-container .working-orders-chip {
  margin-left: 0;
}
/* ── Toolbar ── */
.recap-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.recap-btn {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-button);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.recap-btn:hover {
  background: var(--bg-button-hover);
  color: var(--text-dim);
}

.recap-btn--subtle {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.recap-btn--subtle:hover {
  color: var(--text-muted);
  background: var(--bg-button);
}

.recap-range-select {
  appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  text-transform: none;
  letter-spacing: 0;
}

.recap-range-select option {
  background: var(--bg-button);
  color: var(--text-dim);
}

.recap-btn--generate {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--accent);
}

.recap-btn--generate:hover {
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent);
}

.recap-btn--generate:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.recap-btn--loading {
  animation: recapPulse 1.5s ease-in-out infinite;
}

.recap-btn--icon {
  border: none;
  background: transparent;
  padding: 3px;
  display: flex;
  align-items: center;
  opacity: 0.4;
  cursor: pointer;
}

.recap-btn--icon:hover {
  opacity: 0.7;
}

/* ── Status ── */
.recap-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.recap-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.recap-item-count {
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 500;
  margin-left: 2px;
}

/* ── Body ── */
.recap-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px 12px;
}

.recap-empty {
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  margin-top: 40px;
}

/* ── Raw Items ── */
.recap-raw {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.recap-raw-header {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.recap-raw-list {
  max-height: 250px;
  overflow-y: auto;
}

.recap-raw-item {
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.recap-raw-item--alert {
  background: rgba(248, 113, 113, 0.04);
}

.recap-raw-item--analyzed {
  border-left: 2px solid rgba(99, 102, 241, 0.3);
}

.recap-raw-num {
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
  min-width: 18px;
}

.recap-raw-text {
  color: var(--text-muted);
}

.recap-raw-analysis {
  color: var(--accent);
  font-size: 10px;
  margin-top: 2px;
  font-style: italic;
}

.recap-raw-alert {
  color: var(--loss);
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Recap Content ── */
.recap-content {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-dim);
}

.recap-content p {
  margin: 0 0 4px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.recap-content p:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* Tier headers */
.recap-content h2 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 20px 0 10px 0;
  padding: 0 0 6px 10px;
  border-bottom: none;
}

.recap-content h2:first-child {
  margin-top: 0;
}

.recap-content h2.tier-key {
  color: var(--tc-fbbf24);
  border-left: 3px solid #fbbf24;
}

.recap-content h2.tier-notable {
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

.recap-content h2.tier-brief {
  color: var(--text-muted);
  border-left: 3px solid var(--border);
}

.recap-content h1 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tc-fbbf24);
  border-left: 3px solid #fbbf24;
  padding-left: 10px;
  margin: 20px 0 10px 0;
}

.recap-content h1:first-child {
  margin-top: 0;
}

.recap-content h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 10px 0 5px 0;
}

/* Lists */
.recap-content ul {
  margin: 4px 0;
  padding-left: 0;
  list-style-type: none;
}

.recap-content li {
  margin: 8px 0;
  padding-left: 14px;
  position: relative;
}

.recap-content li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* Inline styles */
.recap-content strong {
  font-weight: 600;
  color: var(--text);
}

.recap-content em {
  font-style: normal;
  color: inherit;
}

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

.recap-content a:hover {
  text-decoration: underline;
}

.recap-content code {
  background: var(--bg-hover);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 11px;
}

.recap-content pre {
  background: var(--bg-alt);
  padding: 8px;
  border-radius: 3px;
  overflow-x: auto;
  margin: 8px 0;
}

.recap-content pre code {
  background: none;
  padding: 0;
}

/* Ticker symbols on structured entries — same interaction as .tfa-sym */
.recap-symbols {
  color: var(--accent);
  font-weight: 600;
}

.recap-sym {
  cursor: pointer;
  transition: color 0.12s ease;
}

.recap-sym:hover {
  text-decoration: underline;
}

/* Item references */
.recap-ref {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  transition: color 0.15s;
}

.recap-ref:hover {
  color: var(--text-dim);
}

/* ── Tooltip ── */
.item-tooltip {
  animation: tooltipIn 0.12s ease-out;
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes recapPulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}

/* ── Window chips + the exact window being recapped ── */
.recap-ranges {
  display: flex;
  gap: 4px;
  padding: 6px 8px 0;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  user-select: none;
}
.recap-ranges::-webkit-scrollbar {
  display: none;
}
.recap-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg-button);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.recap-range:hover {
  color: var(--text);
  border-color: var(--border-light, var(--text-muted));
}
.recap-range.on {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.recap-range.empty:not(.on) {
  opacity: 0.5;
}
.recap-range-count {
  min-width: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.recap-range.on .recap-range-count {
  color: var(--text);
}
.recap-window {
  padding: 5px 10px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
}
.recap-window-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.recap-window-alerts {
  color: var(--tc-f59e0b);
}
/* Morning Brief panel chrome. The pages themselves carry their own fixed
   palette (DigestPages); this styles everything around them. */

.dg-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--app-font);
  font-size: 12px;
  position: relative;
}
.dg-panel button {
  font: inherit;
}

/* ---- header ---- */
.dg-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  flex-shrink: 0;
}
.dg-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.dg-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.dg-meta {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dg-meta .dg-err {
  color: var(--loss);
}

.dg-btn {
  height: 26px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dg-btn:hover:not(:disabled) {
  background: var(--bg-hover);
}
.dg-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.dg-btn.dg-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dg-btn.dg-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 85%, #fff);
}
.dg-btn.dg-sm {
  height: 22px;
  padding: 0 9px;
  font-size: 11px;
}
.dg-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.dg-icon:hover,
.dg-icon.on {
  color: var(--text);
  background: var(--bg-hover);
}

/* page style strip: one named button per theme */
.dg-styles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  flex-shrink: 0;
}
.dg-styles-label {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}
.dg-style {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px 0 6px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}
.dg-style:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.dg-style.on {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.dg-custom input[type='color'] {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.dg-hex {
  width: 66px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  font-family: monospace;
  text-transform: lowercase;
}
.dg-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid;
  box-sizing: border-box;
}

/* indeterminate build bar under the header */
.dg-progress {
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  flex-shrink: 0;
}
.dg-progress span {
  display: block;
  width: 30%;
  height: 100%;
  background: var(--accent);
  animation: dg-slide 1.2s ease-in-out infinite;
}
@keyframes dg-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(340%);
  }
}

/* ---- settings ---- */
.dg-settings {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  user-select: none;
  flex-shrink: 0;
}
.dg-settings > label {
  color: var(--text-muted);
}
.dg-settings select {
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  max-width: 260px;
}
.dg-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.dg-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dg-list {
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.dg-list.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}
.dg-list b {
  font-weight: 400;
  opacity: 0.6;
  margin-left: 5px;
}

/* ---- body ---- */
.dg-body {
  flex: 1;
  overflow: auto;
  padding: 18px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* a scrolling flex column shrinks its children to fit unless told not to */
.dg-body > * {
  flex-shrink: 0;
}

.dg-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
  max-width: 100%;
}
.dg-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.dg-card-head .dg-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}
.dg-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-muted);
}
.dg-count.near {
  color: #d4932a;
}
.dg-count.over {
  color: var(--loss);
  font-weight: 700;
}
.dg-caption-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.dg-page {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 100%;
}
.dg-page-head {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.dg-page-num {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-hover);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.dg-page-name {
  font-weight: 600;
  flex: 1;
}
.dg-sheet {
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.dg-empty {
  margin: auto;
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  user-select: none;
}
.dg-empty h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

/* ---- tabs ---- */
.dg-tabs {
  display: flex;
  gap: 2px;
  margin-right: 6px;
}
.dg-tab {
  height: 26px;
  padding: 0 11px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dg-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.dg-tab.on {
  color: var(--text);
  border-color: var(--border-light);
  background: var(--bg-hover);
}
.dg-settings .dg-styles {
  padding: 0;
  border: none;
}

/* ---- earnings ---- */
.ec-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ec-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  flex-shrink: 0;
}
.ec-ticker {
  width: 96px;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
}
.ec-status {
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ec-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  flex-shrink: 0;
}
.ec-gap {
  margin-left: 10px;
}
.ec-chip {
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}
.ec-chip:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-hover);
}
.ec-chip.built {
  color: var(--text);
}
.ec-chip.on {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.ec-chip b {
  font-weight: 400;
  opacity: 0.6;
}
.ec-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* a scrolling flex column shrinks its children to fit unless told not to */
.ec-body > * {
  flex-shrink: 0;
}
.ec-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
.ec-review {
  width: 100%;
  max-width: 900px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* review list: one ruled table, figures right-aligned in tabular digits */
.ec-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 6px;
  user-select: none;
}
.ec-section h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ec-section span {
  color: var(--text-muted);
  font-size: 12px;
}
.ec-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 104px 96px 68px 40px;
  column-gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.ec-row.ec-head {
  padding: 0 0 6px;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}
.ec-row.off > :not(input[type='checkbox']):not(.ec-detail) {
  opacity: 0.5;
}
.ec-row > input[type='checkbox'] {
  margin: 0;
}
.ec-name {
  font-weight: 600;
  padding-left: 7px;
}
.ec-num {
  text-align: right;
  white-space: nowrap;
}
.ec-strong {
  font-weight: 700;
  color: var(--text);
}
.ec-muted {
  color: var(--text-muted);
}
.ec-edit {
  height: 24px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.ec-edit.ec-num {
  text-align: right;
}
.ec-edit:hover,
.ec-edit:focus {
  border-color: var(--border-light);
  background: var(--bg-deep);
  outline: none;
}
.ec-est {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--text-muted);
}
.ec-est input {
  width: 56px;
  height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ec-verdict {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.ec-verdict.beat,
.ec-verdict.above {
  color: var(--profit);
}
.ec-verdict.miss,
.ec-verdict.below {
  color: var(--loss);
}
/* source state: a small tag beside the value, pale tint and same-hue text */
.ec-badge {
  justify-self: start;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  user-select: none;
  white-space: nowrap;
}
.ec-badge.ok {
  color: var(--profit);
  background: color-mix(in srgb, var(--profit) 13%, transparent);
}
.ec-badge.warn {
  color: #d4932a;
  background: color-mix(in srgb, #d4932a 13%, transparent);
}
.ec-badge.bad {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 13%, transparent);
}
.ec-moves {
  display: flex;
  justify-content: flex-end;
}
.ec-move {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.ec-move:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-hover);
}
.ec-move:disabled {
  opacity: 0.3;
  cursor: default;
}
.ec-detail {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 7px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.ec-detail:empty {
  display: none;
}
.ec-why {
  color: var(--text-muted);
}
.ec-quote b {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}
.ec-notes {
  color: #d4932a;
}
.ec-empty-line {
  padding: 4px 7px 8px;
  color: var(--text-muted);
}
/* two measures stacked in one cell, both on the cell's right edge */
.ec-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}
.ec-cell .ec-edit {
  width: 100%;
  height: 22px;
}
.ec-cell .ec-verdict {
  font-size: 11px;
}
.ec-row > .ec-edit {
  align-self: start;
}
/* a long row name grows to more lines instead of being cut */
.ec-label-text {
  height: auto;
  min-height: 24px;
  padding: 2px 6px;
  resize: none;
  overflow: hidden;
  white-space: normal;
  line-height: 1.35;
  field-sizing: content;
}
@keyframes yt-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.botting-panel {
  display: flex;
  flex-direction: column;
  /* Fixed chrome (toolbar + tabs) pinned at the top; each tab renders into
     .botting-body, which is the only scroll region. So tabs read as distinctly
     separated pages instead of one long shared scroll that drags the tab bar
     and other tabs' content past the viewport. */
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
  color: var(--text);
  font-size: 11px;
  user-select: none;
}

/* Pin the toolbar + tabs; only the active tab body scrolls. */
.botting-toolbar,
.botting-tabs {
  flex: 0 0 auto;
}
.botting-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Toolbar (no title — panel chrome already shows "Botting") ── */
.botting-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}

.botting-sound {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.botting-sound select {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 10px;
  padding: 3px 4px;
  cursor: pointer;
  max-width: 92px;
}
.botting-sound-preview {
  background: var(--bg-button);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 9px;
  padding: 0 6px;
}
.botting-sound-preview:hover {
  color: var(--accent);
}

.botting-arm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  cursor: pointer;
}
.botting-arm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.botting-arm.on {
  color: var(--profit);
  border-color: color-mix(in srgb, var(--profit) 45%, transparent);
}
.botting-arm.on .botting-arm-dot {
  background: var(--profit);
  box-shadow: 0 0 5px var(--profit);
}
.botting-arm.off {
  color: var(--text-muted);
}
/* Global dry-run ("AFK safe mode") toggle — same shape as .botting-arm but a
   distinct blue "on" state so it never reads as the green Armed switch. */
.botting-dryall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  cursor: pointer;
}
.botting-dryall.on {
  color: #3b82f6;
  border-color: color-mix(in srgb, #3b82f6 50%, transparent);
}
.botting-dryall.on .botting-arm-dot {
  background: #3b82f6;
  box-shadow: 0 0 5px #3b82f6;
}
.botting-dryall.off {
  color: var(--text-muted);
}

.botting-note {
  padding: 4px 8px;
  color: var(--text-muted);
  font-size: 9.5px;
  border-bottom: 1px solid var(--border);
}

/* ── Section header ── */
.botting-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 3px;
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.botting-add {
  background: var(--bg-button);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 10px;
  cursor: pointer;
}
.botting-add:hover {
  background: var(--bg-button-hover);
}
.botting-add:disabled {
  opacity: 0.5;
  cursor: default;
}

.botting-setups-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 8px 4px;
}
/* Import status note sits to the left of the buttons. */
.botting-import-msg {
  margin-right: auto;
  font-size: 9.5px;
  color: var(--text-muted);
}
.botting-setups {
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.botting-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Market-cap sizing editor (global table for the `mcap` size token) ── */
.bmcap {
  margin: 6px 8px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
}
.bmcap-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bmcap-head:hover {
  color: var(--text);
}
.bmcap-caret {
  color: var(--text-dim);
}
.bmcap-sub {
  margin-left: auto;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}
.bmcap-sub code,
.bmcap-hint code,
.bmcap-body code {
  font-family: 'Roboto Mono', monospace;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0 2px;
  border-radius: 2px;
}
.bmcap-body {
  padding: 4px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.bmcap-hint {
  font-size: 9.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Global limits (COOLDOWN & LIMITS) — one stacked row per setting ── */
.blimits {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.blimit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.blimit-label {
  flex: 0 0 110px;
  color: var(--text);
}
.blimit-row input {
  width: 56px;
  box-sizing: border-box;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.blimit-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.blimit-row input::-webkit-inner-spin-button,
.blimit-row input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.blimit-unit {
  color: var(--text-muted);
  min-width: 14px;
}
.blimit-hint {
  flex: 1;
  min-width: 0;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.3;
}
.bmcap-formula {
  margin: 4px 0;
  padding: 3px 6px;
  font-size: 10px;
  color: var(--text);
  background: var(--bg-button);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.bmcap-step {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 3px;
}
.bmcap-tiers {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bmcap-tier,
.bmcap-line {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.bmcap-tier input,
.bmcap-line input {
  width: 48px;
  text-align: right;
  background: var(--bg-button);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.bmcap-mults {
  flex-wrap: wrap;
}
.bmcap-mults label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.bmcap-mults input {
  width: 40px;
}
.bmcap-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.bmcap-x:hover:not(:disabled) {
  color: var(--negative, #e15b64);
}
.bmcap-x:disabled {
  opacity: 0.3;
  cursor: default;
}
.bmcap-add,
.bmcap-reset {
  align-self: flex-start;
  background: var(--bg-button);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
}
.bmcap-add:hover,
.bmcap-reset:hover {
  background: var(--bg-button-hover);
}
.bmcap-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.bmcap-preview-label {
  font-size: 9.5px;
  color: var(--text-dim);
}
.bmcap-chip {
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 3px;
  padding: 0 4px;
}

/* ── Setup folders (organizational grouping, mirrors position folders) ── */
.botting-folder-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.botting-folder-head:hover {
  color: var(--text);
}
.botting-folder-caret {
  flex: 0 0 auto;
  width: 10px;
  text-align: center;
}
.botting-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.botting-folder-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.botting-folder-empty {
  padding: 6px 10px;
  font-size: 10px;
  font-style: italic;
  color: var(--text-dim);
}

/* Bulk shared-fields editor inside the folder right-click menu. Reuses the
   setup-editor field classes (.botting-field/.botting-row/.bsrc/…) for a
   consistent look; this just sets the section's own rhythm. */
.bfolder-shared {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 9px 3px;
}
.bfolder-hidden {
  font-size: 9.5px;
  font-style: italic;
  color: var(--text-dim);
  padding-top: 1px;
}

/* ── Setup card ── */
.bcard {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-alt);
  overflow: hidden;
}
.bcard.on {
  border-color: color-mix(in srgb, var(--profit) 40%, var(--border));
}

.bcard-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
}

/* compact switch */
.bswitch {
  flex: 0 0 auto;
  width: 24px;
  height: 13px;
  border-radius: 7px;
  border: none;
  background: var(--bg-button);
  position: relative;
  cursor: pointer;
  transition: background 0.12s ease;
}
.bswitch-knob {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.bswitch.on {
  background: color-mix(in srgb, var(--profit) 35%, transparent);
}
.bswitch.on .bswitch-knob {
  transform: translateX(11px);
  background: var(--profit);
}

.bcard-name {
  font-weight: 600;
  cursor: pointer;
}

.bchip {
  flex: 0 0 auto;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
}
.bchip.dry {
  color: var(--text-dim);
  background: var(--bg-input);
  border-color: var(--border);
}
.bchip.live {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 14%, transparent);
  border-color: color-mix(in srgb, var(--loss) 45%, transparent);
}

.bcard-fires {
  flex: 0 0 auto;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}

.bcard-cmd {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.bicon {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
}
.bicon:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.bicon.danger:hover {
  color: var(--loss);
}

/* ── Editor ── */
.botting-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 8px 9px;
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}

.botting-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.botting-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.botting-field.grow {
  flex: 1;
  min-width: 0;
}
.botting-field.conf {
  flex: 0 0 auto;
  width: 64px;
}
.botting-field.num {
  flex: 1;
  min-width: 0;
}
.botting-field > span {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.botting-field em {
  font-style: normal;
  color: var(--text-dim);
  text-transform: none;
}
.botting-field input,
.botting-field textarea,
.botting-field select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  font-family: inherit;
  resize: vertical;
}
.botting-field input:focus,
.botting-field textarea:focus,
.botting-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.botting-field input.mono {
  font-family: monospace;
}
.botting-field textarea.botting-trigger {
  resize: none;
  line-height: 1.4;
  overflow-y: auto;
}
/* Subtle drag affordance to resize the Trigger box. */
.botting-resize-handle {
  height: 6px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.12s ease;
}
.botting-resize-handle::after {
  content: '';
  width: 22px;
  height: 0;
  border-top: 1px solid var(--text-muted);
}
.botting-resize-handle:hover {
  opacity: 0.9;
}
.botting-field.conf input {
  text-align: center;
}
/* Kill the native number spinner. */
.botting-field input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.botting-field input[type='number']::-webkit-inner-spin-button,
.botting-field input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.botting-mode {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}
.botting-mode-btn {
  background: var(--bg-input);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 4px 10px;
}
.botting-mode-btn + .botting-mode-btn {
  border-left: 1px solid var(--border);
}
.botting-mode-btn.active {
  background: var(--bg-hover);
  color: var(--text);
}
.botting-mode-btn.live.active {
  background: color-mix(in srgb, var(--loss) 22%, transparent);
  color: var(--loss);
  font-weight: 700;
}

.botting-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
}
.botting-check input {
  cursor: pointer;
  margin: 0;
}

.botting-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bsrc {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 8px;
}
.bsrc:hover {
  color: var(--text-dim);
}
.bsrc.on {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Named-filter chips mirror the news feed: left-click = require (green),
   right-click = exclude (red). */
.bsrc.allow {
  background: color-mix(in srgb, var(--profit) 16%, transparent);
  color: var(--profit);
  border-color: color-mix(in srgb, var(--profit) 55%, transparent);
}
.bsrc.deny {
  background: color-mix(in srgb, var(--loss) 16%, transparent);
  color: var(--loss);
  border-color: color-mix(in srgb, var(--loss) 55%, transparent);
}
/* Re-scan-on-summary action chip — distinct from a source toggle: dashed,
   slightly indented, and tinted only when active. */
.bsrc.rerun {
  border-style: dashed;
  margin-left: 2px;
}
.bsrc.rerun.on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-style: solid;
}

/* ── Tabs ── */
.botting-tabs {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.botting-tabs button {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 600;
  padding: 5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.botting-tabs button:hover {
  color: var(--text-dim);
}
.botting-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── Activity log (detail cards) ── */
.botting-logwrap {
  display: flex;
  flex-direction: column;
}
.botting-logbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.botting-clear {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 9px;
  padding: 1px 7px;
}
.botting-clear:hover {
  color: var(--loss);
  border-color: color-mix(in srgb, var(--loss) 45%, transparent);
}
.botting-log {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.blog-card {
  border: 1px solid var(--border);
  border-left: 2px solid var(--text-muted);
  border-radius: 4px;
  background: var(--bg-alt);
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.blog-card.fired {
  border-left-color: var(--loss);
}
.blog-card.simulated {
  border-left-color: var(--accent);
}
.blog-card.error {
  border-left-color: var(--loss);
}
.blog-card.stale {
  border-left-color: var(--text-dim);
}
.blog-card.skip {
  border-left-color: var(--border);
  opacity: 0.6;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.blog-badge {
  flex: 0 0 auto;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
  background: var(--bg-input);
}
.blog-badge.fired {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 16%, transparent);
}
.blog-badge.simulated {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.blog-badge.error {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 12%, transparent);
}
.blog-badge.stale {
  color: var(--text-dim);
  background: var(--bg-input);
}
.blog-badge.cooldown {
  color: #93c5fd;
  background: rgba(100, 116, 139, 0.18);
}

/* ── Global symbol-cooldown control (next to Dynamic Sizing) ── */
.bcooldown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-alt);
}
.bcooldown-title {
  font-weight: 700;
  letter-spacing: 0.3px;
  flex: 0 0 auto;
}
.bcooldown-min {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.bcooldown-min input {
  width: 48px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 1px 4px;
  font-variant-numeric: tabular-nums;
}
.bcooldown-hint {
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Durable per-symbol cooldown viewer (Log tab) ── */
.botting-fsym {
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 6px;
  background: var(--bg-alt);
}
.botting-fsym-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11px;
}
.botting-fsym-title {
  font-weight: 700;
  letter-spacing: 0.3px;
}
.botting-fsym-min {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
}
.botting-fsym-min input {
  width: 44px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 1px 4px;
  font-variant-numeric: tabular-nums;
}
.botting-fsym-count {
  color: var(--text-muted);
  margin-left: auto;
}
.botting-fsym-list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.botting-fsym-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 10.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  opacity: 0.55;
}
.botting-fsym-row.locked {
  opacity: 1;
}
.botting-fsym-sym {
  font-weight: 700;
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}
.botting-fsym-state {
  flex: 0 0 auto;
}
.botting-fsym-when {
  flex: 0 0 auto;
  color: var(--text-dim);
  min-width: 56px;
}
.botting-fsym-setup {
  flex: 0 0 auto;
  color: var(--text-muted);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.botting-fsym-hl {
  flex: 1;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.botting-fsym-ovr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
}
.botting-fsym-ovr input {
  width: 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 0 3px;
  font-variant-numeric: tabular-nums;
}
.botting-fsym-ovr.set input {
  border-color: #93c5fd;
  color: #93c5fd;
}
.botting-fsym-x {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
}
.botting-fsym-x:hover {
  color: var(--tc-f87171);
}
/* Manual lock/blacklist add row */
.botting-fsym-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.botting-fsym-add-sym {
  width: 70px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 2px 5px;
  font-weight: 700;
  text-transform: uppercase;
}
.botting-fsym-add-min {
  width: 48px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 2px 4px;
  font-variant-numeric: tabular-nums;
}
.botting-fsym-add-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  cursor: pointer;
  padding: 2px 8px;
}
.botting-fsym-add-btn:hover:not(:disabled) {
  border-color: var(--accent, #93c5fd);
}
.botting-fsym-add-btn.danger:hover:not(:disabled) {
  border-color: #f87171;
  color: var(--tc-f87171);
}
.botting-fsym-add-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Permanent (blacklisted) rows read full-strength + the ∞ override marker */
.botting-fsym-row.perm {
  opacity: 1;
}
.botting-fsym-ovr.perm {
  color: var(--tc-f87171);
  font-weight: 700;
}
/* Trade-card headline (what the fire triggered on) */
.btrade-hl {
  padding: 1px 8px 3px;
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-test {
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}
.blog-name {
  font-weight: 600;
  font-size: 10.5px;
}
.blog-grow {
  flex: 1;
}
.blog-conf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
}
.blog-conf.met {
  color: var(--profit);
}
.blog-conf.miss {
  color: var(--text-muted);
}
.blog-conf-thr {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.blog-times {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.blog-time {
  color: var(--text-muted);
  font-family: monospace;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.blog-time em {
  font-style: normal;
  margin-right: 4px;
  opacity: 0.6;
}
.blog-time:hover {
  color: var(--text-dim);
}

.blog-submeta {
  display: flex;
  gap: 8px;
  color: var(--text-muted);
  font-size: 9px;
}
.blog-submeta span::before {
  content: '';
}
.blog-submeta span + span::before {
  content: '· ';
  margin-right: 6px;
  margin-left: -7px;
}

.blog-news {
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-reason {
  color: var(--text);
  font-size: 10px;
  font-style: italic;
  line-height: 1.3;
}
.blog-cmd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10px;
}
.blog-cmd code {
  font-family: monospace;
  color: var(--accent);
}
.blog-cmd-res {
  color: var(--text-muted);
}
.blog-err {
  color: var(--loss);
  font-size: 10px;
}

/* ── Tester ── */
.botting-tester {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 8px;
}
.botting-tester select,
.botting-tester textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  font-family: inherit;
  resize: none;
}
.botting-test-input {
  overflow-y: auto;
}
.botting-tester select:focus,
.botting-tester textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.botting-test-run {
  display: flex;
  align-items: center;
  gap: 8px;
}
.botting-test-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.botting-test-count input {
  width: 46px;
  text-align: center;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 4px;
  font-size: 11px;
}
.botting-test-count input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.botting-test-count input[type='number']::-webkit-inner-spin-button,
.botting-test-count input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.botting-test-note {
  font-size: 10px;
  color: var(--text-dim);
}

.botting-test-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.botting-test-summary b {
  font-size: 11px;
}
.botting-test-summary b.all {
  color: var(--profit);
}
.botting-test-summary b.none {
  color: var(--text-muted);
}
.botting-test-summary b.mixed {
  color: var(--accent);
}
.botting-test-errs {
  color: var(--loss);
}

.botting-test-runs {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.btrun {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 7px;
  font-size: 10px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
}
.btrun:last-child {
  border-bottom: none;
}
.btrun.fire {
  border-left-color: var(--profit);
}
.btrun.err {
  border-left-color: var(--loss);
}
.btrun-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.btrun-verdict {
  flex: 0 0 auto;
  width: 30px;
  font-weight: 700;
  font-size: 9px;
}
.btrun.fire .btrun-verdict {
  color: var(--profit);
}
.btrun.no .btrun-verdict {
  color: var(--text-muted);
}
.btrun.err .btrun-verdict {
  color: var(--loss);
}
.btrun.filtered .btrun-verdict {
  color: var(--text-muted);
}
.btrun.filtered .btrun-head {
  color: var(--text-muted);
}
.btrun-head {
  flex: 1;
  min-width: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btrun-conf {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.btrun-lat {
  flex: 0 0 auto;
  width: 46px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.btrun-reason {
  color: var(--text-muted);
  font-style: italic;
  padding-left: 37px;
  line-height: 1.3;
}
.btrun-resolved {
  font-style: normal;
  font-family: monospace;
  color: var(--accent);
}

/* === Auto position management ============================================ */

.bmanage {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.bmanage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.bmanage-rules {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.bmanage-rule {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bmanage-rule select,
.bmanage-rule input {
  background: var(--bg-input, #111);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}
.bmanage-num {
  width: 56px;
}

/* Trades tab */
.btrades {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
  min-height: 0;
}
.btrades-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
}
.btrade {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}
.btrade.managing,
.btrade.filling,
.btrade.firing {
  border-left-color: var(--accent);
}
.btrade.exiting {
  border-left-color: #e0a800;
}
.btrade.flat {
  border-left-color: var(--profit);
  opacity: 0.85;
}
.btrade.cancelled,
.btrade.error {
  border-left-color: var(--loss);
  opacity: 0.7;
}
.btrade.dry {
  border-style: dashed;
}
.btrade-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.btrade-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.btrade-state.managing {
  color: var(--accent);
}
.btrade-state.exiting {
  color: var(--tc-e0a800);
}
.btrade-state.flat {
  color: var(--profit);
}
.btrade-state.cancelled,
.btrade-state.error {
  color: var(--loss);
}
.btrade-sym {
  font-weight: 700;
}
.btrade-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.btrade-move.up {
  color: var(--profit);
}
.btrade-move.down {
  color: var(--loss);
}
.btrade-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.btrade-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.btrade-btn.exit {
  border-color: #e0a800;
  color: var(--tc-e0a800);
}
.btrade-btn.flatten {
  border-color: var(--loss);
  color: var(--loss);
  font-weight: 700;
}
.btrade-btn:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text) 6%, transparent));
}
.btrade-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.btrade-meta b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.btrade-qty {
  color: var(--text-dim);
}
.btrade-reason {
  font-style: italic;
  margin-top: 2px;
}
.btrade-log {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-muted);
  max-height: 180px;
  overflow-y: auto;
}
.btrade-logtime {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Backtest box */
.bbacktest {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.bbacktest-error {
  color: var(--loss);
  font-size: 11px;
  margin-top: 4px;
}
.bbacktest-result {
  margin-top: 6px;
  font-size: 12px;
  border-left: 3px solid var(--border);
  padding-left: 8px;
}
.bbacktest-result.up {
  border-left-color: var(--profit);
}
.bbacktest-result.down {
  border-left-color: var(--loss);
}

.bbacktest-chart {
  margin-top: 8px;
  height: 340px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

/* Backtest result chips */
.bbt-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.bbt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.bbt-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.bbt-chip b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bbt-chip i {
  font-style: normal;
  color: var(--text-dim);
  font-size: 10px;
}
.bbt-chip b.up {
  color: var(--profit);
}
.bbt-chip b.down {
  color: var(--loss);
}
.bbt-chip.dir.long {
  color: var(--profit);
  border-color: rgba(22, 199, 132, 0.35);
  font-weight: 700;
}
.bbt-chip.dir.short {
  color: var(--loss);
  border-color: rgba(234, 57, 67, 0.35);
  font-weight: 700;
}
.bbt-chip.pnl {
  font-weight: 700;
  font-size: 12px;
}
.bbt-chip.pnl.up {
  color: var(--profit);
  border-color: rgba(22, 199, 132, 0.35);
  background: rgba(22, 199, 132, 0.08);
}
.bbt-chip.pnl.down {
  color: var(--loss);
  border-color: rgba(234, 57, 67, 0.35);
  background: rgba(234, 57, 67, 0.08);
}
.bbt-chip.bad {
  color: var(--loss);
  border-color: rgba(234, 57, 67, 0.5);
}
.bbt-reason {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  padding-left: 2px;
}

/* Backtest chart interval bar — buttons come from ChartInterval (the same
   .chart-button footer the PriceChart uses), so no button styling here. */
.bbt-ivbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.bbt-ivloading {
  font-size: 10px;
  color: var(--text-muted);
}

/* Manage profiles */
.bmprofiles {
  margin: 6px 8px 0;
}
.bmprofile {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  margin-top: 6px;
}
.bmprofile-name {
  background: var(--bg-input, #111);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  width: 160px;
}
.bmprofile-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.bmanage-head select {
  background: var(--bg-input, #111);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}
.btrades.strip {
  padding: 8px 8px 0;
}

.bbt-nodata {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  pointer-events: none;
}

/* Trade card: plan line + live adjust */
.btrade-meta b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.btrade-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
}
.btrade-stop,
.btrade-rule {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--text-muted);
}
.btrade-stop {
  border-color: rgba(234, 57, 67, 0.4);
  color: var(--loss);
}
.btrade-stop b {
  color: var(--loss);
  font-variant-numeric: tabular-nums;
}
.btrade-stop i {
  font-style: normal;
  color: var(--text-dim);
}
.btrade-stop i.down {
  color: var(--loss);
  font-weight: 700;
}
.btrade-rule {
  color: var(--accent, #4fc3f7);
  border-color: color-mix(in srgb, var(--accent, #4fc3f7) 35%, transparent);
}
.btrade-adjust {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.btrade-fee {
  color: var(--text-muted);
}
.btrade-fee b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.btrade-fee i {
  font-style: normal;
  color: var(--loss);
  font-size: 10px;
}

.btrade-adjust-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.btrade-adjust-hint {
  flex: 1;
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic;
}

/* ── Diagnostics tab: per-day × per-model call counts ── */
.botting-diag {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Per-model totals over the whole window. */
.bdiag-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}
.bdiag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  background: var(--bg-alt);
}
.bdiag-chip.gemini {
  border-color: color-mix(in srgb, var(--loss) 45%, transparent);
}
.bdiag-chip-model {
  color: var(--text-dim);
}
.bdiag-chip-n {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bdiag-chip.gemini .bdiag-chip-n {
  color: var(--loss);
}
.bdiag-chip-tag {
  color: var(--loss);
  font-weight: 700;
}
.bdiag-chip-mini {
  padding: 0 4px;
  gap: 0;
}

.bdiag-tablewrap {
  overflow: auto;
  padding: 0 8px;
}
.bdiag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.bdiag-table th,
.bdiag-table td {
  padding: 3px 6px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.bdiag-table th {
  position: sticky;
  top: 0;
  background: var(--bg-base);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bdiag-table th.gemini,
.bdiag-table td.gemini {
  color: var(--loss);
}
.bdiag-table td.groq {
  color: var(--text);
}
.bdiag-table td.zero {
  color: var(--text-muted);
  opacity: 0.5;
}
.bdiag-table .bdiag-day {
  text-align: left;
  color: var(--text-dim);
}
.bdiag-table .bdiag-rowtot {
  font-weight: 700;
  color: var(--text);
  border-left: 1px solid var(--border);
}
.bdiag-table tr.is-today {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bdiag-table tr.is-today .bdiag-day {
  color: var(--accent);
  font-weight: 700;
}

.bdiag-note {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-style: italic;
}

/* ── Command builder ── */
.cmdb-toggle {
  margin-left: 8px;
  font-size: 9px;
  padding: 1px 7px;
}
.cmdb-toggle.on {
  border-color: var(--accent);
  color: var(--accent);
}
.cmdb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-base);
}
.cmdb-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmdb-cond-label {
  flex: 0 0 auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.cmdb-cond {
  flex: 0 0 120px;
  background: var(--bg-input);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 4px;
  font-size: 11px;
  padding: 3px 6px;
}
.cmdb-legs {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  padding: 4px 7px;
}
.cmdb-legs:focus {
  outline: none;
  border-color: var(--accent);
}
.cmdb-actions {
  display: flex;
  gap: 8px;
}

/* ── Tester: setup picker + manual EXECUTE TRADE ── */
.botting-test-top {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.botting-test-select {
  flex: 0 1 50%;
  min-width: 0;
}
.botting-exec {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.botting-exec-warn {
  color: var(--loss);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.botting-exec-sym {
  width: 80px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  text-transform: uppercase;
}
.botting-exec-btn {
  background: color-mix(in srgb, var(--loss) 18%, transparent);
  color: var(--loss);
  border: 1px solid color-mix(in srgb, var(--loss) 55%, transparent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.botting-exec-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--loss) 30%, transparent);
}
.botting-exec-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.botting-exec-btn.on {
  background: var(--loss);
  color: #fff;
  border-color: var(--loss);
  box-shadow: 0 0 8px color-mix(in srgb, var(--loss) 60%, transparent);
}
.botting-add.live {
  background: color-mix(in srgb, var(--loss) 22%, transparent);
  color: var(--loss);
  border-color: color-mix(in srgb, var(--loss) 55%, transparent);
  font-weight: 700;
}
.botting-exec-msg {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: monospace;
  padding: 2px 0;
}

.botting-logsearch {
  flex: 0 1 240px;
  min-width: 0;
  margin-right: auto;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
}
.botting-logsearch:focus {
  outline: none;
  border-color: var(--accent);
}

/* Naked autonomous fire — a real order placed with NO stop. Impossible to miss. */
.blog-card.unmanaged {
  border: 2px solid var(--loss);
  background: color-mix(in srgb, var(--loss) 16%, var(--bg-alt));
  box-shadow: 0 0 10px color-mix(in srgb, var(--loss) 55%, transparent);
}
.blog-card.unmanaged .blog-action {
  color: #fff;
  background: var(--loss);
  font-weight: 800;
}
/* Prediction Markets panel (Polymarket) */

.prediction-markets-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-size: 11px;
}

.pm-header {
  position: relative;
  padding: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pm-search-input {
  width: 100%;
  background: var(--bg-input, #1a1a1a);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}

.pm-search-input:focus {
  border-color: var(--accent, #b4b4f9);
}

.pm-search-spinner {
  position: absolute;
  right: 16px;
  top: 10px;
  color: var(--text-muted);
}

.pm-search-results {
  position: absolute;
  top: 100%;
  left: 6px;
  right: 6px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.pm-search-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.pm-search-row:last-child {
  border-bottom: none;
}

.pm-search-row:hover {
  background: var(--bg-hover, #222);
}

.pm-search-text {
  overflow: hidden;
  min-width: 0;
}

.pm-search-event {
  color: var(--text-muted);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-search-question {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-search-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.pm-vol {
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ── YES probability pill ─────────────────────────────────────────────── */

.pm-pill {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(159, 216, 164, 0.12);
  border: 1px solid rgba(159, 216, 164, 0.25);
  color: #9fd8a4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pm-pill-sm {
  min-width: 34px;
  padding: 1px 6px;
  font-size: 10px;
}

/* ── Table ────────────────────────────────────────────────────────────── */

.pm-table-wrap {
  flex: 1;
  overflow-y: auto;
}

.pm-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.7;
}

.pm-empty-icon {
  font-size: 22px;
  margin-bottom: 6px;
  opacity: 0.5;
}

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

.pm-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-deep);
  color: var(--text-muted);
  text-align: right;
  font-weight: 500;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}

.pm-table th.pm-th-market {
  text-align: left;
}

.pm-table th.pm-th-spark {
  text-align: center;
}

.pm-table td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

.pm-table tbody tr {
  transition: background 0.12s;
}

.pm-table tbody tr:hover {
  background: var(--bg-hover, #1d1d1d);
}

.pm-td-market {
  text-align: left !important;
  max-width: 0;
  width: 44%;
  overflow: hidden;
  cursor: pointer;
}

.pm-event-label {
  color: var(--text-muted);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-question {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.pm-td-market:hover .pm-question {
  color: var(--accent, #b4b4f9);
}

.pm-td-delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pm-up {
  color: #26a69a;
}

.pm-down {
  color: #ef5350;
}

.pm-flat {
  color: var(--text-muted);
}

.pm-td-spark {
  text-align: center !important;
}

.pm-spark {
  display: block;
  margin: 0 auto;
}

.pm-spark-empty {
  color: var(--text-muted);
  opacity: 0.4;
  letter-spacing: 2px;
}

.pm-td-quote,
.pm-td-vol,
.pm-td-ends {
  color: var(--text-dim, #9aa);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

.pm-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 1px 4px;
  opacity: 0;
  transition: opacity 0.12s;
}

.pm-table tbody tr:hover .pm-remove-btn {
  opacity: 1;
}

.pm-remove-btn:hover {
  color: #ef5350;
}

/* ── Tabs + add buttons (Trending default view) ───────────────────────── */

.pm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
}

.pm-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition:
    color 0.12s,
    background 0.12s;
}

.pm-tab:hover {
  color: var(--text);
}

.pm-tab.active {
  background: var(--bg-hover, #222);
  border-color: var(--border);
  color: var(--text);
}

.pm-search-wrap {
  position: relative;
}

.pm-add-btn {
  background: rgba(159, 216, 164, 0.12);
  border: 1px solid rgba(159, 216, 164, 0.3);
  border-radius: 4px;
  color: #9fd8a4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 7px;
}

.pm-add-btn:hover {
  background: rgba(159, 216, 164, 0.25);
}

.pm-added-check {
  color: var(--text-muted);
  font-size: 11px;
}

/* ── Category chips + compact width modes ─────────────────────────────── */

.pm-cats {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pm-cats::-webkit-scrollbar {
  display: none;
}

.pm-cat {
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
}

.pm-cat:hover {
  color: var(--text);
}

.pm-cat.active {
  background: rgba(180, 180, 249, 0.12);
  color: var(--accent, #b4b4f9);
}

/* Long outcome labels (player props, O/U lines) can't blow up the row */
.pm-pill {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Shed low-priority columns as the panel narrows */
.pm-narrow .pm-col-narrow,
.pm-tiny .pm-col-narrow,
.pm-tiny .pm-col-tiny {
  display: none;
}

.pm-tiny .pm-pill {
  max-width: 110px;
}

/* ── In-panel event view ──────────────────────────────────────────────── */

.pm-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pm-back-btn {
  background: var(--bg-hover, #222);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  flex-shrink: 0;
}

.pm-back-btn:hover {
  border-color: var(--accent, #b4b4f9);
}

.pm-detail-title-wrap {
  min-width: 0;
  flex: 1;
}

.pm-detail-title {
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-detail-meta {
  display: flex;
  gap: 10px;
  color: var(--text-muted);
  font-size: 10px;
}

.pm-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pm-interval-btns {
  display: flex;
  gap: 2px;
}

.pm-chart-wrap {
  padding: 4px 8px 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pm-chart {
  width: 100%;
  height: 150px;
  display: block;
}

.pm-chart-empty {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.pm-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 4px 0 6px;
  font-size: 10px;
  color: var(--text-dim, #9aa);
}

.pm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.pm-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pm-td-outcome {
  cursor: default !important;
}

.pm-outcome-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

/* ── Chart hover scrub (crosshair + value stack) ──────────────────────── */

.pm-chart-area {
  position: relative;
  cursor: crosshair;
}

.pm-axis-label {
  position: absolute;
  right: 2px;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-muted);
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
  padding: 0 2px;
  border-radius: 2px;
}

.pm-crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--text-dim) 35%, transparent);
  pointer-events: none;
}

.pm-hover-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(10, 10, 10, 0.9);
  pointer-events: none;
}

.pm-hover-tip {
  position: absolute;
  top: 4px;
  margin: 0 8px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 5px;
  pointer-events: none;
  z-index: 5;
  min-width: 110px;
}

.pm-hover-time {
  color: var(--text-muted);
  font-size: 9.5px;
  margin-bottom: 3px;
}

.pm-hover-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  line-height: 1.5;
}

.pm-hover-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

/* ── Sharp skin: match the terminal's contrast + density ──────────────── */

.prediction-markets-panel {
  font-size: 11px;
}

.pm-table td {
  padding: 4px 7px;
}

.pm-table th {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pm-question {
  color: var(--text);
  font-weight: 500;
}

.pm-event-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.pm-table tbody tr:hover {
  background: var(--bg-hover);
}

.pm-table tbody tr:hover .pm-question {
  color: var(--text);
}

/* Pills: tighter, squarer, bolder — color comes inline from probability */
.pm-pill {
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Punchier movement colors (match terminal green/red energy) */
.pm-up {
  color: #16c784;
  font-weight: 700;
}

.pm-down {
  color: #ea3943;
  font-weight: 700;
}

.pm-td-delta {
  font-size: 10.5px;
}

/* Vol 24h reads primary; Total stays secondary */
.pm-td-vol {
  color: var(--text-dim);
}

.pm-td-vol.pm-col-narrow,
.pm-td-quote,
.pm-td-ends {
  color: var(--text-muted);
}

/* Tabs + chips: accent-filled active states like the interval buttons */
.pm-tab.active {
  background: var(--accent, #b4b4f9);
  border-color: var(--accent, #b4b4f9);
  color: #0d0d0f;
}

.pm-cat.active {
  background: rgba(180, 180, 249, 0.18);
  color: var(--accent, #b4b4f9);
  font-weight: 700;
}

.pm-search-input {
  border-radius: 4px;
  background: var(--bg-input);
}

.pm-add-btn {
  border-radius: 3px;
  color: #16c784;
  background: rgba(22, 199, 132, 0.1);
  border-color: rgba(22, 199, 132, 0.35);
}

.pm-add-btn:hover {
  background: rgba(22, 199, 132, 0.25);
}

.pm-detail-title {
  font-size: 12.5px;
  color: var(--text);
}

/* ── Readability pass: undo over-tightening from the sharp skin ───────── */

.pm-table td {
  padding: 5px 8px;
}

.pm-question {
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.4;
}

.pm-event-label {
  font-size: 9.5px;
  color: var(--text-dim);
  letter-spacing: 0.35px;
  margin-bottom: 1px;
}

.pm-table th {
  color: var(--text-dim);
}

.pm-table tbody tr:hover {
  background: var(--bg-hover);
}

/* ── LIVE badge, game-board sections, rules ───────────────────────────── */

.pm-live {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(234, 57, 67, 0.18);
  border: 1px solid rgba(234, 57, 67, 0.5);
  color: #ea3943;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  vertical-align: middle;
}

.pm-section-row td {
  background: var(--bg-deep);
  color: var(--text-dim);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

.pm-rules {
  padding: 6px 10px 12px;
}

.pm-rules-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}

.pm-rules-toggle:hover {
  color: var(--text);
}

.pm-rules-body {
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.55;
  max-width: 720px;
  white-space: pre-wrap;
}

.pm-rules-source a {
  color: var(--accent, #b4b4f9);
  cursor: pointer;
  word-break: break-all;
}

.pm-search-none {
  padding: 10px;
  text-align: center;
  color: var(--text-muted);
}

/* ── No text selection (terminal panel, not a document) ───────────────── */

.prediction-markets-panel {
  user-select: none;
}

.prediction-markets-panel input {
  user-select: text;
}

/* Rules text stays copyable — you WANT to paste resolution terms places */
.pm-rules-body {
  user-select: text;
}

/* Sortable headers */
.pm-th-sort {
  cursor: pointer;
}

.pm-th-sort:hover {
  color: var(--text);
}
.tfa-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-base);
  color: var(--text);
  font-size: 12px;
}

.tfa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 4%, transparent),
    transparent
  );
}

.tfa-header-actions {
  display: flex;
  gap: 4px;
}

.tfa-icon-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.tfa-icon-btn:hover {
  color: var(--text);
  background: var(--bg-alt);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  transform: translateY(-1px);
}

.tfa-icon-btn:active {
  transform: translateY(0);
}

.tfa-icon-btn--active {
  color: var(--text);
  background: var(--bg-alt);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* UI chrome never selects -- a drag across the panel should only grab
   conversation content, not button/tab/label text. */
.tfa-header,
.tfa-tabs,
.tfa-icon-btn,
.tfa-toggle,
.tfa-tab-new,
.tfa-latest,
.tfa-dropdown,
.tfa-empty-hints {
  user-select: none;
}

.tfa-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  animation: tfa-slide-down 0.18s ease both;
}

@keyframes tfa-slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tfa-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tfa-toggle:hover {
  color: var(--text);
}

.tfa-toggle input[type='checkbox'] {
  accent-color: var(--accent);
}

.tfa-custom-prompt {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  padding: 5px 6px;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.tfa-custom-prompt:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* Conversation tabs: one strip, scrolls sideways rather than wrapping so the
   feed never loses height as chats accumulate */
.tfa-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.tfa-tabs::-webkit-scrollbar {
  display: none;
}

.tfa-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  padding: 5px 8px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.tfa-tab:hover {
  color: var(--text);
}

.tfa-tab--active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.tfa-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tfa-tab-x {
  opacity: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
}

.tfa-tab:hover .tfa-tab-x {
  opacity: 0.7;
}

.tfa-tab-x:hover {
  opacity: 1;
  color: var(--negative, #c96a4f);
}

.tfa-tab-input {
  width: 140px;
  padding: 1px 4px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg-base);
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

.tfa-tab-new {
  padding: 0 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.tfa-tab-new:hover {
  color: var(--accent);
}

.tfa-feed {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.tfa-messages {
  flex: 1 1 auto;
  /* offsetTop of the anchor question is measured against this box */
  position: relative;
  overflow-y: auto;
  /* wide tables scroll inside their own frame -- the panel itself never
     scrolls sideways (sideways drift read as jitter) */
  overflow-x: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* NOT scroll-behavior: smooth -- each streamed token writes scrollTop, and
     every write would start a fresh animation the next one interrupts */
}

/* Reserves the room under the newest question that lets it sit at the top
   while its answer streams in; height is set from the panel */
.tfa-spacer {
  flex: 0 0 auto;
  margin-top: -12px;
}

.tfa-latest {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.tfa-latest:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* Thin terminal scrollbar */
.tfa-messages::-webkit-scrollbar,
.tfa-dropdown::-webkit-scrollbar,
.tfa-ctx-lists::-webkit-scrollbar,
.tfa-step-table-wrap::-webkit-scrollbar,
.tfa-step-pre::-webkit-scrollbar,
.tfa-md-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.tfa-messages::-webkit-scrollbar-thumb,
.tfa-dropdown::-webkit-scrollbar-thumb,
.tfa-ctx-lists::-webkit-scrollbar-thumb,
.tfa-step-table-wrap::-webkit-scrollbar-thumb,
.tfa-step-pre::-webkit-scrollbar-thumb,
.tfa-md-table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 3px;
}

.tfa-messages::-webkit-scrollbar-thumb:hover,
.tfa-dropdown::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

/* Empty state: quiet hero, gradient wordmark */
.tfa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 15%;
  font-size: 11px;
  animation: tfa-msg-in 0.35s ease both;
}

.tfa-empty-mark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(
    100deg,
    var(--accent, #4d8dff),
    color-mix(in srgb, var(--accent, #4d8dff) 35%, #b48cff),
    var(--accent, #4d8dff)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tfa-shimmer 6s linear infinite;
}

.tfa-empty-sub {
  max-width: 320px;
  line-height: 1.5;
}

.tfa-empty-hints {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

.tfa-empty-hint {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-alt) 60%, transparent);
}

.tfa-msg {
  max-width: 92%;
  min-width: 0;
  line-height: 1.45;
  /* anchor for the hover actions overlay */
  position: relative;
  animation: tfa-msg-in 0.22s ease both;
}

@keyframes tfa-msg-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tfa-msg--user {
  align-self: flex-end;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-alt)),
    color-mix(in srgb, var(--accent) 7%, var(--bg-alt))
  );
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 10px 10px 3px 10px;
  padding: 6px 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.tfa-msg--assistant {
  align-self: flex-start;
  padding: 0 2px;
  max-width: 100%;
}

.tfa-msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.tfa-msg--assistant .tfa-msg-text {
  white-space: normal;
  line-height: 1.55;
}

.tfa-msg--assistant .tfa-msg-text h4 {
  margin: 12px 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.tfa-msg--assistant .tfa-msg-text ul {
  margin: 4px 0;
  padding-left: 16px;
}

.tfa-msg--assistant .tfa-msg-text li {
  margin: 2px 0;
}

.tfa-msg--assistant .tfa-msg-text li::marker {
  color: color-mix(in srgb, var(--accent) 65%, var(--text-muted));
}

.tfa-msg--assistant .tfa-msg-text ol {
  margin: 4px 0;
  padding-left: 20px;
}

/* Nested lists sit tighter than the top level */
.tfa-msg--assistant .tfa-msg-text li > ul,
.tfa-msg--assistant .tfa-msg-text li > ol {
  margin: 2px 0;
}

.tfa-msg--assistant .tfa-msg-text p {
  margin: 0 0 8px;
}

.tfa-msg--assistant .tfa-msg-text p:last-child {
  margin-bottom: 0;
}

.tfa-msg--assistant .tfa-msg-text code {
  background: var(--bg-alt);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 11px;
}

/* Wire headlines: click toggles into the copy block (news feed summary bullets) */
.tfa-msg--assistant .tfa-msg-text .tfa-hl {
  cursor: pointer;
  padding: 1px 2px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.2s;
}

.tfa-msg--assistant .tfa-msg-text .tfa-hl:hover {
  background: var(--bg-hover);
}

.tfa-msg--assistant .tfa-msg-text .tfa-hl--sel,
.tfa-msg--assistant .tfa-msg-text .tfa-hl--sel:hover {
  background: rgba(69, 181, 255, 0.3);
}

/* A bullet list that was all headlines renders as bare lines, spaced like a list */
.tfa-msg--assistant .tfa-msg-text p.tfa-wire {
  margin: 4px 0;
  line-height: 1.6;
}

.tfa-md-pre {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  font-size: 11px;
  overflow-x: auto;
  white-space: pre;
}

.tfa-md-pre code {
  background: none;
  padding: 0;
}

.tfa-msg--assistant .tfa-msg-text a {
  color: var(--accent);
  text-decoration: none;
}

.tfa-msg--assistant .tfa-msg-text a:hover {
  text-decoration: underline;
}

.tfa-msg--assistant .tfa-msg-text blockquote {
  margin: 8px 0;
  padding: 2px 0 2px 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text-muted);
}

.tfa-msg--assistant .tfa-msg-text hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Model-generated images are the answer, not an attachment -- full width */
.tfa-img-gen {
  display: block;
  max-width: 100%;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.tfa-md-img {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin: 4px 0;
}

.tfa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}

.tfa-chip {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  white-space: nowrap;
}

.tfa-chip--muted {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-muted);
}

.tfa-steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  max-width: 100%;
}

.tfa-steps-summary {
  cursor: pointer;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  list-style: none;
  user-select: none;
}

.tfa-steps-summary::before {
  content: '\25B8';
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  transition: transform 0.15s ease;
}

.tfa-steps[open] > .tfa-steps-summary::before {
  transform: rotate(90deg);
}

.tfa-step-note {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  padding: 2px 0;
}

.tfa-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 5px;
  padding: 3px 8px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  animation: tfa-msg-in 0.18s ease both;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.tfa-step-row:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  border-left-color: var(--accent);
}

/* Running tool call: shimmer sweep across the row */
.tfa-step-row--running {
  background: linear-gradient(
      100deg,
      transparent 30%,
      color-mix(in srgb, var(--accent) 10%, transparent) 50%,
      transparent 70%
    ),
    var(--bg-alt);
  background-size: 250% 100%;
  animation:
    tfa-msg-in 0.18s ease both,
    tfa-shimmer 1.6s linear infinite;
}

.tfa-step-name {
  color: var(--accent);
  flex: 0 0 auto;
}

.tfa-step-args {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.tfa-step-result {
  flex: 0 0 auto;
  white-space: nowrap;
}

.tfa-step-row--error {
  border-left-color: var(--loss);
}

.tfa-step-row--error .tfa-step-result {
  color: var(--loss);
}

.tfa-step-row--running .tfa-step-result {
  animation: tfa-pulse 1.2s ease-in-out infinite;
}

.tfa-step-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-top: 2px;
  animation: tfa-msg-in 0.18s ease both;
}

.tfa-step-table {
  border-collapse: collapse;
  font-family: monospace;
  font-size: 11px;
  width: 100%;
}

.tfa-step-table th {
  position: sticky;
  top: 0;
  background: var(--bg-alt);
  color: var(--text-muted);
  text-align: left;
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
}

.tfa-step-table td {
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tfa-step-sym {
  color: var(--accent);
  font-weight: 600;
}

.tfa-step-pre {
  margin: 2px 0 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-alt);
  font-family: monospace;
  font-size: 11px;
  color: var(--text);
  max-height: 260px;
  overflow: auto;
  white-space: pre;
  animation: tfa-msg-in 0.18s ease both;
}

/* KaTeX inherits the message color; only scale and overflow need taming
   (1.21em default is oversized next to 12px terminal type) */
.tfa-msg--assistant .tfa-msg-text .katex {
  font-size: 1.05em;
}

.tfa-msg--assistant .tfa-msg-text .katex-display {
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: left;
}

.tfa-msg--assistant .tfa-msg-text .katex-display > .katex {
  text-align: left;
}

/* Terminal-style tables: hairline row dividers, no cell grid, tabular
   numerics right-aligned, hover row like the terminal's own lists */
.tfa-md-table-wrap {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.tfa-md-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}

.tfa-md-table th {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.tfa-md-table td {
  padding: 4px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  /* short cells stay on one line; the renderer marks prose-length cells
     tfa-wrap so they fold to the panel width instead of scrolling sideways */
  white-space: nowrap;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s ease;
}

.tfa-md-table tbody tr:last-child td {
  border-bottom: none;
}

.tfa-md-table tbody tr:hover td {
  background: var(--bg-alt);
}

.tfa-md-table td.tfa-num {
  text-align: right;
}

.tfa-md-table td.tfa-wrap {
  white-space: normal;
  min-width: 14em;
}

.tfa-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
}

.tfa-sources a {
  color: var(--text-muted);
  font-size: 10px;
  text-decoration: underline;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.tfa-sources a:hover {
  color: var(--text);
}

/* Streaming status: shimmer text sweep + trailing animated dots */
.tfa-status {
  align-self: flex-start;
  font-size: 11px;
  background: linear-gradient(
    100deg,
    var(--text-muted) 35%,
    var(--text) 50%,
    var(--text-muted) 65%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tfa-shimmer 1.8s linear infinite;
}

@keyframes tfa-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -50% 0;
  }
}

@keyframes tfa-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

.tfa-error {
  color: var(--loss);
  font-size: 11px;
  align-self: flex-start;
  animation: tfa-msg-in 0.2s ease both;
}

.tfa-composer {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  /* anchor for the @/ dropdown + the busy sweep line */
  position: relative;
}

/* Busy: a thin animated accent line sweeps along the composer's top edge */
.tfa-composer--busy::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent, #4d8dff) 35%,
    color-mix(in srgb, var(--accent, #4d8dff) 40%, #b48cff) 50%,
    var(--accent, #4d8dff) 65%,
    transparent
  );
  background-size: 200% 100%;
  animation: tfa-shimmer 1.4s linear infinite;
  pointer-events: none;
}

.tfa-input {
  flex: 1 1 auto;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  resize: none;
  min-height: 34px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tfa-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.tfa-send {
  align-self: flex-end;
  background: linear-gradient(
    135deg,
    var(--accent, #4d8dff),
    color-mix(in srgb, var(--accent, #4d8dff) 70%, #7f5fff)
  );
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 15px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.tfa-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent, #4d8dff) 40%, transparent);
}

.tfa-send:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.tfa-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.tfa-send--stop {
  background: linear-gradient(
    135deg,
    var(--loss, #e05252),
    color-mix(in srgb, var(--loss, #e05252) 75%, #ff8c5f)
  );
  animation: tfa-stop-glow 1.6s ease-in-out infinite;
}

@keyframes tfa-stop-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--loss, #e05252) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--loss, #e05252) 35%, transparent);
  }
}

/* -- A2: ticker chips, composer dropdowns, context menu, message actions -- */

.tfa-sym {
  color: var(--accent, #4d8dff);
  cursor: pointer;
  font-weight: 600;
  transition: color 0.12s ease;
}

.tfa-sym:hover {
  text-decoration: underline;
}

/* Inline ticker chip: logo + ticker pill inside answer prose */
.tfa-sym--chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 4px;
  margin: 0 1px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt));
  font-size: 0.92em;
  line-height: 1.5;
  vertical-align: text-bottom;
  white-space: nowrap;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}

.tfa-sym--chip:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-alt));
}

/* Table ticker column: logo + ticker, no pill chrome inside rows */
.tfa-sym--cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tfa-sym-logo {
  width: 13px;
  height: 13px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Signed values pick up P&L colors (prose spans and table cells) */
.tfa-msg-text .tfa-pos {
  color: var(--profit);
}

.tfa-msg-text .tfa-neg {
  color: var(--loss);
}

/* Overlaid, faded in -- in-flow display toggling shifted layout and made
   the whole panel feel jittery on hover */
.tfa-msg-actions {
  position: absolute;
  top: -7px;
  right: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 2;
}

.tfa-msg:hover .tfa-msg-actions {
  opacity: 1;
  pointer-events: auto;
}

.tfa-msg-action {
  background: var(--bg-base);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 9px;
  padding: 1px 6px;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}

.tfa-msg-action:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.tfa-step-addall {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 9px;
  padding: 2px 6px;
  margin: 3px 0;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}

.tfa-step-addall:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.tfa-dropdown {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 8px;
  margin-bottom: 4px;
  max-height: 260px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
  z-index: 30;
  animation: tfa-drop-in 0.14s ease both;
  transform-origin: bottom center;
}

@keyframes tfa-drop-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tfa-dropdown-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.tfa-dropdown-item--active {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-alt));
}

.tfa-dropdown-cat {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.tfa-dropdown-label {
  font-weight: 600;
  flex: 0 0 auto;
}

.tfa-dropdown-hint {
  color: var(--text-muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tfa-ctx-menu {
  position: fixed;
  user-select: none;
  min-width: 180px;
  max-width: 260px;
  background: color-mix(in srgb, var(--bg-base) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  padding: 4px;
  z-index: 1000;
  animation: tfa-drop-in 0.12s ease both;
}

.tfa-ctx-item {
  display: block;
  width: 100%;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s ease;
}

.tfa-ctx-item:hover {
  background: var(--bg-alt);
}

.tfa-ctx-count {
  color: var(--text-muted);
  font-size: 9px;
}

.tfa-ctx-title {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  padding: 3px 8px;
}

.tfa-ctx-sep {
  border-top: 1px solid var(--border);
  margin: 3px 0;
}

.tfa-ctx-filter {
  width: calc(100% - 8px);
  margin: 2px 4px;
  padding: 3px 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 10px;
  outline: none;
}

.tfa-ctx-lists {
  max-height: 200px;
  overflow-y: auto;
}

.tfa-dropdown-sym {
  color: var(--accent, #4d8dff);
  font-weight: 700;
}

.tfa-dropdown-del {
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 4px;
  flex: 0 0 auto;
  margin-left: auto;
}

.tfa-dropdown-del:hover {
  color: var(--tc-ff5c5c);
}

.tfa-dropdown-header {
  position: sticky;
  top: 0;
  padding: 4px 8px 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
}

/* Pasted image attachments (composer strip + message thumbnails) */
.tfa-img-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tfa-img-thumb {
  max-height: 72px;
  max-width: 140px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: block;
  transition: border-color 0.15s ease;
}

.tfa-img-thumb:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* Attached PDF: filename chip instead of a thumbnail */
.tfa-pdf-chip {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-muted);
  user-select: none;
}

.tfa-img-pending {
  position: relative;
  display: inline-block;
  animation: tfa-msg-in 0.16s ease both;
}

.tfa-img-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-base);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s ease;
}

.tfa-img-remove:hover {
  color: var(--tc-ff5c5c);
}

/* AI-returned chart fences (native SVG): card + draw-in animation */
.tfa-chart {
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--accent, #4d8dff) 5%, transparent),
    color-mix(in srgb, var(--text) 2%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
  max-width: 660px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  animation: tfa-msg-in 0.25s ease both;
}

.tfa-diagram {
  overflow-x: auto;
}

/* Mermaid's sankey multiplies its links into the background, which on a
   dark surface is black; its styles are id-scoped, hence !important */
.tfa-diagram .link {
  mix-blend-mode: normal !important;
}

.tfa-diagram .link path {
  stroke-opacity: 0.35 !important;
}

/* Sankey labels ignore mermaid's fontSize setting, and sit on top of the
   links: a surface-colored halo keeps them readable wherever they land */
.tfa-diagram .node-labels text {
  font-size: 11px !important;
  paint-order: stroke;
  stroke: var(--bg-alt, #15171c);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.tfa-diagram--ready svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.tfa-chart-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.tfa-chart-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin: -2px 0 6px;
}

/* Legend: identity never rides on color alone (2+ series) */
.tfa-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.tfa-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tfa-chart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.tfa-chart-swatch--dashed {
  height: 3px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}

.tfa-chart svg text {
  user-select: none;
}

/* Payoff max gain / max loss / breakeven readout */
.tfa-chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 10px;
  color: var(--text);
  margin: 0 0 4px;
}

.tfa-chart-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Live candle chart (lightweight-charts) inside an answer */
.tfa-chart--candles {
  padding-bottom: 6px;
  max-width: 100%;
}

.tfa-chart-note {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.tfa-candles-wrap {
  position: relative;
  width: 100%;
}

.tfa-candles {
  position: absolute;
  inset: 0;
}

/* Event pins: dot on the bar, dashed stem, solid label along the top */
.tfa-pins {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.tfa-session-shade {
  position: absolute;
  top: 0;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.tfa-pin-label {
  position: absolute;
  height: 18px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 3px;
  font:
    600 11px Inter,
    system-ui,
    sans-serif;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: default;
}

.tfa-pin-stem {
  position: absolute;
  width: 0;
  border-left: 1px dashed;
  opacity: 0.7;
}

.tfa-pin-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-deep, #111);
}

.tfa-chart-tf {
  float: right;
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}

.tfa-chart-tf button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
  user-select: none;
}

.tfa-chart-tf button:hover {
  color: var(--text);
}

.tfa-chart-tf button.active {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-hover);
}

.tfa-chart-resize {
  height: 8px;
  margin: 0 -10px -6px;
  cursor: ns-resize;
  user-select: none;
  position: relative;
}

.tfa-chart-resize::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 3px;
  width: 36px;
  height: 2px;
  margin-left: -18px;
  border-radius: 1px;
  background: var(--border);
}

.tfa-chart-resize:hover::after {
  background: var(--text-muted);
}

.tfa-chart-copy {
  float: right;
  margin-left: 6px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 7px;
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
  user-select: none;
}

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

.tfa-candles-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

.tfa-candles-status--error {
  color: var(--red, #e66767);
}

/* Crosshair + tooltip group driven by chartHover.ts */
.tfa-chart .tfa-hover {
  pointer-events: none;
}

.tfa-chart .tfa-hover rect {
  animation: none;
}

/* A chart fence mid-stream (or with a bad spec) collapses to one line */
.tfa-chart-pending {
  margin: 6px 0;
  font-size: 10px;
  color: var(--text-muted);
}

.tfa-chart-pending summary {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  list-style: none;
}

.tfa-chart-pending summary::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent, #4d8dff);
  border-top-color: transparent;
  animation: tfa-chart-spin 0.9s linear infinite;
  vertical-align: -1px;
}

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

/* Bars grow up from the baseline; lines draw left to right */
.tfa-chart svg rect {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: tfa-bar-grow 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.tfa-chart svg rect:nth-child(odd) {
  animation-delay: 0.06s;
}

@keyframes tfa-bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.tfa-chart svg polyline {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: tfa-line-draw 0.9s ease-out forwards;
}

@keyframes tfa-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Motion off for users who ask the OS for it */
@media (prefers-reduced-motion: reduce) {
  .tfa-panel *,
  .tfa-panel *::before {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* Hold-to-talk voice input status pill */
.tfa-voice {
  position: absolute;
  top: -24px;
  left: 10px;
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-base) 85%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text-muted);
  pointer-events: none;
  animation: tfa-msg-in 0.15s ease both;
}

.tfa-voice--rec {
  color: var(--tc-ff5c5c);
  border-color: color-mix(in srgb, #ff5c5c 45%, var(--border));
  animation:
    tfa-msg-in 0.15s ease both,
    tfa-pulse 1.2s ease-in-out infinite;
}

.tfa-voice--stt {
  color: var(--accent, #4d8dff);
  border-color: color-mix(in srgb, var(--accent, #4d8dff) 45%, var(--border));
}

.tfa-voice--err {
  color: #ffb020;
}

.tfa-voice-device {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 10px;
  padding: 3px 6px;
  max-width: 320px;
}

.tfa-voice-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 360px;
  padding-left: 20px;
}

/* Week-ahead agenda widget (```chart calendar): day sections, impact dots,
   consensus vs prior, reporter chips by session */
.tfa-cal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tfa-cal-filters {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  user-select: none;
}

.tfa-cal-filter {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  cursor: pointer;
}

.tfa-cal-filter--on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.tfa-cal-day {
  margin-top: 6px;
}

.tfa-cal-dayname {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 2px;
  user-select: none;
}

.tfa-cal-row {
  display: grid;
  grid-template-columns: 3.2em 10px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  padding: 2px 0;
  font-size: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}

.tfa-cal-row:last-child {
  border-bottom: none;
}

.tfa-cal-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tfa-cal-session {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tfa-cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  justify-self: center;
}

.tfa-cal-dot--high {
  background: var(--negative, #d03b3b);
  box-shadow: 0 0 5px color-mix(in srgb, var(--negative, #d03b3b) 60%, transparent);
}

.tfa-cal-dot--medium {
  background: #c98500;
}

.tfa-cal-dot--earn {
  background: var(--accent, #4d8dff);
  border-radius: 2px;
}

.tfa-cal-event {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tfa-cal-country {
  display: inline-block;
  margin-right: 5px;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}

.tfa-cal-cons {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.tfa-cal-dim {
  color: var(--text-muted);
}

.tfa-cal-row--earn {
  grid-template-columns: 3.2em 10px minmax(0, 1fr);
  align-items: flex-start;
}

.tfa-cal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  min-width: 0;
}

.tfa-cal-chip {
  font-size: 10px;
  gap: 5px;
}

.tfa-cal-chip .tfa-cal-dim {
  font-weight: 400;
}

.tfa-cal-chip--watch {
  border-color: color-mix(in srgb, #c98500 70%, var(--border));
  background: color-mix(in srgb, #c98500 10%, var(--bg-alt));
}

.tfa-cal-foot {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.tfa-cal-status {
  padding: 8px 0;
  font-size: 11px;
  color: var(--text-muted);
}

.tfa-cal-status--error {
  color: var(--negative, #d03b3b);
}

/* Screener results widget (```chart screen): sortable grid of live rows */
/* a grid of columns needs the panel width, not a chart card's */
.tfa-chart.tfa-screen {
  max-width: 100%;
}

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

.tfa-screen-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  user-select: none;
}

.tfa-screen-wrap {
  max-height: 440px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.tfa-screen-table {
  min-width: 100%;
}

.tfa-screen-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-base);
  cursor: pointer;
  user-select: none;
}

.tfa-screen-table th:hover {
  color: var(--text);
}

.tfa-screen-table td {
  padding: 3px 10px;
  white-space: nowrap;
}

/* Earnings preview widget (```chart earnings) */
.tfa-earn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tfa-earn-sym {
  font-size: 12px;
}

.tfa-earn-name {
  font-size: 11px;
  color: var(--text);
}

.tfa-earn-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.tfa-earn-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tfa-earn-kpi b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tfa-earn-block {
  margin-top: 8px;
}

.tfa-earn-block > .tfa-earn-label {
  margin-bottom: 3px;
}

.tfa-earn-block > .tfa-earn-label .tfa-cal-dim {
  text-transform: none;
  letter-spacing: 0;
}

.tfa-earn-bars {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tfa-earn-bars {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.tfa-earn-barrow {
  display: grid;
  grid-template-columns: 7em 4.6em 150px 4.6em 4.6em 4.6em;
  align-items: center;
  column-gap: 10px;
  padding: 1px 0;
  white-space: nowrap;
}

.tfa-earn-barrow--head span {
  white-space: nowrap;
}

.tfa-earn-date {
  color: var(--text-muted);
  white-space: nowrap;
}

.tfa-earn-barrow--head {
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}

.tfa-earn-barrow .tfa-num {
  text-align: right;
}

.tfa-earn-bar-cell {
  position: relative;
  height: 12px;
}

.tfa-earn-bar-axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--text-muted) 40%, transparent);
}

.tfa-earn-bar {
  position: absolute;
  top: 2px;
  height: 8px;
  border-radius: 2px;
}

.tfa-earn-bar--up {
  background: color-mix(in srgb, var(--positive, #0ca30c) 70%, transparent);
}

.tfa-earn-bar--down {
  background: color-mix(in srgb, var(--negative, #d03b3b) 70%, transparent);
}

.tfa-earn-surprises {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tfa-earn-surprise {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  background: var(--bg-alt);
}

.tfa-earn-surprise b {
  color: var(--text);
}

/* Research job widget (```chart research): stages while it runs, then basket + report */
.tfa-research-title {
  font-weight: 600;
}

.tfa-research-stages {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tfa-research-stage {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  user-select: none;
}

.tfa-research-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  align-self: center;
}

.tfa-research-stage--running .tfa-research-dot {
  background: var(--accent, #4a8cff);
  animation: tfa-research-pulse 1.2s ease-in-out infinite;
}

.tfa-research-stage--done .tfa-research-dot {
  background: var(--positive, #2e9e5b);
}

.tfa-research-stage--failed .tfa-research-dot {
  background: var(--negative, #d03b3b);
}

@keyframes tfa-research-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.tfa-research-stage-name {
  min-width: 170px;
}

.tfa-research-stage-time {
  color: var(--text-muted);
  min-width: 48px;
}

.tfa-research-note {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tfa-research-basket {
  margin: 8px 0;
}

.tfa-research-side {
  margin: 4px 0 6px;
}

.tfa-research-leg {
  display: grid;
  grid-template-columns: 90px 52px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
}

.tfa-research-leg .tfa-num {
  text-align: right;
}

.tfa-research-why {
  color: var(--text-muted);
}

.tfa-research-report {
  margin-top: 4px;
}

.tfa-research-usage {
  margin-top: 6px;
}

/* Copy-as-image button on every chart, diagram and widget block */
.tfa-chart,
.tfa-copy-host {
  position: relative;
}

.tfa-copy-img {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
  user-select: none;
}

.tfa-chart:hover > .tfa-copy-img,
.tfa-copy-host:hover > .tfa-copy-img {
  opacity: 1;
}

.tfa-copy-img:hover {
  color: var(--text);
}

.tfa-capturing .tfa-copy-img {
  display: none;
}

/* Chain widget: stages top to bottom, company tiles wrap to the panel */
.tfa-chain {
  max-width: 720px;
}

.tfa-chain-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tfa-chain-group {
  flex: 1 1 200px;
  max-width: 100%;
  padding: 6px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-alt) 70%, transparent);
}

.tfa-chain-stage > .tfa-chain-group:only-child {
  flex: 0 1 auto;
  min-width: 180px;
}

.tfa-chain-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  text-align: center;
  user-select: none;
}

.tfa-chain-nodes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.tfa-chain-node {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 5px;
  font-size: 11px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-alt);
  white-space: nowrap;
}

.tfa-chain-node[data-sym] {
  cursor: pointer;
}

.tfa-chain-node[data-sym]:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.tfa-chain-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}

.tfa-chain-tick {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tfa-chain--long {
  border-color: var(--positive, #26a69a);
}

.tfa-chain--short {
  border-color: var(--negative, #ef5350);
}

.tfa-chain--watch {
  border-style: dashed;
  color: var(--text-muted);
}

.tfa-chain--risk {
  border-color: var(--negative, #ef5350);
  border-style: dashed;
}

.tfa-chain-event {
  flex: 0 1 auto;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.tfa-chain-text {
  font-size: 11px;
  color: var(--text);
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}

.tfa-chain-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 22px;
  color: var(--text-muted);
  font-size: 10px;
  user-select: none;
}

.tfa-chain-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

.tfa-chain-note {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}
.tape-panel {
  font-size: 11px;
  color: var(--text);
  user-select: none;
}

.tape-header {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 8px;
}

.tape-symbol-input {
  user-select: text;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 5px;
  width: 64px;
}

.tape-active-symbol {
  font-weight: 600;
  font-size: 12px;
}

.tape-paused {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: none;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  cursor: pointer;
}

.tape-icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: grid;
  place-items: center;
}

.tape-icon-button img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.tape-icon-button:hover img {
  opacity: 1;
}

.tape-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 8px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--loss) 40%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--loss) 8%, transparent);
  color: var(--text-dim);
  font-size: 10px;
}

.tape-banner span {
  flex: 1;
  min-width: 0;
}

.tape-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
}

.tape-banner-dismiss:hover {
  color: var(--text);
}

.tape-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 10px;
  padding: 0 16px;
  text-align: center;
}

.tape-columns {
  display: flex;
  padding: 2px 8px;
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.tape-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Thin terminal scrollbar */
.tape-rows::-webkit-scrollbar {
  width: 6px;
}

.tape-rows::-webkit-scrollbar-track {
  background: transparent;
}

.tape-rows::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 3px;
}

.tape-rows::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.tape-row {
  display: flex;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

.tape-cell-time {
  width: 58px;
  flex: none;
  color: var(--text-muted);
}

.tape-cell-price {
  width: 60px;
  flex: none;
}

.tape-cell-size {
  width: 54px;
  flex: none;
  text-align: right;
  padding-right: 10px;
}

/* The last column takes the slack and never pushes the row wider */
.tape-row > :last-child,
.tape-columns > :last-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tape-cell-venue {
  width: 56px;
  flex: none;
  color: var(--text-muted);
}

/* Classic tape colours, by where the print hit the quote: through the
   offer, at the offer, between, at the bid, through the bid */
.tape-at-above {
  --tape-c: color-mix(in srgb, var(--profit) 45%, #00ff66);
}

.tape-at-ask {
  --tape-c: var(--profit);
}

.tape-at-between {
  --tape-c: var(--text);
}

.tape-at-bid {
  --tape-c: var(--loss);
}

.tape-at-below {
  --tape-c: color-mix(in srgb, var(--loss) 40%, #d000ff);
}

.tape-row .tape-cell-price,
.tape-row .tape-cell-size {
  color: var(--tape-c);
}

.tape-at-above .tape-cell-price,
.tape-at-below .tape-cell-price {
  font-weight: 700;
}

.tape-dark .tape-cell-venue {
  color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
}

.tape-sweep .tape-cell-venue {
  color: var(--text);
  font-weight: 700;
}

/* Average-price / derivatively priced reports: real volume, not a quote hit */
.tape-offmarket {
  opacity: 0.45;
  font-style: italic;
}

/* Size tiers, relative to the stock's own prints: a tint for the top 5%,
   a solid band for the top 1% */
.tape-tier-1 {
  background: color-mix(in srgb, var(--tape-c) 14%, transparent);
}

.tape-tier-2 {
  font-weight: 700;
  background: color-mix(in srgb, var(--tape-c) 32%, transparent);
}

.tape-tier-2 .tape-cell-price,
.tape-tier-2 .tape-cell-size {
  color: var(--text);
}

/* Full-row coloring: every print gets a faint tint */
.tape-color-row .tape-tier-0 {
  background: color-mix(in srgb, var(--tape-c) 6%, transparent);
}
/* Scanner panel -- same chrome language as the Positions panel: 28px bar,
   11px dense rows, sticky header, theme tokens only (Light preset safe). */

.scn-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  user-select: none;
  overflow: hidden;
}

.scn-muted {
  color: var(--text-muted);
}
.scn-mono {
  font-family: 'Roboto Mono', monospace;
}
.scn-pos {
  color: var(--profit);
}
.scn-neg {
  color: var(--loss);
}
.scn-spacer {
  flex: 1;
}

/* ---- Top bar ---- */

.scn-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.scn-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  max-width: 45%;
  padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.scn-picker-btn:hover {
  border-color: var(--text-muted);
}
.scn-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scn-caret {
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
}

.scn-bar-btn {
  height: 22px;
  padding: 0 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.scn-bar-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.scn-bar-btn.on {
  color: var(--text);
  border-color: var(--border-light);
}

.scn-status {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}

/* ---- Portal popovers (scan picker, field picker) ---- */

.scn-pick-pop,
.scn-field-pop {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 4px;
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  color: var(--text);
  user-select: none;
}
.scn-pick-group,
.scn-field-group-label {
  padding: 6px 8px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scn-pick-item,
.scn-field-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.scn-pick-item:hover,
.scn-field-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.scn-pick-item.active,
.scn-field-item.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.scn-pick-empty {
  padding: 4px 8px;
  color: var(--text-muted);
}

.scn-field-pop {
  width: 360px;
}

.scn-field-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.scn-field-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: normal;
}

.scn-field-help-title {
  margin-bottom: 3px;
  color: var(--text-dim);
  font-family: var(--app-font), sans-serif;
}

.scn-field-help-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 6px;
  font-family: var(--app-font), sans-serif;
}

.scn-field-help-row .scn-mono {
  color: var(--accent);
}
.scn-field-search {
  margin: 2px 2px 4px;
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  outline: none;
}
.scn-field-search:focus {
  border-color: var(--accent);
}
.scn-field-list {
  overflow-y: auto;
  flex: 1;
}
.scn-field-item.expr {
  color: var(--accent);
}
.scn-field-key {
  font-family: 'Roboto Mono', monospace;
  color: var(--text-muted);
}
.scn-field-help {
  padding: 6px 8px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
}
.scn-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--profit);
  flex-shrink: 0;
}

/* ---- Body ---- */

.scn-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.scn-desc-line {
  padding: 5px 8px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
}

.scn-empty {
  padding: 18px 12px;
  color: var(--text-muted);
  text-align: center;
}
.scn-diag {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  text-align: left;
}
.scn-error {
  margin: 6px 8px;
  padding: 5px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--loss) 14%, transparent);
  color: var(--loss);
}

/* ---- Result clusters ---- */

.scn-seg {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}
.scn-seg button {
  padding: 1px 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.scn-seg button.on {
  background: var(--bg-hover);
  color: var(--text);
}
.scn-clusters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.scn-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 7px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  white-space: nowrap;
}
.scn-cluster:hover {
  border-color: var(--text-muted);
}
.scn-cluster.hot {
  border-color: color-mix(in srgb, var(--profit) 55%, transparent);
  background: color-mix(in srgb, var(--profit) 12%, var(--bg-alt));
  color: var(--text);
}
.scn-cluster.cold {
  border-color: color-mix(in srgb, var(--loss) 55%, transparent);
  background: color-mix(in srgb, var(--loss) 12%, var(--bg-alt));
  color: var(--text);
}
.scn-cluster.focused {
  outline: 1px solid var(--accent);
  outline-offset: 0;
}
.scn-clusters {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.scn-cluster b {
  color: var(--text);
}

/* ---- Results table ---- */

.scn-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.scn-table th,
.scn-table td {
  height: 20px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.08);
  white-space: nowrap;
  text-align: left;
}
.scn-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-base);
  box-shadow: 0 1px 0 var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.scn-table th:hover {
  color: var(--accent);
}
.scn-table td {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.scn-table .num {
  text-align: right;
}
.scn-table td.scn-pos {
  color: var(--profit);
}
.scn-table td.scn-neg {
  color: var(--loss);
}
.scn-table tbody tr {
  cursor: pointer;
}
.scn-table tbody tr:hover {
  background: var(--bg-alt);
}
.scn-table tbody tr.selected {
  background: var(--bg-hover);
}
.scn-table tbody tr.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}
.scn-sym-col {
  width: 1%;
}
.scn-sym {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scn-sym-text {
  color: var(--text);
  font-weight: 700;
  min-width: 40px;
}
.scn-text-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scn-sort {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.scn-sort.desc {
  border-top: 4px solid currentColor;
}
.scn-sort.asc {
  border-bottom: 4px solid currentColor;
}

.scn-tag {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scn-tag.wl {
  background: var(--bg-hover);
  color: var(--text-dim);
  font-weight: 600;
}
.scn-tag.news {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}
.scn-tag.hot {
  background: color-mix(in srgb, var(--profit) 22%, transparent);
  color: var(--profit);
}

/* ---- New highs / lows by watchlist ---- */

.scn-hits {
  padding: 4px 0;
}
.scn-hits-section {
  padding: 5px 8px 7px;
  border-bottom: 1px solid var(--border);
}
.scn-hits-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.scn-hits-name {
  font-weight: 700;
  color: var(--text);
}
.scn-hits-total {
  margin-left: auto;
  color: var(--text-muted);
}
.scn-hits-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.scn-hit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.scn-hit-chip:hover,
.scn-hit-chip.selected {
  border-color: var(--text-muted);
}
.scn-hit-count {
  font-weight: 600;
  font-size: 10px;
}
.scn-hit-chip.strong .scn-hit-count {
  color: var(--profit);
}
.scn-hit-chip.weak .scn-hit-count {
  color: var(--loss);
}

/* ---- Builder ---- */

/* Builder = scrollable form on top, live preview filling the rest */
.scn-body.editing {
  overflow: hidden;
}

.scn-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.scn-builder-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  flex: 0 1 auto;
  max-height: 62%;
  overflow-y: auto;
}

.scn-preview {
  flex: 1 1 0;
  min-height: 120px;
  overflow: auto;
  border-top: 1px solid var(--border-light);
  background: var(--bg-base);
}

.scn-preview-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.scn-preview-head .scn-section-label {
  margin-top: 0;
}

.scn-preview .scn-table th {
  top: 27px;
}

.scn-rule-count {
  min-width: 42px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.scn-rule-count.zero {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 12%, transparent);
}
.scn-section-label {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scn-input,
.scn-select {
  height: 22px;
  padding: 0 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  outline: none;
  box-sizing: border-box;
}
.scn-input:focus,
.scn-select:focus {
  border-color: var(--accent);
}
.scn-input.invalid {
  border-color: var(--loss);
}
.scn-name {
  width: 100%;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
}
.scn-desc {
  height: auto;
  padding: 4px 6px;
  resize: vertical;
  line-height: 1.4;
}
.scn-num {
  width: 70px;
}
.scn-ago {
  width: 44px;
  text-align: center;
}

.scn-rules {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scn-rule {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.scn-rule.disabled > :not(.scn-rule-toggle):not(.scn-icon-btn) {
  opacity: 0.4;
}
.scn-rule-toggle {
  margin: 0 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.scn-field-btn {
  height: 22px;
  min-width: 150px;
  max-width: 240px;
  padding: 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.scn-field-btn.empty {
  color: var(--text-muted);
}
.scn-field-btn:hover {
  border-color: var(--text-muted);
}
.scn-value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.scn-value-wrap .scn-input {
  width: 110px;
}
.scn-unit {
  color: var(--text-muted);
  font-size: 10px;
}
.scn-mini-btn {
  height: 22px;
  padding: 0 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.scn-mini-btn.on,
.scn-mini-btn:hover {
  color: var(--text);
  border-color: var(--border-light);
}
.scn-icon-btn {
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.scn-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--loss);
}
.scn-any {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 6px 6px;
  border: 1px dashed var(--border-light);
  border-radius: 5px;
}
.scn-any.disabled {
  opacity: 0.5;
}
.scn-any-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-weight: 700;
}
.scn-any-head .scn-icon-btn {
  margin-left: auto;
}
.scn-add-row {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
.scn-link-btn {
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.scn-link-btn:hover {
  text-decoration: underline;
}

.scn-builder-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 5px 8px;
}
.scn-builder-grid label {
  color: var(--text-dim);
}
.scn-builder-grid .scn-select {
  justify-self: start;
}
.scn-inline {
  display: flex;
  gap: 4px;
  align-items: center;
}

.scn-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.scn-col-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 2px 0 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.scn-chip-arrow,
.scn-chip-x {
  padding: 0 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.scn-chip-arrow:hover {
  color: var(--text);
}
.scn-chip-x:hover {
  color: var(--loss);
}

.scn-builder-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.scn-btn {
  height: 24px;
  padding: 0 12px;
  background: var(--bg-button);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.scn-btn:hover {
  background: var(--bg-button-hover);
}
.scn-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.scn-btn.primary {
  background: var(--accent);
  color: #fff;
}
.scn-btn.primary:hover:not(:disabled) {
  filter: brightness(1.1);
}
.scn-btn.danger {
  background: none;
  border-color: color-mix(in srgb, var(--loss) 50%, transparent);
  color: var(--loss);
}

/* ---- Quick filters (apply on top of any scan) ---- */

.scn-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}

.scn-quick-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.scn-quick-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scn-quick .scn-seg {
  margin-left: 0;
}

.scn-quick .scn-seg button {
  padding: 2px 8px;
  font-size: 10.5px;
}
/* Market heatmap panel */

.hm-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--app-font), sans-serif;
  font-size: 11px;
  user-select: none;
  overflow: hidden;
}

.hm-muted {
  color: var(--text-muted);
}
.hm-pos {
  color: var(--profit);
}
.hm-neg {
  color: var(--loss);
}

.hm-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 6px;
  flex-wrap: wrap;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.hm-seg {
  display: inline-flex;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}
.hm-seg button {
  height: 20px;
  padding: 0 7px;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.hm-seg button:last-child {
  border-right: none;
}
.hm-seg button:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.hm-seg button.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.hm-seg-dim button {
  font-weight: 500;
}

.hm-universe {
  position: relative;
}
.hm-universe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hm-universe-btn:hover {
  border-color: var(--text-muted);
}
.hm-caret {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--text-muted);
}
.hm-menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.hm-menu-group {
  padding: 5px 8px 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hm-menu-item {
  display: block;
  width: 100%;
  padding: 5px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.hm-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.hm-menu-item.on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.hm-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hm-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
}
.hm-legend {
  gap: 0;
}
.hm-legend-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  font-size: 9px;
  font-weight: 600;
}
.hm-legend-cell:first-child {
  border-radius: 3px 0 0 3px;
}
.hm-legend-cell:last-child {
  border-radius: 0 3px 3px 0;
}

.hm-shot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.hm-shot img {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.hm-shot:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.hm-shot:hover img {
  opacity: 1;
}
.hm-shot.copied {
  color: var(--profit);
  border-color: var(--profit);
}
.hm-shot.failed {
  color: var(--loss);
  border-color: var(--loss);
}

.hm-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.hm-crumbs button {
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.hm-crumbs button:hover {
  text-decoration: underline;
}
.hm-crumb-hint {
  margin-left: auto;
  font-size: 10px;
}

.hm-body {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
}
.hm-canvas {
  position: absolute;
  inset: 0;
  display: block;
}

.hm-outline {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--text) 85%, transparent);
  pointer-events: none;
}
.hm-outline.selected {
  border: 2px solid var(--accent);
}

.hm-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  pointer-events: none;
}

.hm-tip {
  position: absolute;
  z-index: 10;
  width: 230px;
  padding: 7px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hm-tip-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.hm-tip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 11px;
}
.hm-tip-avg {
  margin-left: auto;
  font-weight: 700;
}
.hm-tip-sub {
  margin: 2px 0 6px;
  color: var(--text-muted);
  font-size: 10px;
}
.hm-tip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-bottom: 3px;
}
.hm-tip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
  border-radius: 3px;
  font-size: 10px;
}
.hm-tip-cell span {
  color: var(--text-muted);
  font-size: 9px;
}
.hm-tip-cell.on {
  background: var(--bg-hover);
}
.hm-tip-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 10px;
}
.hm-tip-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hm-tip-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
}

.hm-zoom-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  height: 20px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  white-space: pre;
  cursor: pointer;
}
.hm-zoom-chip:hover {
  border-color: var(--text-muted);
}

.hm-tip-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 5px;
}
.hm-tip-main b {
  font-size: 18px;
}
.hm-tip-main span {
  color: var(--text-muted);
  font-size: 10px;
}
.hm-tip-row5 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text-muted);
  font-size: 10px;
}
.hm-tip-row5 b {
  font-weight: 600;
}
.dom-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-size: 11px;
  color: var(--text);
  user-select: none;
}

.dom-header {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 8px;
  min-width: 0;
}

.dom-symbol-input {
  user-select: text;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 5px;
  width: 64px;
  flex: none;
}

.dom-active-symbol {
  font-weight: 600;
  font-size: 12px;
  flex: none;
}

.dom-chip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: help;
}

.dom-button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.5px;
  flex: none;
}

.dom-button:hover,
.dom-button.active {
  color: var(--text);
  background: var(--bg-hover);
}

.dom-stats {
  display: flex;
  gap: 12px;
  padding: 1px 8px 3px;
  color: var(--text-dim);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dom-columns {
  display: flex;
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  padding: 2px 0;
  flex: none;
}

.dom-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dom-empty {
  display: grid;
  place-items: center;
  flex: 1;
  height: 100%;
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
  padding: 0 16px;
}

/* Ladder: SOLD | BID | PRICE | ASK | BOUGHT */
.dom-row {
  display: flex;
  height: 18px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.dom-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 6px;
}

.dom-price {
  flex: 0 0 64px;
  text-align: center;
  color: var(--text-dim);
}

.dom-sold,
.dom-bought {
  flex: 0.8 1 0;
  font-size: 0.92em;
}

.dom-sold {
  text-align: right;
  color: color-mix(in srgb, var(--loss) 85%, var(--text));
}

.dom-bought {
  color: color-mix(in srgb, var(--profit) 85%, var(--text));
}

.dom-bid {
  text-align: right;
}

/* Book size bars grow from the price column outward */
.dom-book-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
}

.dom-bid .dom-book-bar {
  right: 0;
  background: color-mix(in srgb, var(--profit) 28%, transparent);
}

.dom-ask .dom-book-bar {
  left: 0;
  background: color-mix(in srgb, var(--loss) 28%, transparent);
}

.dom-book-size {
  position: relative;
}

.dom-big .dom-book-size {
  font-weight: 700;
  color: var(--text);
}

/* A large level: its bar goes solid */
.dom-bid.dom-big .dom-book-bar {
  background: color-mix(in srgb, var(--profit) 65%, transparent);
}

.dom-ask.dom-big .dom-book-bar {
  background: color-mix(in srgb, var(--loss) 65%, transparent);
}

/* The inside: tinted across the book cells */
.dom-inside-bid .dom-bid {
  background: color-mix(in srgb, var(--profit) 14%, transparent);
  color: var(--text);
  font-weight: 600;
}

.dom-inside-ask .dom-ask {
  background: color-mix(in srgb, var(--loss) 14%, transparent);
  color: var(--text);
  font-weight: 600;
}

.dom-inside-bid .dom-price,
.dom-inside-ask .dom-price {
  color: var(--text);
}

/* Your working orders: a tag at the book's outer edge */
.dom-order {
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  cursor: default;
}

.dom-order-buy {
  left: 2px;
  background: color-mix(in srgb, var(--accent) 60%, var(--profit));
}

.dom-order-sell {
  right: 2px;
  background: color-mix(in srgb, var(--accent) 60%, var(--loss));
}

/* Your average price */
.dom-avg {
  color: var(--text);
  font-weight: 700;
}

.dom-avg-long {
  box-shadow: inset 3px 0 0 var(--profit);
}

.dom-avg-short {
  box-shadow: inset 3px 0 0 var(--loss);
}

.dom-position {
  font-weight: 700;
}

/* Last print: outlined in its side's colour, flashing on each new print */
.dom-last {
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--text-muted);
}

.dom-last-buy {
  box-shadow: inset 0 0 0 1px var(--profit);
  animation: dom-flash-buy 0.4s ease-out;
}

.dom-last-sell {
  box-shadow: inset 0 0 0 1px var(--loss);
  animation: dom-flash-sell 0.4s ease-out;
}

@keyframes dom-flash-buy {
  from {
    background: color-mix(in srgb, var(--profit) 45%, transparent);
  }
}

@keyframes dom-flash-sell {
  from {
    background: color-mix(in srgb, var(--loss) 45%, transparent);
  }
}

/* A fresh SOLD / BOUGHT count flashes briefly */
.dom-row .dom-sold:not(:empty) {
  animation: dom-tick 0.5s ease-out;
}

.dom-row .dom-bought:not(:empty) {
  animation: dom-tick 0.5s ease-out;
}

@keyframes dom-tick {
  from {
    color: var(--text);
  }
}

/* Display settings menu */
.dom-menu-wrap {
  position: relative;
  flex: none;
}

.dom-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  width: 250px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 11px;
  color: var(--text);
}

.dom-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dom-menu-row input {
  width: 80px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  user-select: text;
}

.dom-menu-seg {
  display: flex;
  gap: 2px;
}

.dom-menu-seg button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  cursor: pointer;
  font-size: 10px;
}

.dom-menu-seg button.active {
  color: var(--text);
  background: var(--bg-hover);
}

.dom-menu-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* Colored link-group selector (replaces the per-panel star). */

.link-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  background: none;
  border: none;
  padding: 0 0.2rem;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-muted);
}

.link-group-btn:hover {
  color: var(--text);
}

.link-group-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Unlinked = hollow ring. */
.link-group-dot.unlinked {
  background: transparent;
  border: 1.5px solid var(--text-muted);
}

.link-group-pop {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 7rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 4px 14px var(--shadow, rgba(0, 0, 0, 0.45));
  padding: 0.2rem;
  overflow: hidden;
}

.link-group-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}

.link-group-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.link-group-item.active {
  background: var(--bg-hover);
  color: var(--text);
}

.link-group-label {
  flex: 1;
}

/* Star (right of each color) — designates the primary group (Ctrl+S target). */
.link-group-star {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.1rem;
  opacity: 0.5;
}

.link-group-item:hover .link-group-star {
  opacity: 1;
}

.link-group-star.active {
  color: #e5b833;
  opacity: 1;
}