/* ════════════════════════════════════════════════════
   IV SURFACE PRO — DARK CRIMSON THEME
   Primary  : #E61B40  (VentureExpress red  — action)
   Identity : #7B5EA7  (VentureExpress purple — brand)
   ════════════════════════════════════════════════════ */

:root {
  --bg: #000;
  --surface: #0c0c0c;
  --surface2: #141414;
  --surface3: #1a1a1a;
  --border: #555555;
  --border2: #777777;
  --text: #e0e0e0;
  --muted: #a6a6a6;
  --dim: #cfcfcf;
  --white:#fff;

  /* primary accent — VE crimson red */
  --orange: #E61B40;
  --orange2: #C4152F;
  --orange-dim: rgba(230, 27, 64, .28);

  /* data-state colors */
  --blue: #3a9eff;
  --blue-dim: rgba(58, 158, 255, .1);
  --green: #2ea043;
  --green-dim: rgba(46, 160, 67, .14);
  --red: #ff3355;
  --red-dim: rgba(255, 51, 85, .1);
  --yellow: #ffd600;
  --yellow-dim: rgba(255, 214, 0, .1);

  /* identity — VE purple */
  --purple: #6C5B9E;
  --purple-dim: rgba(108, 91, 158, .18);
  --sidebar: 292px;
  --font: 'Consolas', 'Courier New', monospace;
  --ui: 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

#root {
  display: flex;
  flex-direction: column;
}

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

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

::-webkit-scrollbar-thumb {
  background: #3f3f3f;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

select, input[type=text], input[type=password], input[type=email] {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 2px;
  padding: 5px 9px;
  font-size: 12px;
  outline: none;
  font-family: var(--font);
  width: 100%;
}

select:focus, input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange2);
}

select option {
  background: #111;
}

.btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .06em;
  font-family: var(--font);
  text-transform: uppercase;
  transition: background .1s;
}

.btn:hover {
  background: var(--orange2);
}

.btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.btn-sm {
  padding: 3px 9px;
  font-size: 10px;
}

.btn-ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border2);
  border-radius: 2px;
  padding: 3px 9px;
  font-size: 10px;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .1s;
}

.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.btn-danger {
  background: var(--red);
  color: #fff;
}

.btn-danger:hover {
  background: #cc0033;
}

.chip {
  background: var(--surface2);
  color: var(--dim);
  border: 1px solid var(--border2);
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  user-select: none;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chip:hover {
  border-color: var(--orange);
  color: var(--orange);
}

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

}

.spinner {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--border2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .5s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* ═══════════════════ LOGIN ═══════════════════ */

.login-wrap {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.login-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 2px;
  padding: 36px 40px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-logo {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  text-align: center;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.login-sub {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.login-field label {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.login-error {
  color: var(--red);
  font-size: 11px;
  text-align: center;
  padding: 5px;
  background: var(--red-dim);
  border: 1px solid rgba(255, 23, 68, .3);
  border-radius: 2px;
}

.login-hint {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  letter-spacing: .03em;
}

.login-hint code {
  color: var(--orange);
  background: var(--surface2);
  padding: 1px 4px;
}

.login-divider {
  height: 1px;
  background: var(--border2);
}

/* ═══════════════════ TOP BAR — BLOOMBERG HEADER ═══════════════════ */

.topbar {
  flex: 0 0 auto;
  height: 38px;
  background: #000;
  border-bottom: 2px solid var(--orange);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

.topbar-brand {
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 10px;
}

.topbar-logo {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  margin-right: 12px;
  white-space: nowrap;
  letter-spacing: .12em;
}

.topbar-spacer {
  flex: 1;
}

.topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border2);
  margin: 0 8px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
}

.user-chip:hover .user-name {
  color: var(--orange);
}

.user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: var(--purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  flex: 0 0 auto;
}

.user-avatar.admin {
  background: #A38FCF;
  color: #221635;
}

.user-name {
  color: var(--dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10px;
}

.role-badge {
  font-size: 9px;
  padding: 0 5px;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.role-badge.admin {
  background: var(--purple-dim);
  color: var(--purple);
}

.role-badge.user {
  background: var(--green-dim);
  color: var(--green);
}

/* ═══════════════════ QUOTE STRIP ═══════════════════ */

.qbar {
  flex: 0 0 auto;
  height: 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.qsep {
  width: 1px;
  height: 30px;
  background: var(--border2);
  flex-shrink: 0;
}

.qi {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px;
}

.qi-lbl {
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--ui);
}

.qi-val {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
}

.qbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
}

/* ═══════════════════ WORKSPACE ═══════════════════ */

.workspace {
  flex: 1 1 0;
  display: flex;
  overflow: hidden;
}

/* ═══════════════════ SIDEBAR ═══════════════════ */

.sidebar {
  flex: 0 0 var(--sidebar);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  
  overflow: hidden;
}

.sb-resize-handle {
  flex: 0 0 2px;
  width: 2px;
  cursor: col-resize;
  background: #A855F7;
  transition: background .15s;
  position: relative;
}

.sb-resize-handle:hover {
  background: #C07AFF;
}

body.sb-dragging {
  cursor: col-resize !important;
}

body.sb-dragging * {
  user-select: none !important;
}

body.sb-dragging .sidebar {
  transition: none !important;
}

.sb-scroll {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.section-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange);
  padding: 3px 0 4px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* expiry list */

.exp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
}

.exp-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  cursor: pointer;
  user-select: none;
  transition: background .08s;
  border-bottom: 1px solid var(--border);
}

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

.exp-row:hover {
  background: rgba(255, 140, 0, .06);
}

.exp-row.selected {
  background: rgba(255, 140, 0, .06);
}

.exp-row.valid {
  background: rgba(46, 160, 67, .05);
}

.exp-row.invalid {
  background: var(--red-dim);
  opacity: .65;
}

.exp-row input {
  accent-color: var(--orange);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.exp-date {
  flex: 1;
  font-size: 11px;
  letter-spacing: .02em;
}

.dte-pill {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 0;
  flex-shrink: 0;
  border: 1px solid var(--border2);
  color: var(--dim);
}

.dte-pill.near {
  border-color: var(--red);
  color: var(--red);
}

.wk-pill {
  font-size: 11px;
  padding: 0 4px;
  border-radius: 0;
  flex-shrink: 0;
  border: 1px solid var(--border2);
  border: 0px solid var(--border2);
  color: var(--white);
   background-color: var(--border2);
  opacity: .8;
}

.wk-pill.near {
  border-color: var(--red);
  background-color: var(--red);
  opacity: 1;
}

.vbadge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 0;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: .04em;
}

.vbadge.checking {
  background: var(--orange-dim);
  color: var(--orange);
  background: var(--orange);
  color: var(--white);

}

.vbadge.valid {
  background: var(--green-dim);
  color: var(--green);
   background: var(--green);
  color: var(--white);
}

.vbadge.invalid {
  background: var(--red-dim);
  color: var(--red);
   background: var(--red);
  color: var(--white);
}

/* Build history */

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
}

.hbuild {
  background: var(--surface);
  padding: 5px 7px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .08s;
}

.hbuild:last-child {
  border-bottom: none;
}

.hbuild:hover {
  background: rgba(255, 140, 0, .05);
}

.hbuild.matched {
  background: rgba(255, 140, 0, .16);
  border-left: 2px solid var(--orange);
  padding-left: 5px;
}

.hbuild.matched:hover {
  background: rgba(255, 140, 0, .22);
}

.hbuild-match {
  font-size: 8px;
  color: var(--orange);
  font-weight: 800;
  letter-spacing: .08em;
}

.hbuild-use {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--ui);
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.hbuild-use:hover { background: var(--surface2); color: var(--text); }
.hbuild-use.matched {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 140, 0, .10);
}
.hbuild-use.matched:hover { background: rgba(255, 140, 0, .22); color: #fff; }

.hbuild-chk {
  accent-color: var(--orange);
  cursor: pointer;
  margin: 0 3px 0 0;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.hbuild.combine-on {
  background: rgba(255, 140, 0, .1);
  box-shadow: inset 2px 0 0 var(--orange);
}

.hbuild.combine-on:hover {
  background: rgba(255, 140, 0, .16);
}

.hbuild-hdr {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.hbuild-id {
  font-size: 9px;
  color: var(--orange);
  font-weight: 700;
}

.hbuild-when {
  font-size: 9px;
  color: var(--muted);
  flex: 1;
}

.hbuild-by {
  font-size: 9px;
  color: var(--yellow);
}

.hbuild-ct {
  font-size: 9px;
  padding: 0 5px;
  border: 1px solid rgba(46, 160, 67, .3);
  color: var(--green);
  font-weight: 700;
}

.hbuild-exps {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}

.hexp {
  font-size: 9px;
  padding: 0 4px;
  border: 1px solid var(--border2);
  color: var(--dim);
}

.hexp.zero {
  border-color: rgba(255, 23, 68, .3);
  color: var(--red);
}

/* build label (auto) + user annotation — history rows */
.hbuild-label {
  margin-top: 3px;
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  letter-spacing: .01em;
  color: var(--text);
  word-break: break-all;
}
.hbuild-ann {
  margin-top: 2px;
  font-size: 10px;
  color: var(--yellow);
  cursor: pointer;
  line-height: 1.4;
}
.hbuild-ann.empty { color: var(--muted); font-style: italic; opacity: .7; }
.hbuild-ann:hover { text-decoration: underline; }
.hbuild-ann-edit { display: flex; gap: 3px; margin-top: 2px; align-items: center; }
.hbuild-ann-ok, .hbuild-ann-x {
  flex-shrink: 0; font-size: 10px; line-height: 1; padding: 2px 5px;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text); cursor: pointer;
}
.hbuild-ann-ok { border-color: var(--green); color: var(--green); }
.hbuild-ann-x  { border-color: var(--red);   color: var(--red);   }

/* build label + annotation input — Valid Expiries bucket (build time) */
.build-label { margin-top: 6px; }
.build-label-auto {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  color: var(--text);
  word-break: break-all;
  padding: 3px 5px;
  border: 1px solid var(--border2);
  background: var(--surface);
}
.build-note-inp {
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 10px;
  padding: 4px 6px;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text);
}
.build-note-inp:focus { outline: none; border-color: var(--yellow); }
.build-note-inp::placeholder { color: var(--muted); }

/* opts */

.opts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opt label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.opt select {
  font-size: 10px;
  padding: 3px 6px;
}

.slider-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slider-row label {
  font-size: 9px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.slider-row label span {
  color: var(--orange);
}

.slider-row input[type=range] {
  width: 100%;
  accent-color: var(--orange);
}

/* stats */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-lbl {
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stat-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* valid bucket */

.valid-bucket {
  padding: 6px 8px 5px;
  border-top: 1px solid var(--border2);
}

.bucket-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.bucket-empty {
  font-size: 10px;
  color: var(--muted);
  padding: 2px 0;
  letter-spacing: .04em;
}

.bucket-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 110px;
  overflow-y: auto;
  border: 1px solid var(--border);
}

.brow {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  background: rgba(46, 160, 67, .04);
}

.brow:last-child {
  border-bottom: none;
}

.brow-date {
  flex: 1;
}

.brow-dte {
  font-size: 9px;
  padding: 0 4px;
  color: var(--dim);
  border: 1px solid var(--border2);
}

.brow-ct {
  font-size: 10px;
  padding: 0 5px;
  font-weight: 700;
  color: var(--green);
  border: 0px solid rgba(46, 160, 67, .25);
  background: var(--green);
  color: var(--white);
}

.sb-progress {
  height: 2px;
  background: var(--border);
}

.sb-progress-fill {
  height: 100%;
  background: var(--orange);
  transition: width .3s;
}

/* ═══════════════════ MAIN PANEL ═══════════════════ */

.main {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: flex-basis 220ms ease, width 220ms ease;
}

.main.main-closed {
  flex: 0 0 28px !important;
  width: 28px !important;
}

.main-inner {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* collapsed right strip */

.main-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 6px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main-strip-toggle {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 0;
  font-family: var(--font);
}

.main-strip-toggle:hover {
  color: var(--text);
}

.main-v-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--orange);
  text-transform: uppercase;
  margin-top: 10px;
  user-select: none;
}

/* collapse button in tabbar */

.main-collapse-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 8px;
  font-family: var(--font);
  flex-shrink: 0;
  transition: color .15s;
}

.main-collapse-btn:hover {
  color: var(--text);
}

body.sb-dragging .main {
  transition: none !important;
}

.tabbar {
  flex: 0 0 auto;
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

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

.tab {
  padding: 8px 18px;
  font-size: 10px;
  background: none;
  border: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  letter-spacing: .1em;
  border-radius: 0;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  text-transform: uppercase;
  transition: color .1s;
}

.tab.active {
  background: #E61B40;
  color: #fff;
  border-bottom-color: #E61B40;
}

.tab:hover:not(.active) {
  color: var(--text);
}

.pane {
  display: none;
  flex: 1 1 0;
  flex-direction: column;
  overflow: hidden;
}

.pane.active {
  display: flex;
}

.plot-area {
  flex: 1 1 0;
}

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
}

.empty svg {
  opacity: .15;
}

.empty-title {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.empty p {
  font-size: 11px;
  max-width: 300px;
  text-align: center;
  line-height: 1.7;
  color: var(--muted);
}

.empty kbd {
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 1px 5px;
  font-size: 10px;
  color: var(--orange);
}

/* chain */

.chain-scroll {
  flex: 1 1 0;
  overflow-y: auto;
}

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

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  padding: 5px 8px;
  text-align: right;
  color: var(--orange);
  font-weight: 700;
  border-bottom: 1px solid var(--border2);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

thead th:first-child {
  text-align: left;
}

tbody td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
}

tbody td:first-child {
  text-align: left;
}

tbody tr:hover td {
  background: rgba(255, 140, 0, .04);
}

.td-call {
  color: var(--green);
}

.td-put {
  color: var(--red);
}

.row-atm {
  background: rgba(255, 140, 0, .06)!important;
}

/* ═══════════════════ WORKFLOW FOOTER ═══════════════════ */

.wf-footer {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
}

.wf-status {
  font-size: 10px;
  color: var(--dim);
  padding: 3px 16px 3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .04em;
  font-family: var(--font);
}

.wf-steps {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 48px;
  gap: 0;
}

.wf-line {
  flex: 1;
  height: 1px;
  background: var(--border2);
  margin: 0 2px;
}

.wf-line.done {
  background: var(--green);
}

.wf-line.active-line {
  background: var(--orange);
}

.wf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  padding: 3px 5px;
  border-radius: 0;
  transition: background .1s;
  flex-shrink: 0;
  min-width: 80px;
}

