/* Pair Lab Synthetic Baskets Studio & Basket Desk styles */

.pair-syn,
.desk-page {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  color: var(--color-text, #f1f5f9);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

.desk-page {
  gap: var(--space-5, 20px);
}

.pair-syn {
  gap: 0;
}

.pair-syn *,
.desk-page * {
  box-sizing: border-box;
}

/* ── Synthetic Studio Compact Header Strip ── */

.pair-syn__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  min-block-size: 40px;
  block-size: 40px;
  margin-block-end: 12px;
  padding-block: 0;
  border-block-end: 1px solid var(--color-border, #334155);
}

.pair-syn__strip-lead {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
  min-inline-size: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  overflow: hidden;
}

.pair-syn__strip-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-caps, 0.05em);
  text-transform: uppercase;
  font-variant: all-small-caps;
  color: var(--color-accent, #38bdf8);
  white-space: nowrap;
}

.pair-syn__strip-copy {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pair-syn__strip-wallet {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pair-syn__strip-wallet:empty {
  display: none;
}
.pair-syn__message:empty {
  display: none;
}

.pair-syn__builder {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

/* ── Baskets Topbar Tabs & Page Tightening ── */

.baskets-page.pair-lab-page {
  gap: 0;
}

.baskets-page > [data-baskets-tabs] {
  display: none;
}

@media (max-width: 48rem) {
  .baskets-page > [data-baskets-tabs] {
    display: flex;
  }
}

.topbar__left [data-baskets-tabs] {
  display: flex;
  align-items: center;
  margin-inline-start: var(--space-2, 8px);
}

.topbar__left [data-baskets-tabs] .pair-lab-page__tabs {
  margin: 0;
}

.topbar__left [data-baskets-tabs] .insights-analytics-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__left [data-baskets-tabs] a {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  border: 1px solid transparent;
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
  line-height: var(--leading-none, 1);
}

.topbar__left [data-baskets-tabs] a:hover {
  color: var(--color-text, #f1f5f9);
  background: var(--color-surface, #1e293b);
}

.topbar__left [data-baskets-tabs] a.is-active,
.topbar__left [data-baskets-tabs] a[aria-current="page"] {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
  color: var(--color-text, #f1f5f9);
}

.topbar__left [data-baskets-tabs] .insights-analytics-nav__picker {
  display: none;
}

.page-content:has(> .baskets-page) {
  padding-block-start: var(--space-4, 16px);
}

/* ── Desk Page Header (Basket Desk) ── */

.desk-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding-block-end: var(--space-3, 12px);
  border-block-end: 1px solid var(--color-border, #334155);
}

.desk-page__eyebrow {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-caps, 0.05em);
  text-transform: uppercase;
  color: var(--color-accent, #38bdf8);
  margin: 0;
}

.desk-page__title {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: var(--leading-tight, 1.25);
  color: var(--color-text, #f1f5f9);
  margin: 0;
}

.desk-page__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
  margin-block-start: var(--space-1, 4px);
}

.desk-page__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  color: var(--color-text-muted, #94a3b8);
}

.desk-page__pill--accent {
  border-color: var(--color-accent, #38bdf8);
  color: var(--color-accent, #38bdf8);
}

/* ── Desk Wallet Gate ── */

.desk-page__wallet {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.desk-page__wallet-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}

.desk-page__wallet-prompt {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__wallet-connected,
.desk-page__wallet-connected {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--text-xs, 0.75rem);
}

.pair-syn__wallet-dot,
.desk-page__wallet-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.pair-syn__wallet-address,
.desk-page__wallet-address {
  font-family: var(--font-mono, monospace);
  color: var(--color-accent, #38bdf8);
  text-decoration: none;
}

.pair-syn__wallet-address:hover,
.desk-page__wallet-address:hover {
  text-decoration: underline;
}

/* ── Presets ── */

.pair-syn__presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin: 0;
}

.pair-syn__presets-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

.pair-syn__presets-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps, 0.05em);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__preset-alt-note {
  font-size: var(--text-xs, 0.75rem);
  color: #f59e0b;
}

.pair-syn__preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.pair-syn__preset-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #334155);
  background: var(--color-surface, #1e293b);
  color: var(--color-text, #f1f5f9);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pair-syn__preset-btn:hover {
  border-color: var(--color-accent, #38bdf8);
  background: var(--color-surface-hover, #334155);
}

.pair-syn__preset-btn.is-active {
  border-color: var(--color-accent, #38bdf8);
  background: rgba(56, 189, 248, 0.15);
  color: var(--color-accent, #38bdf8);
}

/* ── Legs Editor ── */

.pair-syn__legs-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.pair-syn__legs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  border-block-end: 1px solid var(--color-border, #334155);
  padding-block-end: var(--space-2, 8px);
}

.pair-syn__legs-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  color: var(--color-text, #f1f5f9);
}

.pair-syn__weight-sum {
  font-size: var(--text-xs, 0.75rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__legs-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4, 16px);
}

.pair-syn__group-title {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps, 0.05em);
  color: var(--color-text-muted, #94a3b8);
  margin-block-end: var(--space-2, 8px);
}

.pair-syn__group-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.pair-syn__leg-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-sm, 6px);
}

.pair-syn__leg-info {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pair-syn__leg-symbol {
  font-weight: var(--weight-bold, 700);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text, #f1f5f9);
}

.pair-syn__leg-name {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__leg-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pair-syn__input--weight {
  inline-size: 70px;
  text-align: right;
  padding: 4px 8px;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm, 0.875rem);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text, #f1f5f9);
}

.pair-syn__leg-unit {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

/* ── Form Controls & Grid ── */

.pair-syn__controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4, 16px);
}

.pair-syn__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5, 6px);
}

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

.pair-syn__label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps, 0.05em);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__direction-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  border: 1px solid var(--color-border, #334155);
}

.pair-syn__dir-btn {
  padding: 8px 12px;
  border: none;
  background: var(--color-surface, #1e293b);
  color: var(--color-text-muted, #94a3b8);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pair-syn__dir-btn.is-active[data-syn-dir="long"] {
  background: #16a34a;
  color: #ffffff;
}

.pair-syn__dir-btn.is-active[data-syn-dir="short"] {
  background: #dc2626;
  color: #ffffff;
}

.pair-syn__input,
.desk-page__input {
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #334155);
  background: var(--color-surface, #1e293b);
  color: var(--color-text, #f1f5f9);
  font-size: var(--text-sm, 0.875rem);
  font-family: var(--font-mono, monospace);
}

.pair-syn__input:focus,
.desk-page__input:focus {
  outline: none;
  border-color: var(--color-accent, #38bdf8);
}

.pair-syn__slider {
  inline-size: 100%;
  cursor: pointer;
}

.pair-syn__cap-value {
  font-family: var(--font-mono, monospace);
  font-weight: var(--weight-bold, 700);
  color: var(--color-accent, #38bdf8);
  font-size: var(--text-sm, 0.875rem);
}

.pair-syn__field-hint {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

/* ── Payoff Strip ── */

.pair-syn__payoff {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.pair-syn__payoff-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  margin: 0;
}

.pair-syn__payoff-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3, 12px);
}

.pair-syn__payoff-point {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3, 12px);
  border-radius: var(--radius-sm, 6px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--color-border, #334155);
}

.pair-syn__payoff-point--floor {
  border-inline-start: 4px solid #ef4444;
}

.pair-syn__payoff-point--entry {
  border-inline-start: 4px solid var(--color-border, #64748b);
}

.pair-syn__payoff-point--cap {
  border-inline-start: 4px solid #22c55e;
}

.pair-syn__payoff-label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__payoff-return {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-bold, 700);
  font-family: var(--font-mono, monospace);
}

.pair-syn__payoff-point--floor .pair-syn__payoff-return {
  color: #ef4444;
}

.pair-syn__payoff-point--cap .pair-syn__payoff-return {
  color: #22c55e;
}

.pair-syn__payoff-val {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
}

.pair-syn__payoff-sub {
  font-size: 11px;
  color: var(--color-text-muted, #94a3b8);
}

/* ── Live Quote Box ── */

.pair-syn__quote-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.pair-syn__quote-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  margin: 0;
}

.pair-syn__quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3, 12px);
}

.pair-syn__quote-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pair-syn__quote-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__quote-value {
  font-size: var(--text-sm, 0.875rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #f1f5f9);
}

/* ── Actions & Review ── */

.pair-syn__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.pair-syn__review-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5, 6px);
  padding: var(--space-3, 12px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-sm, 6px);
}

.pair-syn__review-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm, 0.875rem);
}

.pair-syn__review-row--sub {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__btn,
.desk-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.pair-syn__btn--primary,
.desk-page__btn--primary {
  background: var(--color-accent, #38bdf8);
  color: #0f172a;
}

.pair-syn__btn--primary:hover:not(:disabled),
.desk-page__btn--primary:hover:not(:disabled) {
  background: #7dd3fc;
}

.pair-syn__btn--secondary,
.desk-page__btn--secondary {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
  color: var(--color-text, #f1f5f9);
}

.pair-syn__btn--action {
  background: #eab308;
  color: #0f172a;
}

.pair-syn__btn--action:hover:not(:disabled) {
  background: #fde047;
}

.pair-syn__btn--warning {
  background: #f59e0b;
  color: #0f172a;
}

.pair-syn__btn--sm,
.desk-page__btn--sm {
  padding: 4px 10px;
  font-size: var(--text-xs, 0.75rem);
}

.pair-syn__btn:disabled,
.desk-page__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Positions ── */

.pair-syn__positions-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin-block-start: var(--space-4, 16px);
}

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

.pair-syn__positions-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-bold, 700);
  margin: 0;
}

.pair-syn__positions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.pair-syn__position-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.pair-syn__position-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.pair-syn__position-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pair-syn__position-id {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__dir-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--weight-bold, 700);
}

.pair-syn__dir-tag--long {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.pair-syn__dir-tag--short {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.pair-syn__badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--weight-semibold, 600);
}

.pair-syn__badge--info {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.pair-syn__badge--danger {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.pair-syn__badge--success {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.pair-syn__position-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2, 8px);
}

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

.pair-syn__stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__stat-value {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm, 0.875rem);
}

.pair-syn__text--green {
  color: #22c55e;
}

.pair-syn__text--red {
  color: #ef4444;
}

.pair-syn__position-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding-block-start: var(--space-2, 8px);
  border-block-start: 1px solid var(--color-border, #334155);
}

.pair-syn__hold-notice {
  font-size: var(--text-xs, 0.75rem);
  color: #f59e0b;
}

.pair-syn__link {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-accent, #38bdf8);
  text-decoration: none;
}

.pair-syn__link:hover {
  text-decoration: underline;
}

.pair-syn__muted {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #94a3b8);
}

.pair-syn__warning {
  color: #f59e0b;
  font-size: var(--text-sm, 0.875rem);
}

.pair-syn__error {
  color: #ef4444;
  font-size: var(--text-sm, 0.875rem);
}

.pair-syn__alert {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-sm, 6px);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-size: var(--text-sm, 0.875rem);
}

.pair-syn__alert--error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* ── Desk Page Styles ── */

.desk-page__metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 16px);
}

.desk-page__metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.desk-page__metric-label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps, 0.05em);
  color: var(--color-text-muted, #94a3b8);
}

.desk-page__metric-value {
  font-size: var(--text-xl, 1.25rem);
  font-weight: var(--weight-bold, 700);
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #f1f5f9);
}

.desk-page__metric-sub {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
}

.desk-page__tabs {
  display: flex;
  gap: var(--space-2, 8px);
  border-block-end: 1px solid var(--color-border, #334155);
  padding-block-end: var(--space-2, 8px);
}

.desk-page__tab-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
}

.desk-page__tab-btn.is-active {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
  color: var(--color-accent, #38bdf8);
}

.desk-page__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
}

.desk-page__param-table-wrap {
  overflow-x: auto;
}

.desk-page__param-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.875rem);
}

.desk-page__param-table th,
.desk-page__param-table td {
  padding: 10px 14px;
  border-block-end: 1px solid var(--color-border, #334155);
  text-align: left;
}

.desk-page__param-table th {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  color: var(--color-text-muted, #94a3b8);
}

.desk-page__param-val {
  font-family: var(--font-mono, monospace);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-accent, #38bdf8);
}

.pair-syn__order-notice,
.pair-syn__fees-notice {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
  line-height: var(--leading-normal, 1.5);
  padding-block-start: 4px;
}

.pair-syn__order-notice strong {
  color: #f59e0b;
}

.pair-syn__market-order-note {
  font-size: var(--text-xs, 0.75rem);
  color: #f59e0b;
  margin: 0;
  padding-block-end: 4px;
}

.pair-syn__bounty-notice {
  font-size: var(--text-xs, 0.75rem);
  color: #22c55e;
  font-weight: var(--weight-semibold, 600);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 10px;
}

.pair-syn__stat-warning {
  font-size: var(--text-xs, 0.75rem);
  color: #ef4444;
  font-weight: var(--weight-semibold, 600);
}

.pair-syn__action-buttons-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pair-syn__position-closed-note {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
  font-style: italic;
}

.pair-syn__badge--warning {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.pair-syn__btn--danger {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.pair-syn__btn--danger:hover {
  background: rgba(239, 68, 68, 0.35);
}

.desk-page__lock-note {
  font-size: var(--text-xs, 0.75rem);
  color: #f59e0b;
  padding-block-start: 4px;
}

.desk-page__lock-notice {
  font-size: var(--text-xs, 0.75rem);
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 12px;
}

/* ── Hero Series Pattern (Basket line hero) ── */

.pair-syn [data-performance-series="BASKET"] path {
  stroke: var(--color-accent, #38bdf8) !important;
  stroke-width: 2.5px !important;
}

.pair-syn [data-performance-series]:not([data-performance-series="BASKET"]) path {
  stroke-width: 1px !important;
  opacity: 0.45 !important;
}

/* ── Stage: Composer & Shape Panel ── */

.pair-syn__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4, 16px);
  align-items: start;
}

@media (max-width: 960px) {
  .pair-syn__stage {
    grid-template-columns: 1fr;
  }
}

.pair-syn__composer-wrap {
  min-inline-size: 0;
}

.pair-syn__shape {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
  min-inline-size: 0;
  overflow: visible;
}

.pair-syn__shape-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.pair-syn__shape-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  margin: 0;
  color: var(--color-text, #f1f5f9);
}

.pair-syn__shape-ranges {
  display: flex;
  gap: 4px;
}

.pair-syn__range-pill {
  padding: 3px 8px;
  border-radius: 9999px;
  border: 1px solid var(--color-border, #334155);
  background: var(--color-surface, #1e293b);
  color: var(--color-text-muted, #94a3b8);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pair-syn__range-pill:hover {
  border-color: var(--color-accent, #38bdf8);
  color: var(--color-text, #f1f5f9);
}

.pair-syn__range-pill.is-active,
.pair-syn__range-pill[aria-pressed="true"] {
  background: var(--color-accent, #38bdf8);
  border-color: var(--color-accent, #38bdf8);
  color: #0f172a;
}

.pair-syn__shape-chart {
  position: relative;
  min-block-size: 360px;
  inline-size: 100%;
  overflow: visible;
}

.pair-syn__shape-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 360px;
  color: var(--color-text-muted, #94a3b8);
  font-size: var(--text-sm, 0.875rem);
  font-family: var(--font-mono, monospace);
  text-align: center;
}

.pair-syn__shape-chart .insights-performance-chart {
  inline-size: 100%;
}

.pair-syn__shape-chart .insights-chart__stage,
.pair-lab-page .pair-syn__shape-chart .insights-chart__stage {
  block-size: 360px;
  overflow: visible;
}

.pair-syn__shape-chart .insights-chart__svg {
  block-size: 360px;
  inline-size: 100%;
  overflow: visible;
}

.pair-syn__shape-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  padding-block-start: var(--space-2, 8px);
  border-block-start: 1px solid var(--color-border, #334155);
}

.pair-syn__shape-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1-5, 6px);
}

.pair-syn__shape-stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
}

.pair-syn__shape-stat-val {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold, 700);
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #f1f5f9);
  white-space: nowrap;
}

/* ── Payoff Runway ── */

.pair-syn__payoff-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.pair-syn__runway {
  inline-size: 100%;
  overflow-x: auto;
  padding-block: var(--space-2, 8px);
}

.pair-syn__runway-svg {
  inline-size: 100%;
  max-inline-size: 800px;
  block-size: auto;
  display: block;
  margin-inline: auto;
}

.pair-syn__runway-handle {
  cursor: ew-resize;
  outline: none;
}

.pair-syn__runway-handle:focus-visible circle {
  stroke: var(--color-accent, #38bdf8);
  stroke-width: 3px;
}

.pair-syn__runway-copy {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #94a3b8);
  font-style: italic;
}

/* ── Position Visuals: Timeline & Gauge ── */

.pair-syn__position-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4, 16px);
  align-items: center;
  padding-block: var(--space-2, 8px);
  border-block-end: 1px solid var(--color-border, #334155);
}

@media (max-width: 768px) {
  .pair-syn__position-visuals {
    grid-template-columns: 1fr;
  }
}

.pair-syn__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-inline-size: 0;
}

.pair-syn__timeline-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pair-syn__timeline-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #64748b);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}

.pair-syn__timeline-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -8px;
  top: 4px;
  color: var(--color-border, #475569);
  pointer-events: none;
}

.pair-syn__timeline-label {
  font-weight: var(--weight-semibold, 600);
}

.pair-syn__timeline-step.is-lit {
  color: var(--color-text, #f1f5f9);
}

.pair-syn__timeline-step.is-complete {
  color: #22c55e;
}

.pair-syn__timeline-step.is-active {
  color: var(--color-accent, #38bdf8);
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.08);
}

.pair-syn__step-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-start: 4px;
}

.pair-syn__waiting-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #f59e0b;
}

.pair-syn__pulse-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: synPulse 1.5s ease-in-out infinite;
}

@keyframes synPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

.pair-syn__leg-prints {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pair-syn__leg-print-item {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #94a3b8);
  background: rgba(15, 23, 42, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #334155);
}

.pair-syn__equity-gauge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 160px;
}

.pair-syn__gauge-svg {
  inline-size: 100%;
  max-inline-size: 200px;
  block-size: auto;
}

/* ── Composer Tray Controls (Search & Group Tabs) ── */

.pair-syn__composer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-block-end: var(--space-3, 12px);
}

.pair-syn__tray-search {
  flex: 1 1 200px;
  max-inline-size: 320px;
}

.pair-syn__search-input {
  inline-size: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text, #f1f5f9);
  font-size: var(--text-sm, 0.875rem);
  outline: none;
}

.pair-syn__search-input:focus {
  border-color: var(--color-accent, #38bdf8);
}

.pair-syn__tray-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  background: var(--color-surface, #1e293b);
  padding: 3px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #334155);
}

.pair-syn__tray-tab {
  padding: 4px 12px;
  border-radius: var(--radius-sm, 4px);
  border: none;
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pair-syn__tray-tab:hover {
  color: var(--color-text, #f1f5f9);
}

.pair-syn__tray-tab.is-active {
  background: var(--color-accent, #38bdf8);
  color: #0f172a;
}

.pair-syn__keeper-bounty-note {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-accent, #38bdf8);
  margin-block-start: var(--space-1, 4px);
  font-style: italic;
}

.pair-syn__pyth-warning {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-md, 8px);
  color: #fbbf24;
  font-size: var(--text-xs, 0.75rem);
  margin-block-start: var(--space-2, 8px);
}

/* ── Sticky Action Bar (Desktop: hidden) ── */
.pair-syn__sticky-bar {
  display: none;
}

/* ── Mobile Layout (≤ 48rem) ── */
@media (max-width: 48rem) {
  .pair-syn__presets {
    gap: var(--space-1-5, 6px);
  }

  .pair-syn__preset-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-2, 8px);
    padding-block: var(--space-1, 4px);
    min-block-size: 44px;
    scrollbar-width: none;
  }

  .pair-syn__preset-list::-webkit-scrollbar {
    display: none;
  }

  .pair-syn__preset-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-block-size: 44px;
    padding: 8px 14px;
  }

  .pair-syn__composer-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2, 8px);
  }

  .pair-syn__tray-search {
    flex: none;
    max-inline-size: 100%;
  }

  .pair-syn__search-input {
    min-block-size: 44px;
  }

  .pair-syn__tray-tabs {
    display: flex;
    min-block-size: 44px;
    padding: 4px;
  }

  .pair-syn__tray-tab {
    flex: 1;
    min-block-size: 36px;
    text-align: center;
  }

  .pair-syn__stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
  }

  .pair-syn__shape-chart,
  .pair-syn__shape-chart .insights-chart__stage,
  .pair-lab-page .pair-syn__shape-chart .insights-chart__stage,
  .pair-syn__shape-chart .insights-chart__svg,
  .pair-syn__shape-empty {
    block-size: 300px !important;
    height: 300px !important;
    min-block-size: 300px !important;
  }

  .pair-syn__controls-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3, 12px);
  }

  .pair-syn__direction-toggle {
    min-block-size: 44px;
  }

  .pair-syn__dir-btn {
    min-block-size: 44px;
  }

  .pair-syn__input {
    min-block-size: 44px;
    font-size: var(--text-base, 1rem);
  }

  .pair-syn__slider {
    min-block-size: 44px;
    height: 44px;
    padding-block: 10px;
  }

  .pair-syn__sticky-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    position: fixed;
    bottom: calc(var(--layout-mobile-nav-height, 4.75rem) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: var(--z-sticky, 10);
    padding: var(--space-2-5, 10px) var(--space-4, 16px);
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--color-border, #334155);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  }

  .pair-syn__sticky-notional {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pair-syn__sticky-notional-label {
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps, 0.05em);
    color: var(--color-text-muted, #94a3b8);
  }

  .pair-syn__sticky-notional-value {
    font-size: var(--text-sm, 0.875rem);
    font-family: var(--font-mono, monospace);
    color: var(--color-text, #f1f5f9);
  }

  .pair-syn__sticky-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .pair-syn__sticky-actions .pair-syn__btn {
    min-block-size: 44px;
    padding: 10px 18px;
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
  }

  .pair-syn {
    padding-block-end: calc(var(--layout-mobile-nav-height, 4.75rem) + 64px);
  }
}