.wf-step:hover:not([disabled]) {
  background: rgba(255, 140, 0, .06);
}

.wf-step[disabled] {
  cursor: default;
  opacity: .3;
}

.wf-step-circle {
  width: 22px;
  height: 22px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--muted);
  transition: all .15s;
}

.wf-step.done .wf-step-circle {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

.wf-step.current .wf-step-circle {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.wf-step.busy .wf-step-circle {
  background: var(--orange-dim);
  border-color: var(--orange);
  color: var(--orange);
}

.wf-step.saved .wf-step-circle {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #000;
}

.wf-step-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}

.wf-step.done .wf-step-label {
  color: var(--green);
}

.wf-step.current .wf-step-label {
  color: var(--orange);
}

.wf-step.busy .wf-step-label {
  color: var(--orange);
}

.wf-step.saved .wf-step-label {
  color: var(--yellow);
}

/* ═══════════════════ ADMIN PANEL ═══════════════════ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 20px;
  overflow-y: auto;
}

.admin-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 0;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--orange);
}

.admin-hdr {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
}

.admin-hdr h2 {
  font-size: 11px;
  font-weight: 700;
  flex: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange);
}

.admin-tabs {
  display: flex;
  border-bottom: 1px solid var(--border2);
  padding: 0 20px;
  background: var(--surface);
}

.admin-tab {
  padding: 8px 16px;
  font-size: 10px;
  background: none;
  border: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  transition: color .1s;
}

.admin-tab.active {
  color: var(--white);
  border-bottom-color: var(--orange);
}

.admin-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: 65vh;
}

/* ── v0.3 · Admin as an inline main-panel view (not a modal) ── */
.admin-view {
  background: var(--surface);
}
.admin-view .admin-tabs {
  flex: 0 0 auto;
}
.admin-view .admin-body {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}
.admin-build-note {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}
.admin-build-frame {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: #0d1117;
}
.tab.tab-admin {
  color: var(--orange);
}
.tab.tab-admin.active {
  color: var(--white);
  border-bottom-color: var(--orange);
}

.admin-section {
  margin-bottom: 20px;
}

.admin-section h3 {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border2);
}

.create-user-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 7px;
  align-items: end;
}

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

.form-field label {
  font-size: 9px;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

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

.atable th {
  text-align: left;
  padding: 5px 9px;
  color: var(--orange);
  font-weight: 700;
  border-bottom: 1px solid var(--border2);
  font-size: 9px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.atable td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.atable tr:hover td {
  background: rgba(255, 140, 0, .03);
}

.tag {
  display: inline-block;
  font-size: 9px;
  padding: 0 5px;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tag-admin {
  background: var(--purple-dim);
  color: var(--purple);
}

.tag-user {
  background: var(--green-dim);
  color: var(--green);
}

.tag-login {
  background: var(--blue-dim);
  color: var(--blue);
}

.tag-build {
  background: var(--green-dim);
  color: var(--green);
}

.tag-save {
  background: var(--yellow-dim);
  color: var(--yellow);
}

.tag-logout {
  background: var(--red-dim);
  color: var(--red);
}

.act-ticker {
  font-size: 10px;
  padding: 0 5px;
  border: 1px solid var(--border2);
  color: var(--orange);
}

/* ═══════════════════ INSIGHTS TAB ═══════════════════ */

.insights-scroll {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ins-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ins-panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-top: 2px solid var(--orange);
  display: flex;
  flex-direction: column;
}

.ins-panel.green {
  border-top-color: var(--green);
}

.ins-panel.blue {
  border-top-color: var(--blue);
}

.ins-panel.yellow {
  border-top-color: var(--yellow);
}

.ins-hdr {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border2);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ins-hdr-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange);
}

.ins-panel.green .ins-hdr-title {
  color: var(--green);
}

.ins-panel.blue .ins-hdr-title {
  color: var(--blue);
}

.ins-panel.yellow .ins-hdr-title {
  color: var(--yellow);
}

.ins-body {
  padding: 10px;
  flex: 1;
}

/* metric rows */

.met-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

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

.met-label {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .04em;
}

.met-val {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  font-family: var(--font);
}

.met-note {
  font-size: 9px;
  color: var(--muted);
  margin-top: 1px;
  text-align: right;
}

/* signal cards */

.sig-card {
  padding: 7px 9px;
  margin-bottom: 6px;
  border-left: 2px solid var(--border2);
}

.sig-card:last-child {
  margin-bottom: 0;
}

.sig-card.bullish {
  border-left-color: var(--green);
  background: var(--green-dim);
}

.sig-card.bearish {
  border-left-color: var(--red);
  background: var(--red-dim);
}

.sig-card.neutral {
  border-left-color: var(--yellow);
  background: var(--yellow-dim);
}

.sig-card.info {
  border-left-color: var(--blue);
  background: var(--blue-dim);
}

.sig-strat {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.sig-desc {
  font-size: 10px;
  color: var(--dim);
  line-height: 1.5;
}

.sig-badge {
  font-size: 8px;
  padding: 1px 5px;
  font-weight: 700;
  float: right;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sig-badge.bullish {
  background: var(--green-dim);
  color: var(--green);
}

.sig-badge.bearish {
  background: var(--red-dim);
  color: var(--red);
}

.sig-badge.neutral {
  background: var(--yellow-dim);
  color: var(--yellow);
}

/* contract table in insights */

.ctr-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.ctr-count {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ins-table-wrap {
  overflow: auto;
  max-height: 240px;
  border: 1px solid var(--border);
}

.ins-table-wrap table {
  min-width: 600px;
}

/* primer cards */

.primer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.primer-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 8px 10px;
}

.primer-term {
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}

.primer-def {
  font-size: 10px;
  color: var(--dim);
  line-height: 1.6;
}

.primer-tip {
  font-size: 9px;
  color: var(--orange);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* term structure bar */

.ts-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.ts-label {
  font-size: 9px;
  color: var(--muted);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.ts-bar-wrap {
  flex: 1;
  background: var(--border);
  height: 10px;
  position: relative;
}

.ts-bar {
  height: 100%;
  background: var(--orange);
  transition: width .4s;
}

.ts-iv {
  font-size: 10px;
  color: var(--text);
  width: 44px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 700;
}

/* skew vis */

.skew-row {
  display: flex;
  align-items: center;
  gap: 0;
  height: 24px;
  margin-bottom: 5px;
}

.skew-label {
  font-size: 9px;
  color: var(--muted);
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 6px;
}

.skew-bar {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  color: #000;
  min-width: 6px;
}

/* toast */

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}

.save-toast {
  position: fixed;
  bottom: 70px;
  right: 18px;
  z-index: 9999;
  background: var(--green);
  color: #000;
  border-left: 3px solid #1f7a3a;
  padding: 8px 16px;
  border-radius: 0;
  font-weight: 700;
  font-size: 11px;
  animation: fadeout 3.2s ease forwards;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ═══════════════════ RESEARCH TAB ═══════════════════ */

.research-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rs-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.rs-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.rs-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow);
}

.rs-meta {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rs-empty {
  padding: 24px 14px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.rs-build-list {
  display: flex;
  flex-direction: column;
}

.rs-build-row {
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-build-row:last-child {
  border-bottom: none;
}

.rs-build-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
}

.rs-build-id {
  font-weight: 700;
  color: var(--muted);
  min-width: 30px;
}

.rs-build-time {
  color: var(--text);
  font-size: 10px;
  letter-spacing: .04em;
}

.rs-build-by {
  color: var(--muted);
  font-size: 10px;
}

.rs-stat {
  font-size: 11px;
}

.rs-compare-btns {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.rs-cmp-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 1px 7px;
  border-radius: 2px;
  font-family: var(--font);
  letter-spacing: .04em;
  transition: all .1s;
}

.rs-cmp-btn.sel-a {
  background: rgba(200, 160, 0, .18);
  border-color: var(--yellow);
  color: var(--yellow);
}

.rs-cmp-btn.sel-b {
  background: rgba(29, 110, 245, .18);
  border-color: var(--blue);
  color: var(--blue);
}

.rs-note-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-note-input {
  flex: 1;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 0;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font);
}

.rs-note-input:focus {
  border-color: var(--yellow);
  outline: none;
}

.rs-note-save {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 10px;
  font-family: var(--font);
  cursor: pointer;
  padding: 4px 10px;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: all .1s;
}

.rs-note-save:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.rs-note-save:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.rs-note-status {
  font-size: 10px;
  color: var(--green);
  white-space: nowrap;
}

.rs-sel-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}

.rs-sel-badge.sel-a {
  background: rgba(200, 160, 0, .15);
  color: var(--yellow);
  border: 1px solid rgba(200, 160, 0, .3);
}

.rs-sel-badge.sel-b {
  background: rgba(29, 110, 245, .15);
  color: var(--blue);
  border: 1px solid rgba(29, 110, 245, .3);
}

/* ═══════════════════ WORKFLOW TRACKER ═══════════════════ */

.wt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 800;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 52px 12px 12px;
}

.wt-panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  width: min(96vw, 720px);
  max-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wt-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
}

.wt-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple);
}

.wt-auto-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.wt-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.wt-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 12px 14px;
}

.wt-card-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.wt-metric-lg {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.wt-metric-lg>span:first-child {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-family: var(--font);
  line-height: 1;
}

.wt-metric-lbl {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wt-bar-track {
  height: 5px;
  background: var(--border);
  margin-bottom: 10px;
  border-radius: 1px;
}

.wt-bar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width .4s;
}

.wt-bar-fill.green {
  background: var(--green);
}

.wt-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 3px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.wt-stat-row>span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.wt-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 10px;
  font-family: var(--font);
  cursor: pointer;
  padding: 3px 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .1s;
}

.wt-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.wt-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.wt-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}

.wt-close:hover {
  color: var(--text);
}

.wt-error {
  padding: 8px 14px;
  color: var(--red);
  font-size: 11px;
  background: rgba(255, 51, 85, .08);
}

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

/* surface2 fallback if not defined */

:root {
  --surface-2: var(--surface2, #141414);
}

/* ═══════════════════ RESEARCH TOOL ═══════════════════ */

.rt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 900;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 52px 0 0;
}

.rt-panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-bottom: none;
  width: min(100vw, 1320px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rt-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
}

.rt-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}

.rt-opts {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rt-opt-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rt-select {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 10px;
  padding: 2px 5px;
  font-family: var(--font);
  width: auto;
}

.rt-hint {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  font-style: italic;
}

.rt-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.rt-slot-input {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rt-slot-num {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  width: 12px;
  text-align: center;
}

.rt-ticker-in {
  width: 72px;
  padding: 3px 6px;
  font-size: 11px;
  text-transform: uppercase;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font);
}

.rt-ticker-in:focus {
  border-color: var(--blue);
  outline: none;
}

.rt-err {
  font-size: 10px;
  color: var(--red);
  white-space: nowrap;
}

.rt-surface-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  gap: 1px;
  background: var(--border);
}

.rt-surface-cell {
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.rt-surface-lbl {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
}

.rt-surface-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 11px;
}

/* ═══════════════════ HISTORY RESEARCH TAB ═══════════════════ */

.hrt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.hrt-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  flex-shrink: 0;
}

.hrt-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hrt-filter-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hrt-dur-btn {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 10px;
  font-family: var(--font);
  cursor: pointer;
  padding: 2px 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .1s;
}

.hrt-dur-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.hrt-dur-btn.active {
  background: var(--orange-dim);
  border-color: var(--orange);
  color: var(--orange);
}

.hrt-status {
  font-size: 10px;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* column header bar */

.hrt-head-row {
  display: grid;
  grid-template-columns: 28px 54px 130px 72px 72px 90px 80px 50px 1fr 150px;
  align-items: center;
  gap: 0;
  padding: 4px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

/* scrollable list */

.hrt-scroll {
  flex: 1;
  overflow-y: auto;
}

.hrt-row {
  display: grid;
  grid-template-columns: 28px 54px 130px 72px 72px 90px 80px 50px 1fr 150px;
  align-items: center;
  gap: 0;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .08s;
  user-select: none;
}

.hrt-row:hover {
  background: var(--surface2);
}

.hrt-row.selected {
  background: rgba(230, 27, 64, .07);
}

.hrt-build-id {
  font-weight: 700;
  color: var(--muted);
}

.hrt-date {
  font-size: 11px;
  color: var(--text);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.hrt-by {
  font-size: 10px;
  color: var(--muted);
}

.hrt-db-tag {
  font-size: 9px;
  color: var(--blue);
  font-family: var(--font);
  background: var(--blue-dim);
  padding: 1px 5px;
  border-radius: 1px;
  display: inline-block;
  margin-right: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrt-note-tag {
  font-size: 9px;
  color: var(--muted);
  font-style: italic;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.hrt-csv-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 9px;
  font-family: var(--font);
  cursor: pointer;
  padding: 2px 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all .1s;
}

.hrt-csv-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.hrt-csv-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.hrt-view-btn {
  background: var(--purple-dim);
  border: 1px solid var(--purple);
  color: #b9a6e0;
  font-size: 9px;
  font-family: var(--font);
  cursor: pointer;
  padding: 2px 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .1s;
}

.hrt-view-btn:hover {
  background: var(--purple);
  color: #fff;
}

.hrt-view-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* expiry footer (shown when 1 build is selected) */

.hrt-expiry-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  min-height: 38px;
}

.hrt-exp-tag {
  font-size: 10px;
  padding: 2px 7px;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--dim);
}

/* column-specific widths applied inside grid */

.hrt-col-cb {
  width: 28px;
}

.hrt-col-id {
  width: 54px;
}

.hrt-col-date {
  width: 130px;
}

.hrt-col-by {
  width: 72px;
}

.hrt-col-spot {
  width: 72px;
  text-align: right;
  padding-right: 12px;
}

.hrt-col-cts {
  width: 90px;
}

.hrt-col-iv {
  width: 80px;
}

.hrt-col-pc {
  width: 50px;
  text-align: right;
}

.hrt-col-db {
  overflow: hidden;
}

.hrt-col-act {
  width: 150px;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

/* ═══════════════════ RESEARCH 1 TAB (CSV-based workflow) ═══════════════════ */

.research-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* workflow steps */

.res-wf {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  gap: 0;
}

.res-wf-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  opacity: .4;
  transition: opacity .15s;
}

.res-wf-step.done, .res-wf-step.cur {
  opacity: 1;
}

.res-wf-num {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.res-wf-step.done .res-wf-num {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

.res-wf-step.cur .res-wf-num {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.res-wf-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}

.res-wf-step.done .res-wf-label {
  color: var(--green);
}

.res-wf-step.cur .res-wf-label {
  color: var(--orange);
}

.res-wf-line {
  flex: 1;
  height: 1px;
  background: var(--border2);
  min-width: 12px;
}

.res-wf-line.done {
  background: var(--green);
}

/* controls bar */

.res-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
}

.res-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.res-ctrl-wide {
  flex: 1;
  min-width: 220px;
}

.res-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.res-select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  padding: 5px 8px;
  font-size: 11px;
  font-family: var(--font);
  width: 100%;
  outline: none;
  border-radius: 2px;
}

.res-select:focus {
  border-color: var(--orange);
}

.res-input {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  padding: 5px 8px;
  font-size: 11px;
  font-family: var(--font);
  width: 160px;
  outline: none;
  border-radius: 2px;
}

.res-input:focus {
  border-color: var(--orange);
}

.res-tk-select {
  min-width: 140px;
}

.res-tk-count {
  color: var(--muted);
  font-weight: 400;
  font-size: 9px;
}

.res-load-btn {
  align-self: flex-end;
  white-space: nowrap;
}

.res-build-btn {
  align-self: flex-end;
  white-space: nowrap;
  background: var(--purple);
  color: #fff;
}

.res-build-btn:hover:not(:disabled) {
  background: #6a4f94;
}

.res-build-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.res-save-btn {
  align-self: flex-end;
  white-space: nowrap;
  background: var(--green);
  color: #000;
  font-weight: 900;
}

.res-save-btn:hover:not(:disabled) {
  background: #00c060;
}

.res-save-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.res-view-btn {
  align-self: flex-end;
  white-space: nowrap;
}

.res-status-ok {
  color: var(--green)!important;
}

/* build result card */

.res-build-card {
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  border-top: 2px solid var(--purple);
  padding: 8px 14px;
}

.res-bc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.res-bc-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.res-bc-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.res-bc-tk {
  color: var(--orange);
}

.res-bc-ct {
  color: var(--green);
}

.res-bc-src {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.res-err {
  font-size: 11px;
  color: var(--red);
  padding: 4px 0;
}

.res-status {
  padding: 5px 14px;
  font-size: 10px;
  color: var(--dim);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* metadata / column chips */

.res-meta {
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.res-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.res-meta-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-right: 4px;
  flex-shrink: 0;
}

.res-col-chip {
  font-size: 9px;
  padding: 1px 6px;
  border: 1px solid var(--border2);
  color: var(--dim);
  background: var(--surface2);
  letter-spacing: .04em;
}

.res-col-chip.rh-col-iv {
  border-color: rgba(255, 214, 0, .4);
  color: var(--yellow);
}

.res-col-chip.rh-col-type {
  border-color: rgba(58, 158, 255, .4);
  color: var(--blue);
}

.res-col-chip.rh-col-price {
  border-color: rgba(46, 160, 67, .3);
  color: var(--green);
}

.res-col-chip.rh-col-greek {
  border-color: rgba(123, 94, 167, .4);
  color: var(--purple);
}

.res-tk-chip {
  cursor: pointer;
  border-color: rgba(230, 27, 64, .3);
  color: var(--orange);
}

.res-tk-chip:hover {
  background: var(--orange-dim);
}

.res-tk-active {
  background: var(--orange-dim);
  border-color: var(--orange);
  font-weight: 700;
}

.res-tk-clear {
  cursor: pointer;
  border-color: rgba(255, 51, 85, .4);
  color: var(--red);
}

.res-tk-clear:hover {
  background: var(--red-dim);
}

.res-range-badge {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(123, 94, 167, .5);
  color: var(--purple);
  background: var(--purple-dim);
  letter-spacing: .04em;
}

.res-range-days {
  font-size: 9px;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--border2);
}

/* expiry selector */

.res-exp-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
}

.res-exp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.res-exp-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.res-exp-sel {
  font-size: 9px;
  color: var(--muted);
  margin-right: 4px;
}

.res-exp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 6px 14px;
  max-height: 110px;
  overflow-y: auto;
}

.res-exp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  margin: 2px;
  background: var(--surface2);
  transition: background .08s;
  min-width: 160px;
}

.res-exp-row:hover {
  background: rgba(230, 27, 64, .07);
}

.res-exp-row.sel {
  background: rgba(46, 160, 67, .06);
  border-color: rgba(46, 160, 67, .3);
}

.res-exp-row input {
  accent-color: var(--green);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.res-exp-date {
  flex: 1;
  font-size: 11px;
  font-family: var(--font);
}

.res-exp-ct {
  font-size: 9px;
  color: var(--muted);
  padding: 0 4px;
  border: 1px solid var(--border2);
}

/* data table */

.res-table-wrap {
  flex: 1 1 0;
  overflow: auto;
}

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

.res-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  padding: 5px 8px;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--orange);
  border-bottom: 1px solid var(--border2);
}

.res-table thead th:first-child, .res-table thead th:nth-child(2) {
  text-align: left;
}

.res-table thead th.rh-col-iv {
  color: var(--yellow);
}

.res-table thead th.rh-col-type {
  color: var(--blue);
}

.res-table thead th.rh-col-price {
  color: var(--green);
}

.res-table thead th.rh-col-greek {
  color: var(--purple);
}

.res-table tbody td {
  padding: 3px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
}

.res-table tbody td:first-child, .res-table tbody td:nth-child(2) {
  text-align: left;
}

.res-table tbody tr:hover td {
  background: rgba(230, 27, 64, .04);
}

.res-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .015);
}

.res-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* sections */

.res-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}

.res-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.res-section-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.res-section-sub {
  font-size: 9px;
  color: var(--muted);
}

/* CSV file list */

.res-csv-list {
  display: flex;
  flex-direction: column;
  max-height: 160px;
  overflow-y: auto;
}

.res-csv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .08s;
}

.res-csv-row:hover {
  background: rgba(230, 27, 64, .05);
}

.res-csv-row.sel {
  background: rgba(46, 160, 67, .05);
  border-left: 2px solid var(--green);
}

.res-csv-row:not(.sel) {
  border-left: 2px solid transparent;
}

.res-csv-row input {
  accent-color: var(--green);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.res-csv-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--dim);
}

.res-csv-size {
  font-size: 9px;
  color: var(--muted);
  min-width: 52px;
  text-align: right;
}

.res-csv-mod {
  font-size: 9px;
  color: var(--muted);
  min-width: 72px;
}

.res-csv-scan {
  font-size: 9px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.res-csv-range {
  font-size: 9px;
  color: var(--purple);
  border: 1px solid rgba(123, 94, 167, .3);
  padding: 1px 6px;
  background: var(--purple-dim);
}

.res-csv-range em {
  color: var(--muted);
  font-style: normal;
  margin-left: 6px;
  opacity: .8;
}

/* date range grid */

.res-dr-grid {
  display: flex;
  flex-direction: column;
  padding: 6px 14px;
  gap: 4px;
}

.res-dr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.res-dr-combined {
  border-color: var(--purple);
  background: var(--purple-dim);
}

.res-dr-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em;
  min-width: 90px;
}

.res-dr-combined .res-dr-name {
  color: var(--purple);
}

.res-dr-range {
  font-size: 11px;
  color: var(--dim);
  font-family: var(--font);
}

.res-dr-ct {
  font-size: 9px;
  color: var(--muted);
}

.res-dr-scanning {
  font-size: 9px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.res-dr-unknown {
  font-size: 9px;
  color: var(--muted);
  opacity: .5;
  font-style: italic;
}

.res-dr-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 8px;
  flex-wrap: wrap;
}

.res-dt-input {
  width: 130px;
  background: #fff;
  color: #111;
  border: 1px solid #555;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font);
  border-radius: 2px;
  color-scheme: light;
}

.res-dt-input:focus {
  border-color: var(--orange);
  outline: none;
}

.res-dt-input::-webkit-calendar-picker-indicator {
  filter: invert(0);
  opacity: 1;
  cursor: pointer;
  background-color: transparent;
}

/* ticker grid */

.res-tk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
  max-height: 120px;
  overflow-y: auto;
}

/* ═══════════════════ TWO-ROW TOPBAR (v0.3) ═══════════════════ */

.topbar {
  flex: 0 0 auto;
  height: auto;
  background: #000;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.tb-r1 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  width: 100%;
  height: 34px;
  border-bottom: 1px solid var(--border);
}

.tb-r2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 34px;
}

.tb-brand {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff;
  background: linear-gradient(180deg, #F0264C, #C4102F);
  border: none;
  border-radius: 3px;
  padding: 4px 14px;
  margin-left: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .35);
}

.tb-spacer {
  flex: 1;
}

.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--dim);
  border: none;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-time {
  color: var(--muted);
  font-family: var(--ui);
  letter-spacing: .04em;
}

.tb-uname {
  cursor: default;
}

.tb-act {
  background: transparent;
  cursor: pointer;
  border: none;
  transition: color .15s;
}

.tb-act:hover {
  color: var(--orange);
}

.tb-act:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tb-out {
  margin-right: 10px;
}

.tb-out:hover {
  color: var(--red);
}

/* Row 2 — collapsible */

.tb-r2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  width: 100%;
  height: 34px;
  overflow: hidden;
  transition: height 220ms ease;
 /* background: rgba(108, 91, 158, .50);*/
  border: 0px solid #A855F7;
  border-bottom: none;
  border-radius: 0;
}

.tb-r2-closed {
  height: 0 !important;
}

/* DS=CSV Row 2 — active, subtle background */

.tb-r2.tb-r2-csv {
  background: rgba(108, 91, 158, .16);
  border-color: rgba(168, 85, 247, .55);
}

/* Row 3 — compact single-line, collapsible */

.tb-r3 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  overflow: hidden;
  transition: height 220ms ease;
 /* background: rgba(108, 91, 158, .50);*/
  border: 0px solid #A855F7;
  border-top: 1px solid rgba(168, 85, 247, .45);
  border-radius: 0;
}

.tb-r3-closed {
  height: 0 !important;
  border-top: none;
}

/* Row toggle buttons */

.tb-toggle-sep {
  width: 1px;
  height: 18px;
  background: var(--border2);
  align-self: center;
  margin: 0 4px;
}

.tb-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 8px;
  height: 100%;
  letter-spacing: .04em;
  transition: opacity .15s;
  flex-shrink: 0;
}

.tb-toggle-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-top: 1px;
}

.tb-r2-toggle {
  color: var(--yellow);
}

.tb-r2-toggle:hover {
  opacity: .7;
}

.tb-r3-toggle {
  color: var(--green);
}

.tb-r3-toggle:hover {
  opacity: .7;
}

/* DS dropdown wrapper with yellow-dash face */

.tb-ds-wrap {
  position: relative;
  flex: 0 0 162px;
  width: 162px;
  height: 24px;
  margin-left: 10px;
}

.tb-ds {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
}

.tb-ds-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--yellow);
  padding: 0 8px;
  font-size: 10px;
  font-family: var(--font);
  color: var(--text);
  pointer-events: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.tb-ds-dash {
  color: var(--yellow);
  font-weight: 900;
  margin: 0 3px;
}

/* DS in Row 1 — "Datasource:" label + compact yellow dropdown chip */

.tb-ds-r1-label {
  margin-left: 12px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tb-ds-r1 {
  flex: 0 0 96px;
  width: 96px;
  height: 20px;
  margin-left: 6px;
}

.tb-ds-r1 .tb-ds-face {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
  letter-spacing: .07em;
  justify-content: space-between;
  padding: 0 6px;
}

.tb-ds-caret {
  font-size: 8px;
}

/* ── v0.3 · Row 2 CSV files picker (compact inline chips) ── */

.tb-csv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  overflow: hidden;
}

.tb-csv-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pink, #ED93B1);
}

.tb-csv-sub {
  font-size: 9px;
  color: var(--muted);
}

.tb-csv-files {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  flex: 0 1 auto;
  max-width: 60%;
}

.tb-csv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  white-space: nowrap;
  padding: 2px 7px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  cursor: pointer;
  color: var(--dim);
}

.tb-csv-chip.sel {
  border-color: var(--green);
  color: var(--text);
  background: rgba(46, 160, 67, .14);
}

.tb-csv-chip input {
  margin: 0;
  width: 11px;
  height: 11px;
}

.tb-csv-empty {
  font-size: 10px;
  color: var(--muted);
}

/* ── v0.3 · CSV build sidebar accordion (col-a) ── */

.sb-expanded.csv-build .sb-exp-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.csv-sec {
  /* ee1
  border: 1px solid var(--border);
  border-radius: 4px;*/
  overflow: hidden;
}

.csv-sec.open {
  border-color: #A855F7;
}

.csv-sec-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  cursor: pointer;
  background: rgba(108, 91, 158, .18);
  font-size: 11px;
}

.csv-sec.open .csv-sec-hd {
  background: rgba(168, 85, 247, .18);
}

.csv-sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  background: var(--border2);
  color: var(--text);
}

.csv-sec.done .csv-sec-num {
  background: var(--green);
  color: #04140d;
}

.csv-sec-title {
  font-weight: 700;
  letter-spacing: .04em;
}

.csv-sec-sum {
  color: var(--muted);
  font-size: 10px;
  margin-left: 2px;
}

.csv-sec-caret {
  margin-left: auto;
  color: var(--dim);
}

.csv-sec-body {
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* DS=CSV build rendered as the full RESEARCH 1 layout, scrollable in the sidebar */
.csv-build-full {
  height: 100%;
  overflow-y: auto;
}
.csv-build-hdr {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  margin-bottom: 6px;
}

/* persistent searchable stock picker + Load Data (always visible in CSV col-a) */
.csv-stock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
}
.csv-stock-lbl {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.csv-stock-in {
  flex: 1 1 auto;
  min-width: 0;
}
.csv-stock-load {
  flex: 0 0 auto;
  white-space: nowrap;
}

.csv-build-btn {
  margin-top: 6px;
  background: #7F77DD;
  border: none;
  color: #fff;
  font-weight: 700;
}

.csv-build-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.csv-save-btn {
  margin-top: 5px;
}

.res-tk-chip.sel {
  border-color: var(--green);
  color: var(--text);
}

/* ── v0.3 · yf+csv layer switch (Row 1) ── */

.tb-layer-switch {
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
}

.tb-layer-switch button {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 8px;
  border: none;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}

.tb-layer-switch button.on {
  background: #7F77DD;
  color: #fff;
}

/* YF-only section — dimmed when DS ≠ YF */

.tb-r2-yf {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 0 0 auto;
}

.tb-r2-yf.r2-yf-inactive {
  opacity: 0.25;
  pointer-events: none;
  filter: grayscale(1);
}

.tb-sel {
  flex: 0 0 74px;
  width: 74px;
  min-width: 0;
  background: #000;
  border: 1px solid var(--border2);
  color: var(--dim);
  font-size: 10px;
  padding: 3px 6px;
  height: 24px;
}

.tb-in {
  flex: 0 0 66px;
  width: 66px;
  min-width: 0;
  background: #000;
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 11px;
  padding: 3px 6px;
  text-transform: uppercase;
  height: 24px;
}

.tb-in:focus {
  outline: none;
  border-color: var(--orange);
}

/* LOAD button — red filled in topbar row2 */

.tb-r2 .btn {
  flex: 0 0 auto;
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  height: 24px;
  padding: 3px 10px;
}

.tb-rfsh {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1;
}

.tb-vsep {
  flex: 0 0 1px;
  width: 1px;
  height: 30px;
  background: var(--border2);
  margin: 0 8px;
}

.tb-hint {
  flex: 1 1 0;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .07em;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 10px;
}

.tb-ds-label {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 0 6px;
}

.tb-ds-name {
  color: var(--yellow);
  font-weight: 700;
  margin-left: 2px;
}

/* previous build inline strip */

.tb-prev-bld {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 10px;
  white-space: nowrap;
}

.tb-prev-bld .qi-lbl {
  font-size: 8px;
  color: var(--green);
  letter-spacing: .1em;
  font-weight: 700;
}

.tb-pb-ticker {
  color: var(--orange);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tb-pb-when {
  color: var(--dim);
  font-size: 10px;
}

.tb-pb-ct {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.tb-pb-dot {
  color: var(--border2);
}

/* inline quote fills the rest */

.tb-quote {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  margin-right: 10px;
}

.tb-quote .qi {
  padding: 0 10px;
  flex-shrink: 0;
}

.tb-quote .qi-val {
  font-size: 12px;
}

.tb-quote .qsep {
  flex-shrink: 0;
}

/* hide old qbar — quote is now in topbar row2 */

.qbar {
  display: none;
}

/* ═══════════════════ ROW 3 — BUILD WORKFLOW ═══════════════════ */

.tb-r3-src {
  flex: 0 0 48px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--yellow);
  text-transform: uppercase;
  border-right: 0px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Row 3 = chevron progress bar; segments fill red → amber → green with progress */

.wf3-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 100%;
}

.wf3-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 20px;
  padding: 0 10px 0 16px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
}

.wf3-step:first-child {
  padding-left: 11px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

.wf3-step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%);
}

.wf3-lbl {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf3-icon {
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
  flex-shrink: 0;
}

/* segment fill states */

.wf3-done {
  background: linear-gradient(180deg, #2ea043, #1f7a3a);
  color: #eafff0;
}

.wf3-done .wf3-icon {
  background: rgba(255, 255, 255, .28);
  color: #eafff0;
}

.wf3-cur {
  background: linear-gradient(180deg, #E3A008, #B8860B);
  color: #2a1f00;
}

.wf3-cur .wf3-icon {
  background: rgba(0, 0, 0, .30);
  color: #fff;
}

.wf3-pend {
  background: linear-gradient(180deg, #7a2531, #5a1a24);
  color: #e6b3ba;
}

.wf3-pend .wf3-icon {
  background: rgba(255, 255, 255, .14);
  color: #e6b3ba;
}

.wf3-icon-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
}

.wf3-clickable {
  cursor: pointer;
}

.wf3-clickable .wf3-icon-btn {
  animation: wf3-pulse 1.6s ease-in-out infinite;
}

.wf3-clickable .wf3-icon-btn:hover {
  filter: brightness(1.25);
  transform: scale(1.12);
}

.wf3-disabled {
  opacity: .45;
  cursor: not-allowed !important;
  animation: none !important;
}

@keyframes wf3-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 currentColor;
  }

  50% {
    box-shadow: 0 0 0 3px transparent;
  }

}

/* inactive — shown when DS ≠ YF and no live stepper */

.r3-inactive .tb-r3-src {
  color: var(--border2);
}

.r3-inactive .wf3-step {
  background: rgba(255, 255, 255, .05);
  color: var(--border2);
}

.r3-inactive .wf3-icon {
  background: rgba(255, 255, 255, .06);
  color: var(--border2);
}

/* ═══════════════════ COLLAPSIBLE SIDEBAR ═══════════════════ */

.sidebar {
  transition: flex-basis 220ms ease, width 220ms ease;
}

.sidebar.sb-closed {
  flex: 0 0 28px !important;
}

/* collapsed strip */

.sb-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 6px;
  height: 100%;
  overflow: hidden;
  background:var(--red);
  color:var(--white);
}

.sb-strip-toggle {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  color: var(--white);
  font-size: 9px;
  cursor: pointer;
  padding: 3px 5px;
  line-height: 1;
  transition: color .15s, border-color .15s;
}

.sb-strip-toggle:hover {
  /*color: var(--orange);*/
  border-color: var(--white);
}

.sb-v-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: normal;
  letter-spacing: .18em;
  color: var(--orange);
  color:var(--white);
  text-transform: uppercase;
  margin-top: 10px;
  user-select: none;
}

/* expanded toggle button in section-title */

.sb-toggle-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 1px 5px;
  line-height: 1;
  margin-left: auto;
  transition: color .15s, border-color .15s;
}

.sb-toggle-btn:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* VALIDATE SELECTION button */

.sb-validate-btn {
  width: 100%;
  padding: 7px 0;
  margin-top: 4px;
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--ui);
  transition: background .15s, border-color .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sb-validate-btn:hover:not(:disabled) {
  background: var(--surface2);
  border-color: var(--orange);
  color: var(--orange);
}

.sb-validate-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* AUTO-validate checkbox + validate row */

/* AUTO + VALIDATE moved inline into the chip/duration row, right-aligned */

.chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.sb-validate-inline {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 2px 10px;
  white-space: nowrap;
  line-height: normal;
}

.autoval-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: var(--green);
  border: 1px solid #1f7a3a;
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.autoval-chk input {
  accent-color: #1f7a3a;
  cursor: pointer;
  margin: 0;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 1px #fff;
  border-radius: 2px;
}

.autoval-chk:hover {
  border-color: #fff;
}

.autoval-chk:hover input {
  accent-color: var(--orange);
}

/* custom DTE chip — yellow */

.chip-custom {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--surface2);
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 2px;
  padding: 2px 5px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chip-dte-in {
  width: 28px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--yellow);
  color: var(--yellow);
  font-size: 10px;
  font-family: var(--font);
  padding: 0 2px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.chip-dte-in::-webkit-outer-spin-button, .chip-dte-in::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.chip-dte-in:focus {
  border-bottom-color: var(--orange);
  color: var(--orange);
}

/* warnings */

.warn-section {
}

.warn-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  padding: 2px 0;
  line-height: 1.4;
}

.warn-icon {
  flex: 0 0 auto;
}

.warn-warn {
  color: var(--yellow);
}

.warn-error {
  color: var(--red);
}

.warn-success {
  color: var(--green);
}

.warn-info {
  color: var(--dim);
}

/* ═══════════════════ SIDEBAR FULL-WIDTH EXPANDED MODE ═══════════════════ */

.sb-expanded {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid #A855F7;
  border-top: none;
  border-radius: 0;
}

.sb-exp-left {
  flex: 0 0 62%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 10px;
  gap: 6px;
}

.sb-exp-hdr {
  font-size: 9px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .12em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* status line at the top of Build Workflow (validating / building / saved …) */
.sb-status {
  font-size: 10px;
  line-height: 1.45;
  color: var(--dim);
  padding: 5px 8px;
  margin: 7px 0;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-status.busy {
  border-color: rgba(226, 75, 74, .45);
  color: var(--green);
}

/* ── col-b collapsible rows: row-1 (info) + row-2 (build log) ── */
.sb-b-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sb-b-hd:hover { opacity: .85; }
.sb-b-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

/* ── universal Build Log terminal ── */
.wlog {
  border: 1px solid var(--border2);
  border-radius: 4px;
  background: #0a0e14;
  margin-top: 8px;
  overflow: hidden;
}
.wlog-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 5px 8px;
  background: var(--surface2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
}
.wlog-caret { font-size: 9px; color: var(--muted); }
.wlog-title { color: var(--green); }
.wlog-count { background: var(--border2); color: var(--text); border-radius: 8px; padding: 0 6px; font-size: 8px; }
.wlog-clear {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border2);
  color: var(--dim);
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wlog-clear:hover { color: var(--red); border-color: var(--red); }
.wlog-body {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.55;
}
.wlog-empty { color: var(--muted); font-style: italic; }
.wlog-line { display: flex; gap: 7px; }
.wlog-t { color: #4a5568; flex: 0 0 auto; }
.wlog-src { color: var(--pink, #ED93B1); flex: 0 0 auto; text-transform: uppercase; font-size: 8px; align-self: center; }
.wlog-msg { white-space: pre-wrap; word-break: break-word; }
.wlog-info .wlog-msg { color: var(--dim); }
.wlog-run  .wlog-msg { color: #e3a008; }
.wlog-ok   .wlog-msg { color: var(--green); }
.wlog-warn .wlog-msg { color: #e3a008; }
.wlog-err  .wlog-msg { color: var(--red); }

/* ── v0.4.1-admin: build-version access picker ── */
.ver-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.ver-chk{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text);cursor:pointer}
.ver-chk input{cursor:pointer}
.ver-hint{font-size:9px;color:var(--muted);font-style:italic}
.ver-tag{display:inline-block;background:var(--surface3);border:1px solid var(--border2);
  border-radius:3px;padding:1px 6px;font-size:10px;color:var(--text);letter-spacing:.03em}

/* ── DebugBar — sticky admin debug/error console, pinned above the TopBar ── */
.dbgbar {
  position: sticky; top: 0; z-index: 5000;
  background: #06090f;
  border-bottom: 1px solid var(--border2);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.dbgbar.has-warn { border-bottom-color: #e3a008; }
.dbgbar.has-err  { border-bottom-color: var(--red); }
.dbg-hd {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 3px 10px;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.dbg-caret { color: var(--muted); }
.dbg-title { color: #e3a008; }
.dbgbar.has-err .dbg-title { color: var(--red); }
.dbg-badge { border-radius: 8px; padding: 0 6px; font-size: 8px; font-weight: 700; }
.dbg-badge.err  { background: rgba(220,38,38,.18);  color: var(--red); }
.dbg-badge.warn { background: rgba(227,160,8,.18);  color: #e3a008; }
.dbg-peek {
  color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.dbg-hd-spacer { flex: 1 1 auto; }
.dbg-btn {
  background: none; border: 1px solid var(--border2); color: var(--dim);
  font-size: 8px; padding: 1px 7px; border-radius: 3px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .06em;
}
.dbg-btn:hover { color: var(--text); border-color: var(--muted); }
.dbg-btn.dbg-danger:hover { color: var(--red); border-color: var(--red); }
.dbg-panel { border-top: 1px solid var(--border); background: #0a0e14; }
.dbg-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-bottom: 1px solid var(--border);
}
.dbg-tabs > button {
  background: none; border: 1px solid var(--border2); color: var(--dim);
  font-size: 8px; padding: 2px 8px; border-radius: 3px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .06em; font-family: inherit;
}
.dbg-tabs > button.on { color: #e3a008; border-color: #e3a008; }
.dbg-srvmsg { font-size: 8px; color: var(--muted); }
.dbg-body {
  max-height: 40vh; overflow-y: auto; padding: 6px 10px;
  font-size: 10px; line-height: 1.55;
}
.dbg-empty { color: var(--muted); font-style: italic; }
.dbg-line { display: flex; gap: 8px; align-items: baseline; }
.dbg-t  { color: #4a5568; flex: 0 0 auto; }
.dbg-lv { flex: 0 0 auto; text-transform: uppercase; font-size: 8px; align-self: center; }
.dbg-msg { white-space: pre-wrap; word-break: break-word; }
.dbg-extra { color: #4a5568; }
.dbg-info .dbg-lv, .dbg-info .dbg-msg { color: var(--dim); }
.dbg-warn .dbg-lv, .dbg-warn .dbg-msg { color: #e3a008; }
.dbg-err  .dbg-lv, .dbg-err  .dbg-msg { color: var(--red); }

/* BUILDS tab — per-build links (load surface / raw JSON) */
.dbg-build { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.dbg-build-id  { color: #4a5568; flex: 0 0 auto; }
.dbg-build-lbl { color: var(--text); word-break: break-all; }
.dbg-build-ann { color: var(--yellow); font-style: italic; flex: 0 0 auto; }
.dbg-build-ct  { color: var(--dim); flex: 0 0 auto; margin-left: auto; }
.dbg-build-link { flex: 0 0 auto; text-decoration: none; padding: 0 5px; border: 1px solid var(--border2); }
.dbg-build-link.load { color: var(--green);  border-color: var(--green); }
.dbg-build-link.json { color: var(--dim); }
.dbg-build-link:hover { background: var(--surface2); }

.sb-chip-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.sb-exp-vsep {
  flex: 0 0 1px;
  background: #A855F7;
  align-self: stretch;
}

.sb-exp-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 10px;
  gap: 10px;
}

/* 3-column expiry grid inside expanded left panel */

.sb-exp-left .exp-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 4px;
}

.sb-exp-left .exp-row {
  padding: 3px 6px;
  font-size: 11px;
}

/* col-a bottom split: Surface Options (1/4) | Previous Build (3/4) */

.sb-exp-a-bottom {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sb-exp-opts {
  flex: 1 1 0;
  min-width: 0;
}

.sb-exp-hist {
  flex: 3 1 0;
  min-width: 0;
}

.sb-exp-opts .opts-grid {
  grid-template-columns: 1fr;
}

/* Combine-with-previous-builds checkbox — col b */

.combine-chk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 2px;
  color: var(--text);
  font-size: 10px;
  letter-spacing: .04em;
  cursor: pointer;
  user-select: none;
}

.combine-chk input {
  accent-color: var(--orange);
  cursor: pointer;
  margin: 0;
  width: 12px;
  height: 12px;
}

.combine-chk:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* VIEW SURFACE button — col b, below Warnings & Info (height matches AUTO/validate) */

.view-surface-btn {
  margin-top: 2px;
  width: 100%;
  padding: 3px 0;
  background: var(--green);
  border: 1px solid var(--green);
  color: #04120a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--ui);
  border-radius: 2px;
  transition: filter .15s, opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.view-surface-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.view-surface-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  background: transparent;
  color: var(--dim);
}

.use-build-btn {
  margin-top: 4px;
  width: 100%;
  padding: 4px 0;
  background: rgba(255, 140, 0, .14);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--ui);
  border-radius: 2px;
  transition: background .15s, color .15s, opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.use-build-btn:hover:not(:disabled) { background: var(--orange); color: #120a04; }
.use-build-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ═══════════════════ EMPTY STATE SUB-LINE ═══════════════════ */

.empty-sub {
  font-size: 10px;
  color: var(--border2);
  letter-spacing: .04em;
  font-style: italic;
}

/* ═══════════ v0.4 · Trading Strategies tab ═══════════ */
.strat-scroll{flex:1 1 0;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.strat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.strat-title{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--orange)}
.strat-pick{display:flex;align-items:center;gap:8px}
.strat-pick label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.strat-pick select{background:var(--surface2);border:1px solid var(--border2);color:var(--text);
  font-size:12px;padding:5px 10px;border-radius:4px;min-width:200px}
.strat-src{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--border2);border-left:3px solid var(--accent,#5b9dd9);border-radius:0 4px 4px 0;
  padding:8px 12px;background:var(--surface2);margin-bottom:10px}
.strat-src-lbl{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.strat-src select{background:var(--surface);border:1px solid var(--border2);color:var(--text);
  font-size:12px;padding:5px 10px;border-radius:4px;min-width:260px;max-width:100%}
.strat-src-hint{font-size:10px;color:var(--muted);font-style:italic}
.strat-theo-flag{display:inline-block;margin-left:8px;font-size:10px;font-weight:600;
  color:var(--yellow);border:1px solid var(--yellow);border-radius:3px;padding:1px 6px;cursor:help}
.strat-theo-flag.danger{color:var(--red);border-color:var(--red)}

/* recommended-strategies panel (driven by the surface signal) */
.strat-pick-none{font-size:11px;color:var(--muted);font-style:italic}
.strat-head-sel{font-size:12px;font-weight:700;color:var(--green);letter-spacing:.02em}
.strat-rec-pick{font-size:9px;color:var(--muted);font-style:italic;margin-left:auto}
.strat-rec{border:1px solid var(--border2);border-left:3px solid var(--green);border-radius:0 4px 4px 0;
  padding:9px 12px;background:var(--surface2);margin-bottom:10px}
.strat-rec-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.strat-rec-lbl{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.strat-rec-regime{font-size:11px;color:var(--yellow);font-weight:600}
.strat-rec-list{display:flex;gap:7px;flex-wrap:wrap}
.strat-rec-chip{display:inline-flex;flex-direction:column;gap:4px;align-items:stretch;min-width:152px;
  background:var(--surface);border:1px solid var(--border2);color:var(--text);
  font-size:11px;padding:6px 9px;border-radius:4px;font-family:inherit}
.strat-rec-name{display:flex;align-items:center;gap:6px;font-weight:600}
.strat-rec-metrics{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;letter-spacing:.02em;line-height:1.35}
.strat-rec-metrics .rm{white-space:nowrap;color:var(--muted)}
.strat-rec-metrics .rm.profit{color:var(--green)}
.strat-rec-metrics .rm.loss{color:var(--red)}
.strat-rec-metrics .rm.be{color:var(--text)}
/* v0.7.3: Real vs BSM-theoretical source label on each recommended chip */
.strat-rec-metrics .rm.src{font-weight:700;font-size:10px;letter-spacing:.03em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;border:1px solid currentColor;align-self:flex-start;margin-bottom:1px}
.strat-rec-metrics .rm.src.real{color:var(--green)}
.strat-rec-metrics .rm.src.theo{color:var(--yellow,#c8a000)}
.strat-rec-metrics .rm.na{color:var(--muted);font-style:italic}
.strat-rec-chip.sel{border-color:var(--green);background:rgba(34,197,94,.14);color:var(--green);font-weight:700}
.strat-rec-chip.na{opacity:.55;border-style:dashed;color:var(--muted)}
.strat-rec-na{font-size:9px;color:var(--muted);font-style:italic}
.strat-rec-pop{display:inline-block;margin-left:6px;font-size:9px;font-weight:700;letter-spacing:.02em;
  padding:1px 5px;border-radius:3px;border:1px solid var(--border2);color:var(--muted);vertical-align:middle}
.strat-rec-pop::before{content:'POP ';font-weight:600;opacity:.7}
.strat-rec-pop.hi{border-color:var(--green);color:var(--green);background:rgba(34,197,94,.12)}
.strat-rec-pop.mid{border-color:var(--yellow);color:var(--yellow);background:rgba(234,179,8,.10)}
.strat-rec-pop.lo{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.10)}
.strat-rec-chip.sel .strat-rec-pop{border-color:currentColor}
.strat-rec-note{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.5}
.strat-signal{border:1px solid var(--border2);border-left-width:3px;border-radius:0 4px 4px 0;
  padding:9px 12px;font-size:12px;line-height:1.5;background:var(--surface2)}
.strat-signal-lbl{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:3px}
.strat-signal.good{border-left-color:var(--green)}
.strat-signal.warn{border-left-color:var(--yellow)}
.strat-signal.bad{border-left-color:var(--red)}
.strat-signal.info{border-left-color:var(--dim)}
.strat-body{font-size:12px;line-height:1.6}
.strat-tag{margin:0 0 8px;color:var(--text)}
.strat-kv{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--border)}
.strat-kv b{flex:0 0 100px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.strat-kv span{flex:1;color:var(--text)}
.strat-legs,.strat-saved{width:100%;border-collapse:collapse;font-size:11px;margin:2px 0}
.strat-legs th,.strat-saved th{text-align:left;font-size:9px;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;padding:4px 6px;border-bottom:1px solid var(--border2)}
.strat-legs td,.strat-saved td{padding:5px 6px;border-bottom:1px solid var(--border)}
/* legs/saved tables: force LEFT on both header and data for every column, with
   class-level specificity so the global `thead th`/`tbody td{text-align:right}`
   rules can't leak in and mis-align header vs data. */
.strat-legs th,.strat-legs td,
.strat-saved th,.strat-saved td{text-align:left;white-space:nowrap;vertical-align:middle}
.strat-saved tr.sel{background:rgba(168,85,247,.12)}
.lg-buy{color:var(--green);font-weight:700}
.strat-metrics{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.strat-metrics>div{display:flex;gap:8px;font-size:11px}
.strat-metrics b{flex:0 0 110px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.strat-warn{margin-top:8px;font-size:10px;color:var(--yellow);background:rgba(210,153,34,.12);
  border:1px solid rgba(210,153,34,.35);border-radius:4px;padding:6px 8px;line-height:1.5}
.strat-fit{font-size:11px;padding:6px 8px;border-radius:4px;margin-bottom:8px;background:var(--surface2)}
.strat-fit.good{color:var(--green)}.strat-fit.warn{color:var(--yellow)}.strat-fit.bad{color:var(--red)}.strat-fit.info{color:var(--dim)}
.strat-list,.strat-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.strat-list li,.strat-steps li{font-size:12px;line-height:1.5}
.strat-steps li{padding-left:2px}
.strat-risk{margin-top:10px;font-size:11px;color:var(--muted);line-height:1.6;border-top:1px solid var(--border2);padding-top:8px}
.strat-risk b{color:var(--red)}
.strat-save{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.strat-save .res-input{flex:1 1 220px;min-width:160px}
.strat-save-btn{background:var(--purple);color:#fff;border:none}
.strat-msg{margin-top:8px;font-size:11px;color:var(--green)}
.strat-note{color:var(--muted);font-size:10px}
.strat-view{margin-top:10px;border:1px solid var(--border2);border-radius:4px;padding:8px 10px;background:var(--surface2)}
.strat-view-hd{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);margin-bottom:6px}
.strat-disclaimer{font-size:10px;color:var(--muted);line-height:1.6;border-top:1px solid var(--border);padding-top:10px;font-style:italic}

/* ═══════════ v0.4 · My Trading Workflow tab ═══════════ */
.wf-scroll{flex:1 1 0;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.wf-row1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wf-row1 label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wf-row1 select{background:var(--surface2);border:1px solid var(--border2);color:var(--text);font-size:12px;padding:5px 10px;border-radius:4px;min-width:320px;max-width:100%}
.wf-hint{font-size:11px;color:var(--muted)}
.wf-surface{font-size:11px;color:var(--dim);background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:6px 9px;margin-bottom:8px;line-height:1.5}
.wf-surface b{color:var(--text)}
.wf-exps{color:var(--muted)}
/* aligned two-column recommended | execution grid — rows auto-size to the taller cell */
.wf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border2);border-radius:4px;overflow:hidden}
.wf-gh{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
       padding:6px 10px;background:var(--surface2);border-bottom:1px solid var(--border2)}
.wf-gh:first-child{border-right:1px solid var(--border2)}
.wf-ga,.wf-gb{padding:7px 10px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.5}
.wf-ga{border-right:1px solid var(--border2)}
.wf-sec{flex:0 0 46px;font-size:8px;font-weight:700;letter-spacing:.06em;color:var(--muted);padding-top:1px}
.wf-ga.wf-leg   .wf-sec{color:var(--green)}
.wf-ga.wf-enter .wf-sec{color:var(--blue)}
.wf-ga.wf-exit  .wf-sec{color:var(--yellow)}
.wf-text{flex:1}
.wf-gb{align-items:center}
.wf-chk{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.wf-chk input{margin:0;width:14px;height:14px;accent-color:var(--green);cursor:pointer}
.wf-actual{flex:1;min-width:0}
.wf-outcome{width:100%;resize:vertical;font-family:inherit}
.wf-save{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.wf-save .res-input{flex:1 1 200px;min-width:150px}
.wf-save-btn{background:var(--purple);color:#fff;border:none}
.wf-col{font-size:12px;line-height:1.6}
@media (max-width:760px){ .wf-grid2{grid-template-columns:1fr} .wf-ga{border-right:none} .wf-gh:first-child{border-right:none} }

/* ═══════════ v0.4 · Strategy payoff chart (SVG) ═══════════ */
.payoff-wrap{margin-top:12px;border-top:1px solid var(--border2);padding-top:10px}
.payoff-title{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.payoff-title span{color:var(--dim);font-weight:400;letter-spacing:.02em;text-transform:none;margin-left:6px}
.payoff-svg{width:100%;height:auto;display:block;background:var(--surface2);border:1px solid var(--border);border-radius:6px}
.pf-line{fill:none;stroke:var(--purple,#A855F7);stroke-width:2}
.pf-fill-prof{fill:var(--green);opacity:.16;stroke:none}
.pf-fill-loss{fill:var(--red);opacity:.16;stroke:none}
.pf-zero{stroke:var(--border2);stroke-width:1;stroke-dasharray:3 3}
.pf-spot{stroke:var(--yellow);stroke-width:1;stroke-dasharray:2 3;opacity:.8}
.pf-be{fill:var(--green);stroke:none}
.pf-belbl{fill:var(--green);font-size:9px;font-weight:700}
.pf-ax{fill:var(--muted);font-size:9px}
.pf-spotlbl{fill:var(--yellow)}
.pf-delta{fill:none;stroke:var(--orange,#E61B40);stroke-width:1.4;stroke-dasharray:4 3;opacity:.85}
.pf-delta-ax{fill:var(--orange,#E61B40);font-size:8px}
.payoff-note{font-size:10px;color:var(--yellow);margin-top:6px;line-height:1.5}

/* build-version badge + switcher (top bar) — v0.7.1 */
.tb-ver{color:var(--orange);border-color:var(--orange);font-weight:800;letter-spacing:.06em}
.tb-ver-switch{display:inline-flex;gap:3px;align-items:center;margin-right:6px}
.tb-ver-pill{font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:3px;
  border:1px solid var(--border2);color:var(--muted);text-decoration:none;cursor:pointer}
.tb-ver-pill:hover{border-color:var(--orange);color:var(--orange)}
.tb-ver-pill.on{background:var(--orange);border-color:var(--orange);color:#fff;cursor:default}

/* CsvHistoryBadge (MVP-A) — CSV-history indicator in the top bar */
.csv-hist{font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:3px;border:1px solid var(--border2);white-space:nowrap}
.csv-hist.has{color:var(--green);border-color:var(--green)}
.csv-hist.none{color:var(--yellow);border-color:var(--yellow);cursor:help}

/* StrategyMarkCapture (MVP-C) — daily-mark status pill */
.strat-mark-row{margin:6px 0}
.strat-mark{font-size:10px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:3px;border:1px solid var(--border2)}
.strat-mark.on{color:var(--green);border-color:var(--green)}
.strat-mark.off{color:var(--muted);cursor:help}

/* StrategyMarkCapture (MVP-C) — Save-mark button */
.strat-mark-btn{font-size:10px;font-weight:600;letter-spacing:.03em;padding:3px 10px;border-radius:3px;border:1px solid var(--orange);color:var(--orange);background:transparent;cursor:pointer}
.strat-mark-btn:hover:not(:disabled){background:var(--orange);color:#fff}
.strat-mark-btn:disabled{opacity:.4;cursor:not-allowed}